ブログのノウハウ

【blogger】ナビゲーションバーの位置の変更方法【初心者必見】

bloggerのナビゲーションバーの位置の変更方法を紹介
hyu
当サイトのリンクには広告が含まれています。

bloggerのナビゲーションバーの位置を変更して少しでもブログをおしゃれにしたいですよね。

カメさん
カメさん

ナビゲーションバーの位置の変更が難しい!!

ひゅー
ひゅー

わかりやすいように、1から説明するので、初心者でも大丈夫です!

この記事ではナビゲーションバーの位置の変更の仕方について紹介します。

bloggerでブログをしている人はぜひ知っておきたい内容となっているので、ぜひ最後までお読みください。

この記事でわかること
  • bloggerのナビゲーションバーを入れる意味
  • bloggerのナビゲーションバーの位置変更方法
あわせて読みたい
【保存版】bloggerのカスタマイズ方法のまとめ
【保存版】bloggerのカスタマイズ方法のまとめ

「blogger」のナビゲーションについて

ブログ運営する上でナビゲーションバーは非常に大切です。

ナビゲーションバーの設置で得られる効果はたくさんあります。

ナビゲーションバーは大切ですよ!
ナビゲーションバーの役割
  1. トップページにアクセスしてもらえる
  2. カテゴリーを入れて読者が記事を巡回できる
  3. 様々な記事を見てもらいやすい
  4. お問い合わせを設置すると気軽に質問を受けることができる

ナビゲーションバーを設置することで様々な恩恵を得ることができますね。

一度自分の記事を読んでもらえたら、他の記事も読んで欲しい!と思います。

そのためにはナビゲーションバーを入れると他の記事を読んでくれる人が増える

カメさん
カメさん

自分がネットで検索して見つけた記事でも利用するよね!

ひゅー
ひゅー

はい!読みたい記事を見つけやすくなる効果があります。

「blogger」ナビゲーションバーの位置変更

僕が使用しているブログは「blogger」でテーマは「QooQ」です。

→現在は「WordPress」でブログを運営しているためテーマは違います

僕が使用しているテーマは「swellJIN:R」です。

あわせて読みたい
10分でできるWordPressブログの簡単な始め方!【超初心者向け】
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>

の下に、先ほどコピーしたのを貼り付けてください。

目のマークのプレビューを押して変更ができているか確認

移動ができたら目のマークのプレビューを押して変更ができているか確認してください。

変更が確認出来たら右上の保存を押して終了です。

保存の前に、必ずナビゲーションバーの位置が変更になっているか確認しましょう。

ここまでの作業お疲れさまでした。

さいごに

今回はナビゲーションバーの位置を変更のお話でした。

ナビゲーションバーの位置を変更して、少しでも見やすいブログにしましょう。

ナビゲーションバーの役割は、

ナビゲーションバーは大切ですよ!
ナビゲーションバーの役割
  1. トップページにアクセスしてもらえる
  2. カテゴリーを入れて読者が記事を巡回できる
  3. 様々な記事を見てもらいやすい
  4. お問い合わせを設置すると気軽に質問を受けることができる

などがありましたね。

僕は現在、ブログテーマ「SWELLとJIN:R」を利用してブログを運営しています。

僕のブログのデザインを隅々まで見ていただいて、参考にしていただければうれしいです!

SWELLで運営しているサイト→kimakura(気ままな暮らし)

JIN:Rで運営しているサイト→お家が仕事場なんだけど!?

あわせて読みたい
【保存版】bloggerのカスタマイズ方法のまとめ
【保存版】bloggerのカスタマイズ方法のまとめ
ABOUT ME
ひゅー
ひゅー
気ままなブロガー
20代の気ままなブロガーです。ブログ運営で生活をしています。ブログ運営で得た知識を当サイトで発信中。

╲よろしければお願いします!/

記事URLをコピーしました