当ブログ NitRo Liife は、livedoorのテンプレートをそのまま利用していたが、テンプレートそのままで利用すると、サイト表示領域の幅が狭くて見た目がイマイチなのです。
最近はモニターが大型になっているので、それなりの幅のあるレイアウトにしたい、なによりも個人的に不満だったのは、サイドバー領域の広告表示をする際に幅300pxの広告が貼れない事でした。
と、言うことでlivedoor Blog の全体レイアウト・カスタマイズの方法をまとめました。
livedoor Blog 全体レイアウトの変更方法
NitRo Life では、XGAの横幅1024pxにしてみようと思いました、PC環境においてもっともよく使われる解像度は1366×768らしいです。1024pxであればモニター内でダイナミックかつ誰もが閲覧可能だと考えたわけです。
完全に素人の思い込みなので、考え方が正しいかどうかはわかりませんがｗ
■ 設定方法（CSS編集画面）
livedoor Blog のCSS編集は以下の通りの設定画面で編集が可能です。
① livedoorの管理画面から「ブログ設定」をクリック
② 保存/共有タブをクリックして現状を保存！（保険の為）
③ デザイン / ブログパーツ設定の「PC」をクリック
④「カスタマイズ」をクリック
⑤ 「CSS」タブをクリック
■ 背景色の変更
CSS 編集画面内から以下の場所を探します。
/* 全体のレイアウト
———————————————– */
body {
background-color: #000000;
}
background-color: の後ろ『＃000000の箇所』に背景色として設定したいカラーコードを記述する事で色の指定ができます。
カラーコードを探すにはこちらのサイトが良いと思います。
カラーコード作成ツール
■ 横幅の設定
ライブドアブログでは、全体の横幅、メイン記事部の横幅、サイドバー部の横幅などがテンプレートごとに設定されています。その為、テンプレートにより記述内容に差異があります。
まず、CSS 編集画面内から以下の記述場所を探して記述変更をおこないます。
※ 作業前に現状の保存をしておきましょう。
#container {
width: 1070px;
}
ブログ全体の横幅を設定します。この場合は1070pxで設定されます。
#main {
width: 730px;
}
メイン記事部の横幅を設定します。この場合は730pxで設定されます。
#sidebar {
width: 305px;
}
サイドバー部の横幅を設定します。この場合は305pxで設定されます。
container／main／sidebar の一部または全部の数値を記述して保存を押せば設定が完了します。
NitRo Lifeの場合・・・
メインカラム730px （幅728のバナー広告が貼れる）
サイドバー305px （幅300pxのバナー広告が貼れる）
全体の幅1070px （中央のマージンを確認しながら決定）
こんな感じで何度か設定・表示をテストをして決めました。
結果として1024pxより幅が広くなりましたが・・・
■ マージン設定
メインカラムやサイドバーを、もう少し左側（上・下・右）に寄せたい等の微調製をおこないたい場合は、以下の記述を追加する事で調整が可能となります。
#main {
width: 730px;
width : 0 20px 0 0;
}
margin: の右に半角スペースを空け、上、右、下、左、の順番でマージン数値の記述をします。
上記のサンプルであれば、メインカラムの右側に20pxの空白ができます。
#sidebar {
width: 305px;
margin: 20px 0 0 20px;
}
このサンプルであれば、上側と左側に20pxの空白ができます。
まとめ
ライブドアブログの全体レイアウトの変更方法についてまとめました。
background-color に、カラーコード記述をすれば背景色が設定できます。
そして、width に、ピクセル数値の入力をおこなえば、全体および各パーツの幅が設定できますし、微調製は margin で上下左右の微調製が可能です。
私の場合は、数値入力から表示確認という工程を何度かおこない、微調製をおこないながらレイアウトを決定しました。CSSについて詳しくなくても簡単にできますし、簡易なテンプレートのカスタマイズで魅力的なブログデザインになります。
livedoor Blog Customize 他の記事はこちら
ユーザー投稿