どうも、あひるです。
ブログカスタマイズ第4弾です。
少しは、読者さんの参考になっていればよいでのすが・・・。
何度も言いますが、私はHTMLやCSSに関しての知識はないです。
色んな情報を集めて、カスタマイズするに至っています。
わからないからと、諦めず、この記事を読んで、少しでもカスタマイズを楽しんでもらえたら幸いです。
サイドバーのタイトルの見た目を変更
Minimalismのサイドバーって、ものすごくシンプルですよね。
そのシンプルさが、Minimalismの良い点ではありますけどね。
そのシンプルなサイドバーに、少しだけ手を加えるだけで、色々変更できるんです。
やり方は至って簡単。
下記のCSSをコピって、貼り付けるだけ。
/*--------------------------------------
サイドバーのタイトルの見た目
--------------------------------------*/
.hatena-module-title{
font-size: 16pt;
color: #4d504c;
border-top: 2px solid #ffefe0;
border-bottom: 2px solid #ffefe0;
padding:3px 0px 3px 10px;
}
font-sizeで、文字の大きさが変更できます。
colorで、文字の色が変更できます。
boderのところで、線の太さ、色を変更できます。
カラーコードはこちら。
貼り付けるところは、
デザイン ⇒ カスタマイズ ⇒ デザインCSS
変更はきちんと保存してくださいね。
たまに忘れるやつです。
サイドバーのタイトル横にアイコンを設置する方法
せっかくなので、サイドバーにアイコンも設置してみませんか？
こちらもコピペで簡単に貼り付けることができます。
コピペするCSSは、こちら。
/*--------------------------------------
サイドバーのタイトルの横にアイコン設置
--------------------------------------*/
.hatena-module-title:before {
font-family: FontAwesome;
font-size: 1.5em;
font-weight: normal;
font-style: normal;
display: inline-block;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.hatena-module-profile .hatena-module-title:before {content: "\f007";}
.hatena-module-search-box .hatena-module-title:before {content:'\f002'}
.hatena-module-links .hatena-module-title:before {content:'\f0c1'}
.hatena-module-recent-entries .hatena-module-title:before {content:'\f005'}
.hatena-module-archive .hatena-module-title:before {content:'\f187'}
.hatena-module-entries-access-ranking .hatena-module-title:before {content:'\f091'}
.hatena-module-category .hatena-module-title:before {content:'\f02c'}
.hatena-module-recent-comments .hatena-module-title:before {content:'\f086'}
.hatena-module-circles .hatena-module-title:before {content:'\f0c0'}
.hatena-module-related-entries .hatena-module-title:before {content:'\f00b'}
このCSSの貼り付け先は
デザイン ⇒ カスタマイズ ⇒ デザインCSS
変更はきちんと保存してくださいね。
このCSSを貼り付けることで、基本的なサイドバータイトルに、アイコンがつくと思います。
オリジナルのサイドバータイトル、
私の場合、オススメコスメの見出しには、アイコンはつかないです。
つけたい場合は、さらにCSSをいじらないといけないですが、そのスキルはなくて・・・。
まぁ、特殊なタイトルでなければ、アイコンを付けることは可能でうすので、これで十分かと。
FontAwesomeがわからない方は、こちら。
参考にした記事は、こちら。
最後に
ブログのカスタマイズ、サイドバー編を説明してみました。
みなさんも、カスタマイズを楽しんでくださいね。
その他にもカスタマイズに関して記事を書いています。参考になれば、幸いです。
- 「【Minimalismカスタマイズ】グローバルメニューの設置方法」
- 「【はてなブログカスタマイズ】文字サイズ変更、マーカー、見出しの変更方法」
- 「【はてなブログカスタマイズ】ボックスデザイン、ボタンの設置方法」
- 「【はてなブログ】固定ページ活用方法 プライバシーポリシーとお問い合わせの作り方」
- 「【はてなブログカスタマイズ】トップ画面をホームページへ変える方法」
- 「【はてなブログ】ブログ回遊率（PV数）を上げる方法」
また、オススメのアイテムについても書いていますので、良ければ参考程度に。
「【これで決まり！】Macbookキーボードカバー（ moshi clearguard MB）」
「【オススメの良品】シャトルデイパックスリム（ノースフェイス）」
「【モバイルバッテリー】Anker PowerCore 13000」
最後までお読みいただき、ありがとうございます。
