Wordpressの「吹き出し」を自分の思うままに自由にカスタマイズしたい。そしてなるべく簡単な方法でカスタマイズしたい。よくあることです。
そこで今回は、どのテーマでも共通的な「吹き出し」のカスタマイズ方法について、ご紹介します。
この記事の対象レベル
この記事は、CSSがある程度、わかる人を対象とします。CSSの基礎知識がある人を前提とします。
CSSの知識がない人は、申し訳ありませんが勉強してください
－PR－
どのテーマでも共通的な吹き出しのカスタマイズ方法
どのテーマでも関係なく共通的に、吹き出しのカスタマイズがしたい・・。そのような場合、やはりCSSで対応すべきです。
なので、吹き出しのカスタマイズは基本、CSS対応とします。そしてこの記事は、どのテーマでも対応する「吹き出し」のカスタマイズ方法となっています。
ここら辺の考え方は、やっぱり元IT技術者的な考え方かな・・
吹き出しのカスタマイズ前後のイメージ
ちなみに、吹き出しカスタマイズ前後のイメージはこんな感じです。
■デフォルト
ガスレンジ
■オリジナル＆カスタマイズ修正後
つちのこ
吹き出しのカスタマイズ方法の説明
ではさっそく、吹き出しのカスタマイズ方法を説明していきます。なお、テーマはcocoonで説明していきます。
吹き出しのカスタマイズ方法の説明ですが、参考記事を元に大雑把にざっくり説明していきます。行間は読み取ってください
① 吹き出しの新規作成と画像の差し替え
そのテーマにあった、吹き出しの新規作成を行う。また、吹き出しの画像はオリジナルのものに差し替える。
参考記事
→ 自作の吹き出しを作成して利用する方法 | Cocoon
■デフォルト
冷やし中華はじめました
■新規作成後
冷やし中華はじめました
[関連記事]
・背景が白抜きの画像を簡単に色づけする方法～イラスト画像編集の裏技
これが、吹き出しをカスタマイズする第一段階です。これから、新規作成した吹き出しのカスタマイズをします
備考1／ 参照画像の形により吹き出し画像の形も変化する
余談ですが、吹き出し画像の形は、参照元の画像の形により、それに合わせて変化します。
■正方形
[参照元画像]
[吹き出しイメージ]
たらこ
■縦長な四角
[参照元画像]
[吹き出し]
いくら
■横長な四角
[参照元画像]
[吹き出し]
すじこ
一般的な丸い形の吹き出し画像にしたい場合は、参照元の画像は、正方形にすべきです
② 新規作成した吹き出しのカスタマイズ
参考記事を元に、新規作成した吹き出しのカスタマイズをします。
参考記事
→ 【Cocoon】デフォルトの吹き出し設定を色々カスタマイズをしてみた
この記事はcocoonとなっていますが、CSSについて書かれているのでテーマはどのテーマでもよく共通的な内容です
またCSS初級者にも、わかりやすく丁寧に書かれています。とても参考になるよい記事です
参考記事を読みながら、CSSを一つずつ修正＆テストしていき、吹き出しのカスタマイズを完成させてください
■カスタマイズ前
太陽は右からのぼる
■カスタマイズ後
太陽は右からのぼる
参考記事を元に、自分好みの吹き出しのカスタマイズをしてください
吹き出し（バルーン）の直書きはやめよう
実は、この記事のやり方でオリジナルの吹き出しを作る前に、サルワカさんの記事を参考に、オリジナルの吹き出しを作っていました。
参考記事
→ CSSで作る！吹き出しデザインのサンプル19選
内容的には、とてもよかったのですが・・
■直書きの吹き出し
吾輩は猫である。名前はまだない。だから、
にゃん太郎と呼んでくれ。トマトはまあまあ好きかな。
（ちなみにですが、こちらの吹き出しをスマホで見ると、レスポンシブされず途中で切れます）
ただ、このやり方で吹き出しを作成すると、スマホで見たとき、吹き出しがレスポンシブに対応しないことが判明しました。
なので、吹き出しの直書きはやめたほうがよいです。
吹き出しをレスポンシブ対応させるなら・・
吹き出しをスマホでもレスポンシブ表示させたいなら、以下の手順でオリジナル吹き出しを作成したほうがよいです。
① そのWordpressテーマにあった、吹き出し追加で、オリジナルの吹き出しを新規作成する
② 新規作成した、オリジナル吹き出しのカスタマイズはCSSで変更する
このようにすれば、どのWordpressテーマでも吹き出しがレスポンシブ化されます。
僕の失敗、および、参考情報です
正攻法な吹き出しのカスタマイズ方法
この記事で、ご紹介した吹き出しのカスタマイズ方法は、基本的で、どのテーマにも適用でき、正攻法な吹き出しのカスタマイズ方法です。
吹き出しのレスポンシブ化にも対応できます。汎用性が高く、オススメの吹き出しのカスタマイズ方法です。
まとめ
どのWordpressテーマや、どのような環境にも依存せずに、広範囲で汎用的な吹き出しのカスタマイズを知りたいと思いました。
また、簡単で手軽にできる方法がよいと思いました。
そこで、ネット上で参考情報を集め、実際に自分で吹き出しのカスタマイズをしてみました。そしてまとめました。
この記事が、手軽で簡単に、そして汎用的に吹き出しをカスタマイズしたい人の参考になればと思います。
●最後まで読んでいただきありがとうございました。
おしまい
