ブログでも、わたしらしい世界観出したいですよね♡
わたしはシンプルなのが好きなので
色見を少しおさえた、細めの線の枠を使うことが多いです。
それ以外にも、
生徒さんからのご感想をご紹介するときや
情報が多いときには見出しをつけたりもしています。
読んでくださる方に、できるだけ読みやすいように。
なのでここでは、主にアメブロで使える
- 枠をブログ記事に入れるときのやり方
- シンプルでかわいい枠
- 背景に色つける枠
- 見出し
のHTMLタグをご紹介しますね。
枠をブログ記事に入れる時のやり方
ブログ作成画面を開きます（パソコンからでもスマホアプリでもOK）
左下のHTML表示を押します。
そこで、これから紹介するタグをコピーして、貼り付けます。
貼り付けたらパソコンの方は通常表示に戻ります。
すると枠が出来ています。
「文章」と書いたところを消してお好みの文字を入力します。
改行する時は、【Shift】を押しながら【Enter】を押します。
スマホからだと、HTML編集画面に入って
改行したいところに
<br>
とタグを入れると改行できます。
シンプルでかわいい枠
<fieldset style=”border: 2px dashed #ffd700;”>文章</fieldset>
<fieldset style=”border: 2px dashed #ffb6c1;”>文章</fieldset>
<fieldset style=”border: 1px solid #ffb6c1;”>文章</fieldset>
<fieldset style=”border: 1px solid #c0c0c0;”>文章</fieldset>
背景に色をつける枠
<fieldset style=”background:#fffff0; padding:10px; border:none;”>文章</fieldset>
<fieldset style=”background:#fff5ee; padding:10px; border:none;”>文章</fieldset>
見出しを作るHTMLタグ
<div style=”border-left: 10px solid #ffb6c1; border-bottom: 2px solid #ffb6c1; padding-left: 10px; font-weight: bold; font-size: 100%; color: #000000;”>タイトル</div>
<div style=”border-left: 10px solid #db7093; border-bottom: 2px solid #db7093; padding-left: 10px; font-weight: bold; font-size: 100%; color: #000000;”>タイトル</div>
以上です
いかがでしたでしょうか？
少しでもわかりづらかったことがあればお気軽に聞いてくださいね〜！
