vdeep

*

vdeepはプログラミング、IT、Web技術、ライフハックの事などなどを管理人okutaniがつぶやくブログです。月間11万PV〜。

Simplicity,Stinger5で超簡単にアイコンを使う方法

      2015/08/24

LINEで送る
Pocket

こんにちは、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の記事作成画面を開き、投稿画面をテキストモードに変更しておきます。

simplicity-stinger5-icons

下記のコードを、いつもどおり記事を投稿する形で記述してみましょう。

<i class="fa fa-twitter"></i>

このiタグがアイコンそのものになります。HTMLに馴染みのない方は「なにこれ」状態だと思いますが、まぁ魔法のコトバぐらいに考えてください。

投稿して確認します。

simplicity-stinger5-icons2

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”を設定すると、リンクが別ウィンドウで開くようになってオススメです。

ちゃんとリンクになっているか確認してみます。

simplicity-stinger5-icons3

無事にアイコン付きのTwitterリンクが設置できました。

ただ、毎回わざわざ上記のコードを書くのはめんどうです。そんな面倒くさがり屋さんはAddQuickTagを使うことで、登録したコードをボタンひとつで挿入できます。

AddQuickTagの使い方も記事にしているので、参考にしてください。

WordPressに「AddQuicktag」を導入してタグ入力を楽チンに!
こんにちは、okutani(@okutani_t)です。WordPressで記事を書いていると、見出しでh...
2015-03-04 04:40
はてブ

私はこのような形でAddQuickTagに設定しています。※classの中の記述はExternal Linksプラグインで使っている設定なので無視してください

simplicity-stinger5-icons4

では、次にTwitterアイコン以外のアイコンを使う方法をみていきましょう。

公式サイトから400個以上のアイコンを使うことができる

FontAwesomeの公式サイトから様々なアイコンを利用することができます。その数、なんと400個以上

サイト自体は英語なのですが、ほとんど英語を読むことはありません。

さきほど使ったiタグ形式のコードをコピーしてくるだけなので、まったく英語が読めなくても問題ありませんので、安心してください。

下記の公式サイトにアクセスします。

LINKFont Awesome Icons

スクロールすると、ずらーっと利用できるアイコンが表示されます。

simplicity-stinger5-icons5

使いたいアイコンをクリックしてみましょう。beerをクリックしてみました。

simplicity-stinger5-icons6

さきほど見かけたタグがありますね。もうお分かりのとおり、こちらをコピーして利用すればビールアイコンを記事に設置できます。

また、記事内以外でももちろんFontAwesomeを利用することができます。ナビゲーションやサイドバーなんかに使うのがオススメです。

当ブログでは、PC,スマートフォンそれぞれのナビゲーションバーに、テーマに合ったアイコンを利用しています。

simplicity-stinger5-icons7

テーマで利用している設定ファイル(.php)を編集できる方は、さきほどのiタグを使いたい場所に記述してみてください。サイトがオシャレになること間違いなしですね。

なお、設定ファイルを編集する場合は必ずバックアップを取っておきましょう。

追記: ナビゲーションバーが動的に生成されている場合は、CSSのbefore属性を使って設置する必要があります。時間があるときにまた記事にします。

まとめ

FontAwesomeを使うことで、とっても簡単にアイコンを使うことができました。

毎回タグをコピペして使うのもめんどうなので、AddQuickTagを使うことで楽に挿入できます。積極的に活用してみてください。

なお、導入されているFontAwesomeのバージョンによっては、新しく追加されたアイコンが表示できないことがあります。そこだけ注意してくださいね。

この記事が気に入ったら
いいね ! しよう

Twitter で
LINEで送る
Pocket

okutani (@okutani_t) のヒトコト
FontAwesomeはダウンロードして使うこともできるので、予め導入されていないテーマでも使えますよー。これでレッツかわいいアイコン使い。

 - Simplicity, Stinger5

スポンサーリンク

PC用AdSense

PC用AdSense

Share
  • このエントリーをはてなブックマークに追加

  こちらの関連記事もどうぞ

[Stinger5] 関連記事の見出しを任意の文字に変更する

牛丼はなか卯派。okutani(@okutani_t)です。 このサイトはWor …

Stinger5の導入&子テーマの作成方法

こんにちは、okutani(@okutani_t)です。WordPressはブロ …

Stinger5にファビコンを設置する方法

こんにちは、okutani(@okutani_t)です。本記事ではWordPre …

Stinger5で文字色が変更できない!テーマカスタマイザーの削除で解決しました

こんにちは、okutani(@okutani_t)です。先日、Stinger5で …

[Stinger5] デフォルトのツイートボタンからブログ名を含めて投稿する

こんにちは、okutani(@okutani_t)です。Stinger5では初め …

[Stinger5] スマホレイアウトのナビメニューをカスタマイズしてみよう

こんにちは、okutani(@okutani_t)です。Stinger5のスマー …

Stinger5にiPhone用のアイコンを設置する

こんにちは、okutani(@okutani_t)です。iPhoneのホーム画面 …

[Stinger5] 固定ページにSNSシェアボタンを追加する

こんにちは、okutani(@okutani_t)です。私はWordPressテ …

[Stinger5] リード文下のAdSense広告をPC・スマホ用サイズに分岐して表示する

こんにちは、okutani(@okutani_t)です。AdSenseの広告サイ …

[Stinger5] スマホのブログタイトルを画像に変更する

こんにちは、okutani(@okutani_t)です。WordPressのテー …

vdeepのトップページへ戻る画像です。風船の形をした島を女の子が掴んでいます。