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. ul、liのドット部分をアイコンでリスト化する方法

    ulやolで箇条書きにする際に、ドットや数字の代わりにアイコンを使いたい時ってありますよね。…

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

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

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

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

  4. 誰でもできる!jQueryを使ってwordpressでもスクロー…

    wordpressを使っていてスクロール時に画像に動きをつけたい時ってありますよね。投稿記事内はプラ…

  5. たった2分でできる!ボタン画像をサイトに設置するボタンマルシェの…

    リンクを設定する時、クオリティーが高いボタン画像を使ってリンクさせたいですよね。私もボタン画…

  6. wordpressど素人がWordCamp Kansai 201…

    平成28年7月9、10日の2日間、WordCamp Kansai 2016のスタッフとして参加しまし…

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

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

  8. 初心者必見contact form 7基本操作からカスタマイズ方…

    contact form 7でお問い合わせページ作成したけど、レイアウトだけでも変更したいと…

スポンサーリンク

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

4/28まで初期設定費用半額

最近の記事

PAGE TOP