はてなブログで記事を書く時、記事内に可愛いアイコンを表示させたいな～と思うことありませんか？
初心者なりにいろいろ調べた結果、
Font Awesomeでよく使うアイコンを見たまま編集で使えるようにできました。
FontAwesomeでよく使うアイコンがある
FontAwesomeのアイコンを使いやすくしたい
このような方は良ければ試してみて下さい。
FontAwesomeとは
自分のサイトに、ウェブアイコンを表示させてくれるサイトです。
例えば先ほど使っていたこのチェックのアイコン→
こんなアイコンも→
FontAwesomeのものです。
無料版と有料版があり、無料版だけでも充分な種類のアイコンを使用できます。
サイトはこちら↓です。
登録が必要
以前は登録しなくても使えたようですが、今は無料版でも登録が必要みたいです。
私は心配性なので、英語が基本のサイトで自分のアドレスを登録するのってちょっと怖いな～と思い、いろいろな方が貼って下さっているFontAwesomeのhead用コードを使ってみましたが、上手くいきませんでした。
なので恐る恐る登録。
登録後発行された自分用のコードで、うまく使えるようになりました。
詳しい登録方法はこちらの記事を参考にしてください。
こちらの記事は後ほどまたお世話になります。
登録後、迷惑メールは来ない？
登録後1ヶ月以上経っていますが、今のところ迷惑メール等が来たことはないです！
見たまま編集で表示させる方法
では、FontAwesomeのアイコンを見たまま編集で簡単に表示させる方法について、順を追って説明していきます。
準備編
FontAwesomeに登録すると自分用のコードが発行されます。
そのコードを管理画面の「設定」→「詳細設定」→「<head>要素にメタデータを追加」に貼り付けます。
使いたいアイコンを探す
準備が出来たら、使いたいアイコンをFontAwesomeで探していきます。
「Icons」をクリックすると、アイコン一覧と検索機能が表示されます。
検索は英語です。
試しにびっくりマークの、exclamationを検索してみます。
濃く表示されているのが無料、薄いのが有料で使えるアイコンです。
予め無料だけで絞り込んで検索することもできます。
こうして見てみてると、有料版は種類が豊富ですね。
アイコンが決まったら
こちらのアイコンにしてみます。注意喚起などで私も使っているアイコンです。
選択するとこんな画面に
このアイコンはsolid デザインのみ無料のようです。
デザインを決めたら、こちらのコードをコピーします。
見たまま編集で使えるようにコードを変える
この方法は、こちらの記事を参考にさせて頂きました。
この記事のおかげで私の全ての疑問が解決しました。
心から感謝です！
では早速、この記事を参考にしつつ、先ほどコピーしたコードを変えていきます。
まずこのコードの、iをemに変えます。
変えたコードがこちら↓
そして を挿入。
挿入したコードがこちら↓
この形にします。
ただ、ここで注意があります！
もし斜体を蛍光ペンに変えるコードをheadに貼っている場合は蛍光ペンが引かれてしまいます。
↓こんな感じです。
正直私には仕組みがわかりませんが、こうなってしまいます。
それを避けるには
emではなくspanにすると良いそうです。
私はこれがわからず、暫くは泣く泣く蛍光ペンが引かれたアイコンを使っていました。
spanにして、できたコードがこちら。
斜体を蛍光ペンに変えている方は、これが完成形です。
定型文に登録
この完成したコードを定型文に登録します。
スマホで記事を書いている方はPC表示に切り替えて下さい
まず、記事編集画面を開き、右側のメニューの ボタンから「定型文貼り付け」を使える設定にして下さい。
するとメニューに「定型文貼り付け」が表示されるようになります。
←このボタンですね。
そちらを選択し、「定型文を作成する」を押します。
タイトルは自分のわかりやすいものにしてください。
本文に先程作成したコードを貼り付けます。
先程のコードを例にすると、こんな感じです。
出来たら「保存する」ボタンを押して下さい。
定型文の登録方法については、こちらの記事が画像付きでわかりやすいと思います。
吹き出しの設定を紹介して下さっているので、まだ設定されていない方はぜひやってみて下さい。
使用方法
「定型文貼り付け」（ ボタン）から呼び出して使用します。
見たまま編集ではわかりませんが、プレビュー画面では表示されているはずです。
応用編
続いて、初心者の私ができた範囲の応用編もご紹介します。
基本のコードは先ほどと同じです。
それにタグを付け加える感じです。
見たまま編集で使うには、そのまま定型文に登録して下さい。
色を変える
私はフォントタグを付けて変えています。
例えば、こんな感じ。
このコードを定型文に貼り付けて使用すると、
こうなります。
色は
<font color="#○○○○○○">
この#の後の部分で変えられます。
カラーコードはこちらのサイトで好きなものを選んで使ってみて下さい。
サイズを変える
先程も紹介した、こちらの記事を参考にすると、サイズも変えられます。
この記事を参考に、サイズを指定するコードを挿入します。
蛍光ペンの部分が追加したコードです。
fa-の後にサイズを指定すれば良いようです。
サイズを変えるとこんな感じ
強調されて、より目立つ注意喚起になりそうです。
スピンも
これも先ほどのサイトを参考にしました。
先程のサイトからコピーしてきたコードをspanに変更し、 を加えます↓
これを定型文に登録して貼り付けると、こんな感じです。
回ってる～！
exclamationも回してみました！
使い道はあるかわかりませんが、楽しいですね。
最後に
今回ご紹介したものは初心者が調べてたどり着いた方法なので、同じ方法で上手くいかない場合、アドバイスなどはできないのでお許し下さい…。
これで上手く出来た！
他にもこんな応用ができる！
など、何かあればコメントを頂けると励みになります。
当ブログは妊娠・出産・育児のブログですが、はてなブログユーザーの皆さんにいつも励まされているので、少しでもお礼が出来ればと思い書いてみました。
はてなブログユーザーの方、一緒にはてなブログ楽しんでいきましょう！
ここまで読んで頂き、ありがとうございました！
