はてなブログでFont Awesomeを使ってみよう!

f:id:jr0704japan:20170720170407j:plain

はてなブログでも、Font Awesomeを使用出来るようにしたので、メモ記事です。

こんなのとか、動いているアイコンとか良くみますよね。

Font Awesomeを使うと、アイコンが文字のように扱えるので便利ですね。色を変えたりとか、大きさを変えたりとか文字のように扱えるので便利です。

この、Webアイコンを扱えるFont Awesomeの導入方法と簡単な使い方を紹介します。

Font Awesomeの導入方法

Font Awesomeのデータ(css)を読み込む為に、CDNを使用します。

CDNとは、コンテンツ・デリバリー・ネットワーク（Contents Delivery Network）の略で、専用のサーバーのデータを読み込んで自分のWEBサイトに表示させる方法です。ダウンロードしなくても良いので高速に表示できるようになります。

①　ブログの管理画面で設定をクリック

②　詳細設定をクリック

f:id:jr0704japan:20170721145906j:plain

下の方に　headに要素を追加の項目があるので、一番下に以下を追加して下さい。

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

f:id:jr0704japan:20170720173825j:plain

バージョンが上がると変わる場合があるので、その時には下記で確認してみましょう。

Font Awesome · BootstrapCDN by MaxCDN

Font AwesomeのアイコンのCSSをコピー

Font Awesomeにアクセスし、アイコンを選びます。

アスセスすると、こんな感じにアイコンが600個以上ならんでいます。

お目当てのアイコンがあったら、それをクリックします。

一覧からアイコンを選択してクリックすると、例としてbookだと、こんな画面が出るので、

をコピーします。

f:id:jr0704japan:20170720175615j:plain

はてなブログでは貼り付けると消える??

はてなブログの場合には、上記のコピーしたタグをHTML編集で貼り付けます。

普通に貼り付けると何故か、張り付けたHTMLが消えてしまいます。

これは、はてなブログの場合には、「空ののタグは自動で削除される」という仕様になっているからです。それ以外にも色々と書き変わっていますけど。

記述ミスを防ぐ為の、はてなブログなりの思いやりなんでしょうけれども、思いやりになってないような気がするのはおっさんだけでしょうか(；一_一)

はてなブログでの対処方法

はてなブログの編集見たままモードで使用する時には、タグの中に を入れることで自動で削除されることがなくなります。

例えば以下のように書きます。

 

実は、の変わりに、　で囲んで、間に全角スペースを入れると消えなくする方法もあります。

 

↑

　　　　　　　　　　　　　　　　　　　　　ここに全角スペース

 の意味なのですが、no-break spaceの略で、本来は「改行されない空白文字」です。字下げをする時などに使われますが、解釈しないブラウザもあるようです。主にHTML作成ツールなどで出力されることが多いです。

勉強してみると、って大体斜体の文字の事を表しているんですよね。だから、正式な書き方ではないと書かれているサイトもありました。

おっさんが、考えるには　i の意味がアイコンか、インフォーメーション的な意味合いでつけてるのかなどと、思ったりしましたけど。違うか^^;

はてなブログの編集みたままモードでの確認方法は

出来たかどうかは、プレビューモードでないと見えません。

しかし、貼り付けるだけで出来ないのはとても不便で、面倒でした。

特に、途中を書き変えていると、わけわかんなくなってしまって、この記事を作成するのにも何時間かかったことやら。

と、いうことで解決方法がありました。

はてなブログには、編集見たままモード以外に、はてな記法モードとかMarkdownモードがあり、そちらではそのまま貼り付けるだけでいけるようなので検証してみました。

はてな記法モードMarkdownモードの切り替え方

はてな記法モードで書くには、はてな記法モードに変えないといけないですね。

変え方は、簡単で管理画面の設定の中に編集モードがあるので、そこでチェックを付け変えるだけですね。

f:id:jr0704japan:20170721140843p:plain

はてなモードとMarkdownモードですが、記事の書き始めでないと切り替わりません。ですから、貼り付けてそのまま使うには最初からモードを切り替えておく必要があります。

はてな記法モードでの書き方

こんな感じで書いていきます。貼り付けただけですね。

f:id:jr0704japan:20170721164023p:plain

プレビューで見るとこんな感じになります。

f:id:jr0704japan:20170721164151p:plain

Markdown記法モードでの書き方

はてな記法モードと同じ文をコピーして貼り付けました。

f:id:jr0704japan:20170721164542p:plain

プレビューではこんな感じです。改行してやらないと横並びになるんですね。

f:id:jr0704japan:20170721164728p:plain

使用したアイコンのCSS

メモ代わりに使用したアイコンのCSSも書いておきます。

名称については、適当につけてます。

icon	名称	タグ
	pencil	<i class="fa fa-pencil"></i>
	road	<i class="fa fa-road"></i>
	angellist	<i class=”fa fa-angellist"></i>
	eye	<i class="fa fa-eye"></i>
	指差し右	<i class="fa fa-hand-o-right"></i>
	レンチ	<i class="fa fa-wrench"></i>
	bicycle	<i class="fa fa-bicycle"></i>
	info	<i class="fa fa-info-circle"></i>
	question	<i class="fa fa-question"></i>
	mail	<i class=”fa fa-envelope-o”></i>
	book	<i class=”fa fa-book”></i>