こんにちはブログデザインを模索中の管理人のredoです。
CSSとFontAwesomeを使って「はてなブログ」のサイドバーのデザインをお洒落にカスタマイズする方法をご紹介したいと思います。
少しでもブログの回遊率をあげるためにはブログカスタマイズは重要です。やはり有名なブロガーの方ほどブログのデザインにこだわっているのは一目見て分かりますよね。
今回ご紹介するFontAwesomeを設定しておくと、サイドバーに限らずグローバルメニューやトップへ戻るボタン、記事の更新アイコンなど様々な用途で使えるので大変便利です。
"無料"で簡単に実装できますので、まだ未実装の方はこの機会に実装しておきましょう。サイドバーのカスタマイズは「無料はてなブログ」でも実装可能ですよ。
サイドバーのデザイン変更(カスタマイズ)イメージ
変更前
これもシンプルで悪くないですが、グレーのバーだけでは少し味気ない感じもしますよね。ちょっとした工夫の一つでブログの見え方も随分変わってきます。
カスタマイズした後が下記のようになります。
カスタマイズ後
記事内検索の左に「🔍マーク」プロフィールやSNSの左横にそれぞれ「プロフィールマーク,★マーク」が付き、少しお洒落な感じになりました。カテゴリーや注目記事にも可愛らしいアイコンが付いて見やすくなりました。
Wordpressでは当たり前のようにこの様なデザインが実装されているブログを見かけることが多いですが、はてなブログでは意外と少ないんです。
ぜひ実装をして、ブログデザインを自分なりにカスタマイズしてみましょう。
ちなみに上の図のようにオシャレなTwitter、instagram,Hatena読者ボタンも簡単実装できますので、こちらも後日紹介したいと思います。
カスタマイズしたほうがパッと見てわかりやすいね！
FontAwesomeとは？
Font Awesomeは数多くのブログアイコンが無料で使用できる便利ツールです。ただし、HTML環境での使用に限ります。
下準備：コードをコピーし,headタグにコードを追加しましょう。
<link href="https://use.fontawesome.com/releases/v5.6.1 /css/all.css" rel="stylesheet">
「管理画面」→「設定」→「詳細設定」→「headに要素を追加」
「はてなブログ」の場合
管理画面の「設定」→「詳細設定」→「head要素を追加」でコードに貼り付け
「WordPress」の場合
「ダッシュボード」→「外観」→「テーマエディター」→右バー[header.php]
「はてなブログ」でのアイコンフォント対応方法も紹介しています。
FontAwesomeを使った「トップに戻るボタン」の実装方法も紹介しています。
「記事の更新日」を実装するときの円形の矢印マークもFontAwesomeを使っています。
「デザインCSS」への実装コード(コピペ可)
下記コードを「デザイン」→「カスタマイズ(トルクアイコン)」→デザインCSS
へ貼り付けてください。
デザインCSS実装コード
※コピペする際には改行には気を付けて下さいね。また、必ず実装する前にはバックアップをとるようにしましょう。使用しているブログのテーマによっては反映しない場合もあるので、必ず事前確認が必要です。
CSSコードの簡単な説明
/*----Titledefault----*/
.hatena-module-title,
.hatena-module-title::before,
.hatena-module-title::after { background: none; border: none; }
上のコードでタイトルデザインのデフォルト化(リセット)をしています。
.hatena-module-title
{ position: relative;
color: white;/* 文字色 */ →ここで文字色変更可能
background: #81d0cb;/* 背景色 */ →ここで背景色変更可能
line-height: 1.4; padding: 0.5em 0.5em 0.5em 1.8em;/* タイトル内の余白 */ margin: 0px -10px 20px -10px;/* タイトルの位置を調整。 */ }
赤字の箇所(colorとbackground)を変更することで、「文字色」と「背景色」が変更できます。各自のブログデザインにあわせて変更しましょう。
/*----プロフィール----*/ .
hatena-module-profile
.hatena-module-title:before
{ font-family: "Font Awesome 5 Free";
content: "2bb";/* アイコンフォント */ →ここでフォントの種類変更可能
position: absolute; left : 0.5em; }
赤字の箇所(content)を変更することで、フォントを自由に変更できます。
各自で好みの色やデザインに変更できるのはイイね
いかがでしたでしょうか。サイドバーのデザインは意外と後回しにしがちな部分ではありますが、コピペで数分で簡単実装できるならやってみる価値はあると思います。Font Awesomeはホント便利です。
有料のアイコンもありますが、基本的なアイコンはほぼ無料で使えますので、まだ使っていない方はぜひHeadで設定しておきましょう。
サイドバーはもちろんパッと見だけでなく、配列や内容も大切です。こちらの記事にもわかりやすく紹介されています。
ブログのサイドバーはこう使え！知らないと損する５つの使い方 – NET BIZA
まとめ
・CSSとFontAwesomeでサイドバーのタイトルレイアウトをお洒落にする方法を紹介
・CSSの実装で数分で簡単実装可能！
・文字色や背景色,アイコンを変更すれば自分好みのレイアウトに変更可能