すまてくブログ

コピペするだけ!よく使うWebアイコンFont Awesomeまとめ(はてなブログ)

*当ページのリンクには広告が含まれています。

f:id:smatech:20190127111305j:plain

こんにちは、ヨシタカです!
みなさん、ブログ楽しんでますか?

ふと色々なブログをのぞいてみると、色々なアイコンが使われているのに気づきました。

POINT!

とか

すまてくブログ

とかありますよね。

ブログにアイコンを使うとなんか楽しい感じになりますよね。

このアイコンってどうやれば使えるんだろう?

実は、よく見るWebアイコンはFont Awesomeというものを使っていて、コピペするだけでかんたんに自分のブログにも使えるんです!

ブログのデザインテーマにもWebアイコンってあちこちに使われています。

たとえばこのすまてくブログのTOPページにもこんな感じで使っていたり、

f:id:smatech:20190214232159p:plain

【画像出典】すまてくブログ

目次で使われている もWebアイコンだったりします。

今回、このWebアイコンについて「コピペするだけ!」シリーズとしてまとめてみましたのでご紹介します。

Font Awesomeってなに?

Font Awesomeとはアイコンを文字として表示できるツールです。

公式サイト:Font Awesome, the iconic font and CSS toolkit

画像ではなく文字なので、大きさや色などを自由に変更することができるんです。

たとえば、

ハートアイコン ですが、

かんたんに大きさを変えたり、

色を変えたり出来るんです。

なんだったら合わせ技も可能です!

Font Awesomeの使い方

それでは、はてなブログでの使い方をご紹介します。

まず、設定→詳細設定→検索エンジン最適化のheadに要素を追加に下のコードをコピペします。

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

f:id:smatech:20190215193641p:plain

【画像出典】はてなブログ設定画面

あとは、<i class〜></i>というコードを記事編集欄にコピペするだけです!

たとえば<i class="fa fa-heart"></i>というコードをコピペすればハートのアイコン が表示されます。

【見たままモード】だと使えないんだけど・・・

【見たままモード】での記事編集の場合、HTMLタブに記述するとなぜか消えてしまうので注意です。Markdownをおすすめします。

文字と同様に記事編集画面のアイコンを使えばかんたんに拡大したり色付けできるんです。

f:id:smatech:20190214214544p:plain

【画像出典】はてなブログ記事編集画面

それでは、ハートアイコン を使っていろいろと試してみましょう!

大きさを変更する

はてなブログの場合、記事編集画面の【文字の大きさ】アイコンを使うと、コードが自動で入力されます。

"font-size: 80%"のXX%を変えれば好きなサイズに変更できます^^

<span style="font-size: 80%"><i class="fa fa-heart"></i></span>
<i class="fa fa-heart"></i>
<span style="font-size: 150%"><i class="fa fa-heart"></i></span>
<span style="font-size: 200%"><i class="fa fa-heart"></i></span>

記事編集画面の【文字の大きさ】アイコンを使わずに、別の書き方でも出来ます。

<i class="fa fa-heart fa-lg"></i>
<i class="fa fa-heart fa-2x"></i>
<i class="fa fa-heart fa-3x"></i>
<i class="fa fa-heart fa-4x"></i>
<i class="fa fa-heart fa-5x"></i>

色付けする

色付けも自由自在です。記事編集画面で【文字色】アイコンから好きな色を選べば自動でコードが入力されます。

カラーコード#XXXXXXを変えれば好きな色に変えられますので、いろいろと試してみてくださいね^^

Webカラーコード参考サイト:WEB色見本 原色大辞典 - HTMLカラーコード

<span style="color: #d32f2f"><i class="fa fa-heart"></i></span>
<span style="color: #673ab7"><i class="fa fa-heart"></i></span>
<span style="color: #1464b3"><i class="fa fa-heart"></i></span>
<span style="color: #00796b"><i class="fa fa-heart"></i></span>
<span style="color: #286f2c"><i class="fa fa-heart"></i></span>
<span style="color: #dd830c"><i class="fa fa-heart"></i></span>

いろいろアニメーション

アイコンに動きをつけることができます。

参考サイト:Font Awesome Animation

設定→詳細設定→検索エンジン最適化のheadに要素を追加にさらに下のコードをコピペします。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.10/font-awesome-animation.css" type="text/css" media="all" />

