素敵なサムシングを独断と偏見で一方的に紹介するブログ(´・ω・`)

副業

投稿日: 2018年2月22日
最終更新日:

【見た目を整えよう】WordPressにFontAwesomeを導入して使ってみよう

YouTube

スポンサーリンク

336×280




FontAwesomeとは?

FontAwesome(フォントオーサム)とは、様々なデザインのアイコンWebページ上で自由に使うことが出来る無料のツールキットです。
このツールキットを使えば、サイズ自由に変えてアイコンをブログ記事に追加することが可能になるので、ブログの見た目をいい感じにすることが可能です。

導入自体はとても簡単に出来るのでご紹介致します。

手順

前提

FontAwesomeCDNで導入する方法ファイルを公式サイトからダウンロードしてWordpressに直接配置する方法があります。
今回は前者のCDNを使って導入してみましょう。

CDNとは?

CDNとはコンテンツ・デリバリー・ネットワーク(Contents Delivery Network)の略で、様々なコンテンツを高速かつ安定して配信するためのネットワークの事です。

FontAwesomeをCDNで利用する事でCSSファイルFontファイルを高速でインターネット経由読み込む事が可能になります。

HTMLに一行追記するだけで使えるというメリットがありますが、インターネット経由で利用するのでネット環境が無い状態だと利用出来ないというデメリットがありますので、環境に合わせて導入方法を変えましょう。

header.phpにCDN読み込みの追加

まずは前述した通り、WordpressでFontAwesomeを使えるようにするためにCDNを読み込む設定を追記しましょう。
ダッシュボードから外観>テーマの編集>テーマヘッダー(header.php)を選択します。

header.phpファイル内の「」を探して、その一行上に以下を追記して下さい。


これでFontAwesomeをWordpressで使用する準備は出来ました。

スポンサーリンク

336×280




使い方

アイコン一覧

FontAwesomeで使えるアイコン一覧コチラから確認出来るので、使いたいアイコンを見つけてみてください。

HTMLでの使い方

まずはHTMLタグを使って直接記事に追加する方法です。

使いたいアイコンを見つけたらアイコンをクリックします。

移動した先のページ下部から埋め込みタグをコピーします。

コピーしたタグをHTMLファイルに貼り付けてみましょう

正しく表示されましたね!!

CSSでの使い方

一つ一つアイコンを入れたい場合は上記の方法で可能ですが、ブログ全体で同じアイコンを入れたい場合、すべての記事にアイコンを埋め込むのは非常に手間がかかるので、作業効率が良くありません。
そこでCSSでFontAwesomeの指定を追加する事で、CSSが読み込まれている記事全体に同じ設定をかける事が可能です。

今回は見出しタグ(h2~h6)に対してを追加するようなCSS記述をしてみましょう。

ダッシュボードから外観>テーマの編集>スタイルシート(style.css)を選択します。

次にCSSファイルの一番下に以下を追記してください。

そうすると、以下のように見出しタグの先頭にアイコンが追加されるようになります。

終わりに

いかがだったでしょうか?

簡単にアイコン画像をブログ記事に追加出来るようになりましたね。

文字だけのブログは読みづらいので、要所要所にアイコンをちりばめておしゃれで読みやすいブログを作っていきましょう♪

336×280




336×280




CATEGORIES & TAGS

副業, , , ,

blogenist

Author: blogenist

関連記事

YouTube

お名前.comサイドバー