koblog

高校生のWEBデザインブログ

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

サムネイル

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

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

 

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

 

Milliard

関連記事ツール設定画面

 

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

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

 

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

chrome・検証

 

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

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

 

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
}
サムネイルPC
POPULAR
サムネイル

【コピペのみ】ブログのシェアボタンをシンプルでオシャレにカスタマイズしよう!

サムネイル

Twitterの「埋め込みタイムライン」を使う方法

サムネイル

【CSS】コードをオシャレに飾るボックスデザイン


スポンサーリンク


NEW POST
サムネイル

2019.8.30 Fri

Xcodeを使ってスマートフォン用サイトの動作確認をしてみる【Mac】

サムネイル

2019.4.09 Tue

【2019年版】Disqusのおすすめ設定

サムネイル

2019.8.07 Wed

JavaScriptでURLを遷移させる【ジャンプページを作る方法】

サムネイル

2019.6.12 Wed

JavaScriptでページのURLをコピーする機能を作ってみる

サムネイル

2019.6.04 Tue

はてなブログのCSSがスマホで反映されないときの対処法

サムネイル

2019.6.03 Mon

Javascriptで「前のページに戻る」リンクを作ってみる