f:id:smatech:20190215193838p:plain

【画像出典】はてなブログ設定画面

次に、

<i class="アイコン名 アニメーション名"></i>

という形でアニメーション名を追加します。

(注意)アイコン名とアニメーション名の間に半角スペースを空けてくださいね。

一度にたくさん使うと目が疲れるので、ここぞという時に使うと効果的かと思います。

動き 名前 コード例
faa-shake animated <i class="fa fa-heart faa-shake animated"></i>
faa-tada animated <i class="fa fa-heart faa-tada animated"></i>
faa-wrench animated <i class="fa fa-heart faa-wrench animated"></i>
faa-ring animated <i class="fa fa-heart faa-ring animated"></i>
faa-vertical animated <i class="fa fa-heart faa-vertical animated"></i>
faa-horizontal animated <i class="fa fa-heart faa-horizontal animated"></i>
faa-float animated <i class="fa fa-heart faa-float animated"></i>
faa-bounce animated <i class="fa fa-heart faa-bounce animated"></i>
faa-spin animated <i class="fa fa-heart faa-spin animated"></i>
faa-pulse animated <i class="fa fa-heart faa-pulse animated"></i>
faa-flash animated <i class="fa fa-heart faa-flash animated"></i>
faa-passing animated <i class="fa fa-heart faa-passing animated"></i>
faa-passing-reverse animated <i class="fa fa-heart faa-passing-reverse animated"></i>
faa-burst animated <i class="fa fa-heart faa-burst animated"></i>

アニメーションスピードの変更

アニメーションのスピードを変えることができます。

速くしたいときは、faa-fastを追加、

遅くしたいときは、faa-slowを追加します。

(注意)アニメーション名との間の半角スペースをお忘れなく

たとえば、

速くしたいときは・・・

<i class="fa fa-heart faa-pulse animated faa-fast"></i>

遅くしたいときは・・・

<i class="fa fa-heart faa-pulse animated faa-slow"></i>

3つならべてみると・・・

ってな感じです。

組み合わせもOK!

これまでのコードを組み合わせてみると・・・

<span style="color: #ff5252"><span style="font-size: 100%"><i class="fa fa-heart faa-pulse animated faa-slow"></i></span></span>
<span style="color: #2196f3"><span style="font-size: 200%"><i class="fa fa-heart faa-pulse animated"></i></span></span>
<span style="color: #5ed361"><span style="font-size: 300%"><i class="fa fa-heart faa-pulse animated faa-fast"></i></span></span>

ってな感じになります。

やってみるとけっこうハマるので、
いろいろなアニメーションで試してみてくださいね

使い方のおさらいと応用

←このコードの手順が気になった方は一緒にやってみてください^^

これまでのおさらいとちょっと応用してみましょう!

1. <i class="fa fa-smile-o"></i><i class="fa fa-heart-o"></i>をコピペ

あとでアイコンのコードは表でご紹介します^^

<i class="fa fa-smile-o"></i>
<i class="fa fa-heart-o"></i>

2.アニメーションをつけたいアイコンにアニメーションコードをコピペ

今回はfaa-float animatedを追記して<i class="fa fa-heart-o faa-float animated"></i>としています。

アイコン名とアニメーション名の間の半角スペースをお忘れなく♪

<i class="fa fa-smile-o"></i>
<i class="fa fa-heart-o faa-float animated"></i>

3.<i class="...">~</i>までをマウスでクリックしながら動かし選択(ドラッグ)し、タイトル下の【文字色アイコン】で好きな色を選択

選ぶと#2196f3とか#ff5252とかカラーコードも自動で記述されます。

<span style="color: #2196f3"><i class="fa fa-smile-o"></i></span>
<span style="color: #ff5252"><i class="fa fa-heart-o faa-float animated"></i></span>

4.おなじように、<i class="...">~</i>までをマウスでクリックしながら動かし選択(ドラッグ)して、タイトル下の【文字の大きさアイコン】で好きな大きさを選択

xx%をいじれば大きさは自由自在(^^)v

<span style="font-size: 150%"><span style="color: #2196f3"><i class="fa fa-smile-o"></i></span></span>
<span style="color: #ff5252"><i class="fa fa-heart-o faa-float animated"></i></span>

