この記事では、ライブドアブログ_スマホアプリ版で枠線を作る方法をまとめています。


じゃさっそく枠線を作ってみよう。


シンプルな枠線を作ろう


最もシンプルな枠線はこちらです。

シンプルな枠線
↓をコピーしてhtml表示して貼り付け
<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333;">シンプルな枠線</div>

文章を強調させたいときや説明書きを途中で追加する時に使うと見やすくなるわよね。


  

じゃ次は色んなバリュエーションの枠線を紹介していこうかな。


多彩な枠線にアレンジしよう


二重線の枠線
↓をコピーしてhtml表示して貼り付け
<div style="padding: 10px; margin-bottom: 10px; border: 5px double #333333;">二重線の枠線</div>


点線の枠線（角丸）
↓をコピーしてhtml表示して貼り付け
<div style="padding: 10px; margin-bottom: 10px; border: 1px dotted #333333; border-radius: 5px;">点線の枠線（角丸）</div>


粗め点線の枠線（背景黄色）
↓をコピーしてhtml表示して貼り付け
<div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #333333; border-radius: 5px; background-color: #ffff99;">粗め点線の枠線（背景黄色）</div>

以上、代表的なバリュエーションである枠線を紹介しました。

次は枠線の活用の方法を紹介するよ

枠線を活用する（応用編）



◾️文章を強調する◾️

枠線は主に文章を強調させたい時に活用されます。

例えば、ダイエットに関する記事を書いているとしたら、、、

ダイエットに重要なのは継続です。

このように枠線に加え太字を使うなどする事で、更に強調が有効になります。

◾️枠線に図形を挿し込む◾️

枠線は、図形や写真の貼り付けにも活用出来ます。

図形や写真の色が背景色と同化してしまうときには、枠線を活用する事で境目を明示させる事が出来ます。

例えば、

IMG_5540
このように図形の背景色とブログの背景色が同色の場合は、下のように枠線内に図形を挿し込んだ方が区切りが分かりやすくなります。

IMG_5540

確かに見やすくなるわね。こんな活用もあるのね。


枠線の中で改行する（応用編）


枠線を多用すると、すぐに枠線の中で改行が出来ないことに気がつきます。

枠線の中で改行をするには　<br>   コードを使用します。


シンプルな枠線
２行目
３行目
↓をコピーしてhtml表示して貼り付け
<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333;">シンプルな枠線 シンプルな枠線<br> ２行目<br> ３行目 </div>

説明はこれで終了です。因みに、htmlを記載している水色枠線は、こうやって作ります。


■タイトル
本文

↓をコピーしてhtml表示して貼り付け

<div style="text-align: center;"><div style="text-align: left; background-color: rgb(102, 204, 255); border: 1px solid rgb(102, 204, 255); padding-left: 10px; font-size: 1.16em;"><font style="color:#ffffff; font-weight:bold;">■タイトル</font></div><div style="text-align: left; border: 1px solid rgb(102, 204, 255); padding: 10px; font-size: 1em;">本文</div>