引用設定(個別ページ用)【カラーサンプル付き!】

引用のデザイン設定「THE THOR(ザ・トール)」

この記事では、パーツスタイル設定の引用設定について解説しています。

デフォルトの引用デザイン

どこで設定するの?

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

引用デザインの設定

 

引用デザイン設定

引用デザイン設定で選択できるデザインの種類は、7種類ですが、文字や背景などの色を設定できるので、同じデザインを使っていても印象を変えることができます。

7種類のデザイン

  1. 基本[カラーA:文字 B:背景 C:マーク](デフォルト)
  2. 左線[カラーA:文字 B:背景 C:マーク D:線]
  3. 線[カラーA:文字 B:背景 C:マーク D:線]
  4. 丸角[カラーA:文字 B:背景 C:マーク]
  5. 丸角線[カラーA:文字 B:背景 C:マーク D:線]
  6. 左背景[カラーA:文字 B:背景 C:マーク D:線]
  7. ラベル[カラーA:文字 B:背景 C:マーク背景 D:マーク影]

 

基本(デフォルト)

引用デザイン 基本(デフォルト)

カラーA:文字の色、B:背景の色、C:マークの色を指定できます。

左線

引用デザイン 左線

カラーA:文字の色、B:背景の色 C:マークの色 D:左線の色を指定できます。

引用デザイン 線

カラーA:文字の色、B:背景の色、C:マークの色、D:ボーダーラインの色を指定できます。

丸角

引用デザイン 丸角

カラーA:文字の色、B:背景の色、C:マークの色を指定できます。

丸角線

引用デザイン 丸角線

カラーA:文字の色、B:背景の色、C:マークの色、D:ボーダーラインとマーク背景の色を指定できます。

左背景

引用デザイン 左背景

カラーA:文字の色、B:背景の色、C:マークの色、D:ボーダーとマーク背景の色を指定できます。

ラベル

引用デザイン ラベル

カラーA:文字の色、B:背景の色、C:マーク背景の色、D:マークの影の色を指定できます。

カラーの指定方法

1.「色を選択」をクリック。

2.カラーピッカーから色を選択。

「色相」「明度」「彩度」を調整し、好みの色を選択します。「色相」「明度」は丸マークを、彩度は四角マークを動かし調整します。

カラーピッカー

 

この方法が面倒だなぁと思う方は、「色を選択」ボタン横の空欄に、直接カラーコードを入力することで指定するもできます。

原色大辞典

色の名前とカラーコードが一目でわかるWEB色見本…

おまけのカラーサンプル

「おまけ」として、引用デザイン別のカラーサンプルをご紹介します。

基本のデザイン

カラーサンプル01

カラーB(背景) #E5E6F4 
カラーC(マーク) #997BAD

 

カラーサンプル02

カラーB(背景) #DDE8C2
カラーC(マーク) #A5CC80

 

カラーサンプル03

カラーA(文字) #808080
カラーB(背景) #CDE7EE
カラーC(マーク) #3CAAB1

 

左線のデザイン

カラーサンプル04

カラーB(背景) #FFF4F7
カラーC(マーク) #DA8596
カラーD(左線)

 

カラーサンプル05

カラーB(背景) #F9F0F0
カラーC(マーク) #DA3C41
カラーD(左線)

 

カラーサンプル06

カラーB(背景) #FFFFFF
カラーC(マーク) #999999
カラーD(左線) #333333

 

線のデザイン

カラーサンプル7

カラーB(背景) #DEDCEE
カラーC(マーク) #6A60A9
カラーD(線)

 

カラーサンプル8

カラーB(背景) #FFFFFF
カラーC(マーク) #393F4D
カラーD(左線)

 

カラーサンプル9

カラーB(背景) #FFFFFF
カラーC(マーク) #B1938B
カラーD(左線)

 

丸角のデザイン

カラーサンプル10

カラーC(マーク) #587498

 

カラーサンプル11

カラーB(背景) #FFDDC4
カラーC(マーク) #E9724C

 

カラーサンプル12

カラーB(背景) #FFF5C3
カラーC(マーク) #FFC857

 

丸角線のデザイン

カラーサンプル13

カラーB(背景) #CEEFE4
カラーC(マーク) #FFFFFF
カラーD(線) #9DD38A

 

カラーサンプル14

カラーB(背景) #FFFFFF
カラーC(マーク)
カラーD(線) #F78D3F

 

カラーサンプル15

カラーB(背景) #FFFFFF
カラーC(マーク)
カラーD(線) #003399

 

左背景のデザイン

カラーサンプル16

カラーB(背景) #FFFFFF
カラーC(マーク)
カラーD(線) #3CA5D4

 

カラーサンプル17

カラーB(背景) #FFFFFF
カラーC(マーク)
カラーD(線) #585858

 

カラーサンプル18

カラーB(背景) #FFFFFF
カラーC(マーク)
カラーD(線) #87A4E3

 

ラベルのデザイン

カラーサンプル19

カラーB(背景) #F3F3F3
カラーC(マーク背景) #92D4FF
カラーD(マーク影) #6EB3E0

 

カラーサンプル20

カラーB(背景) #FFEBCD
カラーC(マーク背景) #FFBE5D
カラーD(マーク影) #DAAA64

 

カラーサンプル21

カラーB(背景)

#FFF0EF

カラーC(マーク背景) #FF785B
カラーD(マーク影) #ED664E

 

 

スポンサーリンク