【貼付けのみ】文章を囲いたい場合のテンプレート【WordPress】

ワードプレス内に文章を囲い
目立たせたい場合がある。

それは自分の意見であったり、他人の意見であったり
文章の中に変化ができるので
使えると記事に幅が出る。

ここでは色や大きさを変えた5例を提示してあるので
ご自由にコピーし活用してください。

タグの中の#(シャープ)の部分の文字列は”色”の指定です。
自由に変更してカスタマイズしても構いません。

例1 コピペして活用しよう!

<div style=”padding: 6px; border: double 1px #0000ff; background-color: #faebd7; margin-top: 30px; margin-bottom: 20px;”>
ここに文章を書きましょう!
何行でも大丈夫です。
</div>

ここに文章を書きましょう!
何行でも大丈夫です。

例2 コピペして活用しよう!

<div style=”padding: 10px; border: double 3px #4169e1; background-color: #87cefa; margin-top: 30px; margin-bottom: 40px;”>
ここに文章を書きましょう!
色を自由に変更しましょう!
</div>

ここに文章を書きましょう!
色を自由に変更しましょう!

例3 コピペして活用しよう!

<div style=”padding: 13px; border: double 3px #ff69b4; background-color: #ffc0cb; margin-top: 30px; margin-bottom: 30px;”>
ここに文章を書きましょう!
</div>

ここに文章を書きましょう!

例4 コピペして活用しよう!

<div style=”padding: 8px; border: double 2px #4b0082; background-color: #fff5ee; margin-top: 30px; margin-bottom: 40px;”>
ここに文章を書きましょう!
</div>

ここに文章を書きましょう!

例5 コピペして活用しよう!

<div style=”padding: 10px; border: double 4px #32cd32; background-color: #adff2f; margin-top: 30px; margin-bottom: 20px;”>
ここに文章を書きましょう!
</div>

ここに文章を書きましょう!



スポンサーリンク

フォローする

スポンサーリンク