ブログを書いていると、文章を枠で囲んで表示させたい時があります。
ＣＳＳを使えば簡単でしょうけど、私を含め初心者には少々難しいですよね。そこで今回は、先輩方のサイトを参考に自分なりに加工した囲み枠をご紹介します。
CSSを使わずHTMLをコピペして使える「文章の囲み枠」です。
はじめに
本格的にブログをはじめて、ようやく１年が経とうとしています。
CSSもHTMLも詳しくない私は、枠を１つ使うにも時間がかかって大変でした。ひょっとして、同じように苦労されている方がいらっしゃるんじゃないかと思いました。
そこで今回は自分で使って便利だったものをご紹介します。もしお気に入りがありましたら、コピぺ（コピーアンドペースト）してお使いください。文字や色を置き換えてもOKです。
おそらくそんな遠回りなHTMLにしなくても、こうすれば簡単だよ～というのもあると思います。ごちゃごちゃ修正しながら作ったので文字の並びも分かりにくいかも。
ご自由に訂正してお使いくださいね。
タイトル付き囲み枠
シンプルなタイトル付き
これがとても便利でよく使います。入力する文字数も少なくて簡単です。
▼HTML
<p>枠の中の文章１行目</p>
<p>枠の中の文章２行目</p>
<p>枠の中の文章３行目</p>
</fieldset>
色タイトル付き
▼HTML
<p>枠の中の文章１行目</p>
<p>枠の中の文章２行目</p>
<p>枠の中の文章３行目</p>
</fieldset>
#ではじまる赤文字部分は色の指定（カラーコード）です。
ここを変えると違う雰囲気になりますよ。
例えば、#008000（緑）部分を#ff9933（オレンジ）に変更しただけで、こんな風になります。
▼カラーコードはこちらのサイトが便利ですよ。
枠の中に入ったタイトル
ほんの少しシャドウ（影）がついています。
枠の中の文章１行目
枠の中の文章２行目
枠の中の文章３行目
▼HTML
<div style="padding: 15px; margin: 0px 0px 5px; background: #f1f1f1; border-bottom: 1px; font-size: 18px; color: #161616;">枠の中に入ったタイトル</div>
<div style="padding: 15px;">
<p>枠の中の文章１行目</p>
<p>枠の中の文章２行目</p>
<p>枠の中の文章３行目</p>
</div>
</div>
▼使用例
▼この枠を使った記事はこちら
タイトルなし囲み枠
シンプルな囲み枠・少し小さめ
文章の始まりから少し下げて使いたい時のために、枠の両サイドに余白があります。
枠の中の文章１行目
枠の中の文章２行目
枠の中の文章３行目
▼HTML
<p>枠の中の文章１行目</p>
<p>枠の中の文章２行目</p>
<p>枠の中の文章３行目</p>
</div>
シンプルな囲み枠・画面いっぱい
文章のはじまりとぴったり合わせて、画面いっぱいに使いたい時に。
シンプルな囲み枠。太文字にしてもOKです。
枠の中の文章１行目
枠の中の文章２行目
枠の中の文章３行目
▼HTML
<p>枠の中の文章１行目</p>
<p>枠の中の文章２行目</p>
<p>枠の中の文章３行目</p>
</div>
見出し代わりや目立出せたい文字に
「border-radius: 3px」部分の数字を多くすると、もっと丸くなります。
▼HTML
同じ色を使った囲み枠と下線セット
統一感を出す為に、同じ色で下線や囲み枠を作りました。
細い囲み枠はサイドバーのタイトルなどにも。
カラーコード「#55bb55」（薄緑色）部分を変更すると違う雰囲気になりますよ。
▼HTML
▼HTML
▼HTML
短い囲み枠（ボタン風）
１行全部じゃなくて、文字のまわりだけを囲んでボタン風に作りました。
クリックすると指定したURLへジャンプするようになっています。
記事下に「過去記事一覧を見る」というボタンを作りたかったんです。これもHTMLだけで作りました。きっとCSSでやったら早いんでしょうね(;´∀｀)
「text-decoration: none」はリンク下線を出さないという指示です。
「display: inline-block」を入れると上の囲み枠のように１行ぜんぶに枠がつきません。
参考記事に飛ぶようにしたり、TOPに戻るにしたりと、URL部分を書き換えれば色々使えると思います。以下では私の記事一覧に飛ぶようなっています。
http：//www.otonan.com/archive を変更してお使いくださいね。
（コロン：を全角にしてありますが半角に訂正してお使いください。）
左寄せボタン風
▼HTML
<div style="background: #f1f1f1; margin: 0px; padding: 10px; border-radius: 3px; text-align: center; display: inline-block;"><a style="text-decoration: none;" href="http：//www.otonan.com/archive"><span style="color: #555; font-size: 14px;"> 過去の記事一覧を見る </span></a></div>
</div>
中央ボタン風
▼HTML
<div style="background: #f1f1f1; margin: 0px; padding: 10px; border-radius: 3px; text-align: center; display: inline-block;"><a style="text-decoration: none;" href="http：//www.otonan.com/archive"><span style="color: #555; font-size: 14px;"> 過去の記事一覧を見る </span></a></div>
</div>
右寄せボタン風
▼HTML
<div style="background: #f1f1f1; margin: 0px; padding: 10px; border-radius: 3px; text-align: center; display: inline-block;"><a style="text-decoration: none;" href="http：//www.otonan.com/archive"><span style="color: #555; font-size: 14px;"> 過去の記事一覧を見る </span></a></div>
</div>
▼使用例
私の別サイトで使っています。
▶Grimo[ぐりも] | グリーンをもっと。優しいガーデニングスタイル。
最後に
長い文章の間に、囲み枠が１つあるだけで読みやすくなる時があります。文章の補足に使ったり、読者の方へメッセージを書いたり何かと使えます。
良かったらお使いくださいね。
自分でテストした後に公開しましたが、私はその道のプロではないので、ひょっとしたらうまく表示できないかもしれません。大変お手数なんですが、コピペする前の状態をバックアップしてお使いください。
それから、私はpaddingとmarginの違いがいつも分からなくなってしまうんです。
私の覚書もかねて以下に貼っておきますね。
paddingは内側にとる余白、marginは外側にとる余白のことです。
出展：マージンとパディングの違い-HOME PAGE ZERO ガイド-
読んで下さってありがとう～
オトナンでした。
ではまた (╭ರᴥ•́)☆
植物に関するブログも書いています。
▶Grimo[ぐりも]｜グリーンをもっと。優しいガーデニングスタイル。