サイト管理者のGigo(ジーゴ)です(*^^*)
Googleが提供している無料ブログサービス「Blogger」について、「使い方とカスタマイズ方法」をまとめています。
他にも詳しく無料ブログのBloggerをまとめている方がいらっしゃるので、その方たちのサイトと合わせてご利用いただければと思います(^^)
今回は、「メニューバー」をカスタマイズする方法について説明していきます。
「メニューバー」と「ヘッダーナビ」
「メニューバー」と「ヘッダーナビ」は下の画像の赤枠の部分になります。
![Bloggerで始める無料ブログ:「メニューバー」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://3.bp.blogspot.com/-Uycre4_03CI/W0LJDzG3L0I/AAAAAAAAHBA/zbo76cuhTrg9TGQygDq2M8k_SYvpfnd9gCK4BGAYYCw/s640/51%25E3%2583%258A%25E3%2583%2593.jpg)
画像を見て分かりますが、どこが「メニューバー」で、どこが「ヘッダーナビ」なのかがわかりにくいです。
これは、「メニューバー」の上に「ヘッダーナビ」のボタンが置かれているような構造になっているからです。
そのため、それぞれを別々にカスタマイズする必要があります。
![Bloggerで始める無料ブログ:「メニューバー」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://2.bp.blogspot.com/-lYWL0kba4D0/W0LNpeWo8II/AAAAAAAAHBY/wJ72ZEfzghU6IuO7DRrYdntbcuztvL4dwCK4BGAYYCw/s400/53%25E3%2583%258A%25E3%2583%2593.jpg)
ちなみに、今回は「メニューバー」をカスタマイズする方法を説明しますが、「ヘッダーナビ」のカスタマイズ方法は別記事で紹介しますので、そちらをご参照ください。
設定するHTMLとCSSのソースコードの検索方法
設定は、HTML・CSSのソースコードを変更することで行っていきます。
そのため、目的とするソースコードを検索して探す必要があります。
それぞれの設定で、ソースコードの検索画面の状態からの説明を行っています。
![Bloggerで始める無料ブログ:「メニューバー」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/--7g_8gmLFsY/XElPnqaCwbI/AAAAAAAALO8/2tOj0xOnlMcWU_Xc3gx0MkVnwC1Quyl7QCK4BGAYYCw/s640/5%25E5%25B9%2585.jpg)
不明な部分は下の記事をご参照ください。
「横幅」を変更する
メニューバーの「横幅」を変更していきます。
①検索窓を表示する
まずは、ソースコードを検索できる状態にします。
![Bloggerで始める無料ブログ:「メニューバー」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/--7g_8gmLFsY/XElPnqaCwbI/AAAAAAAALO8/2tOj0xOnlMcWU_Xc3gx0MkVnwC1Quyl7QCK4BGAYYCw/s640/5%25E5%25B9%2585.jpg)
②[.PageList{]を検索
検索窓に「 .PageList{ 」を入力して検索し、ソースコードを表示します。
![Bloggerで始める無料ブログ:「メニューバー」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://2.bp.blogspot.com/-2XwhCtqxQ14/W0L1X6RajlI/AAAAAAAAHBk/LnkzkCN4Ybcqrjhwbme5NBaSGPd9HkczQCK4BGAYYCw/s640/54%25E3%2583%258A%25E3%2583%2593.jpg)
ソースコードの説明は以下の通りです。
- width:100%; 横幅
- background-color:$(headernavi.background.color); 背景色
③メニューバーの「横幅」の設定をする
「横幅」のソースコードは下のコードになります。
width:100%; 横幅
このコードの「100%」の数値を変更することで横幅が変化します。
すべてのソースコードの変更・追加が終了したら、「テーマの保存」をクリックして作業終了になります。
![Bloggerで始める無料ブログ:「メニューバー」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://1.bp.blogspot.com/-J-2u0y4fljI/W0L59JNQqBI/AAAAAAAAHBw/MZFU-dVUP1ECb3ZlalUPt0uJkRi2jYo4QCK4BGAYYCw/s640/55%25E3%2583%258A%25E3%2583%2593.jpg)
![Bloggerで始める無料ブログ:「メニューバー」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://2.bp.blogspot.com/-F5MCVplgQFQ/W0L6Bbf0-_I/AAAAAAAAHB4/Agtlr8_YD5c9TOCOiWXwK_XzuAFm-fhhgCK4BGAYYCw/s640/56%25E3%2583%258A%25E3%2583%2593.jpg)
![Bloggerで始める無料ブログ:「メニューバー」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/-OrJw6qy_Bgk/W0L6EiElu8I/AAAAAAAAHCA/hcU305VVrR0txwmo_ReayU6XddbujrXegCK4BGAYYCw/s640/57%25E3%2583%258A%25E3%2583%2593.jpg)
「余白」を変更する
メニューバーの「余白」を変更していきます。
①検索窓を表示する
まずは、ソースコードを検索できる状態にします。
![Bloggerで始める無料ブログ:「メニューバー」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/--7g_8gmLFsY/XElPnqaCwbI/AAAAAAAALO8/2tOj0xOnlMcWU_Xc3gx0MkVnwC1Quyl7QCK4BGAYYCw/s640/5%25E5%25B9%2585.jpg)
②[.PageList{]を検索
検索窓に「 .PageList{ 」を入力して検索し、ソースコードを表示します。
![Bloggerで始める無料ブログ:「メニューバー」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://2.bp.blogspot.com/-2XwhCtqxQ14/W0L1X6RajlI/AAAAAAAAHBk/LnkzkCN4Ybcqrjhwbme5NBaSGPd9HkczQCK4BGAYYCw/s640/54%25E3%2583%258A%25E3%2583%2593.jpg)
ソースコードの説明は以下の通りです。
- width:100%; 横幅
- background-color:$(headernavi.background.color); 背景色
③メニューバーの「余白」の設定をする
「余白」のソースコードは下のコードになります。
どれか一つを追加してください。
- padding:20px; 「上下左右」の余白
- padding:20px 20px; 「上下」「左右」の余白
- padding:20px 20px 20px; 「上」「左右」「下」の余白
- padding:20px 20px 20px 20px; 「上」「右」「下」「左」の余白
すべてのソースコードの変更・追加が終了したら、「テーマの保存」をクリックして作業終了になります。
下に表示した例は、メニューバーの変化が分かりやすいようにメニューバーの色を「黄緑」に変更しています。
![Bloggerで始める無料ブログ:「メニューバー」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://1.bp.blogspot.com/-q434mqfKqws/W0MBijQpk9I/AAAAAAAAHCg/rYIyIUJ1dJYJr9uxldtrG5JlU1mzM7ywwCK4BGAYYCw/s640/61%25E4%25BD%2599%25E7%2599%25BD.jpg)
![Bloggerで始める無料ブログ:「メニューバー」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/-nQwlFyOtpGA/W0MBm7JXHrI/AAAAAAAAHCo/KcsQ3uzzJykX3qYTl9WMUTtyKVHXCGFCgCK4BGAYYCw/s640/62%25E4%25BD%2599%25E7%2599%25BD.jpg)
![Bloggerで始める無料ブログ:「メニューバー」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://3.bp.blogspot.com/-lEaRMeiN7BU/W0MBpzXiRyI/AAAAAAAAHCw/riTMek7zzUoU6dJ-gbFph3nVHKpgiQ0dgCK4BGAYYCw/s640/63%25E4%25BD%2599%25E7%2599%25BD.jpg)
![Bloggerで始める無料ブログ:「メニューバー」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://2.bp.blogspot.com/-_7NVM79cFCA/W0MBshwOePI/AAAAAAAAHC4/9IbO1cEMYSYXyONjQO18BsJF3EfTHtNJwCK4BGAYYCw/s640/64%25E4%25BD%2599%25E7%2599%25BD.jpg)
「背景色」を変更する
メニューバーの「背景色」を変更していきます。
①検索窓を表示する
まずは、ソースコードを検索できる状態にします。
![Bloggerで始める無料ブログ:「メニューバー」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/--7g_8gmLFsY/XElPnqaCwbI/AAAAAAAALO8/2tOj0xOnlMcWU_Xc3gx0MkVnwC1Quyl7QCK4BGAYYCw/s640/5%25E5%25B9%2585.jpg)
②[.PageList{]を検索
検索窓に「 .PageList{ 」を入力して検索し、ソースコードを表示します。
![Bloggerで始める無料ブログ:「メニューバー」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://2.bp.blogspot.com/-2XwhCtqxQ14/W0L1X6RajlI/AAAAAAAAHBk/LnkzkCN4Ybcqrjhwbme5NBaSGPd9HkczQCK4BGAYYCw/s640/54%25E3%2583%258A%25E3%2583%2593.jpg)
ソースコードの説明は以下の通りです。
- width:100%; 横幅
- background-color:$(headernavi.background.color); 背景色
③メニューバーの「背景色」の設定をする
「背景色」のソースコードは下のコードになります。
「 background-color:$(headernavi.background.color); 」 背景色
このコードを下の形式に書き換えます。
「 background-color:#〇〇〇〇〇〇; 」
設定したい背景色のカラーコードを赤文字の部分に入れ込むことで背景色が変化します。
色のコードは下のサイトで詳しく説明されていますのでご参照ください。
すべてのソースコードの変更・追加が終了したら、「テーマの保存」をクリックして作業終了になります。
「background-color:$(headernavi.background.color);」について
このソースコードは別の場所で「背景色」が設定されていることを表しています。
ソースコードの検索において、「 headernavi.background.color 」を検索することで設定している場所を探すことができます。
![Bloggerで始める無料ブログ:「メニューバー」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://2.bp.blogspot.com/-BsCpiLaT_ZI/W0MJqlim3gI/AAAAAAAAHDc/Q_Ny0Ab2qCQOcfm3Mb-55xBiKp7-BdFZgCK4BGAYYCw/s640/71%25E8%2583%258C%25E6%2599%25AF%25E8%2589%25B2.jpg)
ソースコードは以下に記載したようになっており、
type=”color” default=”#4b99b5″ value=”#4b99b5″/
「value」の後ろのカラーコードを設定することにより、文字色が反映するようになっています。
- default=”#4b99b5″ 初期設定の色
- value=”#4b99b5″ 設定変更した色
すべてのソースコードの変更・追加が終了したら、「テーマの保存」をクリックして作業終了になります。
まとめ:今回のおさらい
今回は、「メニューバー」について、3つの項目を説明しました。
- 「横幅」の変更
- 「余白」の変更
- 「背景色」の変更
それぞれの説明を分かりやすいように別々に記載しましたが、設定を行うソースコードは同じ場所なので、まとめて設定をすることが可能です。
いろいろ試してみてください(*^^*)