ほぼ週刊★平民貴族

心豊かに生きることをテーマにした雑誌ブログ。主に映画と歴史と書籍について書いています。

スマホでグローバルメニューを表示させるならこのサイトへGO

広告

ブログを開設して半年近く経過してようやくグローバルメニューを作り直すことが出来ました。

メニューに関わらずブログの外観や機能をいじるのは手間と時間がかかりますし

上手くいかなくてやり直しになった時の徒労感が辛いですよね。

ネットで調べようにも情報が溢れていて、質の高いサイトが必ずしも上位に上がってるわけでもありません。

そこで今回は

これからはてなブログでグローバルメニューを設置しようとする方々が自分のような遠回りをしないで良いように

自分があれこれ見たサイトの中で最も役に立ったサイトを紹介します。

数あるサイトの中でも一番分かりやすいのはここ

haniwaman.com

このサイトのコードをコピペしてものの20分足らずでグローバルメニューを作り直すことが出来ました。

本当に感謝です。

グローバルメニューのコードを書かれてあるサイトはたくさんあったのですが

PC→スマホへの互換性が無いのか

PCでは表示されてるのにスマホでは表示されない場合が結構多いんです。

でもこのはにわまんさんのコードではそういったことが起きませんでした。

はてなブログにおけるコードの設置場所

ブログのダッシュボードからデザインに飛び

🔧←このレンチだかスパナみたいなマークを押してカスタマイズに飛ぶ

その後HTMLコードは[ヘッダ]の[タイトル下]

CSSコードは[デザインCSS]にコピーしたコードを貼り付けるだけでOKです。

グローバルメニューから各カテゴリ一覧へのリンクを貼るには

まずは各カテゴリ一覧のページへ飛んでそのページのアドレスをコピーしましょ

例えば自分のブログだと[レジャー]というカテゴリがあります

f:id:Guria:20190618204339j:plain

この[レジャー]と書かれてあるタグをクリックするとそのカテゴリをまとまたページに飛びます。

f:id:Guria:20190618202458j:plain

そして飛んだ先のページ上部のアドレスバーをクリックして当該ページのアドレスをコピーしてください。

最後にアドレスを貼り付ける場所はHTMLコードの

 
a href="#" と書かれた部分の「#」をカテゴリアドレスに置き換えて下さい。

リンクを貼る際にメニュータイトルを変更するのもお忘れ無く。

最後に

大勢の人に読んでもらうためのブログで無くても

ブログの外観を整えるってとても大事です。

客人が来ようが来まいが自分の部屋は綺麗にしておきたいじゃないですか。

他人からどう見られるかも大事ですが自分にとって快適かどうかも大事です。

こうしてグローバルメニューを作成する過程でカテゴリを整理していくと

自分が何を伝えたいか、何なら伝えられるかを整理できた気がします。

はにわまんさんのコードを使えば簡単に作れるので是非皆さんも試してみて下さい。