【はてなブログ】カテゴリー階層化によりデザイン変更しました

\ 読者登録おねがいします /

f:id:kawarun:20200723132134j:plain:w450
こんにちは、カワルンです。

前回まで2回にわたってカテゴリーの階層化についての記事を書きました。

▷前編
www.kakuhashiru.com

▷後編
www.kakuhashiru.com

今回はカテゴリー階層化の番外編「ブログのデザイン変更」についてです。
いろいろなブログを参考にしながら、ブログを訪問してくれた方が、少しでも情報を見つけやすくなるように変更しました。

もくじ

<スポンサーリンク>


カテゴリーの階層化を終えて

2日間かけてカテゴリーの階層化を行いました。

ヤッター!終わったー!!
カテゴリーの階層化

階層化を終え、ブログを書き終えて一息ついたところで気がつきました。
階層化されたカテゴリーが確認できるのはパソコン版のサイドバーだけであることに。
f:id:kawarun:20200718195216j:plain

✔ カテゴリーを階層化したあとにチェック

・パソコン、スマホそれぞれからカテゴリーが表示されているか確認しましょう
・はてなブログのスマホ版は、カテゴリーが表示されるように設定しなければなりません


ヘッダー下のカテゴリーデザインを変更

パソコン版のヘッダー下のカテゴリーデザインを変更しました。

【BEFORE】
すでにヘッダーの下には親カテゴリーへのリンクを設置している状態でした。
f:id:kawarun:20200722160543p:plain

どのサイトを参考にして設置したのかを忘れてしまいました(^^;)
「ヘッダー下 カテゴリー はてなブログ」などで検索すると詳しく説明しているブログがでてきます。

こちらのブログで手順が丁寧に説明されています。
randamlife.hatenablog.com

【AFTER】
親カテゴリーのアイコンを作成しました。
f:id:kawarun:20200722165818p:plain

カーソルを合わせるとドロップダウンして子カテゴリーが表示されます。
f:id:kawarun:20200723132851p:plain

1.canvaでアイコン作成

canvaを使ってアイコン作成しました。
canvaについて、くわしくはコチラの記事でチェックしてください。
www.kakuhashiru.com

アイコン作成手順

1.canvaでアイコンと検索。
好きなデザインを選択します。
f:id:kawarun:20200722165919j:plain:w250

2.カテゴリー名を挿入します。
f:id:kawarun:20200722170016j:plain:w250

3.右下の「+」⇒「イラスト」をクリック。
イラストを挿入したら、できあがりです。
f:id:kawarun:20200722170131j:plain:w250

4.最後に作成した画像へ親カテゴリーへのリンクを設置します。
画像へのリンクの貼り方がわからない方はコチラをチェックしてくださいね!
www.dspt.net

2.多階層のドロップダウンの作成方法

いろいろな記事の中から私が求めるデザインが近い、こちらのブログを参考にさせていただきました。
blog.minimal-green.com

アイコンのデザインに合わせてカラー変更したり幅を調整したりしました。
設定を変更するのは大変な作業ですが、楽しいです!

スマホ版のフッタにカテゴリー覧を設置

はてなブログのスマホ版はカテゴリーが表示されないので、設置しなければなりません。
スマホ版はフッターにカテゴリー覧を設置しました。

スマホ版のデザインはまだ改良の余地ありです。
今回は疲れたので、ここまでとしておきます。

作製したアイコンを使い、なじむように「プロフィール」とデザインを合わせました。
f:id:kawarun:20200722171743j:plain:w450

スマホ版のフッターへカテゴリー覧を表示する方法はコチラのサイトが詳しく説明されています。
dacho-tamago.com

ふわっとさせる

TOPページの記事へカーソルを合わせるとフワッとなるように設定しました。

「フジブロっ!」さんのサイトを参考にさせていだきました。
以前からパソコンのお気に入りに追加してこっそり参考にしているサイトですが、最近ブロ友さんの旦那様であることがわかりました。
勉強になるので、ぜひチェックしてみてください!
www.fuji-blo.com

<スポンサーリンク>


まとめ

今回は「ブログデザイン変更」についてまとめました。

デザイン変更はなかなか大変な作業ですが、いろいろなブログで紹介しているので、助かります!
自分が求めるデザインに近いサイトのコードを参考にしながら、理想に近づけていくといいのではないでしょうか。

今回勝手にさまざまなサイトを紹介させていただきましたが、不都合があれば修正致しますのでお申し付けください。

ランキングに参加しています。よかったら応援お願いします。


ブログライターランキング