割烹スキン作成くん

今回はスキンデザインの使い方とどんなふうにカスタマイズができるか説明していきます。

URL : https://k-editor.com/editor/skin/

## 基本

スキンデザインは文字通りスキン（ガワ）を作るためのものです。割烹の背景色は背景画像を使いたい時に設定します。一番最初に出力してその中にコードを入れていく使い方を想定しています。デフォルトでは以下のコードが出力されます。

<div style="color:#333333;background-color:#ffffff;font-size:14px;padding:10px;line-height:1.7;margin:-10px;">ここを後で本文に置き換える。

ここを後で本文に置き換える。

</div>

それぞれの意味は以下の通り。

・color: 文字色

・background:背景色

・font-size: 文字サイズ

・margin:外余白

・padding：内余白

・line-height：行間

・font-weight:太字設定

背景画像を設定すると以下のように表示されます。

<div style="color:#333333;background-color:#ffffff;font-size:14px;padding:10px;line-height:1.7;background-image:url(https://22980.mitemin.net/userpageimage/viewimage/icode/i480883/);background-repeat:repeat;margin:-10px;">ここを後で本文に置き換える。

ここを後で本文に置き換える。

</div>

## コード説明

padding:10px;margin:-10px;を設定しています。これは現在の設定されている枠を侵食して色を適用するために使っています。通常は外に設定した枠を超えて色を付けることはできませんが、マイナスmarginを使うことで枠を広げて枠の外側まで色を付けることができます。ただそうすると見た目が悪くなるので内余白を同量設定して打ち消しています。

background-image:url(https://22980.mitemin.net/userpageimage/viewimage/icode/i480883/);

これで背景画像も設定しています。このようにbackground-imageをしていして、urlで該当するみてみんのurlを指定します。なおその際にbackground-repeat:repeat;を設定すると背景画像がループします。

元画像はこのようになります。

元画像幅より広げるとこんな風にループされます。

なおbackground-repeat:no-repeat;にすると画像サイズ分だけが表示されます。

自分用の背景を設定したい場合に使うのが良いかと思います。

-　-　- ✂切り取り✂ -　-　-

ということで割烹スキン作成くんの使い方でした。もしよくわからない点などあれば感想などでお知らせください。