新聞コラムのように見やすく！wordpressで文章を枠で囲む方法

記事内のコラム分けで訪問者さんに親切なサイトに

分かりやすいデザインのポイントは
四角を意識することです。

難しく考える必要はなく
単純に内容をカテゴリ分けするだけでも
視覚的にまとまります。

画像に枠線を付ける方法は
こちらの記事で書きましたが
白っぽい画像には枠線を付けると
四角を作ることが出来ます。

更に更に、画像だけでなく
文章も枠で囲むと
読みやすさはアップします。

例えば

過去記事に関連する記事

過去記事に情報を追加で書き足したい時

「注意書き」など別枠として見せたい時

などなど

別コラムのように見せると
情報の混乱を防ぐので
読む人に親切なサイトに
近付きますよね。

特に私は過去の記事に
「再考中」の情報を加えたかったので
「追記」の記入が急務でした。

「更新型」というブログの特性からも
過去記事を書き換えるよりも
追記した方が時系列で表現できるので
誠実な対応ができるかと思います。
[br num=”2″]

文章を角の丸い枠で囲む方法

文章を枠で囲むには
色々な方法があるようですが
私でも簡単にできた
html罫線囲みのコードをご紹介します。

↓コードはこちら↓

<div style="padding: 20px; border: solid 2px #808080; border-radius: 10px; background-color: #f5f5f5;">
文字を囲むタグ
改行も大丈夫。
</div>

「padding」とは上下左右の内側の余白、
「background-color」は背景色です。

背景色を黒にして
余白を思い切って広くしてみると

何だか菅原文太さんが言ったら
格好良さそうな台詞ですね。
文字は白、背景は黒。

↓コードはこちら↓

<div style="padding:50px;border:solid 2px #808080;border-radius:10px;background-color:#000000;">
<span style="color: #ffffff;">文字は白</span>
<span style="color: #ffffff;"> 背景は黒。</span>
</div>

[br num=”3″]
スポンサー リンク




[br num=”2″]

文章を角が四角い枠で囲む方法

角が丸いと、どうしても軽い感じがします。
カチッと見せたい時は、
以下のコードを消すと角丸がなくなります。

border-radius:10px;

角丸が四角になりました。

↓コードはこちら↓

<div style="padding: 20px; border: solid 2px #808080; background-color: #f5f5f5;">
角を四角にしてみました。
<strong>タグ内でスタイルの設定</strong>もOKです！
</div>

[br num=”2″]

枠線の太さと色を変えて強調する

弱々しいのでもっと強調したい場合は
枠線の太さと色を変えて
目立つデザインにしてみましょう。

↓コードはこちら↓

<div style="padding: 20px; border: solid 5px #660000; background-color: #f5f5f5;">
枠線の太さと色を変えて
文章を強調してみました。
</div>

実線の他にも枠線の種類は色々あります。

実線　soid

点線　dotted

破線　dashed

立体的　groove,ridge,inset

二重線　double

線無し　none

↓立体的な「groove」を試してみました。

↓コードはこちら↓

<div style="padding: 20px; border: groove 5px #CCFF66; background-color: #f5f5f5;">
あんまり使わないと思います。
</div>

お気に入りの罫線囲みが完成したら
AddQuicktagでコードを
「タグボタン」に登録すると
入力する手間が省けて簡単です。

AddQuicktagに関して
詳細はこちらの記事へどうぞ。
[br num=”2″]
最後まで読んでいただき
ありがとうございました。
[br num=”5″]

[br num=”3″]

 - サイトの作成・運営 AddQuicktag, html罫線囲み, wordpress枠で囲む, 文章を枠で囲む, 枠で囲む, 罫線囲み