【はてなブログ】カテゴリー階層化によりデザイン変更しました
こんにちは、カワルンです。
前回まで2回にわたってカテゴリーの階層化についての記事を書きました。
■ あわせて読みたい ■
今回はカテゴリー階層化の番外編「ブログのデザイン変更」についてです。
いろいろなブログを参考にしながら、ブログを訪問してくれた方が、少しでも情報を見つけやすくなるように変更しました。
カテゴリーの階層化を終えて
2日間かけてカテゴリーの階層化を行いました。
ヤッター！終わったー！！
階層化を終え、ブログを書き終えて一息ついたところで気がつきました。
階層化されたカテゴリーが確認できるのはパソコン版のサイドバーだけであることに。
✔ カテゴリーを階層化したあとにチェック
・パソコン、スマホそれぞれからカテゴリーが表示されているか確認しましょう
・はてなブログのスマホ版は、カテゴリーが表示されるように設定しなければなりません
・はてなブログのスマホ版は、カテゴリーが表示されるように設定しなければなりません
ヘッダー下のカテゴリーデザインを変更
パソコン版のヘッダー下のカテゴリーデザインを変更しました。
【BEFORE】
すでにヘッダーの下には親カテゴリーへのリンクを設置している状態でした。
※どのサイトを参考にして設置したのかを忘れてしまいました(^^;)
「ヘッダー下 カテゴリー はてなブログ」などで検索すると詳しく説明しているブログがでてきます。
こちらのブログで手順が丁寧に説明されています。
■ オススメ記事 ■
【AFTER】
親カテゴリーのアイコンを作成しました。
カーソルを合わせるとドロップダウンして子カテゴリーが表示されます。
1．canvaでアイコン作成
canvaを使ってアイコン作成しました。
canvaについて、くわしくはコチラの記事でチェックしてください。
■ あわせて読みたい ■
アイコン作成手順
1．canvaでアイコンと検索。
好きなデザインを選択します。
2．カテゴリー名を挿入します。
3．右下の「＋」⇒「イラスト」をクリック。
イラストを挿入したら、できあがりです。
4．最後に作成した画像へ親カテゴリーへのリンクを設置します。
画像へのリンクの貼り方がわからない方はコチラをチェックしてくださいね！
■ オススメ記事 ■
2．多階層のドロップダウンの作成方法
いろいろな記事の中から私が求めるデザインが近い、こちらのブログを参考にさせていただきました。
■ オススメ記事 ■
アイコンのデザインに合わせてカラー変更したり幅を調整したりしました。
設定を変更するのは大変な作業ですが、楽しいです！
スマホ版のフッタにカテゴリー覧を設置
はてなブログのスマホ版はカテゴリーが表示されないので、設置しなければなりません。
スマホ版はフッターにカテゴリー覧を設置しました。
スマホ版のデザインはまだ改良の余地ありです。
今回は疲れたので、ここまでとしておきます。
作製したアイコンを使い、なじむように「プロフィール」とデザインを合わせました。
スマホ版のフッターへカテゴリー覧を表示する方法はコチラのサイトが詳しく説明されています。
■ オススメ記事 ■
ふわっとさせる
TOPページの記事へカーソルを合わせるとフワッとなるように設定しました。
「フジブロっ！」さんのサイトを参考にさせていだきました。
以前からパソコンのお気に入りに追加してこっそり参考にしているサイトですが、最近ブロ友さんの旦那様であることがわかりました。
勉強になるので、ぜひチェックしてみてください！
■ オススメ記事 ■
まとめ
今回は「ブログデザイン変更」についてまとめました。
デザイン変更はなかなか大変な作業ですが、いろいろなブログで紹介しているので、助かります！
自分が求めるデザインに近いサイトのコードを参考にしながら、理想に近づけていくといいのではないでしょうか。
今回勝手にさまざまなサイトを紹介させていただきましたが、不都合があれば修正致しますのでお申し付けください。
