ConoHa WINGのお問い合わせ方法をわかりやすく紹介！
hyu
お家が仕事場なんだけど！？
【blogger】ナビゲーションバーの位置の変更方法【初心者必見】
hyu
当サイトのリンクには広告が含まれています。
bloggerのナビゲーションバーの位置を変更して少しでもブログをおしゃれにしたいですよね。
ナビゲーションバーの位置の変更が難しい！！
わかりやすいように、1から説明するので、初心者でも大丈夫です！
この記事ではナビゲーションバーの位置の変更の仕方について紹介します。
bloggerでブログをしている人はぜひ知っておきたい内容となっているので、ぜひ最後までお読みください。
この記事でわかること
- bloggerのナビゲーションバーを入れる意味
- bloggerのナビゲーションバーの位置変更方法
あわせて読みたい
【保存版】bloggerのカスタマイズ方法のまとめ
読みたいところをタップ
「blogger」のナビゲーションについて
ブログ運営する上でナビゲーションバーは非常に大切です。
ナビゲーションバーの設置で得られる効果はたくさんあります。
ナビゲーションバーを設置することで様々な恩恵を得ることができますね。
一度自分の記事を読んでもらえたら、他の記事も読んで欲しい！と思います。
そのためにはナビゲーションバーを入れると他の記事を読んでくれる人が増える！
自分がネットで検索して見つけた記事でも利用するよね！
はい！読みたい記事を見つけやすくなる効果があります。
「blogger」ナビゲーションバーの位置変更
僕が使用しているブログは「blogger」でテーマは「QooQ」です。
僕が使用しているテーマは「swellとJIN:R」です。
あわせて読みたい
10分でできるWordPressブログの簡単な始め方！【超初心者向け】
ブログテーマ「QooQ」を使用している方が変更できるようになっています。
それでは、ナビゲーションバーの位置を変更していきましょう。
最初に、bloggerを開きます
「テーマ」をクリック
カスタマイズの右にある「⬇（下矢印）のボタン」をクリック
「HTML編集」を選択
HTMLからコピーを行う
<body>の下の <div id=’navigation’>から<div id=’header’>上の</div>の部分をコピーします。
この下の部分ですね。自分のHTMLをコピーしてください。
<div id=’navigation’>
<div class=’container’>
<input id=’navigation-button’ type=’checkbox’/>
<label for=’navigation-button’ id=’navigation-label’><span/></label>
<div id=’navigation-content’>
<b:section id=’ナビゲーション’ maxwidgets=’1′ showaddelement=’no’>
<b:widget id=’LinkList2′ locked=’false’ title=” type=’LinkList’ version=’1′>
中略
</div>
</b:includable>
</b:widget>
</b:section>
</div>
</div>
</div>
コピーしたら、コピーした部分を切り取ります。
貼り付けを行う
</b:includable>
</b:widget>
</b:section>
</div>
の下に、先ほどコピーしたのを貼り付けてください。
目のマークのプレビューを押して変更ができているか確認
移動ができたら目のマークのプレビューを押して変更ができているか確認してください。
変更が確認出来たら右上の保存を押して終了です。
ここまでの作業お疲れさまでした。
さいごに
今回はナビゲーションバーの位置を変更のお話でした。
ナビゲーションバーの位置を変更して、少しでも見やすいブログにしましょう。
ナビゲーションバーの役割は、
などがありましたね。
僕は現在、ブログテーマ「SWELLとJIN:R」を利用してブログを運営しています。
僕のブログのデザインを隅々まで見ていただいて、参考にしていただければうれしいです！
SWELLで運営しているサイト→kimakura（気ままな暮らし）
JIN:Rで運営しているサイト→お家が仕事場なんだけど！？
あわせて読みたい
【保存版】bloggerのカスタマイズ方法のまとめ
ABOUT ME
20代の気ままなブロガーです。ブログ運営で生活をしています。ブログ運営で得た知識を当サイトで発信中。
