WordPress

【WordPress】会話形式の吹き出しをプラグインなしで導入する方法

更新日:2018-09-06

WordPress 吹き出し

ブログで会話形式の「吹き出し」を使うのが流行ってますね。

テーマによっては最初から吹き出し機能が付いていますが、後付けする場合は「Speech Bubble(スピーチバブル)」というプラグインを使う人が多いようです。

ただ、「スピーチバブル」を入れると他のプラグインと競合してうまく機能しない例があるようなのでちょっと心配ですね。(どのプラグインにもある話ですが・・・。)

ZAKKIPOSTはなるべくプラグインを使わないことをモットーにしていますので、今回も例のごとくプラグインなしで「吹き出し」を導入してみたいと思います。

今回は、こちらの記事を参考にさせていただきました。

はてなブログで吹き出しを導入する内容になっていましたので、WordPress用に少しアレンジを加えてご紹介します。

こんな感じで表示できるようになるよ。

きゃー。かわいいー!

設定方法(CSSの登録)

設定

こちらのCSSをコピペしてください。(※89行目と90行目は書き換えが必要です。)

書き換えるのは一番下(89行目、90行目)にある「クラス名」と「画像のURL」です。
クラス名で使用できる文字は、半角の英数字、ハイフン(-)、アンダーバー(_)です。
アルファベットで始めなければなりません。(数字や記号では始められません)

吹き出しの使い方

PCを見ながらメモしている画像

先程設定した吹き出しを実際に使ってみましょう。

吹き出しを右側(アイコン画像を左側)に表示する方法

吹き出しに入れたいコメントを「開始タグ」と「終了タグ」の間にはさんでください。

開始タグ

終了タグ

これが右側(アイコン画像左)だよ。できたかな?

吹き出しを左側(アイコン画像を右側)に表示する方法

吹き出しに入れたいコメントを「開始タグ」と「終了タグ」の間にはさんでください。

開始タグ

終了タグ

これが左側(アイコン右)ですよ。できましたかー?

ちなみに、この例のようにアイコン画像を変える場合は、クラス名を変えて、そのクラス名に対する画像のURLを変えるだけです。

吹き出しをもっと簡単に使う方法(AddQuickTag)

解決方法

吹き出しを入れるときに毎回この開始タグを入れるのはちょっと面倒ですよね。

面倒どころか、そもそも覚えられないよー

いいのがあるよ。

誰!?

クイックタグを登録できるプラグイン「AddQuickTag」だ。

あ、それこの前入れたやつだー

そうだ。詳しくは下にリンクを貼っておくからそっちの記事を読んでくれ。

AddQuickTag(WPプラグイン)の設定方法と便利な使い方

AddQuickTagを使えば、開始タグを覚えたり、わざわざ手打ちする必要がなくなりますので、簡単に「吹き出し」が使えるようになります。

最後にひとこと

最後にひとこと

以上でWordPressで会話形式の吹き出しをプラグインなしで導入する方法の紹介は終わりです。

「プラグインなし」と言っておきながら最後に「AddQuickTagを使え」という、ちょっとズルい記事になってしまいましたが、「AddQuickTag」は本当に便利なプラグインなので「吹き出し」と合わせて是非使ってみてください。

-WordPress
-, ,

執筆者:

関連記事

WordPressカテゴリー

【WordPress】カテゴリーの一覧リストを動的に作成する方法

WordPressの固定ページ等でカテゴリーの一覧を表示させたいときのテンプレートタグとその設置方法をご紹介します。 ZAKKIPOSTでは、ヘッダーとフッターのメニューに表示している「記事カテゴリー …

【MixHost】WordPressのインストール方法

MixHostでWordPressをインストールする方法を解説します。 目次 1. はじめる前に準備すること1.1. 1. 独自ドメインを取得する1.2. 2. レンタルサーバーを契約する1.3. 3 …

WordPress301リダイレクト

【WordPress】特定のページをプラグインなしで301リダイレクトする方法

SEOを意識してWordPressを運用している方の中では、パーマリンクを「カテゴリー名+ページ名」に設定している比率が高いですね。 オススメのパーマリンク設定については以下の記事を書きましたので参考 …

WordPressサブディレクトリ

サブディレクトリにインストールしたWordPressのURL変更方法

WordPressをサブディレクトリにインストールしたあとにURLを変更する(戻す)方法を解説します。 WordPressのインストール方法については以下の記事でご紹介しました。 【MixHost】W …

WordPress Embed

【WordPress】アイキャッチ画像付きリンクを表示する方法 – Embed

他所様(ヨソサマってこういう字を書くんですね。)のブログを読んでいると記事の中で他の記事を紹介するときにアイキャッチ画像付きでリンクが貼られているのを目にします。 ↓こういうやつです。 【2018年】 …

スポンサー

PROFILE

zakker

Zakker(ザッカー)

零細企業経営者。東京都在住。田舎暮らしに憧れを抱きながら東京で消耗中。いつかその日が来ることを信じて場所にとらわれない働き方の確立を目指して奮闘しています。