menu

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をフォローしよう!

facebook投稿のリンク画面をアイキャッチ画像にする設定方法facebook投稿のリンク画面をアイキャッチ画像にする設定方法

お名前.comから独自ドメインを取得してwordpressをインストールする方法(さくらインターネット)お名前.comから独自ドメインを取得してwordpressをインストールする方法(さくらインターネット)

関連記事

  1. 簡単すぎる!wordpressで初めてのCSS編集これで画像装飾はお手のもの

    簡単すぎる!wordpressで初めてのCSS編集これで画像装飾…

    wordpressを使っていて、画像を装飾をする際にCSSを編集したい時ってありますよね。じ…

  2. thumb-575033_1280

    絶対できる!アイキャッチ画像付きfacebookのいいねボタンを…

    上の画像のようなバイラルメディア風facebookいいねボタンを記事の下に設置したい方は必見…

  3. 誰でもできるcontact form 7にボタン画像を設定する方法

    誰でもできるcontact form 7にボタン画像を設定する方…

    contact form 7の送信ボタンを画像に変えて印象を良くしたいですよね。 以前、…

  4. wordpressのドメインを変更しGoogleに通知する方法

    wordpressのドメインを変更しGoogleに通知する方法

    wordpressを始めてから、ドメインを変更したいなと思ったことありますよね。だけど、変更…

  5. スライダー表示可!wordpressでサイドバーを固定するQ2W3 Fixed Widget

    スライダー表示可!wordpressでサイドバーを固定するQ2W…

    スクロールする際に、サイドバーのウィジェットを常に表示させたい時ってありますよね。いろいろ探した…

  6. facebook投稿のリンク画面をアイキャッチ画像にする設定方法

    facebook投稿のリンク画面をアイキャッチ画像にする設定方法…

    ブログ記事をfacebookに投稿したけど、アイキャッチ画像が表示されないって時って悩ましい…

  7. 簡単!TCDテーマの標準搭載SNSボタンのシェア数を表示させる方法

    TCDテーマの標準搭載SNSボタンのシェア数を表示させる方法

    最近、TCDのVIEWというテーマに変更しまして、TCDテーマのSNSボタンはデザインが良くて使いた…

  8. バックアップ

    【動画版】wordpress初心者でもバックアップし復元できる…

    wordpressを使ってブログを運営していると、カスタマイズして画面が真っ白になったり、ウィルスに…

PAGE TOP