【はてなブログ】初心者向けナビゲーションバーの付けた方
こんにちはKENです。今回ブログのトップページにナビゲーションバーを設置しましたので、設置方法などをまとめてみます。
追記：10/6リライトしました！
ナビゲーションバーって？
SEO対策につながる
これです。これがあることによって、見に来てくれた人がどのページに飛びたいとか、自分のサイトの別の記事を読んでくれる、確率が上がったりします。
直帰率が下がったり内部リンクに飛んでくれたりすることで、自分の記事の価値が上がりますので、SEO対策にもつながります。
ずらずらと記事が並んでいるよりかはかっこよくないですか？正直僕はHTMLのことに関してはほとんどわからなかったので【はてなブログのSEO対策】のブログを運営している方の記事を参考にさせていただきました。
こちらの記事です。
ナビゲーションバーの設置方法
結局僕がしたことと言えば、完全にコピペです笑【はてなブログのSEO対策】さんが記事の中にHTMLを紹介してくださっています。
自分で、することといえば、はてなブログの編集の中にカテゴリと書いてあるボタンがあります。
大体の方は自分の記事にカテゴリで分類されていると思いますので、そちらのURLを紹介してくださっているHTMLに書きかえればできます。
行うことは主に二つです。
1デザインCSSにコピペとHTMLのコピペです。
こちらがデザインCSSです。（画像にしています。コピペは紹介元でしてください）
デザインCSSが主に動作を行うためのプログラムと思ってください。
文字の大きさや、色などもこちらの数字を変えれば変更できます。
文字の大きさ⇒font-size:18pxここの数字を変えれば変更できます
こちらがHTMLです（タイトル下に張り付けてください）
主に表示を行うためのプログラムです。
<!-- ナビゲーションバー -->
<div id="menubar">
<ul>
<li><a href="https://www.timeismoney.work" title="TOP" >TOP</a></li>
<li><a href="https://www.timeismoney.work/archive/category/%E9%9B%86%E5%AE%A2" title="">集客対策</a></li>
<li><a href="https://www.timeismoney.work/archive/category/%E9%9B%91%E8%A8%98" title="雑記" >雑記</a></li>
<li><a href="https://www.timeismoney.work/archive/category/%E5%89%AF%E6%A5%AD" title="副業" >副業</a></li>
</ul>
</div>
こちらが実際の僕のブログに貼ってあるHTMLです。赤字の部分が僕のブログのそれぞれのカテゴリのURLになります。
こちらをはてなブログのデザイン⇒カスタマイズ⇒タイトル下の項目に貼っていたければOKです。細かい設定は【はてなブログのSEO対策】さんの記事を読んでいただいた方がわかりやすいと思いますので、そちらを参考になさってください。
メニューバーの色なども何種類か用意してくださっていますので自分好みの色にしたらいいと思います。
まとめ
SEO対策としてページ滞在期間や直帰率なども蔑ろにはできない要素なので、是非活用してください。
僕が過去にまとめた、SEO対策の記事として、グーグルサーチコンソールの登録の仕方や、グーグルアナりティクスの登録の仕方など、を初心者向けに解説しています。よかったらそちらも参考にしてください。