5.【応用】上付きにしたいアイコンを上付きコード<sup>~</sup>ではさむ!

<span style="font-size: 150%"><span style="color: #2196f3"><i class="fa fa-smile-o"></i></span></span>
<sup><span style="color: #ff5252"><i class="fa fa-heart-o faa-float animated"></i></span></sup>

※前回のMarkdown記事に書いた上付きコマンド<sup>~</sup>を応用しているんです。

https://www.smatechblog.com/entry/markdownwww.smatechblog.com

習うより慣れよ、ぜひ試してみてくださいね。ここまでがFont Awesomeのかんたんな使い方です

よく使うWebアイコンまとめ一覧

公式サイト:Font Awesome Icons で検索すると色々なアイコンが出てきます。

色々な種類があるので、楽しいです^^

・・・がなかなか探すの大変なんですよね;

そこで、下の表によく使うWebアイコンをまとめてみましたので、参考になればと思います。

特にチェック系!?系矢印系ってよく目にしませんか?

注目して欲しいところ見出しによーく使われているんです。

ブログでよく使われるアイコン

アイコン 名前 コード
fa fa-home <i class="fa fa-home"></i>
fa fa-bookmark <i class="fa fa-bookmark"></i>
fa fa-bookmark-o <i class="fa fa-bookmark-o"></i>
fa fa-tag <i class="fa fa-tag"></i>
fa fa-cog <i class="fa fa-cog"></i>
fa fa-external-link <i class="fa fa-external-link"></i>
fa fa-envelope <i class="fa fa-envelope"></i>
fa fa-envelope-o <i class="fa fa-envelope-o"></i>
fa fa-comment <i class="fa fa-comment"></i>
fa fa-comment-o <i class="fa fa-comment-o"></i>
fa fa-phone <i class="fa fa-phone"></i>
fa fa-mobile <i class="fa fa-mobile"></i>
fa fa-tablet <i class="fa fa-tablet"></i>
fa fa-laptop <i class="fa fa-laptop"></i>
fa fa-sitemap <i class="fa fa-sitemap"></i>
fa fa-user <i class="fa fa-user"></i>
fa fa-user-o <i class="fa fa-user-o"></i>
fa fa-user-circle <i class="fa fa-user-circle"></i>
fa fa-user-circle-o <i class="fa fa-user-circle-o"></i>
fa fa-male <i class="fa fa-male"></i>
fa fa-female <i class="fa fa-female"></i>
fa fa-child <i class="fa fa-child"></i>
fa fa-clock-o <i class="fa fa-clock-o"></i>
fa fa-calendar <i class="fa fa-calendar"></i>
fa fa-calendar-o <i class="fa fa-calendar-o"></i>
fa fa-smile-o <i class="fa fa-smile-o"></i>
fa fa-frown-o <i class="fa fa-frown-o"></i>
fa fa-meh-o <i class="fa fa-meh-o"></i>
fa fa-line-chart <i class="fa fa-line-chart></i>
fa fa-bar-chart <i class="fa fa-bar-chart></i>
fa fa-wrench <i class="fa fa-wrench"></i>
fa fa-graduation-cap <i class="fa fa-graduation-cap"></i>
fa fa-info-circle <i class="fa fa-info-circle"></i>
fa fa-thumbs-up <i class="fa fa-thumbs-up"></i>
fa fa-thumbs-o-up <i class="fa fa-thumbs-o-up"></i>
fa fa-thumbs-down <i class="fa fa-thumbs-down"></i>
fa fa-thumbs-o-down <i class="fa fa-thumbs-o-down"></i>
fa fa-heart <i class="fa fa-heart"></i>
fa fa-heart-o <i class="fa fa-heart-o"></i>
fa fa-star <i class="fa fa-star"></i>
fa fa-star-o <i class="fa fa-star-o"></i>
fa fa-exclamation-triangle <i class="fa fa-exclamation-triangle"></i>

チェック系

アイコン 名前 コード
fa fa-check <i class="fa fa-check"></i>
fa fa-check-circle <i class="fa fa-check-circle"></i>
fa fa-check-circle-o <i class="fa fa-check-circle-o"></i>
fa fa-check-square <i class="fa fa-check-square"></i>
fa fa-check-square-o <i class="fa fa-check-square-o"></i>

