書く、走る。

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


はてなブロガーさんは読者登録をお願いします

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

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

■ あわせて読みたい ■



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

<スポンサーリンク>


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

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

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

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

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


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

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

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

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


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

■ オススメ記事 ■


【AFTER】
親カテゴリーのアイコンを作成しました。
カテゴリーアイコン

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

1.canvaでアイコン作成

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

■ あわせて読みたい ■


アイコン作成手順

1.canvaでアイコンと検索。
好きなデザインを選択します。
canva

2.カテゴリー名を挿入します。
アイコン作成

3.右下の「+」⇒「イラスト」をクリック。
イラストを挿入したら、できあがりです。
アイコン作成

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

■ オススメ記事 ■


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

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

■ オススメ記事 ■


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

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

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

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

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

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

■ オススメ記事 ■


ふわっとさせる

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

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

■ オススメ記事 ■


<スポンサーリンク>


まとめ

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

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

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