吹き出しデザインの設定【カラーサンプル付き!】

この記事では、吹き出しのデザイン設定について解説しています。

吹き出しは、投稿や固定エディタ内のプリセットパーツから選択し利用することができます。

どこで設定するの?

外観 > カスタマイズ > パーツスタイル設定 > 吹き出し設定(個別ページ用) で行います。

吹き出し設定(個別ページ用)

吹き出しデザインの設定方法

吹き出しのデザインは、コメント表示部分のスタイルが背景タイプとボーダータイプの2種類があります。

文字、背景、ボーダーの色を設定することで、あなたのサイトに合う吹き出しを表示することができます。

デフォルトの吹き出し

吹き出し画像の設定

吹き出しの画像には、イヌとネコの画像が初期設定されています。また画像下には「Name」として名前を表示することができます。

投稿や固定ページを編集中に、その都度、画像の差し替えや名前の編集を行うこともできますが、よく使うのであればオリジナルの画像と名前を設定しておくほうが便利です。

吹き出し画像の設定

画像サイズの設定

画像サイズは「ノーマル(デフォルト)」「ビッグ」の2種類から選択ができます。

ノーマル

ノーマルサイズ

ビッグ

ビッグサイズ

 

画像を指定する

左右別々に画像を指定することができます。デフォルトのイヌとネコの画像は300px × 300px サイズのgif画像が使用されています。

画像を指定する

「画像を選択」をクリックすると「メディアライブラリ」が表示されるので、設定したい画像を選択します。

メディアライブラリから画像を選択

 

画像を設定すると、自動的に設定した画像が表示されるようになります。

画像を設定した吹き出し

名前を設定する

左右別々に名前を設定することができます。

名前の設定

 

名前を設定する

背景吹き出しとボーダー吹き出しの設定

「背景吹き出し設定」では、文字色、背景色を、「ボーダー吹き出し設定」では、文字色、背景色、線色を指定することができます。

左右別々には、色を指定することはできません。

カラーの指定方法

  1. 「色を選択」ボタンをクリックします。

    色を選択ボタン

  2. カラーピッカーが表示されたら、色を選択します。

    カラーピッカー

    サトコハ
    色は、カラーコードでも指定することができるよ。「色を選択」ボタンの横の空欄(#00a568と表示があるところ)にコードを入力してね。
     

 

おまけ:吹き出しのカラーサンプル

おまけの吹き出しカラーサンプルです。参考にどうぞ。

背景色:#FFCEE5 線色:#FF82BA

カラーサンプル1

背景色:#CCEDBD 線色:#62C922

カラーサンプル2

背景色:#FFFCD1 線色:#EABE0B

カラーサンプル3

背景色:#CEF0FF 線:#00B7C4

カラーサンプル4

文字色:#FFFFFF 背景色:#79C6C6 線:#038C8C

カラーサンプル5

文字色:#FFFFFF 背景色:#3078A6

カラーサンプル6

7

文字色:#82B64 背景色:#BDD9F2

カラーサンプル7

8

文字色:#FFFFFF 背景色:#82A67C

カラーサンプル8

文字色:#FFFFFF 背景色:#F2798F

カラーサンプル9

10

文字色:#FFFFFF 背景色:#6E4C72

カラーサンプル10

スポンサーリンク