WordPress講座(個別相談)

WordPressでTwitterやFacebookのアイコンを表示する場合、プラグインを使うことを思い付きます。ただし、プラグインのメニューが充実し過ぎでちょっとしたアイコンを表示するには逆に設定に手間がかかって面倒なこともあります。

表示したいリンクアイコン

表示したいリンクアイコン

そんなときはアイコンフォントが役立ちます。アイコンフォントは文字通りアイコンが定義されたフォントで、自前で画像を用意しなくても のようなアイコンを手軽に表示できます。

ここでは、アイコンフォント「Font Awesome」を例にTwitterやFacebookへのリンクアイコンを表示する方法を紹介します。

スポンサーリンク

アイコンフォント「Font Awesome」の導入

アイコンフォント「Font Awesome」を使うにはライブラリを読み込む必要があります。ライブラリをダウンロードして自分のサイトにアップロードする方法もありますが、ここでは外部サイト(CDN)からライブラリを読み込む簡単な方法を紹介します。

プラグインで読み込む場合

Enqueue Font Awesome CDNプラグインを使うと、CDNからライブラリが読み込まれてFont Awesomeが使用可能になります。

Enqueue Font Awesome CDNプラグインのインストール

Enqueue Font Awesome CDNプラグインのインストール

プラグインを使わずにライブラリを読み込む場合は、次のいずれかの方法(header.phpを修正するかfunctions.phpを修正する)をお試しください。

header.phpを修正する場合

header.php(子テーマまたは親テーマどちらでも可)のheadタグ(<head>~</head>の間)に次のコードを追加します。

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

functions.phpを修正する場合

header.phpを修正したくないときは、functions.phpで読み込む方法があります。その場合、次のコードを追加します。

wp_enqueue_style( 'font-awesome', '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' );

Twitter・Facebook・Google+・Instagramアイコンの表示

上記の設定でFont Awesomeが使用可能になったはずなので、練習もかねてTwitterアイコンを表示してみましょう。

「外観」-「ウィジェット」メニューで適当なサイドバーにテキストウィジェットを追加して、タイトル(1)とタグ(2)を入力します。

サイドバーにTwitterアイコンを表示

サイドバーのテキストウィジェットを編集

タイトル(1)の入力は任意ですが、本文(2)にはTwitterアイコンを表示するコードを入力します。具体的には次のコードです。

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

表示結果は次のようになります。

表示されたTwitterアイコン

表示されたTwitterアイコン

Twitterと一緒にFacebook、Google+、Instagramも表示してみましょう。次のコードをテキストウィジェットに入力します。

<i class="fa fa-twitter"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-google-plus"></i>
<i class="fa fa-instagram"></i>

表示結果は次のようになります。

各SNSのアイコンを表示

各SNSのアイコンを表示

色・サイズのカスタマイズ

上記の表示結果を見て「小さい!」「色が微妙!」「これじゃ使えない!」とガッカリするのはまだ早いです。これらは適当なclass名やCSSを指定することで自由にカスタマイズできます。

いろいろなカスタマイズ方法があるので一例しか紹介できませんが、CSSに慣れている方は、上記のclass名に対して色やサイズを指定すれば良さそうだとピンときたかもしれません。以下、カスタマイズするCSSの例を紹介します。子テーマ(または親テーマ)のstyle.cssや「外観」メニューの「CSSカスタマイズ」や「CSS編集」のいずれかに入力してください。

