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

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

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

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

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

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

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

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

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

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

HTML前→開始タグへ

        <div class="fukidashi">
          <div class="fukidashi-img"><img src=“画像のURLと差し替えます” alt=""></div>
          <div class="fukidashi-body">

HTML後→終了タグへ

</div>
        </div>

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

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

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

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

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

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

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

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

CSS

.fukidashi {
    margin: 5% 0;
    display: flex
}

.fukidashi-img-l {
    margin-right: 5%;
    width: 70px;
    height: 70px;
    border: 3px solid #b4baff;
    border-radius: 100%;
}

.fukidashi-img img {
    border-radius: 100%;
    width: 100%;
    height: 100%;
}

.fukidashi-body {
    background: #f1f0f0;
    flex: 1;
    padding: 2%;
    border-radius: 10px;
}

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

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

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

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

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

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

        <div class="fukidashi">
          <div class="fukidashi-body">
          <div class="fukidashi-img-r"><img src=“画像のURLと差し替えます” alt=""></div>

HTML後

</div>
        </div>

 

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

.fukidashi {
    margin: 5% 0;
    display: flex
}

.fukidashi-img-l {
    position: relative;
    margin-right: 5%;
    width: 70px;
    height: 70px;
    border: 1px solid #000;
    border-radius: 100%
}

.fukidashi-img-r {
    position: relative;
    margin-left: 5%;
    width: 70px;
    height: 70px;
    border: 1px solid #000;
    border-radius: 100%
}
.fukidashi-img-r img,.fukidashi-img-l img {
    border-radius: 100%;
    width: 100%;
    height: 100%;
    flex: 1;
    object-fit: cover
}

.fukidashi-body {
    background: #f1f0f0;
    flex: 1;
    padding: 2%;
    border-radius: 10px
}

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

レスポンシブ対応

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

動作を軽くした

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

テーマに左右されない

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