コピペで使える!AddQuickTagプラグインを使った吹き出しアイコンの作り方

会話をしているような【吹き出しアイコン】を実装されていないテーマのために、作り方について解説していきます。

AddQuickTagプラグインをインストール

こちらのプラグインを、管理画面>プラグイン>新規追加で検索フォームに【AddQuickTag】と入力してインストール、有効化します。

吹き出しに使いたい画像をメディアに追加

画像の追加は、管理画面>メディア>新規追加からファイルを選択。

画像のURLをコピーしてメモに残しておきます。

メディアURLを差し替えたHTMLコードをAddQuickTagに追加する

管理画面>設定>AddQuickTagで以下のコードをコピペしていきます。

先ほどコピーした画像URLもいったん使わない入力フォームにペーストしておくと手間がはぶけます。

HTML前→開始タグへ

HTML後→終了タグへ

使っているテーマにCSSを追加

以下のコードを管理画面>外観>テーマの編集>style.cssに追加

ここの1番下に以下のコードを追加します。

! すでに書いてあるコードを消さないように注意してください。サイトのレイアウトが崩れるテーマもあります。また、子テーマがあるテーマは子テーマに書くようにしましょう。

子テーマとは→子テーマ – WordPress Codex 日本語版

なぜ子テーマを使うのか?

子テーマの使用にはいくつかの利点があります。

  • テーマを直接変更した場合、そのテーマがアップデートされると変更が失われるかもしれません。子テーマを使用すればテーマの変更は確実に保持されます。
  • 子テーマを使用することで開発時間を短縮できます。
  • 子テーマの使用することでWordPressのテーマの開発を良い形で学べます。

CSS

*もしくは管理画面>カスタマイズ>追加CSSでもOK!

こちらはテーマのアップデートをすると消えてしまう場合があるので注意が必要です。

編集画面より1ボタンで吹き出しON

*テーマLuxeritasでボタンをクリックするとビジュアルエディタでのプレビューが反映されていない場合があります。(ちゃんと表示はされます)原因がわかり次第記載しておきます。

補足:アイコンが右にくるときは

HTML前:fukidashi-bodyとfukidashi-imgが逆に

HTML後

 

CSS:fukidashi-imgのmargin-leftになります。

制作にあたって意識したこと

レスポンシブ対応

パソコンでもモバイルでも最適化してあります。

動作を軽くした

javascriptもつかっていないので動作も軽くしました。

テーマに左右されない

テーマ特有のショートコードを使わなかったので、どのテーマでも使い回しができます。テーマだけ変えるときはstyle.cssに貼り付ける部分だけで大丈夫です。