Office TKJ

WordPressで集客サイト制作、SEOよりも前にするべきことがあります

*

WordPressのカスタマイズ Stinger5ユーザーにおススメ!アイコンで表現力アップ

   

icon620

 おススメのカメラはコレだ!
  当社フェイスブックページはこちら!

テキストの隣にちょっとしたアイコンを添えるだけでアイキャッチャーになりますし、コンテンツが締まります。
簡単に表現力がアップしますよ。

実はこのアイコン、管理人が使っているStinger5というWordPressの無料テーマに最初から入っています。
一行書き足すだけでこのようなアイコンがプラスされます。

つかってみたくありませんか?

*今回の記事はStinger5のユーザーさん向けですが、Stinger5以外でも使えますのでぜひ参考に!

WordPressにCSSアイコンをプラスする!

ではあなたのブログにアイコンをプラスしてみましょう。
今回使うのはStinger5に始めから組み込まれているFont Awesomeのものです。

そのままでも使えますが、せっかくなので環境整備もやっておきましょう!

Stinger5に含まれているFont Awesomeより新しいバージョンが公開されています。
せっかくなので更新しておきましょう。

ダッシュボード>外観>テーマの編集

外観メニュー

CSS編集ではなくテーマの編集です。

テーマファイルを編集する

ヘッダーのテンプレート(header.php)を編集します。

header.php編集

約48行目にあるCSSファイルの読み込み行を書き換えます。
Stinger5オリジナル設定:

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

以下のように訂正下さい。

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

書き換えたら「ファイルを更新」して内容を保存します。

 Stinger5以外をご利用の方は同じ要領で<head>~</head>タグの間にこの一行を書き足して下さい。(こんな風に使います!)

使い方は一行加えるだけ!

どんなアイコンが使えるかは、Font Awesomeサイトのアイコン一覧を確認してください。

具体的な使い方は一行加えるだけです。

<i class="fa fa-subway fa-2x"></i> 会場まで地下鉄で20分

 会場まで地下鉄で20分

<i>タグにクラス指定で使います。

サイズもお好みに合わせて

今回ご紹介しているアイコンはサイズも6段階に調整出来ます。

Wifi使えます
Wifi使えます
Wifi使えます
Wifi使えます
Wifi使えます
Wifi使えます

<i class="fa fa-wifi"></i> Wifi使えます
<i class="fa fa-wifi fa-lg"></i> Wifi使えます
<i class="fa fa-wifi fa-2x"></i> Wifi使えます
<i class="fa fa-wifi fa-3x"></i> Wifi使えます
<i class="fa fa-wifi fa-4x"></i> Wifi使えます
<i class="fa fa-wifi fa-5x"></i> Wifi使えます

アイコン指定方法

クラス指定の中に「fa-lg」などサイズの指定を加えます。

編集はテキストモードで行って下さい。
アイコンは投稿画面では見えませんので、プレビュー画面で確認してください。

まとめ

アイコンはピンポイントで使うと適度なアイキャッチャーとなります。
今回ご紹介したFont Awesomeは形も奇麗で納まりのいいアイコンです。
ここぞ!という場面で使ってみて下さい。

出来ないと言う方はぜひレッスンの時にリクエストしてください。
セッティングと良く使うアイコンの書き方をご説明しますよ。

 - WordPress表現力向上委員会