Simplicity,Stinger5で超簡単にアイコンを使う方法
2017/01/31
おすすめ記事個人開発のWebアプリがツイッター世界トレンド1位になったけどいろいろ辛かった話 #チョコボックス裏話 | vdeep
こんにちは、okutani(@okutani_t)です。あ、もう一度言いますね。okutani(@okutani_t)です。
今回は、たった今上で使ったTwitterリンクのアイコンを、Simplicity,Stinger5で超簡単に使う方法をご紹介します。
SimplicityとStinger5はWordPressテーマの中でもブログ運営に特化しており、ユーザー数が他のテーマに比べ圧倒的に多いのが特徴ですね。
僕の知っているブロガーさんのサイトを見ても、かなりの使用率です。ちなみに当ブログvdeepはStinger5を使って運営しています。
しかし、多くのSimplicity,Stinger5ユーザーは「超簡単にアイコンが使える」事実を意外にも知りません。知っているけど使ってないよ、って人もいるかとは思いますが。
本当にとっても簡単に利用することができるので、Simplicity,Stinger5を使っている人はぜひ試してみてください。
スポンサーリンク
もくじ
超簡単にアイコンが設置できるのは「FontAwesome」のおかげ
「FontAwesome」を聞いたことがあるでしょうか？普段Webデザインに精通している人以外は、あまり馴染みがないかと思います。
このFontAwesomeは、Webでよく利用するであろうアイコンを、タグひとつで超簡単に使えちゃうスグレモノです。
しかも、FontAwesomeで利用するアイコンは「文字と同じように使う」ことができるのです。なので、このように文字の中に入れることができますし、文字の色を変えれば一緒に変更されます。
大きさも文字と同じように変化します。
このFontAwesomeの使い方を一度覚えてしまえば、いつでもどこでもアイコンを使うことができますね。
FontAwesomeは両テーマとも最初から入っている
実は、SimplicityとStinger5の両テーマにFontAwesomeはデフォルトで入っています。
なので、特別な設定は一切不要です。プラグインのインストールも必要ありません。
というわけで、とくに何も設定せずFontAwesomeを使ったアイコン設置を進めていきましょう。
Twitterリンクを例に、アイコンを設置してみる
では、冒頭の挨拶文と同じアイコン付きのTwitterリンクを例にして説明しますね。
WordPressの記事作成画面を開き、投稿画面をテキストモードに変更しておきます。
下記のコードを、いつもどおり記事を投稿する形で記述してみましょう。
<i class="fa fa-twitter"></i>このiタグがアイコンそのものになります。HTMLに馴染みのない方は「なにこれ」状態だと思いますが、まぁ魔法のコトバぐらいに考えてください。
投稿して確認します。
Twitterのアイコンが使えました。超簡単ですね。
ちなみにお気づきの方もいるかと思いますが、Stinger5では「カテゴリーのアイコン」や「日付のアイコン」にFontAwesomeが使われています。確認してみてください。
今度は次のようにリンク付きで使えるようにしてみましょう。
<a href="https://twitter.com/okutani_t" target="_blank"><i class="fa fa-twitter"></i>@okutani_t</a>hrefの中身は適宜、ご自身のTwitterのURLを使ってください。aタグにtarget=”_blank”を設定すると、リンクが別ウィンドウで開くようになってオススメです。
ちゃんとリンクになっているか確認してみます。
無事にアイコン付きのTwitterリンクが設置できました。
ただ、毎回わざわざ上記のコードを書くのはめんどうです。そんな面倒くさがり屋さんはAddQuickTagを使うことで、登録したコードをボタンひとつで挿入できます。
AddQuickTagの使い方も記事にしているので、参考にしてください。
私はこのような形でAddQuickTagに設定しています。※classの中の記述はExternal Linksプラグインで使っている設定なので無視してください
では、次にTwitterアイコン以外のアイコンを使う方法をみていきましょう。
公式サイトから400個以上のアイコンを使うことができる
FontAwesomeの公式サイトから様々なアイコンを利用することができます。その数、なんと400個以上！
サイト自体は英語なのですが、ほとんど英語を読むことはありません。
さきほど使ったiタグ形式のコードをコピーしてくるだけなので、まったく英語が読めなくても問題ありませんので、安心してください。
下記の公式サイトにアクセスします。
スクロールすると、ずらーっと利用できるアイコンが表示されます。
使いたいアイコンをクリックしてみましょう。beerをクリックしてみました。
さきほど見かけたタグがありますね。もうお分かりのとおり、こちらをコピーして利用すればビールアイコンを記事に設置できます。
また、記事内以外でももちろんFontAwesomeを利用することができます。ナビゲーションやサイドバーなんかに使うのがオススメです。
当ブログでは、PC,スマートフォンそれぞれのナビゲーションバーに、テーマに合ったアイコンを利用しています。
テーマで利用している設定ファイル(.php)を編集できる方は、さきほどのiタグを使いたい場所に記述してみてください。サイトがオシャレになること間違いなしですね。
なお、設定ファイルを編集する場合は必ずバックアップを取っておきましょう。
追記: ナビゲーションバーが動的に生成されている場合は、CSSのbefore属性を使って設置する必要があります。時間があるときにまた記事にします。
まとめ
FontAwesomeを使うことで、とっても簡単にアイコンを使うことができました。
毎回タグをコピペして使うのもめんどうなので、AddQuickTagを使うことで楽に挿入できます。積極的に活用してみてください。
なお、導入されているFontAwesomeのバージョンによっては、新しく追加されたアイコンが表示できないことがあります。そこだけ注意してくださいね。
Web開発のお仕事を募集しています
フリーランスのエンジニアとして、Webシステム開発のお仕事依頼を随時募集しています（現在の業務量によってお受けできない場合もあります）。
「Ruby on Rails」「JavaScript（jQuery, Reactなど）」「HTML + CSS」を用いたシステム開発、「Heroku」等を用いたサーバー構築・運用、「Git」や「GitHub」を利用したソーシャルコーディングなどに対応しています。
ご依頼を検討している方は、下記リンク本ブログからのお問い合わせ、もしくはokutaniのポートフォリオからご連絡ください。
LINKお問い合わせ
スポンサーリンク
