[Web] ブログ記事内の引用をHTMLのみ装飾する方法：【<ｂｌｏｃｋｑｕｏｔｅ>タグ】

当たり前の方、知っている方はスルーして下さい。HTMLを全く知らない"超"初心者向け内容です。

お気に入りのブログを見ると、他の方からの引用や書評で文章の引用の際に、引用部分を枠で囲ったりしているのをよく見ます。
どのようにするのかが気になっていましたが、知識がないため今まで避けてきました。しかし、よくよく考えると検索すると一発でわかることで、これをキッカケに興味がある部分からHTMLを学んでいこうを思います。

今回は、第一弾として引用の際に、引用部分を枠線で囲むコードです。

【<ｂｌｏｃｋｑｕｏｔｅ>タグ】

① <ｂｌｏｃｋｑｕｏｔｅ>タグ 

引用文を罫線（枠線）で囲む、また、背景色を変更する。

② 使い方

 <ｂｌｏｃｋｑｕｏｔｅ>～～～～ 

※～～～：引用したい文章を記載する

③ 上下左右に余白をつける方法【ｐａｄｄｉｎｇ属性】

ｐａｄｄｉｎｇ：１５ｐｘ １５ｐｘ １５ｐｘ １５ｐｘ

④ 枠線を付ける

ｂｏｒｄｅｒ：１ｐｘ ｓｏｌｉｄ；＃Ａ９Ａ９Ａ９

全てまとめるとこんな感じ　↓↓↓↓

背景色の周りに線をつける

HTMLを全て知ろうとすると、ハードルが高く感じなかなか前に進めませんが気になる部分から学び始めると取っ付き易いですね。

 <ｂｌｏｃｋｑｕｏｔｅ>について、囲み線を太線にすることや背景色を変更するなど、まだまだ色々できる余地があるそうです。

参考にさせていただいた記事は、下記です。

もっと知りたい方はぜひ御覧ください。

Special Thanks

◆ ブログが作りたい！ +FC2ブログの作り方+

◆ 世界四季報

◆ ワニchanのうぇぶわーるど

◆ HTMLリファレンス