コピペで使える！囲み線でブログを見やすくしよう！～10種類の線と100種類の色～
「注意書き」「ポイント」「まとめ」で使われる「囲み線」
これを使えば、記事の見易さが間違いなく上がるはず！
ということで、今回はそんな「囲み線」についての記事です。
囲み線で見易さUP！
問題 2009年に亡くなったking of pop マイケルジャクソン氏の歴代最高のセールスを記録したアルバムの名前は何でしょう？
問題 2009年に亡くなったking of pop マイケルジャクソン氏の歴代最高のセールスを記録したアルバムの名前は何でしょう？
どちらのほうが読者の方に見てほしい部分を際立たせられるか、といったら
もちろん囲みがあるほうだと思います！
今回はhtml表記をそのままのっけますので、
コピペして使いまわししてください！
また、アレンジの方法も後程公開しますので
よろしくお願いします＾＾
囲み線のhtml
ブログ内の記事を囲むには、専用のhtmlを使います！
htmlも色々とあるのですが、僕がネットで見た中で
一番シンプルで分かりやすかったのを今回ご紹介します。
赤枠の部分のhtmlが囲み線のものです。
<div style="border-radius: 10px;-webkit-border-radius:10px;-moz-border-radius:10px;border: 1px solid #006400; margin-top: 15px; margin-bottom: 15px; padding: 15px;">
囲み線の中に入る部分
</div>
「HTML編集」にて貼り付けを行い「編集みたまま」にすると
以下のような状態になっていると思います。
これを編集して使いまわししてください＾＾
囲み線の中に入る部分
囲み線のアレンジ
囲み線のアレンジ方法を覚えていくと、より自分好みの記事に変身すると思います。
- 線の色（下のコードの赤の部分）
- 線の太さ（下のコードの青の部分）
- 線の種類（下のコードの緑の部分）
<div style="border-radius: 10px;-webkit-border-radius:10px;-moz-border-radius:10px;border: 1px solid #006400; margin-top: 15px; margin-bottom: 15px; padding: 15px;">
囲み線の中に入る部分</div>
線の太さは数値で変えればokです。
線の種類
線の種類の代表的なコードも上げておきます。
- solid→実線
- dotted→点線
- double→二重線
- dashed→破線
「線が凹んで見える」などの特殊なものが知りたかったら
枠線の種類（外部リンク）を参考にしてください！
線の色
線の色の代表的なコードも上げておきます。
- 青→#0000ff
- 緑→#008000
- 赤→#ff0000
- 黄→#ffff00
- 黒→#000000
何百種類も色のコードを網羅しているサイトもありますので、
おしゃれに記事を彩りたい場合は参考にしてください！
➡WEB色見本 原色大辞典 - HTMLカラーコード（外部リンク）
太い 黒の破線にしたい場合
囲み線
例えば、囲み線を上のような、太めの黒の破線に
変更したい場合は下のようなhtmlになります。
<div style="border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border: 3px dashed #000000; margin-top: 15px; margin-bottom: 15px; padding: 15px;">囲み線</div>
以上囲み線についての記事でした！
※追記 1/31
現在当サイトでは上のデザインの囲み線を使うのをやめました。
外部サイトではあるのですが、おしゃれなデザインが多いので
もしよかったら参考にしてみてください！
右【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30
関連記事
■【貼り付け、サイズ変化、画像位置】ブログで初心者が画像のやり方に躓いた。
■初心者ブログ１ヶ月目のアクセスと報酬※大したことないです。まじで
-----------------------------------
読者募集中です＾＾
励みになりますので、ぜひクリックお願いします！
-----------------------------------
