使い方

【マキアインフルエンサー用】HTMLデザイン集_1

①テキストパーツの「<>」を開く
②使いたいデザインのソースコードを貼り付ける
③「保存」を押して「ここに本文を入れます」のテキスト部分を書き換える
※テキストを改行する場合はShift+Enterをお使いください

囲み枠

シンプル

ここに本文を入れます

<div style="border: #ffb6c1 solid 1px; font-size: 100%; padding: 20px;">ここに本文を入れます</div>

太線

ここに本文を入れます

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: #ffb6c1 solid 3px; font-size: 100%; padding: 20px;">ここに本文を入れます</div>

付箋風

ここに本文を入れます

<div style="border-left: #ffb6c1 solid 10px; background-color: #fef9fb; font-size: 100%; padding: 20px;">ここに本文を入れます</div>

背景色つき

ここに本文を入れます

<div style="background: #ffd8d8; box-shadow: #ffd8d8 0 0 10px 10px; margin: 10px; font-size: 100%; padding: 20px;">ここに本文を入れます</div>

点線1

ここに本文を入れます♪

<div style="border-radius: 1px; border: 4px dotted #ffb6c1; font-size: 100%; padding: 20px;">ここに本文を入れます♪</div>

点線2

ここに本文を入れます

<div style="border-radius: 5px; border: 1px dashed #ffb6c1; font-size: 100%; padding: 20px;">ここに本文を入れます</div>

ステッチ風

ここに本文を入れます

<div style="background: #ffe6e8; padding: 20px; border: 2px dashed #ffb6c1; box-shadow: 0 0 0 5px #ffe6e8; -moz-box-shadow: 0 0 0 5px #ffe6e8; -webkit-box-shadow: 0 0 0 5px #ffe6e8; font-size: 100%;">ここに本文を入れます</div>

最終更新日:

share