MAKO's diary

京都でものづくりしているマコトが、料理|旅行|Youtube|ITなどについて書いているブログです

【お知らせ】はてなブログのトップメニューとカテゴリーページを綺麗にする方法

f:id:nyaabe:20220223152837p:plain

ものづくりしているマコトです。

みなさんはいかがお過ごしですか?

私は仕事柄、平日と休日という区別はあまり意味を成しませんが、、、

お問合せや打ち合わせが、週末や祝日には入らようにしています。

本日は、そんなお休みの時に少しずつやってきたことがようやくひと段落したので、お話しようと思います。

くまさんがパソコンを操作しているイラスト

 

本日はこんな方にオススメ

  • ブログのグローバルメニューを変える流れを知りたい方
  • 大まかな流れでおしゃれなカテゴリーの整理を知りたい方
  • 私のブログメニューのYoutube」が気になった方!

にオススメです!

 

これまでブログでやってきたこと

私が、少しずつ調べながらやってきたこと

それは

グローバルメニュー作る

カテゴリーページを綺麗に作る

ことでした。

 

グローバルメニューとは?

グローバルメニューは、グローバルナビゲーションと言われ

簡単にいうと

ブログ全体から、主要のページに行くためのものです。

 

これまでのこのブログ

パソコン画面で見ると、画面右側にカテゴリーや月日などで探すことができたものの、何について書かれているか、カテゴリーの名前だけで中々ブログを遡り辛い状態でした。

 

スマホであれば一番下まで、スクロールしないとカテゴリーなどを見ることができませんでした。

f:id:nyaabe:20210723234541p:plain

変身後のブログトップはこちら

パソコン画面

 

スマホ画面

スマホだと、メニューが少し見切れてしまいましたが、

メニューの部分を横にスライドすると、他のメニューが見えてきます!

新しく作ったカテゴリーページ

パソコン画面

 

スマホ画面

あまりパソコンとスマホで変わりませんでした・・・笑

ただ、ちゃんと小さい画面にも対応していてホッとしました。

 

ざっくりとした作り方

リニューアルの大まかな手順の流れ

  1. 記事のカテゴリー整理
  2. それぞれのカテゴリートップ(もしくはその下)画像の制作
  3. 固定ページにカテゴリーページを作る
  4. それぞれのカテゴリーページURLを、グローバルメニューに紐付け

1:記事のカテゴリー整理

参考サイトのちゃんこめさんも書かれていましたが、

ここが一番大変でした

ただ、

  • どんなことを書きたい
  • どんな人に見てもらいたい
  • どんな人に役に立つ

などなど

自分自身のブログの方向性を見つめ直すとても良い機会になりました。

カテゴリーの階層化

ご存じかと思いますが、カテゴリーを階層にする場合は

カテゴリーの単語をハイフン「-」で繋いだカテゴリーを作ります。

第1階層:料理

第2階層:レシピ

第3階層:スイーツレシピ

としたい場合、記事でカテゴリー作成を行い

  • 料理
  • 料理-レシピ
  • 料理-スイーツレシピ

3つのカテゴリーを作成し、該当記事で選択すると階層化は完了します。

2:それぞれのカテゴリートップ(もしくはその下)画像の制作

記事の整理が終わったら、カテゴリーのトップ(もしくはその下)の画像を作ります。

画像を作るべきカテゴリーはどれか?

なぜトップか、トップの下かはカテゴリーの構成によります。

カテゴリーが1でお伝えしたような

料理・Youtube・お知らせ

といった風に、第1層だけであれば、それぞれのトップ画像を作ると良いと思います。

 

私の場合は

料理-レシピ-・・・

と第3階層まであるので、第2階層の「レシピ」の部分の画像を作成します。

画像を作るのは

それは、編集オプション→アイキャッチ画像のところにある

・・

・・・

Canva一択です!

はてなブログでは、アイキャッチ画像を無料素材や、自身の写真素材を用いて作ることができます。

是非使ってみてください。

 

これまでは、ブログのアイキャッチ制作も「Affinity Design」などを使っていましたが、アイキャッチ画像の作りやすさ、素材の多さを考えたらCanvaは本当にオススメです!

ここ最近でCanvaを使ったブログ

makotolabo.hatenablog.com

makotolabo.hatenablog.com

makotolabo.hatenablog.com

 

canvaで画像を作ったら

・右側にあるメニュー「+写真を投稿」の下に

hatena Blog(privat

上の画像のような部分があると思うので、この画像の右側の矢印部分をクリックします。

・画像が保管されている、はてなブログのサーバに飛べるので、そこに保管されている、canvaで作成した画像のリンク情報を取得します。

・次に、カテゴリーのURLも取得しておきます。

3:固定ページにカテゴリーページを作る

・固定ページで、それぞれのカテゴリートップの名前で作ります。

・ちゃんこめさんの書かれている、htmlを固定ページにコピーします。

・それぞれ、カテゴリーのURLや、画像のURLをその固定ページの該当部分に追加します。

 

4:それぞれのカテゴリーページURLを、グローバルメニューに紐付け

i ) メニューの設置

ご自身の管理ページ→デザイン→ペンチマーク→ヘッダ

を開き、参考ページにある「ひつじの雑記帳」さんの新テーマブログにある、メニュー作成方法のhtmlで加えてください。

 

 

ii ) メニューアイコンの変更

h2ham.net

私が今回使用しているテーマには、Font Awesomeが入っています。

上のサイトを参考にしていただき、アイコンの形や大きさなどを自由に変更してみてください。

そして、そのアイコンをクリックした際に固定ページに飛べるように、3で作成したURLをこちらに追加し紐付けできれば完了です!

 

参考ページ

カテゴリーページについて

id:chankome さんの記事

www.chankome.com

本当にありがとうございました。

グローバルメニューについて

id:codomisuさんの記事

hitsuzi.hatenablog.com

このテーマは、非常にシンプルで使いやすいです!

いろいろなカスタマイズ方法も書かれていますので、是非使ってみてください。

 

最後に少しだけ動画の話

Youtubeチャンネルで紹介動画作りました

これまで、アップされた動画を適宜変えていたのですが、このチャンネルのオススメしたい方がいることを伝えたかったので、チャンネル紹介動画を作りました。


www.youtube.com

マコトの徒然チャンネルでは

毎週土曜日夜10時Youtube動画を更新しています。

こちらでは、「歩いて感じた、京都の魅力」を発信しています。

マコトの徒然チャンネルはこんな方にオススメ!

マコトの徒然チャンネルこんな方にオススメ マコトの京都路案内、準備中、準備中、その1観光は街歩きで楽しみたい、その2地名・歴史の豆知識が好き、その3ラジオの様に長ら聞きをしたい!

  1. 街歩きが好き
  2. 地理歴史の「豆知識」が好き
  3. ラジオの様に「ながら聞き」したい

 

www.youtube.com

↑もし見て気に入っていただけましたら、チャンネル登録お願いします!↑