Rikiによる知識財産の共有

【素敵なおじさん化計画中!】

【ブログを見やすくする⑩】目次のタイトルの頭にアイコンをつけよう

どうもみなさん!Rikiです!

読みやすいブログを作るためにデザインを試行錯誤していて、今回は第十弾となります。

前回は、これまでに挙げた目次のデザインを変更する方法をまとめを記事にしました。以下をご覧ください。

www.riki-riki.com

今回は見出しのタイトルの頭にアイコンを入れる方法をお伝えします。

 

ブログを見やすくする⑩〜目次のタイトルの頭にアイコンをつけよう〜

目次のタイトルの頭にアイコンつける方法

途中までは前回までの記事と同じです。重複になりますが説明します。

まずはてなブログのデザイン変更のページへいき、”カスタマイズ”を選択します。そこに”デザインCSS”というものがあるので、それをクリックします。

クリックしたら下に白いウィンドウが出てくるので、そこをさらにクリックします。

 

ここに改行して以下のようなテキストを入力します。

 

.table-of-contents:before {

font-family: 'blogicon';

content: "\f039 目次";

font-size: 110%;

font-weight:bold;

top: 0px;/*上からの位置調整*/

left: 0px; /*左からの位置調整*/

color:#696969;

}

 

そして変更を保存すると、あなたの目次のタイトルの頭にアイコンが入ります。

f:id:Riki-Riki:20200308130747p:plain

 

以前も出てきた”.table-of-contents:before”の項目に追加しているだけです。

追加しているのは、2行目の”font-family: 'blogicon';”とcontent内の”\f039”です。

 

”\f039”はアイコンの種類です。この数字を変えるといろんなアイコンが使用できます。

 

これらの部分をいじって好みのデザインに変えてみてください。

 

CSSの入力方法がわからない人は以下の記事を参考にしてください。

https://www.riki-riki.com/entry/2020/02/26/224804

 

今後

これで目次のタイトルの頭にアイコンを入れられるようになりました。目次を見やすくデザインをいじる方法はまだまだあります。引き続きお伝えしていきます。