HTMＬ編集で囲み枠を作る

ＨＴＭＬ

簡単な仕組みを知っていると、ブログのカスタマイズが自由に出来るようになります。

わかりやすいものでいうと、囲み枠は簡単で取り入れやすいと思います。

枠をつけると、ほかの文章と区別されて見やすくなったりポイントを強調できたりします。

私もまだまだわからない部分が多いのですが、よく使う囲み枠とHTMLコードをまとめました。

枠の設置は、ローマ字の<div style=  ～　</div>　までをコピーして、

「本文を入力します」のところに文書をいれると完成です。

・シンプルな囲み枠

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

・付箋風の囲み枠

<div style="border: #ffb6c1 solid 1px; border-left: #ffb6c1 solid 10px; padding: 20px; background: #fff; font-size: 100%;">
本文を入力します</div>

本文の改行が上手く表示されないときは、基本コードの通り改行したい箇所に<br>を入れてください。

<div style=”border-radius: 5px; border: 1px dashed #ffb6c1;font-size: 100%; padding: 20px;”>
本文を入れます。＜ここで改行＞改行したいけれどうまくできないとき</div>

＜ここで改行＞に<br>を入れます。

※ローマ字はすべて半角で入れます。全角ではないので注意！

<div style="border-radius: 5px; border: 1px dashed #ffb6c1;font-size: 100%; padding: 20px;">
本文を入れます。<br>改行したいけれどうまくできないとき</div>

<br>を入れた場所で改行できました。

コードを少し読んでみると、文字の大きさや枠の色を変えることができます。

・フォントサイズ

<div style=”border: #ffb6c1 solid 1px; font-size: 100%; padding: 20px;”>
本文を入力します
</div>

・枠の太さ

<div style=”border: #ffb6c1 solid 1px; font-size: 100%; padding: 20px;”>
本文を入力します
</div>

・枠の色

<div style=”border: #ffb6c1 solid 1px; font-size: 100%; padding: 20px;”>
本文を入力します
</div>

色の指定は＃から始まるカラーコードの入力で、選ぶことができます。

どんな色が選べるのか調べたいとき、こちらのサイトがオススメです。

囲み枠には、二重線や背景色の変更などまだまだ色々と種類があるようです。

自分のお気に入りを見つけられるようにもっと調べて使ってみたいなと思います。