WordPress

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

投稿日:

WordPress 吹き出し

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

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

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

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

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

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

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

きゃー。かわいいー!

設定方法(CSSの登録)

設定

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

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

吹き出しの使い方

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

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

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

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

開始タグ

終了タグ

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

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

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

開始タグ

終了タグ

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

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

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

解決方法

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

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

いいのがあるよ。

誰!?

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

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

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

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

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

最後にひとこと

最後にひとこと

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

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

-WordPress
-, ,

執筆者:

関連記事

ソースコード

【WordPress】記事にソースコードを表示する方法を比較解説

ブログでHTMLやCSS、PHPなどのソースコードを紹介したいときは、エディタのように行番号や色を付けて紹介することができる「Syntax Highlight(シンタックス・ハイライト)」を使うと便利 …

アイコン

【WordPress】Favicon(ファビコン)の作り方と設定方法

WordPressでFavicon(ファビコン)を設定する方法を解説します。 目次 1. Favicon(ファビコン)とは2. Faviconの作成方法2.1. 1. デザインを決める2.2. 2. …

WordPress 目次

【WordPress】プラグインなしで動的に目次を表示する方法

最近はWordPressのテーマに最初から目次機能が入っている場合が多いので、あまりニーズはないかもしれませんが、WordPressでプラグインを使わずに動的に目次を表示する方法をご紹介します。 例の …

WordPressコメント機能

【WordPress】コメント機能を無効化(非表示・削除)する方法

WordPressにはコメント機能が標準で設置されています。 コメント機能は読者の方とコミュニケーションを図るうえでとても便利な機能なのですが、ブログを運営していると、スパムコメントが入ってきたり、嫌 …

WordPressのテーマ(テンプレート)

【2019年】SEOに強いWordPressテーマ(有料・無料)厳選

このページでは、ただオシャレなだけでないSEOに強いWordPressテーマを有料のものから無料のものまで厳選して紹介します。 これからブログやアフィリエイトサイトを運営してお金を稼ぎたいと思っている …

スポンサー

PROFILE

zakker

Zakker(ザッカー)

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