けーのののーない

語学、読書、旅行が好きなゆとり会社員

MENU

【ブログ初心者】はてなブログでカテゴリーを階層化、グローバルメニューを設置したけどなんか違う…?


スポンサードリンク

ブログ初心者ながらに思っていました。カテゴリーを整理し、グローバルメニューを設置したい、と。

 

本ブログの記事は現在34記事です。まだまだ多いわけではないのですが、この段階でもカテゴリーを階層化した方が、頭の整理ができます。今後どのような記事を書き足すか、見当をつけやすいのではないかと思ったのです。

 

ブログのサイドバーに「カテゴリー」があるので、そこから関連記事を見ることができます。ただ、自分が他の方のブログ記事を見ていて「この方、他に何書いてるんだろう」と思う時は、いつもグローバルメニューから飛んでいることに気づきました。

 

サイドバーのカテゴリーしかなければそこから飛びますが、グローバルメニューの方がぱっと見て分かりやすいと感じます。

 

今回は、カスタマイズの知識0、ブログ初心者がはてなブログでカテゴリー階層化とグローバルメニューを設置できた過程と、やってみたけどなんか違う…?と感じているところを紹介します。

 

先人たちが既に分かりやすい記事を書いてくださっているので、適宜参照させてもらいます。

 

カテゴリーの階層化

大きなカテゴリー(親カテゴリー)の中に、一段回小さなカテゴリー(子カテゴリ―)を作ることです。子カテゴリーよりさらに小さなカテゴリーは孫カテゴリーと呼びます。

 

※カテゴリーの階層化は、下に続く「グローバルメニューの設置」の前に行っておくことを推奨します。グローバルメニューの設置の際に、「親カテゴリー」のURLが必要になってくるからです。

 

本ブログの例で言えば

 

親カテゴリー: 語学

「語学」の子カテゴリー: TOEIC, DELF, CILS, 語学全般

TOEIC」の記事: 【TOEIC】900点超えるためにこれだけは持っておくべき教材 厳選5選、【TOEIC920点】社会人でも10カ月で達成できた勉強法、…

「DELF」の記事: 【フランス語】DELF B2取得するために最低限必要な教材、【フランス語】DELF B2取得者が実際に見ていた、フランス語を学べるYoutubeチャンネル、…

 

と続きます。

 

各子カテゴリーの中に、その子カテゴリーに該当する記事が入っています。Kのは孫カテゴリーまでは利用していません。今のところは子カテゴリーまでで十分だと感じています。

 

パソコンだと右クリックして「新規フォルダー作成、そのフォルダーの中にさらに新規フォルダー作成」ってそんなに難しい操作ではないですよね。ですがはてなブログの場合、カテゴリーの中にカテゴリーを作るには、自分でカスタマイズする必要があります。

 

やることは大きく分けて3つです。既に丁寧な解説がありますので、リンクを貼らせていただきます。

 

  • 「親カテゴリー」と「親カテゴリー-子カテゴリー」を整理し、記事を割り振る
  • カテゴリーの表示を「アルファベット順」にする
  • 「カスタマイズ」の決まった場所に決まったコードを貼る

 

※バロさんの記事を見ながら作業をしたら、思いの他スムーズにできました!

【徹底解説】はてなブログでのカテゴリー階層化の手順と具体例! - たびバロ

 

※バロさんは、とよブロさんを参照されたそうです。こちらが引用元です。

はてなブログのカテゴリー階層化に成功しました - とよブロ 

 

グローバルメニューの設置

グローバルメニューとは、本ブログではブログタイトルの下にある、カテゴリーが記載された帯部分のことです。

 

グローバルメニューは始めからあるわけではなく、「カスタマイズ」の「ヘッダ」の「タイトル下」と「{}デザインCSSコード」をいじる必要があります。初心者には何だか難しいことのように思えますので、その辺りも先人の知恵を借りました。

 

※いつもお世話になっているれどさんの解説です。

【ブログカスタマイズ】「はてなブログ」でグローバルメニューの追加方法を紹介|初心者でもカンタン - redoブログ

 

※グローバルメニューの帯の色の変え方は、パソコンガイドさんのコードを見ながら行いました。

はてなブログにグローバルメニューをコピペで設置する方法 – パソコンガイド

 

原色大辞典というものを初めて見ました。#以下の6桁の数字とアルファベットをコードに差し替えることで、グローバルメニューの帯の色を変えることができます。

    WEB色見本 原色大辞典 - HTMLカラーコード

 

スマートフォンでの表示に反映

いつもパソコンで記事を書いているので、スマートフォンではどのようにブログが表示されるのか、あまり意識していませんでした。

 

でも、スマートフォンでブログを見る人の方が多いですよね。スマートフォンでもグローバルメニューを表示したかったので、こちらもやり方を調べました。

 

Kのが使用しているデザインはHaruniで、これは「レスポンシブデザイン」です。

 

スマートフォン」→「詳細設定」→「レスポンシブデザイン」にチェックを入れると、スマートフォンでもHaruniのデザインでブログが表示されます。

f:id:knonononai:20210905124354j:plain

レスポンシブデザイン反映後のスマートフォンでの表示

 

三本線の箇所がグローバルメニューです。MENUを押すと、カテゴリーが表示されます。

f:id:knonononai:20210905124400j:plain

カテゴリーの表示

 

ここを直したい…

何とかそれっぽくグローバルメニューを設置できたのですが、2点直したいと思っています。

 

  • 左側に寄っているグローバルメニューを中央(タイトルの真下)に移動させたい
  • グローバルメニューから子カテゴリーに飛べるようにしたい

 

あとは、帯の色をグラデーションにしてみたいです。ただ、色のバリエーションが豊富で、こだわり出すと終わらなそうなので、とりあえずそっとしておきます。

 

まとめ

既に丁寧に解説されている記事を見ながら、カテゴリーの階層化とグローバルメニューの設置を行いました。カテゴリーの階層化については問題なく、やり方も覚えたのですが、グローバルメニューには課題が残ります。

 

文字を中央に寄せる方法、子カテゴリーを表示する方法などは調べると出てきます。Kのもいくつかの記事を見ながら試したのですが、思うように変更できませんでした。自分のブログに貼りつける時に、どこか誤っているのだと思います。

 

見栄えがあまり良くないのですが、もう少し慣れてきた頃に再挑戦します。今頑張るとどつぼにはまりそうです…。また経過をお知らせできればと思います。