【Milliard】紹介文の前にアイコンをつける方法

WordPressやはてなブログで多く使われるMilliard。

簡単にオシャレにできたり、ブログの種類に縛られないことからも関連記事ツールとして定番になりつつあります。

このようにとても便利なMilliardですが、カスタマイズが少し難しいというデメリットがあります。そこで今回はコピペだけで紹介文の前にアイコンを付ける方法を紹介します。Milliardの紹介は他の記事でまとめたいと思います。

Milliard

関連記事ツール設定画面

紹介文の前にアイコンをつける方法

Milliardで生成されるコードはJavascriptのみなので、CSSによるカスタマイズがしづらくなっています。それでも公式でカスタマイズの際に使うクラス名が書かれているので、できないことはありません。

公式ページやブラウザーのデベロッパーツールから分かるように紹介文は「ssLimitedContainerHeader」と3つの<div>から出来ています。

ちなみに紹介文とは初期設定で表示される「こんな記事も書いてます」のことです。

アイコンを付けるコードは下のとおりです。

CSS
.ssLimitedContainerHeader > div > div > div::before {
  font-family: "Font Awesome 5 Free";
  content: "\f0f4";
  margin-right: 3px
}

上手くいくとこんな感じになります。コーヒーのアイコンを付けてみました。

アイコンにはFont Awesomeを使っています。

Font Awesomeについて詳しくはこちらをどうぞ。 

アイコンは何でも大丈夫なので「 」や「 」などブログに合うものがいいと思います。

またサイズは特に設定しなくて大丈夫です。

紹介文とアイコンの色を変えたい場合は下のコードで実装できます。

CSS
.ssLimitedContainerHeader > div > div > div {
  color: #fff /* 文字色 */
}
.ssLimitedContainerHeader > div > div > div::before {
  font-family: "Font Awesome 5 Free";
  content: "\f0f4";
  color: #000; /* アイコンの色 */
  margin-right: 3px
}