ブロックサンプル：検索（1/2）

検索（1/2）

ブロックの設定を比較するサンプルです。各例の直前に変更設定と値を記載しています。

画像等は同梱素材を使用します。コピー用コードと書かれた例は、説明に従って必要なデータ・編集場所を用意してください。

sample-07015 / core/search　基本形

sample-07016 / core/search　label：label="短いサンプル"

sample-07017 / core/search　label：label="長いサンプルの文章で折り返し方と余白の見え方を確認します。"

sample-07018 / core/search　showLabel：showLabel=false

sample-07019 / core/search　showLabel：showLabel=true

sample-07020 / core/search　placeholder：placeholder="短いサンプル"

sample-07021 / core/search　placeholder：placeholder="長いサンプルの文章で折り返し方と余白の見え方を確認します。"

sample-07022 / core/search　width：width=25

sample-07023 / core/search　width：width=50

sample-07024 / core/search　width：width=75

sample-07025 / core/search　width：width=100

sample-07026 / core/search　widthUnit：widthUnit="%"

sample-07027 / core/search　widthUnit：widthUnit="px"

sample-07028 / core/search　buttonText：buttonText="短いサンプル"

sample-07029 / core/search　buttonText：buttonText="長いサンプルの文章で折り返し方と余白の見え方を確認します。"

sample-07030 / core/search　buttonPosition：buttonPosition="button-outside"

sample-07031 / core/search　buttonPosition：buttonPosition="button-inside"

sample-07032 / core/search　buttonPosition：buttonPosition="no-button"

sample-07033 / core/search　buttonPosition：buttonPosition="button-only"

sample-07034 / core/search　buttonUseIcon：buttonUseIcon=false

sample-07035 / core/search　buttonUseIcon：buttonUseIcon=true

sample-07036 / core/search　query：query={}

sample-07037 / core/search　query：query={"post_type":"post"}

sample-07038 / core/search　query：query={"post_type":"page"}

sample-07039 / core/search　tagName：tagName=""

sample-07040 / core/search　tagName：tagName="search"

sample-07041 / core/search　tagName：tagName="form"

sample-07042 / core/search　プリセットの前景色：borderColor="key-color" / textColor="key-color"

sample-07043 / core/search　プリセットの前景色：borderColor="red" / textColor="red"

sample-07044 / core/search　プリセットの前景色：borderColor="pink" / textColor="pink"

sample-07045 / core/search　プリセットの前景色：borderColor="purple" / textColor="purple"

sample-07046 / core/search　プリセットの前景色：borderColor="deep" / textColor="deep"

sample-07047 / core/search　プリセットの前景色：borderColor="indigo" / textColor="indigo"

sample-07048 / core/search　プリセットの前景色：borderColor="blue" / textColor="blue"

sample-07049 / core/search　プリセットの前景色：borderColor="light-blue" / textColor="light-blue"

sample-07050 / core/search　プリセットの前景色：borderColor="cyan" / textColor="cyan"

sample-07051 / core/search　プリセットの前景色：borderColor="teal" / textColor="teal"

sample-07052 / core/search　プリセットの前景色：borderColor="green" / textColor="green"

sample-07053 / core/search　プリセットの前景色：borderColor="light-green" / textColor="light-green"

sample-07054 / core/search　プリセットの前景色：borderColor="lime" / textColor="lime"

sample-07055 / core/search　プリセットの前景色：borderColor="yellow" / textColor="yellow"

sample-07056 / core/search　プリセットの前景色：borderColor="amber" / textColor="amber"

sample-07057 / core/search　プリセットの前景色：borderColor="orange" / textColor="orange"

sample-07058 / core/search　プリセットの前景色：borderColor="deep-orange" / textColor="deep-orange"

sample-07059 / core/search　プリセットの前景色：borderColor="brown" / textColor="brown"

sample-07060 / core/search　プリセットの前景色：borderColor="light-grey" / textColor="light-grey"

sample-07061 / core/search　プリセットの前景色：borderColor="grey" / textColor="grey"

sample-07062 / core/search　プリセットの前景色：borderColor="dark-grey" / textColor="dark-grey"

sample-07063 / core/search　プリセットの前景色：borderColor="cocoon-black" / textColor="cocoon-black"

sample-07064 / core/search　プリセットの前景色：borderColor="cocoon-white" / textColor="cocoon-white"

sample-07065 / core/search　プリセットの前景色：borderColor="watery-blue" / textColor="watery-blue"

sample-07066 / core/search　プリセットの前景色：borderColor="watery-yellow" / textColor="watery-yellow"

sample-07067 / core/search　プリセットの前景色：borderColor="watery-red" / textColor="watery-red"

sample-07068 / core/search　プリセットの前景色：borderColor="watery-green" / textColor="watery-green"

sample-07069 / core/search　プリセットの前景色：borderColor="ex-a" / textColor="ex-a"

sample-07070 / core/search　プリセットの前景色：borderColor="ex-b" / textColor="ex-b"

sample-07071 / core/search　プリセットの前景色：borderColor="ex-c" / textColor="ex-c"

sample-07072 / core/search　プリセットの前景色：borderColor="ex-d" / textColor="ex-d"

sample-07073 / core/search　プリセットの前景色：borderColor="ex-e" / textColor="ex-e"

sample-07074 / core/search　プリセットの前景色：borderColor="ex-f" / textColor="ex-f"

sample-07075 / core/search　backgroundColor：backgroundColor="key-color"

sample-07076 / core/search　backgroundColor：backgroundColor="red"

sample-07077 / core/search　backgroundColor：backgroundColor="pink"

sample-07078 / core/search　backgroundColor：backgroundColor="purple"

sample-07079 / core/search　backgroundColor：backgroundColor="deep"

sample-07080 / core/search　backgroundColor：backgroundColor="indigo"

sample-07081 / core/search　backgroundColor：backgroundColor="blue"

sample-07082 / core/search　backgroundColor：backgroundColor="light-blue"

sample-07083 / core/search　backgroundColor：backgroundColor="cyan"

sample-07084 / core/search　backgroundColor：backgroundColor="teal"

sample-07085 / core/search　backgroundColor：backgroundColor="green"

sample-07086 / core/search　backgroundColor：backgroundColor="light-green"

sample-07087 / core/search　backgroundColor：backgroundColor="lime"

sample-07088 / core/search　backgroundColor：backgroundColor="yellow"

sample-07089 / core/search　backgroundColor：backgroundColor="amber"

sample-07090 / core/search　backgroundColor：backgroundColor="orange"

sample-07091 / core/search　backgroundColor：backgroundColor="deep-orange"

sample-07092 / core/search　backgroundColor：backgroundColor="brown"

sample-07093 / core/search　backgroundColor：backgroundColor="light-grey"

sample-07094 / core/search　backgroundColor：backgroundColor="grey"