PC版のブログデザインを刷新したDAFUです。
今回はそれについて格闘した部分を備忘録(このブログの名前でもある)として残そうと思います。
そもそも
なぜデザインを変えたのか?

理由は単純です。最近広告を貼り始めたのですが、スポンサードリンクを上に持ってくると最新記事やアーカイブが下になってしまい、見にくくなるからです。
かといって広告を下にすると今度は誰にも見られなくなります。
そのため、今まで使用していた2カラムデザイン(サイドバーが1本しかないデザイン)を3カラム(サイドバーが2本あるデザイン)化することをメインにデザインを刷新しました。

幸いこのLivedoorブログにはテンプレートが豊富なのでそこから(3カラム(左右)・シンプル)という条件でデザインを探したところcircleというデザインがちょうどいいと思えたのでそれを適用しました。

しかし、めんどくさいことにこのデザイン、デフォルトでは左サイドバーにブログパーツが表示されないタイプでした。

(↓こういうこと。About MeとかFBとかいらね。)
defalt
一時は他のテンプレートを使うことも考えましたが良いデザインのものがなかったのでこのテンプレートから、CSSなどをカスタムして利用することに。
Livedoorブログはカスタム出来る場所がCSS、トップページ、個別記事ページ、カテゴリアーカイブ、月別アーカイブと分かれているのでまずはトップページからとりかかりました。
やることは
・About MeとFacebookの削除
・サイドバーの移動
と書くと単純なのですが、サイドバーの移動で多少つまづきました。

(↓単純にサイドバーのBエリアを左に移動したときの図)defalt

サイドバーがtwitterやフッターにかぶさって見にくいですね。
これを解決するためにサイドバーの上にmarginを設定、フッターは編集中消して対応するという力技を行っていましたが、流石に消したままにも出来なかったのでpositionを見直してfixed→absoluteにすることで改善しました。

結果として下画像のような思い描いていた通りのデザインになって満足です。
(残りのページに行った変更も内容は同じ物なため割愛します)
defalt

デザインも刷新したDAFUの備忘録をこれからもよろしくお願いします('ω')ノシ

コメント

コメントフォーム
評価する
  • 1
  • 2
  • 3
  • 4
  • 5
  • リセット
  • 1
  • 2
  • 3
  • 4
  • 5
  • リセット