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

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

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

このページでは、メニューバー部分のカスタマイズについて解説します。

トップページへ

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

メニューバーの挿入方法

メニューバーとは、ライブドアブログで用意されている、URLやカテゴリーのリンクを帯状に設置できる機能です。

（画像：ライブドアブログのヘルプ）

メニューバーの挿入方法については、「メニューバー機能を利用する（公式ヘルプ）」をご覧ください。

ただし、メニューバー機能が使えるのは、　メニュー　マークのついたテンプレートのみとなります。

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

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

ブログタイトルのデザインを変更するには、主にこのCSSの中の記述をいじっていきます。

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

メニューバーのデザインを変更する

メニューバーの部分のデザインを変更するには、CSSの中にある、

.ldb_menu {
}
.ldb_menu-list {
}
.ldb_menu-list li {
}
.ldb_menu-list li a{
}
.ldb_menu-list.ldb_menu-item-current,
.ldb_menu-list li a:hover{
}

※{}の中の記述は省略しています。

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

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

メニューバーの位置を上下左右に調整する

難易度：★★★☆☆

メニューバーの位置を調整するには、

.ldb_menu {
    position: relative;
}

の部分を変更します。

position: relative;になっていることを確認し、その下に、例えば次のような記述を追加します。

.ldb_menu {
    position: relative;
    bottom: 20px;
    left: 20px;
}

追加する記述の意味は、次のようになります。

• top: 20px;　・・・本来の位置から20px下に動かす
• bottom: 20px;　・・・本来の位置から20px上に動かす
• left: 20px;　・・・本来の位置から20px右に動かす
• right: 20px;　・・・本来の位置から20px左に動かす

つまり、top: -20px;　と　bottom: 20px;　は同じ意味になります。

タイトル画像とメニューバーを被らせたくないときは…

なお、タイトル画像の入るテンプレートの場合、メニューバーはタイトル画像の底辺と合わせるように配置されています。

これを、被らせたくないときに、上で紹介したように、top: 40px;のように指定をしてしまうと、今後はその下にある記事のタイトルと被ってしまう場合があります。

タイトル画像とも、記事のタイトルとも、被らせずに配置するには、

.ldb_menu {
    position: relative;　　/* 注：topやbottomは指定しない */
    （省略）
.ldb_menu-list {
    position: relative;
    （省略）

と指定すればOKです。

メニューバーの幅を調整する

難易度：★★☆☆☆

メニューバーの幅を調整するには、

.ldb_menu-list {
    width: 940px;
}

の部分を調整します。

940px のように指定も出来ますし、100% のようにも指定できます。

参考までに、当ブログのヘッダー部分には、右上に「プロフィール」等のメニューが設置してあります。

ちなみに、これはこのページで紹介しているメニューバーです。

width で横幅を短く調整し、さらに、position で位置を調整することで、この場所に配置させています。

メニューバーの色と透明度（透過性）をカスタマイズする

難易度：★★★☆☆

メニューバーの塗りつぶしの色と透明度（透過性）をカスタマイズするには、

.ldb_menu-list {
    background: rgba(247,247,247,0.7);
}

の太字部分を調整します。

カンマ区切りで数字が４つ並んでいますが、最初の３つは色（R,G,B）、最後の１つが透明度（透過性）を指定しています。

色（R,G,B）については、「WEB色見本　原色大辞典」などで調べることが出来ます。

色一覧のページでは、16進数カラーコード（#＋英数字6ケタ）で書かれていますが、個別の色ページでは、R,G,Bのコードも記載されています。

透明度については、0（完全な透明）～1（不透明）の間で指定します。

メニューバーの文字をカスタマイズする

難易度：★☆☆☆☆

メニューバーの文字をカスタマイズするには、

.ldb_menu-list li a{
    font-size: 16px;
    font-weight: bold;
    font-family: ‘メイリオ’;
    color: #333;
    text-decoration: none;
}

の太字部分を変更します。

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

メニューバーの高さを調整する

難易度：★★☆☆☆

メニューバーの高さを調整するには、

.ldb_menu-list li a{
    line-height: 1.4;
}

の太字部分の数値を調整します。

1.4とは、文字の大きさ（font-size）の1.4倍ということを意味します。

140%または1.4emと指定しても同じ意味となります。

または、font-sizeと同様に、〇pxのように指定することも出来ます。

オンマウス（カーソルを乗せた状態）時のデザインを変更する

難易度：★★★☆☆

通常時のデザインは、既に色、透過性、文字色などを指定しましたが、よくカーソルを乗せるとその部分の色が変わったりしますよね？

ここでは、カーソルを乗せた時のデザインをカスタマイズします。

.ldb_menu-list li a:hover{
    color: #333;
    background: rgba(204,204,204,0.7);
}

の太字部分を調整していきます。

• color：　文字の色を16進数カラーコード（#＋英数字6ケタ）で指定
  
  （参考：WEB色見本 原色大辞典）
• background：　背景色と透明度（透過性）を指定
  
  カンマ区切りで数字が４つ並んでいますが、最初の３つは色（R,G,B）、最後の１つが透明度（透過性）を指定しています。
  
  色（R,G,B）については、「WEB色見本　原色大辞典」が便利です。
  
  色一覧のページでは、16進数カラーコード（#＋英数字6ケタ）で書かれていますが、個別の色ページでは、R,G,Bのコードも記載されています。
  
  
  
  
  透明度については、0（完全な透明）～1（不透明）の間で指定します。

まとめ

今回は、ライブドアブログの「メニューバー」のカスタマイズについてまとめました。

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

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