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 OGP Twitterカード

【WordPress】OGPとTwitterカードをプラグイン無しで設定する方法

ブログを運営していくうえでFacebookやTwitterを ブログを見てもらうための集客ツール 読者と交流するためのコミュニケーションツール として利用したいと思う方は多いでしょう。 その中でも一番 …

MixHostキャンペーン

MixHost・1ヶ月間限定10%OFF!【期間限定キャンペーン】

レンタルサーバーの比較記事で取り上げ、当サイトでも利用させてもらっているMixHostが1ヶ月限定の10%OFFキャンペーンを開始しました! 2018年にブログをはじめる方に向けた「レンタルサーバーの …

WordPressテーマインストール

【WordPress】テーマ(デザインテンプレート)のインストール方法

この記事では、WordPressの「テーマ」をインストールする方法を解説します。 事前準備さえしっかりしておけば、インストール自体はとっても簡単です。 事前準備の内容をふまえてテーマのインストール方法 …

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

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

WordPress XMLサイトマップ

【WordPress】XMLサイトマップの作り方とGoogleへの送り方

ブログをはじめようとWordPressのセットアップをしていると、やることが多すぎて細かい設定を忘れがち。 このXMLサイトマップも見落としがちな設定のひとつですね。 はじめてWebサイトやブログを運 …

スポンサー

PROFILE

zakker

Zakker(ザッカー)

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