ブログ初心者ながらに思っていました。カテゴリーを整理し、グローバルメニューを設置したい、と。
本ブログの記事は現在34記事です。まだまだ多いわけではないのですが、この段階でもカテゴリーを階層化した方が、頭の整理ができます。今後どのような記事を書き足すか、見当をつけやすいのではないかと思ったのです。
ブログのサイドバーに「カテゴリー」があるので、そこから関連記事を見ることができます。ただ、自分が他の方のブログ記事を見ていて「この方、他に何書いてるんだろう」と思う時は、いつもグローバルメニューから飛んでいることに気づきました。
サイドバーのカテゴリーしかなければそこから飛びますが、グローバルメニューの方がぱっと見て分かりやすいと感じます。
今回は、カスタマイズの知識0、ブログ初心者がはてなブログでカテゴリー階層化とグローバルメニューを設置できた過程と、やってみたけどなんか違う…？と感じているところを紹介します。
先人たちが既に分かりやすい記事を書いてくださっているので、適宜参照させてもらいます。
カテゴリーの階層化
大きなカテゴリー(親カテゴリー)の中に、一段回小さなカテゴリー(子カテゴリ―)を作ることです。子カテゴリーよりさらに小さなカテゴリーは孫カテゴリーと呼びます。
※カテゴリーの階層化は、下に続く「グローバルメニューの設置」の前に行っておくことを推奨します。グローバルメニューの設置の際に、「親カテゴリー」のURLが必要になってくるからです。
本ブログの例で言えば
親カテゴリー: 語学
「語学」の子カテゴリー: TOEIC, DELF, CILS, 語学全般
「TOEIC」の記事: 【TOEIC】900点超えるためにこれだけは持っておくべき教材 厳選5選、【TOEIC920点】社会人でも10カ月で達成できた勉強法、…
「DELF」の記事: 【フランス語】DELF B2取得するために最低限必要な教材、【フランス語】DELF B2取得者が実際に見ていた、フランス語を学べるYoutubeチャンネル、…
と続きます。
各子カテゴリーの中に、その子カテゴリーに該当する記事が入っています。Ｋのは孫カテゴリーまでは利用していません。今のところは子カテゴリーまでで十分だと感じています。
パソコンだと右クリックして「新規フォルダー作成、そのフォルダーの中にさらに新規フォルダー作成」ってそんなに難しい操作ではないですよね。ですがはてなブログの場合、カテゴリーの中にカテゴリーを作るには、自分でカスタマイズする必要があります。
やることは大きく分けて3つです。既に丁寧な解説がありますので、リンクを貼らせていただきます。
- 「親カテゴリー」と「親カテゴリー-子カテゴリー」を整理し、記事を割り振る
- カテゴリーの表示を「アルファベット順」にする
- 「カスタマイズ」の決まった場所に決まったコードを貼る
※バロさんの記事を見ながら作業をしたら、思いの他スムーズにできました！
【徹底解説】はてなブログでのカテゴリー階層化の手順と具体例！ - たびバロ
※バロさんは、とよブロさんを参照されたそうです。こちらが引用元です。
グローバルメニューの設置
グローバルメニューとは、本ブログではブログタイトルの下にある、カテゴリーが記載された帯部分のことです。
グローバルメニューは始めからあるわけではなく、「カスタマイズ」の「ヘッダ」の「タイトル下」と「｛｝デザインCSSコード」をいじる必要があります。初心者には何だか難しいことのように思えますので、その辺りも先人の知恵を借りました。
※いつもお世話になっているれどさんの解説です。
【ブログカスタマイズ】「はてなブログ」でグローバルメニューの追加方法を紹介｜初心者でもカンタン - redoブログ
※グローバルメニューの帯の色の変え方は、パソコンガイドさんのコードを見ながら行いました。
はてなブログにグローバルメニューをコピペで設置する方法 – パソコンガイド
原色大辞典というものを初めて見ました。＃以下の6桁の数字とアルファベットをコードに差し替えることで、グローバルメニューの帯の色を変えることができます。
スマートフォンでの表示に反映
いつもパソコンで記事を書いているので、スマートフォンではどのようにブログが表示されるのか、あまり意識していませんでした。
でも、スマートフォンでブログを見る人の方が多いですよね。スマートフォンでもグローバルメニューを表示したかったので、こちらもやり方を調べました。
Kのが使用しているデザインはHaruniで、これは「レスポンシブデザイン」です。
「スマートフォン」→「詳細設定」→「レスポンシブデザイン」にチェックを入れると、スマートフォンでもHaruniのデザインでブログが表示されます。
三本線の箇所がグローバルメニューです。MENUを押すと、カテゴリーが表示されます。
ここを直したい…
何とかそれっぽくグローバルメニューを設置できたのですが、2点直したいと思っています。
- 左側に寄っているグローバルメニューを中央(タイトルの真下)に移動させたい
- グローバルメニューから子カテゴリーに飛べるようにしたい
あとは、帯の色をグラデーションにしてみたいです。ただ、色のバリエーションが豊富で、こだわり出すと終わらなそうなので、とりあえずそっとしておきます。
まとめ
既に丁寧に解説されている記事を見ながら、カテゴリーの階層化とグローバルメニューの設置を行いました。カテゴリーの階層化については問題なく、やり方も覚えたのですが、グローバルメニューには課題が残ります。
文字を中央に寄せる方法、子カテゴリーを表示する方法などは調べると出てきます。Ｋのもいくつかの記事を見ながら試したのですが、思うように変更できませんでした。自分のブログに貼りつける時に、どこか誤っているのだと思います。
見栄えがあまり良くないのですが、もう少し慣れてきた頃に再挑戦します。今頑張るとどつぼにはまりそうです…。また経過をお知らせできればと思います。
