初心者ブロガー向け

コピペだけ!GutenbergでWebアイコンを表示する方法

この記事では

ブロックエディター(Gutenberg)のままで記事内にWebアイコンを表示する方法

を誰でも簡単にできるように解説します。

利用するWebアイコンはFontAwesomeのものを使います。

コピーとペーストだけでできるので初心者でも大丈夫!

FontAwesomeとは

Webアイコンフォントを提供している有名なサイトです。

有料で利用すると7700以上ある全てのアイコンが使えるようになりますが、無料でも1500以上のアイコンが使えます。

ここはケチって無料でいきましょう。

Webアイコンフォントとは

』このようなアイコンを画像ではなく文字と同じようにフォントとして扱えるようにしたものです。

文字と同じ扱いができるので種類や色を変えることも簡単ですし、大きさを変えても粗くなることもありません。

とても便利に使えるアイコンなんです。

アイコンを使えるようにする

FontAwesomeのアイコンを使うにはHTMLコードを使います。

このHTMLコードをコピーして使います。

コードを書き込む方法は2通り。

  • プラグインを使った方法
  • 有料テーマを使った方法

どちらもテーマファイルを直接いじることがないので、専門的な知識が必要なく誰でも扱えるやり方です。

プラグインを使った方法

この記事でご紹介するのは『Head, Footer and Post Injections』というプラグイン。

このプラグインを導入するとヘッダーやフッターに簡単にコードを書き込むことができます。

 

❶プラグインの新規追加で右のキーワードにプラグイン名を入力します。
❷プラグイン横の『今すぐインストール』を押してインストール。

ユーザーも多く評価も高いですね。

 

プラグインをインストール後、有効化すると使用可能になります。

 

WordPressダッシュボードの設定からHeader and Footerを選択。

 

一番左のタブHead and FooterにあるON EVERY PAGEの入力欄に、コピーしたHTMLコードをペーストします。

 

最後に一番下にあるSAVEを押して完了です。

有料テーマを使った方法

次に有料テーマを使ってコードを記載する方法です。

プラグインを入れるとサイトが多少重くなってしまうのが懸念されますが、有料テーマならプラグインを入れる事なく簡単にヘッダーをいじることができるので、お金に余裕があればこちらをオススメします。

僕が使っているテーマはThe Thor(ザ・トール)というテーマですが、他の有料テーマでも似た設定ができると思います。

記載する場所ですが

 

この部分にFontAwesomeのHTMLコードをペーストします。

以上。

ちょー簡単。

これでFontAwesomeのアイコンが使えるようになりました。

ブロックをHTML編集に

クラシックエディターではなく、グーテンベルグのブロックエディターでHTMLを編集できるようにします。

 

まずブロックに文字を入力します。

 

文字を入力すると上に編集機能が出てきます。(スマホの場合は下に出ます)

 

1番右の を選択すると、その中に『HTMLとして編集』という項目があります。

それを選ぶとHTMLの書き込みを反映できるようになります。

 

このような表示になればHTML編集に切り替わってます。

アイコンを挿入する

次に、使いたいアイコンをFontAwesomeから選びます。

 

トップ画面下の『Free Icons』を選択します。

 

無料で利用できるアイコンのみが表示されます。

 

アイコンを選び、HTMLコードをコピーします。(コード部分をクリックすると自動でコピーされます)

 

アイコンを先頭に入れたい場合は<p>と最初の文字の間にコピーしたHTMLコードを挿入します。

 

プレビューを見るとちゃんとアイコンが入っていると思います。

まとめ

コピーとペーストのみで簡単にアイコンを挿入する方法をご紹介しました。

冒頭でもお伝えしましたが、プラグインを入れるとどうしてもサイトが重くなり表示に時間がかかるようになります。

Googleはページの表示速度も検索順位に影響する、いわゆるスピードアップデートを実施しているのでやはりそれなりの速度が必要ですね。

その点では有料テーマを利用すると有利になります。

ブログでお金を稼ぐ事を目的とするのであれば是非使ってみてください。

僕のオススメはSEO対策最強のテーマ『The Thor』です。

-初心者ブロガー向け

© 2020 IKUJI homme