!?系

アイコン 名前 コード
fa fa-exclamation <i class="fa fa-exclamation"></i>
fa fa-exclamation-circle <i class="fa fa-exclamation-circle"></i>
fa fa-question <i class="fa fa-question"></i>
fa fa-question-circle <i class="fa fa-question-circle"></i>

矢印系

アイコン 名前 コード
fa fa-arrow-up <i class="fa fa-arrow-up"></i>
fa fa-arrow-right <i class="fa fa-arrow-right"></i>
fa fa-arrow-down <i class="fa fa-arrow-down"></i>
fa fa-arrow-left <i class="fa fa-arrow-left"></i>
fa fa-arrow-circle-o-up <i class="fa fa-arrow-circle-o-up"></i>
fa fa-arrow-circle-o-right <i class="fa fa-arrow-circle-o-right"></i>
fa fa-arrow-circle-o-down <i class="fa fa-arrow-circle-o-down"></i>
fa fa-arrow-circle-o-left <i class="fa fa-arrow-circle-o-left"></i>
fa fa-arrow-circle-up <i class="fa fa-arrow-circle-up"></i>
fa fa-arrow-circle-right <i class="fa fa-arrow-circle-right"></i>
fa fa-arrow-circle-down <i class="fa fa-arrow-circle-down"></i>
fa fa-arrow-circle-left <i class="fa fa-arrow-circle-left"></i>
fa fa-chevron-up <i class="fa fa-chevron-up"></i>
fa fa-chevron-right <i class="fa fa-chevron-right"></i>
fa fa-chevron-down <i class="fa fa-chevron-down"></i>
fa fa-chevron-left <i class="fa fa-chevron-left"></i>
fa fa-chevron-circle-up <i class="fa fa-chevron-circle-up"></i>
fa fa-chevron-circle-right <i class="fa fa-chevron-circle-right"></i>
fa fa-chevron-circle-down <i class="fa fa-chevron-circle-down"></i>
fa fa-chevron-circle-left <i class="fa fa-chevron-circle-left"></i>
fa fa-angle-up <i class="fa fa-angle-up"></i>
fa fa-angle-right <i class="fa fa-angle-right"></i>
fa fa-angle-down <i class="fa fa-angle-down"></i>
fa fa-angle-left <i class="fa fa-angle-left"></i>
fa fa-angle-double-up <i class="fa fa-angle-double-up"></i>
fa fa-angle-double-right <i class="fa fa-angle-double-right"></i>
fa fa-angle-double-down <i class="fa fa-angle-double-down"></i>
fa fa-angle-double-left <i class="fa fa-angle-double-left"></i>
fa fa-caret-up <i class="fa fa-caret-up"></i>
fa fa-caret-right <i class="fa fa-caret-right"></i>
fa fa-caret-down <i class="fa fa-caret-down"></i>
fa fa-caret-left <i class="fa fa-caret-left"></i>
fa fa-caret-square-o-up <i class="fa fa-caret-square-o-up"></i>
fa fa-caret-square-o-right <i class="fa fa-caret-square-o-right"></i>
fa fa-caret-square-o-down <i class="fa fa-caret-square-o-down"></i>
fa fa-caret-square-o-left <i class="fa fa-caret-square-o-left"></i>

まとめ

使ってみたくなったWebアイコン、ありましたでしょうか?

Webアイコンがあるとブログがより楽しくなりますよね。

特に注目してもらいたいところにアイキャッチとして使うととっても効果的です。

まだWebアイコンを使ったことないよという方がいらっしゃいましたら、Font Awesomeをためしてみてはいかがでしょう?

使い方はとってもかんたん。

はてなブログ詳細設定の【headの要素に追加】にFont Awesomeを利用するためのコードをコピペして、あとはアイコンに対応したコードをコピペするだけです。

ぜひ、楽しいブログライフをお過ごしくださいね。

それでは、また

はてなブログのカスタマイズ集

はてなブログのカスタマイズ記事、まとめてみました。

smatech.hatenablog.com

smatech.hatenablog.com

smatech.hatenablog.com

smatech.hatenablog.com

最後まで読んでいただきありがとうございます!
ぜひ読者になっていただけると更新の励みになります^^