本当に本が読みたくなる読書のブログ

読書好きのための本当に読みたい本が見つかる書評ブログです。小説、ノンフィクション、実用書、ビジネス書ジャンルを問わず紹介します。

ブログにグローバルメニューを設置するまで

ブログの見やすさの目標にあげておきながら、なかなか手間取っていたグローバルメニューの設置が完了しました。

今回はグローバルメニューを設置する2つの方法とコピペOKな私が使ったコードも載せておきますね。

はじめに、ご自身のブログでグローバルメニューの設置方法を快く公開して下さっている方々に感謝致します。


グローバルメニューがあると便利な理由


多くの方のブログにはブログ内をリンクで自由に移動できるグローバルメニューがありますよね。

私のブログには、3カ月を超えても設置することができませんでした。

ちなみにグローバルメニューの定義は「Webサイトの主要コンテンツへのリンクが収集されている目次であり、Webサイト内へのショートカット機能を持つ」と言われています。

読む方にとって便利な機能でもあり、GoogleなどのSEO対策でも重要な項目の1つとされています。

なぜSEO対策に重要かと言うと、検索エンジンがWebサイトを巡回する際、Webサイト内部を効率よく巡回する事が出来るためだそうです。

まさに最近のブログになくてはならない機能ですね。


グローバルメニューを設置する2つの方法


はてなブログの標準のテーマでは設置されていないので、設置するには2つの方法があります。


HTMLとCSSを書き換えて設置する

私が行った方法はこちらです。

テーマを変えても良かったのですが、何となく今のシンプルなテーマが気に入っていたのと、スマホの画面はできるだけ軽くしたかったためです。


グローバルメニューの設置されているテーマへ変更する

テーマそのものを変える方法もあります。

詳しくはこれから紹介する半月さんのブログを参考にして頂くと分かりやすいと思いました。

この方法には取り組んでいませんが、innocentと呼ばれるテーマもシンプルでカッコ良かったですよ。


参考にした方のブログ


いざグローバルメニューを設置はしたくても、HTMLの技術もない私にとっては未知の領域。

そこで、手抜きではありますが、Webデザインの専門の方のブログを参考にして作業しましたよ。


Yukihy Life

www.yukihy.com

ゆきひーさん(id:ftmaccho)の運営するブログでは、HTMLとCSSがコピペOKで記載されています。

PC画面用のグローバルメニューは、こちらに記載されているHTMLに表示用のメインメニューとカーソールを合わせると表示されるリンクメニューを作成しました。

ゆきひーさんのブログから、カラーコード一覧のリンクもあるのでブログのトップページにグローバルメニューの色を合わせることもできますよ。


Yukihy Life

www.yukihy.com

PC用のグローバルメニューをそのままスマホの画面で表示すると表示される文字が小さくなってしまい、見づらくなりました。

詳しい方ならコードを変えて対応できるのですが、まだまだ私には無理なようです。

そこで、トグルメニューをスマホ用のヘッダーに設定しましたよ。

グローバルメニューに比べてリンク先を減らし表示を軽くしました。

スマホの画面は軽くてシンプルな方が良さそうと思いましたから。


MoonNote

moonnote.hateblo.jp

HTMLとCSSを書き換えてまでグローバルメニューを設置するのが面倒な方は、半月さん(id:waitingmoon)のブログで紹介されているようにテーマそのものを変えると良いようですね。

Innocentと呼ばれるテーマはグローバルメニューが標準装備されているようなので。


HTMLとCSS

PC用グローバルメニュー

PC用のグローバルメニューはHTMLとCSS両方を書き換えました。

f:id:jizi9:20170907185157p:plain

f:id:jizi9:20170907185219p:plain

方法ははてなブログのダッシュボード→デザイン→ヘッダのHTMLと1番下のデザインCSSを書き換えます。

HTMLhは黄色文字の項目を書き換えるだけで大丈夫でした。

PC用は見る方の画面も大きく、落ち着いた環境でブログを読んでいるかと思います。

そこで、表示されるリンク先をできるだけ多くメニューに盛り込みました。

スマホ用トグルメニュー

スマホのトグルメニューは逆にメニューの数を少なくして、できるだけ軽く表示されるようにしました。

f:id:jizi9:20170907185312p:plain

方法ははてなブログのダッシュボード→デザイン→スマホアイコン→ヘッダ→タイトル下を「スマートフォン用にHTMLを設定する」を選択して貼り付けます。

スマホでブログを読む時には移動中や、ちょっとした時間に読むと思い軽い方が良いはずと考えたからです。

設置後の反響

はじめはPC用画面だけを設定して、スマホでも同じ表示にしていましたが、端末によってメニューが崩れているとコメントをいただき、スマホスマホでシンプルにを目標にしてみました。

その後の反響はありませんが、少しは見やすくなりましたか?

見やすさの目標はこちら↓
www.yu-hanami.com


にほんブログ村 本ブログへ