WEBフォントでブログをカスタマイズ!アイコンや記号を入れる方法

更新日: 1,392 views






WEBフォントでブログをカスタマイズ!アイコンや記号を入れる方法

font awesome

@Manamiです。

ブログの記事中に、アイコンを入れてカスタマイズしたいなあ、と思っていたら、こちらの記事(WEBフォントで簡単に!STINGER3の細かいところにアイコンを入れてみた)でそれが解説されていたので、実際にやってみました。

アイコン

webfont2

webfont3

こんなアイコンたちがフォントとして使えるようになります。
フォントとして使えるというのは、文字のように使えるということです。画像のように重くならず、いちいち読み込ませないので、サイトの表示速度にもほとんど影響しないということです。

こんな感じで、アイコンは全部で439種類ほどあります。どれを使用するか迷ってしまいますね。

webfont5

webfont6

webfont4

このように、stinger3で簡単にWEBフォントを使ってアイコンを入れることができたので、その方法を紹介したいと思います。

といっても、ほとんど上記の記事の通りですが。

少しの作業でいい感じにカスタマイズできるので、是非やってみてください。

具体的な手順としては、

  • Font Awesomeをダウンロード
  • ダウンロードしたフォルダをWordpressのテーマに入れる
  • cssファイルの読み込みタグをヘッダーに追記
  • 入れたい場所にアイコンを挿入

といった流れです。順に説明します。

※ちなみに、Wordpressの場合、プラグインをインストールして挿入する方法もあるようですが(こちらの記事参照)プラグインを入れるとサイト自体がどんどん重くなってしまうので、なるべくプラグインは使いたくないところです。
というわけで今回はプラグインを使用せずにアイコンを使う方法です。

SPONSORED LINK

まずはFont Awesomeをダウンロード

Font Awesome, the iconic font and CSS toolkitFont Awesome, the iconic font and CSS toolkit

こちらのページで、そのアイコンたちをダウンロードします。
海外のサイトです。「Download」ボタンをクリックしてダウンロードします。

アイコン

ダウンロードしたフォルダをWordpressのテーマに入れる

ダウンロードができたら、そのフォルダをみてみてください。

アイコン2

「css」「fonts」「less」「scss」の4つのフォルダがあるかと思います。
これをそのまま、WordpressのFTPサーバーのテーマの中に入れてしまいます。

場所は、WordPressテーマ「stinger3」の中に「webfont」というフォルダを新しく作成し、その中に上記でダウンロードしたフォルダ(「css」「fonts」「less」「scss」の4つ)を全て入れます。

cssファイルの読み込みタグをヘッダーに追記

アップロードができれば、次はそのフォルダをhtml内に呼び出せるように命令します。

WordPressの管理画面にいき、テーマ編集の中の「header.php」の中の部分に下記のコードを書きます。(コピペでOK!)

<!--webフォント読み込み-->
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/webfont/css/font-awesome.min.css">

私はの直前に入れています。

あとは、入れたい場所にアイコンを挿入するだけ

ここまでできれば、下準備は終わりです。

あとは、アイコンを入れたい場所に、コードを入れていくだけです。

例) ハートマーク

<i class="fa fa-heart"></i> ハートマーク

例) アップルマーク

<i class="fa fa-apple"></i> アップルマーク

など。
注意しなければならないのは、と、コードの名称の前に「fa」を入れるのを忘れずに。

コードの一覧はこちらから見ることができますので、それを任意の場所に挿入するだけです。

Font Awesome IconsFont Awesome Icons

当ブログでは下記のように入れています。
「single.php」の中や、「archive.php」のぱんくずリスト内など。

挿入例1)single.php内の関連記事前のアイコン

webfont見本2

<h3><i class="fa fa-edit"></i> 関連する記事</h3>

挿入例例2)single.php内の公開日、フォルダ、タグ表示部分

webfont見本

<div class="blogbox">
<span class="kdate"><i class="fa fa-calendar"></i> 公開日:
<time class="entry-date" datetime="&lt;?php the_time('c') ;?&gt;">
<!--?php the_time('Y/m/d') ;?-->
</time>
:
<!--?php if ($mtime = get_mtime('Y/m/d')) echo ' 最終更新日:' , $mtime; ?-->
</span>
<i class="fa fa-folder"></i> <!--?php the_category(', ') ?-->
<i class="fa fa-tag"></i> <!--?php the_tags('', ', '); ?-->
</div>

PHP内は個人によって違うと思いますので、自分の入れたいところに入れてみてください。

SPONSORED LINK

まとめ

いかがでしたか?
WEBフォントを使って簡単にアイコンを入れる事ができたかと思います。

少しのデザイン、気遣いによってウェブサイトの見た目やクリックのしやすさ、ユーザーの使い勝手も向上すると思うので、ぜひやってみてくださいね!
アイコンも439種類の中から使い放題、です。

おしまい。

育児エルゴから新作抱っこひもが出ました。新生児から使える最強の抱っこ紐はこちら

この記事がよかったら
いいね!お願いします
ヽ(=´▽`=)ノ

ままはっくの最新情報を
お届けします

Twitterでまなしばをフォローしよう!

この記事を書いている「まなしば」って誰?

こちらの記事もよく読まれています

今日の人気記事

  • プロフィール画像
    2歳の娘とエンジニアの夫と3人暮らしの88世代のブロガー。産休中からブログ書いてたら、月間60万PVになったので、脱サラしてフリーランスでメディアを作ってます。趣味はPerfume、ポケモン。東京在住の大阪人/同志社
    詳しいプロフィール・お問い合わせはこちら

ままはっくについて

アクセスありがとうございます。
このブログは育児ブロガー・まなしばが、妊娠出産・子育て・WEBサービスについて書いている“ママ術”的ブログです。
よろしくどうぞ!ヽ(=´▽`=)ノ
まなしばの詳しいプロフィール
Twitter | Facebook
プライバシーポリシー

夫と開発したブロガー向けツール

iOSとAndroidアプリ両方を探して紹介できるアプリ紹介ツール:
アプリーチ

TOP