本サイトにはプロモーションが含まれています

HTML編集で囲み枠を作る

趣味・ブログ作成

HTML

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

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

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

こんな感じで枠をつけることができます。勿論、色も大きさも自由に設定することが可能です。

私もまだまだわからない部分が多いのですが、よく使う囲み枠と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>

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

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

プレビューで確認しながら色々と試してみましょう。
この太さと大きさは少し読みにくいですかね。

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

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

コメント

タイトルとURLをコピーしました