WordPressで文章に外枠を付ける方法

色んな方のブログを見ることがありますが、

やはり読みやすい記事を書かれているブログはいいなぁと思います。

逆に読みづらさがあるブログの記事なんかは

読んでいてちょっとストレスに感じてしまうこともあったりします。

読みやすさに関する１つのテクニックとして、

文章を外枠で囲ってあげる方法があると思います。

私も記事を書いていて、「ここは外枠で囲いたい」という部分があったので

こちらを例に挙げて違いを見てみたいと思います。

ブログのスペックを説明している部分ですが、

「・」で５項目、改行して並べただけの状態

なんかこれだけだと寂しい気もします。

太字にしたり、文字の色を変えるのも何か違う気がします。

そこで表のようにこの部分を外枠で囲ってみることにしました！

外枠で囲うやり方はビジュアルエディタではなくhtmlを記述するテキストエディタの方

今回は以下のコードで枠を付けてみました。

<div style="padding: 20px; border: solid 2px #ff6347; border-radius: 10px; background-color: #fffaf0; margin-top: 30px; margin-bottom: 30px;">■ここに文章を入力する■</div>

するとこんな感じに

どうでしょうか！なんかしっくり来る感じがあります！

ブログのスペックということで、こちらがスペックですよ～というのが

分かりやすく表現されているような気がします。

ちなみにシンプルに外枠だけつけたい場合はこんな感じです。

<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333;">■ここに文章を入力■</div>

単純に文字のみで説明するより見やすくなったように思います。

見栄えとして外枠で文章を囲う

太文字にしたり、文字に色を付けたり、文字の背景に色をつけたり、下線を引いたり

というのはビジュアルエディタで簡単に出来るのですが、

htmlを使うことによって、より細かな部分まで表現できるようになります！

自分のブログを見ていただいた方が見やすいような記事作りを心掛けて行きたいです！