気づけば開設から4ヶ月以上が経過し、コンテンツなんてカッコイイものではないけど出し物が増えてきたので、PC版ブログトップにグローバルメニューを設置してみたでででーさん(@d3_dayo)です
いま、上の吹き出しでもピースのアイコンを語尾に使ってみましたが、このブログではけっこうアイコンフォントを随所で使っています。例えば、PC版ならサイドバー、スマホ版ならページ下にある「お問い合わせはこちらから」でも、のアイコンを使っていますし、今回設置したグローバルメニューにおいても全てのコンテンツに一応…視覚的にコンテンツ内容がわかるようにと、行頭にアイコンフォントを配置しています。(イメージは外国人の方が見てもそのメニューが何を示しているのかわかるように？)
今回はこのアイコンフォントを設置する手順について紹介したいと思います。こういうの不得手だなって思う方は、もうFont Awesomeとか横文字が出てくる時点で難しそうに感じるかもしれませんが、冷静に手順を追うと実はとても簡単な操作で挿入することができます。
さいしょに
まずは、このブログの中で、今回紹介するアイコンフォントを挿入している箇所のスクリーンショットを参考としてお見せしたいと思います。
今回紹介する手順でアイコンフォントを挿入すれば、このように各所で視覚的なイメージをアクセントとして使うことができるようになります(センスが良いか悪いかは別として…ｗ)
下準備
まず最初に一回ポッキリ、はてなの管理画面から「設定」→「詳細設定」→「headに要素を追加」に以下コードを追記しておく必要があります。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
これで下準備は完了です。あとはブログの中でFont Awesomeのアイコンを呼び出すコードを挿入すれば、指定したアイコンが文中に表示されるようになります。
使い方
ブログで使用したいアイコンを上記ページから、まずは探してきます。
例えば、ピースサインのアイコンを文中に挿入したい場合には、上のページへアクセスしてピースサインのアイコンを検索します。
今回はピンポイントでピースサインを探すために検索を使いましたが、検索しなくても一覧でズラッとアイコンフォントの見本が表示されているので、じっくり眺めて中から好きなアイコンを選ぶこともできます。
さて、使いたいアイコンを見つけたら一覧からそのアイコンをクリックするとこんな画面が表示されるので、ページ内赤枠で囲った部分のコードをコピーしましょう。
画像だけだとわかりにくいかもしれないので、コピーしたコードを記載しておきますが、こんな感じのコードです！
<i class="fa fa-hand-peace-o" aria-hidden="true"></i>
このコピーしたコードをアイコンフォントを表示させたいところに挿入すれば、プレビュー画面や記事にした際は、勝手にコードが選んだアイコンへと置き換わって表示されます。ただ、はてなの記事に上記コードを挿入する際には、1点だけ注意点があります。
「編集 見たまま」モード使用時の注意点
私は「はてな記法」で記事を書いていますが、けっこう「編集 見たまま」モードで記事を書いている方も多いのではないかと思います。その場合、このコードを挿入する際は、まず「HTML編集」に編集方法を切り替える必要があります。エディター上にあるメニューから、これは簡単に切り替えられますね！
さらに、先ほどコピーしてきたコードをそのまま貼り付けても「編集 見たまま」モードではアイコンが表示されません！(はてな記法とかならそのまま貼り付けで問題ないです！)
「編集 見たまま」モードで記事を書いている人は、上でコピーしたコードの中に、以下のコードを追記する必要があります。
上記のコードをこのように追記します！
<i class="fa fa-hand-peace-o" aria-hidden="true"> </i>
そして、このコードを「HTML編集」のエディター内に挿入します。
これでOKです！編集画面ではアイコンは表示されませんが、プレビュー画面や記事にすればしっかりと表示されます！
おわりに
コードがいくつか出てきたのでややこしく感じてしまうかもしれませんが、こういった作業が不得手だという方でもきっとできます！基本的には全てコピペの作業なので、手順を1つ1つ追っていけば、非常に簡単な作業だと思いますよ(^^)
そして、使い方によっては文字を打たなくても何のリンクなのか、一目瞭然でわかるようにすることができます。
例えば…
こんなふうにツイッターのアイコンフォントを使えば、これがツイッターのアカウントであることをわざわざ書かなくても、ひと目で何のアカウントなのかがわかると思います！
Font Awesome便利ですよ！
※手順を実際に試してみてご不明点などあれば、お気軽にコメントやツイッターなどでご相談くださいm(_ _)m
はてなのカスタマイズに関する記事はこんなのもありまっせ！
d3dayo.hateblo.jpでででーさん
d3dayo.hateblo.jp