【webデザイン】コピペするだけ！サイドバーやエントリーのタイトル横にアイコンを表示させる方法

f:id:mshimfujin:20160724195409j:plain

こんにちは、えむしです。

今回は、記事やエントリーのタイトルの横にちょっとしたアイコンをつけるカスタマイズをしてみようと思います。

付けてる人も多いと思いますが、なにも付けていない方はちょっとしたアクセントに如何でしょう？ただ今サイトの模様替え中です。 f:id:mshimfujin:20160923144859p:plain 以下のサイトを参考にさせていただきました。ありがとうございます。

hapisupu.com

先ずはfontawesome
次にcss
アイコンをデフォルトの物から変更する
応用

先ずはfontawesome

さくっとやり方を。
タイトル下にfontawesomeを呼び出し。
場所は「デザイン」→「カスタマイズ」→「ヘッダー」→「タイトル下」です。 f:id:mshimfujin:20160729105418p:plain
ここをクリックして
f:id:mshimfujin:20160729105431p:plain
以下を一番上にコピペ。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">

もう別でfontawesome呼び出してるーって人は必要ありません。次に進んでください。新しいアイコンが使いたいって方は上のコードと置き換えておいてください。4.6.3が最新です。(2016年9月28日現在)

次にcss

今度はここを開きます。

以下のコードを一番下なんかにコピペ。

/* hatena-module-titleの手前にアイコンを付ける */
.hatena-module-title:before {
    font-family:"FontAwesome";
    content:"\f06c";/* アイコンを変えたいときはココを変更 */
    color:#5d5d5d;/* アイコンの色 */
    font-size:18px;/* アイコンの大きさ */
    margin-right:9px;/* 文字列までの距離 */
}

完成です。 f:id:mshimfujin:20160923140915p:plain
つけたいアイコンの色や、タイトルのフォントサイズ等は各々環境が違うと思うのでそこはご自分で調整お願いします。

色の見本はこちらを参考にされてはいかがでしょう。 www.colordic.org webdesignrecipes.com

アイコンをデフォルトの物から変更する

アイコンを変更したい時は、アイコンのUnicodeを調べます。調べ方は、 fontawesome.io こちらから、好きなアイコンを選んでクリック。今回は汎用性の高そうなチェックマークを選ぶ事にします。こちらをクリック。 f:id:mshimfujin:20160923135913p:plain
で、開いてUnicodeを調べます。 f:id:mshimfujin:20160923140001p:plain
見ると、「f00c」である事がわかったので「f06c」を消して、入力。 cssはこんな感じに。

/* hatena-module-titleの手前にアイコンを付ける */
.hatena-module-title:before {
    font-family:"FontAwesome";
    content:"\f00c";/* アイコンを変えたいときはココを変更 */
    color:#5d5d5d;/* アイコンの色 */
    font-size:18px;/* アイコンの大きさ */
    margin-right:9px;/* 文字列までの距離 */
}

再び完成図。 f:id:mshimfujin:20160923140105p:plain
簡単です。

応用

ちょっと書き換えるだけでエントリータイトルの手前にもアイコンをつけられます。完成図 f:id:mshimfujin:20160923143523p:plain
エントリータイトルの前に◎がついていますね。こんな感じにするには以下のコードを貼り付けてください。

/* entry-titleの手前にアイコンを付ける */
.entry-title:before {
    font-family:"FontAwesome";
    content:"\f140";
    color:#5d5d5d;
    font-size:30px;
    margin-right:0px;
}