.fa {font-size: 4em;}
.fa-twitter {color: skyblue;}
.fa-facebook {color: navy;}
.fa-google-plus {color: #cc0000;}
.fa-instagram {color: #3d8e95;}
ここではCSSでサイズを設定していますが、Font Awesomeにはサイズ設定用のclass(fa-2x/fa-3x/fa-4x/fa-5x)などが定義されていて、それぞれ「font-size: 2em;」~「font-size: 5em;」のスタイルが指定されています。このclass名を使って次のようにサイズ設定することもできます。

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

表示結果は次のようになります。

スタイル設定後のSNSアイコン

スタイル設定後のSNSアイコン

それっぽくなったでしょうか。あとは、ウィジェットに入力したアイコンタグをそれぞれのSNSへのリンクにすれば、SNSへのリンクアイコンに仕上がります。

<a href="#" target="_blank"><i class="fa fa-twitter"></i></a>
<a href="#" target="_blank"><i class="fa fa-facebook"></i></a>
<a href="#" target="_blank"><i class="fa fa-google-plus"></i></a>
<a href="#" target="_blank"><i class="fa fa-instagram"></i></a>

クリックすると各SNSページに移動するリンクアイコンになります。

SNSへのリンクアイコン

SNSへのリンクアイコン

「href="#"」の「#」を自分の各SNSページのURL(例:https://twitter.com/nisi1134)に変更してください。

好きなアイコンの検索と利用

上記で紹介した以外にもアイコンを使うことができます。以下のサイト(Font Awesome > Icons)で検索してみましょう。

リストされたアイコン(1)から選ぶこともできますが、思い当たるキーワードで検索(2)することもできます。

アイコンの検索

アイコンの検索

ここでは、キーワードに「Twitter」と入力したので次のように使用可能なアイコンが2つ表示されます。

Twitterアイコンの検索

Twitterアイコンの検索

右側のtwitterアイコンはすでに使ったので、今度は左側のtwitter-square
をクリックして使ってみましょう。

「twitter-square」をクリック

「twitter-square」をクリック

画面上部(1)にアイコンのサンプルが表示されます。このアイコンを使うためのサンプルタグ(2)を画面下部からコピーすることができます。

アイコンのプレビューとサンプルコード

アイコンのプレビューとサンプルコード

サンプルコードは「i」タグが使われていますが、あくまでサンプルです。iタグ以外にpタグなどでも「fa fa-twitter-square」のようなclass名を指定すれば機能します。

画面に表示されたコードをコピーして、あとは上記で紹介した手順と同じようにテキストウィジェットにペーストするなどして利用します。

以下、Twitter、Facebook、Google+のアイコンをsquareに取り替えた例です。

<a href="#" target="_blank"><i class="fa fa-twitter-square"></i></a>
<a href="#" target="_blank"><i class="fa fa-facebook-square"></i></a>
<a href="#" target="_blank"><i class="fa fa-google-plus-square"></i></a>
<a href="#" target="_blank"><i class="fa fa-instagram"></i></a>

CSSのclass名を修正すれば完成ですがclass名の「-square」の有無を問わず同じスタイルを適用できるように、次のように指定することもできます。

.fa {font-size: 4em;}
[class*="fa-twitter"] {color: skyblue;}
[class*="fa-facebook"] {color: navy;}
[class*="fa-google-plus"] {color: #cc0000;}
[class*="fa-instagram"] {color: #3d8e95;}
[class*="fa-twitter"]は、『class名に「fa-twitter」が含まれる場合は』という意味です。「fa-twitter」「fa-twitter-square」共に当てはまります。ただし、「sample-fa-twitter」のようなclass名があればマッチしてしまうので本格的に使うには注意が必要です。

表示結果は次のようになります。

SNSリンクアイコンの完成

SNSリンクアイコンの完成

まとめ

「Font Awesome」のようなアイコンフォントを使うとプラグインを使わずにTwitterやFacebookのアイコンを表示することができます。アイコン画像も準備する必要がなく、多くの手間が省けて便利です。また、使用可能なアイコンフォントはSNSだけではないので、グローバルメニューなどちょっとしたアイコンを表示したいような場面でも便利です。まだ使ったことがない方は練習のついでにTwitterアイコンでも表示してみましょう。

この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
カスタマイズがうまくいかないときは
お急ぎのときはWordPressメールサポートで対応します。ご活用ください。
wordpress講座受講予約
WordPress講座の問い合わせ先

関連記事

スポンサーリンク