あひるの化粧品と戯れる日記

化粧品開発者が化粧品やそれに関する知識、情報などを発信していくブログです。たまに無関係なことも書きます。

【Minimalismカスタマイズ】サイドバーの色変更、アイコンの設置

スポンサーリンク

 

どうも、あひるです。

ブログカスタマイズ第4弾です。

少しは、読者さんの参考になっていればよいでのすが・・・。

何度も言いますが、私はHTMLやCSSに関しての知識はないです。

色んな情報を集めて、カスタマイズするに至っています。

わからないからと、諦めず、この記事を読んで、少しでもカスタマイズを楽しんでもらえたら幸いです。

 

 

 

サイドバーのタイトルの見た目を変更

Minimalismのサイドバーって、ものすごくシンプルですよね。

そのシンプルさが、Minimalismの良い点ではありますけどね。

そのシンプルなサイドバーに、少しだけ手を加えるだけで、色々変更できるんです。

やり方は至って簡単。

下記のCSSをコピって、貼り付けるだけ。

 

サイドバー見た目の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のところで、線の太さ、色を変更できます。

カラーコードはこちら。

www.colordic.org

 

貼り付けるところは、

デザイン ⇒ カスタマイズ ⇒ デザイン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がわからない方は、こちら。

 

 

参考にした記事は、こちら。

blog.minimal-green.com

 

 

 

最後に

ブログのカスタマイズ、サイドバー編を説明してみました。

みなさんも、カスタマイズを楽しんでくださいね。

その他のカスタマイズは、こちら。

www.ahiru-nonnbiri-blog.work

 

最後までお読みいただき、ありがとうございます。

 

 

 

ホームへ戻る