サイト管理者の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)
②[/* ヘッダーナビゲーション]を検索
検索窓に「 /* ヘッダーナビゲーション 」を入力して検索し、ソースコードを表示します。
検索できない場合には、「 ヘッダーナビゲーション 」で検索してください。
![Bloggerで始める無料ブログ:「ヘッダーナビ」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://3.bp.blogspot.com/-ftCL18OZR_E/W0LLE99L5hI/AAAAAAAAHBM/whG4x96vKWcaQRjKRWsdY25G2iLT1vRMgCK4BGAYYCw/s640/52%25E3%2583%258A%25E3%2583%2593.jpg)
ソースコードの説明は以下の通りです。
[.header-nav a] ヘッダーナビの設定
- padding: 10px 20px; 余白
- font-size: 14px; 文字サイズ
- color:$(headernavi.font.color); 文字色
- background:$(headernavi.link.color); 背景色
- text-decoration: none; 文字の装飾
- display: block; ボタンの形
- transition:.3s; 時間的変化
[.header-nav a:hover] カーソル通過時のヘッダーナビの変化
- background-color:$(headernavi.link.hover); 背景色
- color:$(headernavi.font.hover); 文字色
- text-decoration:none; 文字の装飾
③ヘッダーナビの「余白」の設定をする
「余白」のソースコードは下のコードになります。
「padding: 10px 20px;」 余白
「余白」のソースコードは4つの作り方があるのでお好みに合わせて書き換えてください。
- padding:20px; 「上下左右」の余白
- padding:20px 20px; 「上下」「左右」の余白
- padding:20px 20px 20px; 「上」「左右」「下」の余白
- padding:20px 20px 20px 20px; 「上」「右」「下」「左」の余白
数字を大きくするほど余白は広くなります。
すべてのソースコードの変更・追加が終了したら、「テーマの保存」をクリックして作業終了になります。
![Bloggerで始める無料ブログ:「ヘッダーナビ」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://2.bp.blogspot.com/-4Qf2TqS3Z24/W0RNeSTu2dI/AAAAAAAAHEA/C2qqwVorTYUr3Ig6uFcRSBc2MkR8Xx1wwCK4BGAYYCw/s640/11%25E4%25BD%2599%25E7%2599%25BD.jpg)
![Bloggerで始める無料ブログ:「ヘッダーナビ」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://2.bp.blogspot.com/-ZeC2TSN14rs/W0RNhhANM6I/AAAAAAAAHEI/DXNYxabo8-AekAexn0zoHqcwCSpW1P_lACK4BGAYYCw/s640/12%25E4%25BD%2599%25E7%2599%25BD.jpg)
![Bloggerで始める無料ブログ:「ヘッダーナビ」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://3.bp.blogspot.com/-qfa0iORAnFg/W0RNkJ4UiRI/AAAAAAAAHEQ/kWCtIUPzuwA99rmCtmmz9L5RvVEdiB0owCK4BGAYYCw/s640/13%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)
②[/* ヘッダーナビゲーション]を検索
検索窓に「 /* ヘッダーナビゲーション 」を入力して検索し、ソースコードを表示します。
検索できない場合には、「 ヘッダーナビゲーション 」で検索してください。
![Bloggerで始める無料ブログ:「ヘッダーナビ」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://3.bp.blogspot.com/-ftCL18OZR_E/W0LLE99L5hI/AAAAAAAAHBM/whG4x96vKWcaQRjKRWsdY25G2iLT1vRMgCK4BGAYYCw/s640/52%25E3%2583%258A%25E3%2583%2593.jpg)
ソースコードの説明は以下の通りです。
[.header-nav a] ヘッダーナビの設定
- padding: 10px 20px; 余白
- font-size: 14px; 文字サイズ
- color:$(headernavi.font.color); 文字色
- background:$(headernavi.link.color); 背景色
- text-decoration: none; 文字の装飾
- display: block; ボタンの形
- transition:.3s; 時間的変化
[.header-nav a:hover] カーソル通過時のヘッダーナビの変化
- background-color:$(headernavi.link.hover); 背景色
- color:$(headernavi.font.hover); 文字色
- text-decoration:none; 文字の装飾
③ヘッダーナビの「文字サイズ」の設定をする
「文字サイズ」のソースコードは下のコードになります。
「font-size: 14px;」 文字サイズ
「文字サイズ」は”14px”を書き換えることで変更することができます。
数字を大きくするほど文字サイズは大きくなります。
「余白」を小さく設定している場合でも「文字サイズ」を大きくするほどヘッダーナビは大きく変更されます。
すべてのソースコードの変更・追加が終了したら、「テーマの保存」をクリックして作業終了になります。
![Bloggerで始める無料ブログ:「ヘッダーナビ」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://1.bp.blogspot.com/-bghPsqEHZsI/W0RSeLA6W1I/AAAAAAAAHEw/EdmQe6GzYvg15_rhq-s6JBvzhg_aePi9ACK4BGAYYCw/s640/21%25E4%25BD%2599%25E7%2599%25BD.jpg)
![Bloggerで始める無料ブログ:「ヘッダーナビ」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://1.bp.blogspot.com/-2wdK1iGW0iY/W0RSg1q_PnI/AAAAAAAAHE4/uKaK5dExSMQYD_biG7aLx8YJTZd5yMnUQCK4BGAYYCw/s640/22%25E4%25BD%2599%25E7%2599%25BD.jpg)
![Bloggerで始める無料ブログ:「ヘッダーナビ」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://3.bp.blogspot.com/-jKNnNIgUkjQ/W0RSjlTOGlI/AAAAAAAAHFA/3RGXJpFLxWIffYmroQvT5ahyXg9iInyOwCK4BGAYYCw/s640/23%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)
②[/* ヘッダーナビゲーション]を検索
検索窓に「 /* ヘッダーナビゲーション 」を入力して検索し、ソースコードを表示します。
検索できない場合には、「 ヘッダーナビゲーション 」で検索してください。
![Bloggerで始める無料ブログ:「ヘッダーナビ」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://3.bp.blogspot.com/-ftCL18OZR_E/W0LLE99L5hI/AAAAAAAAHBM/whG4x96vKWcaQRjKRWsdY25G2iLT1vRMgCK4BGAYYCw/s640/52%25E3%2583%258A%25E3%2583%2593.jpg)
ソースコードの説明は以下の通りです。
[.header-nav a] ヘッダーナビの設定
- padding: 10px 20px; 余白
- font-size: 14px; 文字サイズ
- color:$(headernavi.font.color); 文字色
- background:$(headernavi.link.color); 背景色
- text-decoration: none; 文字の装飾
- display: block; ボタンの形
- transition:.3s; 時間的変化
[.header-nav a:hover] カーソル通過時のヘッダーナビの変化
- background-color:$(headernavi.link.hover); 背景色
- color:$(headernavi.font.hover); 文字色
- text-decoration:none; 文字の装飾
③ヘッダーナビの「文字色」の設定をする
「文字色」のソースコードは下のコードになります。
「 color:$(headernavi.font.color); 」 文字色
このコードを下の形式に書き換えます。
「 color:#〇〇〇〇〇〇; 」
設定したい文字色のカラーコードを赤文字の部分に入れ込むことで文字色が変化します。
色のコードは下のサイトで詳しく説明されていますのでご参照ください。
””カラーコード一覧””
すべてのソースコードの変更・追加が終了したら、「テーマの保存」をクリックして作業終了になります。
「color:$(headernavi.font.color);」 について
このソースコードは別の場所で「文字色」が設定されていることを表しています。
ソースコードの検索において、「 headernavi.font.color 」を検索することで設定している場所を探すことができます。
![Bloggerで始める無料ブログ:「ヘッダーナビ」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://2.bp.blogspot.com/-O5VoSaLBOxc/W0RWKLgL5eI/AAAAAAAAHFg/fGjAc9-Cg8sgah-ztxBBNFuoFHx2Wcy4wCK4BGAYYCw/s640/31%25E6%2596%2587%25E5%25AD%2597%25E8%2589%25B2.jpg)
ソースコードは以下に記載したようになっており、
type=”color” default=”#ffffff” value=”#ffffff”/
「value」の後ろのカラーコードを設定することにより、文字色が反映するようになっています。
- default=”#ffffff″ 初期設定の色
- value=”#ffffff″ 設定変更した色
すべてのソースコードの変更・追加が終了したら、「テーマの保存」をクリックして作業終了になります。
「背景色」を変更する
ヘッダーナビの「背景色」を変更していきます。
①検索窓を表示する
まずは、ソースコードを検索できる状態にします。
![Bloggerで始める無料ブログ:「ヘッダーナビ」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/--7g_8gmLFsY/XElPnqaCwbI/AAAAAAAALO8/2tOj0xOnlMcWU_Xc3gx0MkVnwC1Quyl7QCK4BGAYYCw/s640/5%25E5%25B9%2585.jpg)
②[/* ヘッダーナビゲーション]を検索
検索窓に「 /* ヘッダーナビゲーション 」を入力して検索し、ソースコードを表示します。
検索できない場合には、「 ヘッダーナビゲーション 」で検索してください。
![Bloggerで始める無料ブログ:「ヘッダーナビ」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://3.bp.blogspot.com/-ftCL18OZR_E/W0LLE99L5hI/AAAAAAAAHBM/whG4x96vKWcaQRjKRWsdY25G2iLT1vRMgCK4BGAYYCw/s640/52%25E3%2583%258A%25E3%2583%2593.jpg)
ソースコードの説明は以下の通りです。
[.header-nav a] ヘッダーナビの設定
- padding: 10px 20px; 余白
- font-size: 14px; 文字サイズ
- color:$(headernavi.font.color); 文字色
- background:$(headernavi.link.color); 背景色
- text-decoration: none; 文字の装飾
- display: block; ボタンの形
- transition:.3s; 時間的変化
[.header-nav a:hover] カーソル通過時のヘッダーナビの変化
- background-color:$(headernavi.link.hover); 背景色
- color:$(headernavi.font.hover); 文字色
- text-decoration:none; 文字の装飾
③ヘッダーナビの「背景色」の設定をする
「背景色」のソースコードは下のコードになります。
「background:$(headernavi.link.color);」 背景色
このコードを下の形式に書き換えます。
「 color:#〇〇〇〇〇〇; 」
設定したい文字色のカラーコードを赤文字の部分に入れ込むことで文字色が変化します。
色のコードは下のサイトで詳しく説明されていますのでご参照ください。
””カラーコード一覧””
すべてのソースコードの変更・追加が終了したら、「テーマの保存」をクリックして作業終了になります。
「color:$(headernavi.link.color);」 について
このソースコードは別の場所で「背景色」が設定されていることを表しています。
ソースコードの検索において、「 headernavi.link.color 」を検索することで設定している場所を探すことができます。
![Bloggerで始める無料ブログ:「ヘッダーナビ」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://2.bp.blogspot.com/-vpjlbANwzuY/W0RaUaXKAFI/AAAAAAAAHF4/6vxicoKY2f4kiHdGT_LIr6geAOkMgZOSQCK4BGAYYCw/s640/41%25E8%2583%258C%25E6%2599%25AF%25E8%2589%25B2.jpg)
ソースコードは以下に記載したようになっており、
type=”color” default=”#4b99b5″ value=”#4b99b5″/
「value」の後ろのカラーコードを設定することにより、文字色が反映するようになっています。
- default=”#4b99b5″ 初期設定の色
- value=”#4b99b5″ 設定変更した色
すべてのソースコードの変更・追加が終了したら、「テーマの保存」をクリックして作業終了になります。
カーソル通過時の「文字色」を変更する
カーソル通過時のヘッダーナビの「文字色」を変更していきます。
①検索窓を表示する
まずは、ソースコードを検索できる状態にします。
![Bloggerで始める無料ブログ:「ヘッダーナビ」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/--7g_8gmLFsY/XElPnqaCwbI/AAAAAAAALO8/2tOj0xOnlMcWU_Xc3gx0MkVnwC1Quyl7QCK4BGAYYCw/s640/5%25E5%25B9%2585.jpg)
②[/* ヘッダーナビゲーション]を検索
検索窓に「 /* ヘッダーナビゲーション 」を入力して検索し、ソースコードを表示します。
検索できない場合には、「 ヘッダーナビゲーション 」で検索してください。
![Bloggerで始める無料ブログ:「ヘッダーナビ」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://3.bp.blogspot.com/-ftCL18OZR_E/W0LLE99L5hI/AAAAAAAAHBM/whG4x96vKWcaQRjKRWsdY25G2iLT1vRMgCK4BGAYYCw/s640/52%25E3%2583%258A%25E3%2583%2593.jpg)
ソースコードの説明は以下の通りです。
[.header-nav a] ヘッダーナビの設定
- padding: 10px 20px; 余白
- font-size: 14px; 文字サイズ
- color:$(headernavi.font.color); 文字色
- background:$(headernavi.link.color); 背景色
- text-decoration: none; 文字の装飾
- display: block; ボタンの形
- transition:.3s; 時間的変化
[.header-nav a:hover] カーソル通過時のヘッダーナビの変化
- background-color:$(headernavi.link.hover); 背景色
- color:$(headernavi.font.hover); 文字色
- text-decoration:none; 文字の装飾
③カーソル通過時のヘッダーナビの「文字色」の設定をする
「文字色」のソースコードは下のコードになります。
「 color:$(headernavi.font.hover); 」 文字色
このコードを下の形式に書き換えます。
「 color:#〇〇〇〇〇〇; 」
設定したい文字色のカラーコードを赤文字の部分に入れ込むことで文字色が変化します。
色のコードは下のサイトで詳しく説明されていますのでご参照ください。
””カラーコード一覧””
すべてのソースコードの変更・追加が終了したら、「テーマの保存」をクリックして作業終了になります。
「color:$(headernavi.font.hover);」について
このソースコードは別の場所で「文字色」が設定されていることを表しています。
ソースコードの検索において、「 headernavi.font.hover 」を検索することで設定している場所を探すことができます。
![Bloggerで始める無料ブログ:「ヘッダーナビ」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://1.bp.blogspot.com/-uT0tH7TOYXQ/W0RfasaExtI/AAAAAAAAHGQ/fLDvAy_owWQ7SVbkJx3YrbPpJ03tsBsoQCK4BGAYYCw/s640/51%25E6%2596%2587%25E5%25AD%2597%25E8%2589%25B2.jpg)
ソースコードは以下に記載したようになっており、
type=”color” default=”#ffffff″ value=”#ffffff″/
「value」の後ろのカラーコードを設定することにより、文字色が反映するようになっています。
- default=”#ffffff″ 初期設定の色
- value=”#ffffff″ 設定変更した色
すべてのソースコードの変更・追加が終了したら、「テーマの保存」をクリックして作業終了になります。
カーソル通過時の「背景色」を変更する
カーソル通過時のヘッダーナビの「背景色」を変更していきます。
①検索窓を表示する
まずは、ソースコードを検索できる状態にします。
![Bloggerで始める無料ブログ:「ヘッダーナビ」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/--7g_8gmLFsY/XElPnqaCwbI/AAAAAAAALO8/2tOj0xOnlMcWU_Xc3gx0MkVnwC1Quyl7QCK4BGAYYCw/s640/5%25E5%25B9%2585.jpg)
②[/* ヘッダーナビゲーション]を検索
検索窓に「 /* ヘッダーナビゲーション 」を入力して検索し、ソースコードを表示します。
検索できない場合には、「 ヘッダーナビゲーション 」で検索してください。
![Bloggerで始める無料ブログ:「ヘッダーナビ」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://3.bp.blogspot.com/-ftCL18OZR_E/W0LLE99L5hI/AAAAAAAAHBM/whG4x96vKWcaQRjKRWsdY25G2iLT1vRMgCK4BGAYYCw/s640/52%25E3%2583%258A%25E3%2583%2593.jpg)
ソースコードの説明は以下の通りです。
[.header-nav a] ヘッダーナビの設定
- padding: 10px 20px; 余白
- font-size: 14px; 文字サイズ
- color:$(headernavi.font.color); 文字色
- background:$(headernavi.link.color); 背景色
- text-decoration: none; 文字の装飾
- display: block; ボタンの形
- transition:.3s; 時間的変化
[.header-nav a:hover] カーソル通過時のヘッダーナビの変化
- background-color:$(headernavi.link.hover); 背景色
- color:$(headernavi.font.hover); 文字色
- text-decoration:none; 文字の装飾
③カーソル通過時のヘッダーナビの「文字色」の設定をする
「文字色」のソースコードは下のコードになります。
「 background-color:$(headernavi.link.hover); 」 背景色
このコードを下の形式に書き換えます。
「 color:#〇〇〇〇〇〇; 」
設定したい文字色のカラーコードを赤文字の部分に入れ込むことで文字色が変化します。
色のコードは下のサイトで詳しく説明されていますのでご参照ください。
””カラーコード一覧””
すべてのソースコードの変更・追加が終了したら、「テーマの保存」をクリックして作業終了になります。
「background-color:$(headernavi.link.hover);」 について
このソースコードは別の場所で「背景色」が設定されていることを表しています。
ソースコードの検索において、「 headernavi.link.hover 」を検索することで設定している場所を探すことができます。
![Bloggerで始める無料ブログ:「ヘッダーナビ」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://3.bp.blogspot.com/-hbqffj31WDo/W0RhMywlINI/AAAAAAAAHG0/ye2_l8ahVkEDi09HDeUgPT8XEds8HZTMACK4BGAYYCw/s640/61%25E8%2583%258C%25E6%2599%25AF%25E8%2589%25B2.jpg)
ソースコードは以下に記載したようになっており、
type=”color” default=”#4b99b5″ value=”#4b99b5″/
「value」の後ろのカラーコードを設定することにより、文字色が反映するようになっています。
- default=”#4b99b5″ 初期設定の色
- value=”#4b99b5″ 設定変更した色
すべてのソースコードの変更・追加が終了したら、「テーマの保存」をクリックして作業終了になります。
スマートフォンの「ヘッダーナビ」の表示
「ヘッダーナビ」はスマートフォン側では下の画像の赤枠のように表示されています。
この赤枠の部分を変更していきます。
![Bloggerで始める無料ブログ:「ヘッダーナビ」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://2.bp.blogspot.com/-YvUAJEtlLs4/W0Rnw0B06JI/AAAAAAAAHHM/x4plZp68nmkkYFtX7m3OmojGalheiT5WgCK4BGAYYCw/s640/71%25E3%2582%25B9%25E3%2583%259E%25E3%2583%259B.jpg)
①検索窓を表示する
まずは、ソースコードを検索できる状態にします。
![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/-jQovQSu00no/W0Roapo3kuI/AAAAAAAAHHY/PMa5_90M4e46yApuBsiM-4Rl863_hi5UACK4BGAYYCw/s640/72%25E3%2582%25B9%25E3%2583%259E%25E3%2583%259B.jpg)
「/* レスポンシブデザイン」の中に「 .header-nav a{ 」の項目があるので探します。
![Bloggerで始める無料ブログ:「ヘッダーナビ」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://3.bp.blogspot.com/-i4rGAUqi4U4/W0RpLvnuRJI/AAAAAAAAHHk/RNhTLIXF-vIhgMrS8AZvgPD6WoTce4R-gCK4BGAYYCw/s640/73%25E3%2582%25B9%25E3%2583%259E%25E3%2583%259B.jpg)
ソースコードの説明は以下の通りです。
[.header-nav a] スマホ側のヘッダーナビの設定
- padding: 20px 20px; 余白
- font-size: 16px; 文字サイズ
あとは、コードの内容を書き換えれば「スマホでのヘッダーナビの表示」をカスタマイズすることができます。
すべてのソースコードの変更・追加が終了したら、「テーマの保存」をクリックして作業終了になります。
まとめ:今回のおさらい
今回は「ヘッダーナビ」について、下に記載した7つのカスタマイズ方法を説明しました。
- 「余白」を変更する
- 「文字サイズ」を変更する
- 「文字色」を変更する
- 「背景色」を変更する
- カーソル通過時の「文字色」を変更する
- カーソル通過時の「背景色」を変更する
- スマートフォンの「ヘッダーナビ」の表示
それぞれの説明を分かりやすいように別々に記載しましたが、設定を行うソースコードは同じ場所なので、まとめて設定をすることが可能です。
いろいろ試してみてください(*^^*)