ものづくりしているマコトです。
みなさんはいかがお過ごしですか？
私は仕事柄、平日と休日という区別はあまり意味を成しませんが、、、
お問合せや打ち合わせが、週末や祝日には入らようにしています。
本日は、そんなお休みの時に少しずつやってきたことがようやくひと段落したので、お話しようと思います。
本日はこんな方にオススメ
- ブログのグローバルメニューを変える流れを知りたい方
- 大まかな流れでおしゃれなカテゴリーの整理を知りたい方
- 私のブログメニューの「Youtube」が気になった方！
にオススメです！
これまでブログでやってきたこと
私が、少しずつ調べながらやってきたこと
それは
・グローバルメニュー作る
・カテゴリーページを綺麗に作る
ことでした。
グローバルメニューとは？
グローバルメニューは、グローバルナビゲーションと言われ
簡単にいうと
ブログ全体から、主要のページに行くためのものです。
これまでのこのブログ
パソコン画面で見ると、画面右側にカテゴリーや月日などで探すことができたものの、何について書かれているか、カテゴリーの名前だけで中々ブログを遡り辛い状態でした。
スマホであれば一番下まで、スクロールしないとカテゴリーなどを見ることができませんでした。
変身後のブログトップはこちら
パソコン画面
スマホ画面
スマホだと、メニューが少し見切れてしまいましたが、
メニューの部分を横にスライドすると、他のメニューが見えてきます！
新しく作ったカテゴリーページ
パソコン画面
スマホ画面
あまりパソコンとスマホで変わりませんでした・・・笑
ただ、ちゃんと小さい画面にも対応していてホッとしました。
ざっくりとした作り方
リニューアルの大まかな手順の流れ
- 記事のカテゴリー整理
- それぞれのカテゴリートップ（もしくはその下）画像の制作
- 固定ページにカテゴリーページを作る
- それぞれのカテゴリーページURLを、グローバルメニューに紐付け
1：記事のカテゴリー整理
参考サイトのちゃんこめさんも書かれていましたが、
ここが一番大変でした
ただ、
- どんなことを書きたいか
- どんな人に見てもらいたいか
- どんな人に役に立つか
などなど
自分自身のブログの方向性を見つめ直すとても良い機会になりました。
カテゴリーの階層化
ご存じかと思いますが、カテゴリーを階層にする場合は
カテゴリーの単語をハイフン「-」で繋いだカテゴリーを作ります。
第１階層：料理
第２階層：レシピ
第３階層：スイーツレシピ
としたい場合、記事でカテゴリー作成を行い
- 料理
- 料理-レシピ
- 料理-スイーツレシピ
と３つのカテゴリーを作成し、該当記事で選択すると階層化は完了します。
2：それぞれのカテゴリートップ（もしくはその下）画像の制作
記事の整理が終わったら、カテゴリーのトップ（もしくはその下）の画像を作ります。
画像を作るべきカテゴリーはどれか？
なぜトップか、トップの下かはカテゴリーの構成によります。
カテゴリーが１でお伝えしたような
料理・Youtube・お知らせ
といった風に、第１層だけであれば、それぞれのトップ画像を作ると良いと思います。
私の場合は
料理-レシピ-・・・
と第３階層まであるので、第２階層の「レシピ」の部分の画像を作成します。
画像を作るのは
それは、編集オプション→アイキャッチ画像のところにある
・
・・
・・・
Canva一択です！
はてなブログでは、アイキャッチ画像を無料素材や、自身の写真素材を用いて作ることができます。
是非使ってみてください。
これまでは、ブログのアイキャッチ制作も「Affinity Design」などを使っていましたが、アイキャッチ画像の作りやすさ、素材の多さを考えたらCanvaは本当にオススメです！
ここ最近でCanvaを使ったブログ
canvaで画像を作ったら
・右側にあるメニュー「＋写真を投稿」の下に
上の画像のような部分があると思うので、この画像の右側の矢印部分をクリックします。
・画像が保管されている、はてなブログのサーバに飛べるので、そこに保管されている、canvaで作成した画像のリンク情報を取得します。
・次に、カテゴリーのURLも取得しておきます。
3：固定ページにカテゴリーページを作る
・固定ページで、それぞれのカテゴリートップの名前で作ります。
・ちゃんこめさんの書かれている、htmlを固定ページにコピーします。
・それぞれ、カテゴリーのURLや、画像のURLをその固定ページの該当部分に追加します。
4：それぞれのカテゴリーページURLを、グローバルメニューに紐付け
i ) メニューの設置
ご自身の管理ページ→デザイン→ペンチマーク→ヘッダ
を開き、参考ページにある「ひつじの雑記帳」さんの新テーマブログにある、メニュー作成方法のhtmlで加えてください。
ii ) メニューアイコンの変更
私が今回使用しているテーマには、Font Awesomeが入っています。
上のサイトを参考にしていただき、アイコンの形や大きさなどを自由に変更してみてください。
そして、そのアイコンをクリックした際に固定ページに飛べるように、3で作成したURLをこちらに追加し紐付けできれば完了です！
参考ページ
カテゴリーページについて
id:chankome さんの記事
本当にありがとうございました。
グローバルメニューについて
id:codomisuさんの記事
このテーマは、非常にシンプルで使いやすいです！
いろいろなカスタマイズ方法も書かれていますので、是非使ってみてください。
最後に少しだけ動画の話
Youtubeチャンネルで紹介動画作りました
これまで、アップされた動画を適宜変えていたのですが、このチャンネルのオススメしたい方がいることを伝えたかったので、チャンネル紹介動画を作りました。
マコトの徒然チャンネルでは
毎週土曜日夜10時にYoutube動画を更新しています。
こちらでは、「歩いて感じた、京都の魅力」を発信しています。
マコトの徒然チャンネルはこんな方にオススメ！
- 街歩きが好き
- 地理歴史の「豆知識」が好き
- ラジオの様に「ながら聞き」したい
↑もし見て気に入っていただけましたら、チャンネル登録お願いします！↑
