こんにちはブログデザインを模索中の管理人のredo (@redo5151)です。
今回は「はてなブログ」のサイドバーをおしゃれにカスタマイズする方法を紹介します。
ブログ初心者の方でも「デザイン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実装コード
【注意事項】
FontAwesome5からはCSSでアイコンを表示する場合に、font-weightも合わせて指定する必要があります。
Solidタイプのアイコンを表示するときには「font-weight: 900;」を、Regularタイプのアイコンを表示するときは「font-weight: 400;」を合わせて書きましょう。
検索と最新記事のアイコンはSolidタイプだったため、font-weightの記述がないと表示されないようです。
また、必ず実装する前にはバックアップをとるようにしましょう。
使用しているブログのテーマによっては反映しない場合もあるので、必ず事前確認が必要です。
「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: "\f2bb"; ⇒ここでお好きなアイコンに変更しましょう。
/* アイコンフォント */
position: absolute;
left : 0.5em; }
赤字の箇所(content)を変更することで、フォントを自由に変更できます。
各自で好みの色やデザインに変更できるのはイイね
いかがでしたでしょうか。サイドバーのデザインは意外と後回しにしがちな部分ではありますが、コピペで数分で簡単実装できるならやってみる価値はあると思います。Font Awesomeはホント便利です。
有料のアイコンもありますが、基本的なアイコンはほぼ無料で使えますので、まだ使っていない方はぜひHeadで設定しておきましょう。
サイドバーはもちろんパッと見だけでなく、配列や内容も大切です。こちらの記事にもわかりやすく紹介されています。
ブログのサイドバーはこう使え！知らないと損する５つの使い方 – NET BIZA
ココナラならブログデザインの依頼もできる！
ココナラ（coconara・kokonara）は、自分のスキルを販売できるサービスです。
人気女優の吉岡里帆さんがCMで起用され目を引いた方も多いのではないでしょうか。
知識・スキル・経験を売り買いできるフリーマーケットとしては最も人気で有名なサービスになります。
やり取りは匿名で可能で、決済もサイト上でできるので安全に利用することができます。
・アイコン、似顔絵作成
・WEB・IT関係の相談(WEBデザイン)
・結婚、恋愛、子育て相談
・悩み相談
・占い
・美容相談
・マネーや住宅の相談
・料理
・趣味のレクチャー
・音声・画像・動画制作
・就活・キャリア・留学相談
・ビジネス関係のスキルアップ
・語学
・アフィリエイトや副業の相談
私も実はココナラで「はてなブログのWEBデザイン代行」「登山の提案」「Excel代行」の販売も行っており、それぞれで販売実績もあります。
ココナラで「redo」で検索して頂ければ見つかるかと思います。
過去には、企業の方からの依頼もあり、はてなブログのWEBデザインの代行対応をしたこともあります。
実際に利用してみて、一度の依頼で数時間程度で完了した依頼も多く、数千円の利益になるので、とても気軽にできました。
一方で、依頼は様々で自分が対応できる枠を超えたような依頼もありました。でもこの場合は事前の見積もり段階でお断りすることも可能なので、本当に気軽にスキルを売買できるのでおすすめなスキルマーケットです。
例えばブログのデザインを整えるのに自分では自信が無い方はココナラで依頼してみるのもおすすめです。
もしくは自分の得意なスキルを販売することもできるので、気軽に副業の一環として初めてみましょう。
まとめ
・CSSとFontAwesomeでサイドバーのタイトルレイアウトをお洒落にする方法を紹介
・CSSの実装で数分で簡単実装可能！
・文字色や背景色,アイコンを変更すれば自分好みのレイアウトに変更可能
今回ご紹介しているコードもFontawesomeの更新など様々な理由でうまく反映できなくなってしまう場合がありますので、コメント頂ければ対応いたします。
これからブログカスタマイズに力を入れようと考えている皆さんに少しでもお力になれれば幸いです。
はてなブログで収益化をめざしている方へ向けて、100記事作成時の収益やＰＶも公開しています。