もう、共働きやめます。

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

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

   

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

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

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

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

before

before

after

after

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

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

SPONSORED LINK

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フォントを導入してみてはいかがでしょうか?

 - ブログ運営

ブログの第一印象は大事!アイコン風Webフォント。初心者向けの設定方法を紹介
この記事をお届けした
もう、共働きやめます。の最新ニュース情報を、
いいねしてチェックしよう!
SPONSORED LINK

SPONSORED LINK

       
ブログの更新情報はこちらから配信中

follow us in feedly

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

ブログで稼ぐ?なら、ブログは書くな!プロデュースしろ!

どうも、働かない夫です。 ブログって一人でやっている方って多いですよね。大型のサ …

ももねいろのマネだけは絶対にやめておけ!ひどく落ち込むよ!

どうも、働かない夫です。 タイトル通りです。オススメしません。やってみようとする …

iPhoneでブログを!環境最強のするぷろを使ってみた!

どうも。働かない夫です。 これ、ブログのネタになりそうだなぁ!と感じても、家に帰 …

ブログ1周年記念。ブログで生き残るために必要なこと。

どうも、ハタオトです。 ブログを書き続けて1年を過ぎました。 ちょうど、1年くら …

バイラルメディア【Spotlight】に引用されていたので、ブロガーにインタビューしてみた。

どうも、働かない夫です。 今、サイバーエージェントの運営するバイラルメディア【S …

【するぷろーら】初心者ための使い方講座。するぷろ使うなら必須アプリだよ

どうも、働かない夫です。 ブログ環境を整えたいので、するぷろを導入しました。これ …

ブロガー必見のGoogleアドセンスのポリシーまとめ

どうも。働かない夫です。 皆さんはGoogleアドセンスのルールってどのくらいご …

ブログを始めたら、まずブログ論を書け!いや、書きまくれ!

どうも、働かない夫です。 あなたはブログ論が多いブログってどう思いますか?ブログ …

イケダハヤトの今の1PVの価値は0.3円。0.7~0.8はどこへ?

どうも。働かない夫です。 プロブロガーのイケダハヤトさんの話題です。 イケダハヤ …

Twitterのロゴを使いたいときの注意点

どうも。働かない夫です。 ブログでTwitterのロゴが使いたくて色々と調べてい …