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】Favicon(ファビコン)の作り方と設定方法

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

WordPress301リダイレクト

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

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

WordPress 403

【WordPress】プロフィールが更新できない(403エラー)場合の対処方法 – MixHost

WordPressでプロフィールを編集しようとしたら403エラーになって更新できなかったよー MixHostにWordPressをインストールしてプロフィールを編集しようとしたら403エラーになりまし …

ソースコード

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

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

AddQuickTag

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

WordPressで記事を書く時に文字を太字にしたり、リンクを挿入するときに、あらかじめ設定されているタグを使うと便利ですよね。 もし、自分好みのタグを設定することができたら便利だと思いませんか? そ …

スポンサー

PROFILE

zakker

Zakker(ザッカー)

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