この記事では、吹き出しのデザイン設定について解説しています。
吹き出しは、投稿や固定エディタ内のプリセットパーツから選択し利用することができます。
どこで設定するの?
外観 > カスタマイズ > パーツスタイル設定 > 吹き出し設定(個別ページ用) で行います。
吹き出しデザインの設定方法
吹き出しのデザインは、コメント表示部分のスタイルが背景タイプとボーダータイプの2種類があります。
文字、背景、ボーダーの色を設定することで、あなたのサイトに合う吹き出しを表示することができます。
吹き出し画像の設定
吹き出しの画像には、イヌとネコの画像が初期設定されています。また画像下には「Name」として名前を表示することができます。
投稿や固定ページを編集中に、その都度、画像の差し替えや名前の編集を行うこともできますが、よく使うのであればオリジナルの画像と名前を設定しておくほうが便利です。
画像サイズの設定
画像サイズは「ノーマル(デフォルト)」「ビッグ」の2種類から選択ができます。
ノーマル
ビッグ
画像を指定する
左右別々に画像を指定することができます。デフォルトのイヌとネコの画像は300px × 300px サイズのgif画像が使用されています。
「画像を選択」をクリックすると「メディアライブラリ」が表示されるので、設定したい画像を選択します。
画像を設定すると、自動的に設定した画像が表示されるようになります。
名前を設定する
左右別々に名前を設定することができます。
背景吹き出しとボーダー吹き出しの設定
「背景吹き出し設定」では、文字色、背景色を、「ボーダー吹き出し設定」では、文字色、背景色、線色を指定することができます。
左右別々には、色を指定することはできません。
カラーの指定方法
- 「色を選択」ボタンをクリックします。
- カラーピッカーが表示されたら、色を選択します。
サトコハ 色は、カラーコードでも指定することができるよ。「色を選択」ボタンの横の空欄(#00a568と表示があるところ)にコードを入力してね。
おまけ:吹き出しのカラーサンプル
おまけの吹き出しカラーサンプルです。参考にどうぞ。
1
背景色:#FFCEE5 線色:#FF82BA
2
背景色:#CCEDBD 線色:#62C922
3
背景色:#FFFCD1 線色:#EABE0B
4
背景色:#CEF0FF 線:#00B7C4
5
文字色:#FFFFFF 背景色:#79C6C6 線:#038C8C
6
文字色:#FFFFFF 背景色:#3078A6
7
文字色:#82B64 背景色:#BDD9F2
8
文字色:#FFFFFF 背景色:#82A67C
9
文字色:#FFFFFF 背景色:#F2798F
10
文字色:#FFFFFF 背景色:#6E4C72