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投稿のリンク画面をアイキャッチ画像にする設定方法

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

関連記事

  1. 【動画版】wordpress初心者でもデータベースを復元できる方…

    wordpressを使っていたら、思わぬことでウィルス感染してしまい、バックアップしていたデータを復…

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

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

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

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

  4. たったそれだけで?PVを増加させたSNSボタンのカスタマイズ方法…

    ブロガーなら、誰でも悩むと思うのですが、バズを狙ったり、自分のfacebookやtwitterに投稿…

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

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

  6. 【動画版】wordpress初心者でもバックアップし復元する方法…

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

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

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

  8. WordPress初心者でも安心してCSSを編集できる子テーマ作…

    Wordpressのレイアウトを変更したいんだけど、CSSをそのままにしている方はいらっしゃ…

スポンサーリンク

さくらとXサーバーの速度比較

最近の記事

真夏の感謝祭 半額キャンペーン中

PAGE TOP