• HOME
  • ブログ
  • wordpress
  • wordpressでテキストにアイコン付き背景をワンクリックで挿入する方法(コピペできます)

wordpressでテキストにアイコン付き背景をワンクリックで挿入する方法(コピペできます)

wordpress

ブログを書いて、強く訴えたい部分ってありますよね。目立たせたいけどどうすればいいか悩みますよね。私もその内の一人でなにか良い方法ないかなって考えていたところ、ワンクリックでテキストにアイコン付き背景を挿入する方法がわかりましたので、ご紹介します。ぜひ、ご覧になり役立っていただけたらと思います。

目標設定

今回、習得していただくアイコン付き背景の例を下に載せています。

テキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキスト

simple custom CSSの導入

以前、子テーマを制作してCSSを編集することを紹介しましたが、もっと簡単にCSSを編集できるプラグインがありましたので、今回はプラグインを利用したいと思います。

wordpress管理画面⇨「プラグイン」⇨「新規追加」⇨「simple custom CSS」と検索する。⇨インストールし有効化する。

Font Awesomeについて

アイコン付き背景を作成するアイコンですが、Font Awesomeが提供しているアイコンを利用します。利用方法は2通りあります。

  1. CDNサーバー上のFont Awesomeファイルを読み込む場合
  2. Font Awesomeフォントを自サイト上に設置したい場合

今回は1のCDNサーバー上のFont Awesomeファイルを読み込むようにしていきたいと思います。
私の場合は特に設定はしなくても読み込むことができましたので、設定については解説しません。もし、Font Awesomeファイルを読み込むことができないという方がいらっしゃればこちらを参考にして設定していただけたらと思います。

作業するにあたりFont Awesomeのサイトを利用しますので、下にリンクを貼ってます。

Font Awesome

simple custom CSSにCSSを入力する

下にMEMOとCHECKのCSSを載せています。そのCSSコードをsimple custom CSSの入力画面(wordpress画面→外観→custom CSS)にコピーペーストします。自分でカスタマイズしたいと考えている方にはカスタマイズする際に最低限必要な変更箇所を説明していますので、参考にしていただけたらと思います。

 

MEMO CSS説明

※アイコンの種類の確認方法は上にリンクを貼っていたFont Awesomeのサイトから下の写真のとおりに確認していきます。コードを確認できたら「\+下4桁」を入力します。

1

2

3

4

AddQuicktagの導入とタグの登録について

AddQuicktagというプラグインを導入してタグを登録してワンクリックで表示できるようにします。AddQuicktagの導入についてwordpress管理画面⇨「プラグイン」⇨「新規追加」⇨「AddQuicktag」と検索する。⇨インストールし有効化すれば導入完了です。
下の写真のとおりAddQuicktagに設定すれば、ワンクリックでアイコン付き背景を挿入することができます。

1

2

3

4

コピペで設定できますので、簡単だったではないでしょうか?ぜひ、試していただけたらと思います。以上で説明を終わります。

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitterでshare lifeをフォローしよう!

中川 憲治

51,350 views

動画編集やWEB関連などを当ブログに書き出して2年後、12年間働いていた消防士を辞め、自分のやりたいことを仕事にしたいと考えてWEB業界に転職する。 自身の...

プロフィール