共働きで消耗した家族が生き方を見直してます。

もう、共働きやめます。

ブログ運営

ブログの第一印象は大事!アイコン風Webフォント。初心者向けの設定方法を紹介

投稿日:

どうも。働かない夫です。

色んな人のブログと比べて、わたしのブログって殺風景に見えてました。んー同じSTINGER3を使っていても違う感じがします。色々調べているうちに・・・

WEBフォントの記事がありました!見た目がシンプルかつ可愛く見えるので、殺風景なこのブログには必要だと思い導入しました。

当ブログで導入した結果をご確認ください。

before

before

after

after

細かなところで印象が全然違うでしょ?人もブログも第一印象が大事です。初めて導入するのには時間がかかりましたが、殺風景なブログでお悩みでしたら、やってみる価値はありますよ?

詳しく設定方法をみていきましょう!

WEBフォントを導入しよう!

1、アイコンをダウンロードする

【Font Awesome】が今回使うWEBフォントになります。

まずはこちらからダウンロードをしてください。

Font Awesome, the iconic font designed for Bootstrap

Font Awesome

ダウンロードすると

  • css
  • fonts
  • less
  • scss

の4つのフォルダがあります。今回使うのは、

  • css
  • fonts

の2つのみになります。

2、FTPサーバーにアップロード

先ほど、ダウンロードした「css」「fonts」の2つのフォルダーをWordPressテーマフォルダ(わたしはSTINGER3)の配下にアップロードしましょう。ここでは32Styleさんのブログで紹介されていた「webfont」というフォルダーを作り、その配下にアップロードしました。

3、heeder.phpに読み込みタグを追記

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

WordPress編集画面

 

画面左側のテンプレートよりヘッダーを選択

ワードプレスヘッダー

header.phpにcssの読み込みタグを追記します。

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/webfont/css/font-awesome.min.css">

追記する場所は”link rel”が並んでいる一番下で大丈夫です。

ココまでで「Font Awesome」を使う準備が完了しました。

使いたい場所にアイコンタグを入れよう!

ここからが本番です。アイコンタグを使いたい場所に

<i class="fa [入れたいアイコンのclass名]"></i>

を入れましょう。

(例)パンくずリスト

ダッシュボード→外観→テーマの編集→テンプレート→単一記事の投稿 (single.php)

パンくずリスト

 

 

①の編集部分

<div class="kuzu">
  <div id="breadcrumb">
    <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="<?php echo home_url(); ?>" itemprop="url"> <span itemprop="title">
<i class="fa fa-globe "></i>ホーム</span> </a> &gt; </div>

②の編集部分

    <?php foreach($allcats as $catid): ?>
    <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="<?php echo get_category_link($catid); ?>" itemprop="url"> <span itemprop="title"><i class="fa fa-folder-open "></i><?php echo get_cat_name($catid); ?></span> </a> &gt; </div>
    <?php endforeach; ?>

となっています。

初心者には大変かもしれませんが、ソースコードを読みながら入れていきましょう。

アイコンは【Font Awesome】から確認が出来ます。以下のページをご確認ください。

Font Awesome Icons

まとめ

ちょっとした事ですが、アイコンを入れているかどうかは大きいです。第一印象で読みたくない場合もありますからね。 アイコンの種類も豊富ですので、カスタマイズの自由度は高いです。ブログが殺風景だ!って方は意外と簡単に出来ますので、WEBフォントを導入してみてはいかがでしょうか?

  • この記事を書いた人
ハタオト

ハタオト

職業:専業主夫。サイト作って、静かに生活しています。このブログは好き勝手書いています。

-ブログ運営

Copyright© もう、共働きやめます。 , 2018 All Rights Reserved.