[ライブドアブログ]全体レイアウトをカスタマイズしよう

こんにちは。ユージーン(@Eugene_no2)です！

ライブドアブログの初心者向けに、デザインをカスタマイズする方法をまとめています。

このページでは、全体レイアウトのカスタマイズについて解説します。

トップページへ

[ライブドアブログ]デザインのカスタマイズ方法まとめ（初心者向け） : No.2宣言 ライブドアブログ初心者向けに、ブログのデザインをカスタマイズするための、知識と方法をまとめています。

最初にお読みください

このページでは、ライブドアブログの「全体レイアウト」のカスタマイズ方法を解説しています。

ただし、全体レイアウトは、ライブドアブログで用意されているテンプレートによって、CSS（デザインの指定）の方法が様々です。

そのため、使用しているテンプレートによっては、このページに記載している解説ではうまくカスタマイズ出来ない場合があります。

また、特に全体レイアウトは、間違った指定をすると、ページのデザインが大きく崩れてしまうリスクがありますので、事前にバックアップを取っておくことをオススメします。

バックアップの方法については、ライブドアブログの公式ヘルプをご参照ください。

デザイン保存機能を利用する – ライブドアブログのヘルプ（PC向け）

まず、ブログのCSS編集画面を開こう

では、ここからは具体的なカスタマイズ方法のご紹介です。

まず、ライブドアのブログ管理画面の【ブログ設定】→デザイン / ブログパーツ設定の【PC】→【カスタマイズ】→【CSS】と進みます。

全体レイアウトを変更するには、主にこのCSSの中の記述をいじっていきます。

CSSって何？という方でも分かるように解説していますが、もう少し詳しく知りたいという方は、「HTMLとCSSのこれだけは知っておこう！」をご覧ください。

ブログの背景をカスタマイズする

ブログの背景をカスタマイズするには、２種類の方法があります。

ブログの背景色を変更する

難易度：★★☆☆☆

ブログの背景になる色を変更したい場合には、CSSの中にある、

body {
    background-color: #fff;
}

という記述の、太字部分を変更します。

色は、16進数カラーコード（#＋英数字6ケタ）で指定することが出来ます。

例えば、

• 黒(balck)：#000000
• グレー(gray)：#808080
• 青(blue)：#0000ff

といった感じです。

色コードの検索には、「WEB色見本　原色大辞典」が便利です。

かんたん背景画像を設定する

難易度：★★☆☆☆

ライブドアブログには、自分でアップロードした画像を背景に設定できる機能があります。

背景画像を挿入する場合は、ブログ管理画面の【ブログ設定】→デザイン / ブログパーツ設定の【PC】→【タイトル/背景】からアップロードして挿入することが出来ます。

挿入方法については、「かんたん背景画像機能を利用する（公式ヘルプ）」をご覧ください。

各パーツ（カラム）の横幅を変更する

ライブドアブログで選べる各テンプレートには、ブログの全体の横幅、メインカラム（記事部分）の横幅、サイドバー部分の横幅などが初期設定されています。

ここでは、各パーツ（カラム）の幅を調整する方法を解説します。

CSSでWidth（横幅）を調整する

難易度：★★★★☆

各パーツの横幅を調整するには、CSSの中にある、

#wrapper {
}
#container {
    width: 1000px;
}
#main {
    width: 670px;
}
#sidebar {
    width: 300px;
}

という部分を見つけてください。

そこに記載されているWidth（横幅）の数値を変更することで、各パーツ（カラム）の横幅を調整することが出来ます。

例えば、上のCSSの記述の場合、それぞれ次の位置を指定しています。

全体の幅は、この例ではcontainerで指定されていますが、テンプレートによっては、wrapperで指定されている場合もあります。

メインカラムは、mainで指定されているテンプレートが多いです。

サイドバーは、この例では、sidebarで指定されていますが、例えばサイドバーが両サイドにあるようなテンプレートでは、side-a, side-b という記述であったり、sub, extraという記述になっている場合もあります。

また、テンプレートによっては、例えば、単なるmainではなく、

body.layout-2col #main {
    width: 500px;
}

というような、やや複雑な記述になっている場合もあります。

これは、どうしてもテンプレートによる違いがありますので、一概に言えませんが、いずれにしても、最初から記述されているwidthの数値を変更し、どの部分が変わるか、プレビュー機能で確認してから、調整することをオススメします。

CSSでmargin（余白）を調整する

難易度：★★★★☆

width の調整をした場合、横幅の大きさは操ることが出来ますが、各パーツ（カラム）の位置関係が思い通りにいかない場合があります。

例えば、次のように、サイドバーとメインカラムの間が空いてしまって、お高いにもうちょっと中央に寄せたい、なんて事が起こり得ます。

こんな時に、各パーツの位置関係の調整に役立つのが、margin（余白）です。

#main {
    width: 650px;
    margin: 0 50px 0 0;
}

例えばこのように、widthと並べて、margin の記述を追加します。（元々記述されている場合もあります。）

margin: の右に半角スペースを空けて数字が４つ並びますが、これはそれぞれ上、右、下、左（時計回り）の余白を指定しています。

つまり、先ほどのように、

#main {
    width: 650px;
    margin: 0 50px 0 0;
}

という指定は、main 部分の右側に50px の余白を作れ、つまりmain 部分を50px 左に動かせ、という意味になるのです。

同じように、

#sidebar {
    width: 200px;
    margin: 0 0 0 30px;
}

と指定すれば、今度はsidebar 部分が30px 右に動くことになります。

これで、お互いが中心に寄った形になりました。

このように、margin を使ってそれぞれのパーツの位置を調整する、という方法があります。

CSSに慣れていない方は難しく感じるかも知れませんが、width と margin を指定することで、全体のレイアウトはそれなりにカスタマイズできるのではないかと思います。

まとめ

今回は、ライブドアブログの「全体レイアウト」をカスタマイズする方法をまとめました。

このブログでは、初心者向けにライブドアブログのカスタマイズ方法を紹介しています。

別の部分のデザインのカスタマイズ方法もまとめていますので、合わせて参考にしてください。

トップページへ

[ライブドアブログ]デザインのカスタマイズ方法まとめ（初心者向け） : No.2宣言 ライブドアブログ初心者向けに、ブログのデザインをカスタマイズするための、知識と方法をまとめています。

では、今日も頑張らずに楽しんでいきましょう～！