商品メッセージのデザインを装飾する
本ページでは商品メッセージのデザインをカスタマイズする方法を紹介します。
商品メッセージは、カスタムCSSやカスタマイズされたLiquidを利用することで、デザインを装飾することが出来ます。
文字色を変更する
カスタムCSSに下記サンプルコードを挿入することで実現できます。
（サンプルコード）
.ruffruff-pre-order-product-message > p {
color: red !important;
}
文字色のみを赤に変更
背景色を変更する
カスタムCSSに下記サンプルコードを挿入することで実現できます。
（サンプルコード）
.ruffruff-pre-order-product-message {
background-color: red !important;
padding: 10px !important;
}
背景色を赤、余白を10pxに変更
横幅を変更する
カスタムCSSに下記サンプルコードを挿入することで実現できます。
（サンプルコード）
.ruffruff-pre-order-product-message {
max-width: 440px !important;
}
横幅を変更
枠線を変更する
カスタムCSSに下記サンプルコードを挿入することで実現できます。
（サンプルコード）
.ruffruff-pre-order-product-message {
border: 1px red solid !important;
padding: 10px !important;
}
枠線を赤、余白を10pxに変更
上下の余白を変更
カスタムCSSに下記サンプルコードを挿入することで実現できます。
（サンプルコード）
.ruffruff-pre-order-product-message {
margin-top: 50px !important;
margin-bottom: 50px !important;
}
上下の余白を50pxに変更
文字を中央寄せにする
カスタムCSSに下記サンプルコードを挿入することで実現できます。
（サンプルコード）
.ruffruff-pre-order-product-message > p {
text-align: center !important;
}
文字を中央寄せに変更