[ライブドアブログ]サイドバーのデザインをカスタマイズしよう

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

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

このページでは、サイドバーのカスタマイズについて解説します。

トップページへ

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

サイドバーにブログパーツを追加する

ライブドアブログでは、予めサイドバーに追加できるパーツ（プロフィール、人気記事、カレンダーなど）が用意されています。

サイドバーにブログパーツを追加するには、ライブドアのブログ管理画面の【ブログ設定】→デザイン / ブログパーツ設定の【PC】→【ブログパーツ】と進みます。

追加したいパーツを、追加したい場所にドラッグし、それぞれのパーツごとに設定できる要素が設けられています。（人気記事なら、どの期間の人気記事か、何位まで表示するかなど）

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

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

サイドバーのデザインを変更するには、主にこのCSSの中の記述をいじっていきます。

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

※サイドバーの横幅を調整したい場合には、「全体レイアウトをカスタマイズしよう」をご覧ください（別ページに飛びます）。

サイドバーのデザインを変更する

サイドバーのデザインを変更するには、CSSの中にある、

.sidewrapper {
}
.sidewrapper .sidetitle {
}

※{ }内は省略しています。

という部分を見つけてください。その下に書かれている記述をカスタマイズしていきます。

もし該当する行が無い場合は、付け加えればOKです。

各パーツに下線や囲み線を加える

難易度：★★☆☆☆

各ブログパーツに下線や囲み線を加えることが出来ます。線を追加するには、

.sidewrapper {
    border-bottom: 2px solid #b2b2b2;
}

という部分を変更します。ここでは４つの指定要素があります。

• 線の位置
  • border：　上下左右（囲み線）
  • border-bottom：　下線
  • border-top：　上線
  • border-left：　左線
  • border-right：　右線
    

    

• 線の太さ：　数値（px）で指定
• 線の種類
  • solid：　一重線（普通の線）
  • double：　二重線
  • dashed：　破線
  • dotted：　点線
    
    他にも、立体的に見せるような線の種類もあります。詳しくは「スタイルシートリファレンス（外部サイト）」が参考になります。
• 線の色：　16進数カラーコード（#＋英数字6ケタ）で指定
  
  （参考：WEB色見本 原色大辞典）

各パーツ同士に隙間を設ける

難易度：★★★☆☆

例えば囲み線を引いたときに、パーツ同士がくっついている場合があります。

つまりパーツ同士の隙間が全くない状態です。

パーツ同士に隙間を設けるには、

.sidewrapper {
    border-bottom: 2px solid #b2b2b2;
    margin: 5px 0;
}

というように、margin（外側の余白）を追加します。

margin: の後ろには半角スペースつなぎで数字を並べます。

margin の後ろの数字には、次のようなルールがあります。

• 数字が１つのとき：　上下左右に全て指定の幅の余白を設ける
  (例)margin: 10px・・・上下左右に10pxの余白
• 数字が２つのとき：　①上下、②左右、のそれぞれに指定の幅の余白を設ける
  (例)margin: 10px 5px・・・上下に10px、左右に5pxの余白
• 数字が３つのとき：　①上、②左右、③下、のそれぞれに指定の幅の余白を設ける
  (例)margin: 10px 5px 0・・・上に10px、左右に5pxの余白、下は余白なし
• 数字が４つのとき：　①上、②右、③下、④左（時計回り）のそれぞれに指定の幅の余白を設ける
  (例)margin: 10px 5px 0 0・・・上に10px、右に5pxの余白、下と左は余白なし

なので、先ほどのように、

.sidewrapper {
    border-bottom: 2px solid #b2b2b2;
    margin: 5px 0;
}

と追加すれば、上下にのみ5pxの余白（上下合わせて10pxの隙間）が出来ることになります。

サイドバータイトル（ラベル）のデザインを変更する

難易度：★★☆☆☆

サイドバータイトル（ラベル）のデザインをカスタマイズするには、

.sidewrapper .sidetitle {
    font-size: 20px;
    font-weight: bold;
    font-family: ‘メイリオ’;
    color: #333;
    line-height: 1.2;
    border-bottom: 2px solid #000000;
}

という部分を変更していきます。

• font-size：　文字サイズを数値で指定
• font-weight：　文字の太さを指定
  • normal：　普通
  • bold：　太字
• font-family：　フォントを指定
  注：Arial Boldのように２語以上のフォント名や、MSゴシックのように日本語のフォント名の場合は、“Arial Bold”, ‘MS ゴシック’のように引用符で囲う必要があります。
• color：　文字の色を16進数カラーコード（#＋英数字6ケタ）で指定
  （参考：WEB色見本 原色大辞典）
• line-height：　行の高さを数値で指定
  1.2とは、文字の大きさ（font-size）の1.2倍ということを意味します。
  120%または1.2emと指定しても同じ意味となります。
  もしくは、font-sizeと同様に、〇pxのように指定することも出来ます。
• border-bottom：　下線や囲み線を引いたり、線のデザインを変更できます。
  指定の方法は、ページ上部の「各パーツに下線や囲み線を加える」をご覧ください。

パーツ内部のデザインを変更する

パーツ内部のデザインを変更するには、

.sidewrapper {
    background: #ffffff;
    color: #000080;
    font-size: 12px;
    font-weight: normal;
    font-family: ‘メイリオ’;
}

という部分を変更していきます。

• background：　背景色を16進数カラーコード（#＋英数字6ケタ）で指定
  
  （参考：WEB色見本 原色大辞典）
• color：　文字の色を16進数カラーコード（#＋英数字6ケタ）で指定
  
  （参考：WEB色見本 原色大辞典）
• font-size：　文字サイズを数値で指定
• font-weight：　文字の太さを指定
  
  • normal：　普通
  • bold：　太字
• font-family：　フォントを指定
  
  注：Arial Boldのように２語以上のフォント名や、MSゴシックのように日本語のフォント名の場合は、“Arial Bold”, ‘MS ゴシック’のように引用符で囲う必要があります。

まとめ

今回は、ライブドアブログの「サイドバー」のデザインをカスタマイズする方法をまとめました。

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

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

トップページへ

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

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