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 Embed

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

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

Seach Console

Search Consoleの登録方法と使い方を初心者向けに解説

ブログをはじめたばかりの方が意外と忘れがち、先送りしがち、なのが、この「Search Console」。 ブログの立ち上げでやることがいっぱいあるのに、「分析?そんな先のことまで気が回るわけないよ」っ …

CyberduckとFilezilla

Macで使える無料のFTPクライアント2選

Macで使える無料のFTPクライアントを紹介します。 これからブログをはじめる方 いままでライブドアブログなどの無料ブログを使ってきた方 上記の方々は「FTPクライアント」って言われても「???」だと …

WordPressコメント機能

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

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

WordPressテーマインストール

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

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

スポンサー

PROFILE

zakker

Zakker(ザッカー)

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