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

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

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

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

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


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

例えば
  • 過去記事に関連する記事
  • 過去記事に情報を追加で書き足したい時
  • 「注意書き」など別枠として見せたい時
  • などなど

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

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

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



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

    文章を枠で囲むには
    色々な方法があるようですが
    私でも簡単にできた
    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>
    




    スポンサー リンク

    style="display:inline-block;width:336px;height:280px"
    data-ad-client="ca-pub-9990838485961935"
    data-ad-slot="1592655604">




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

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

    border-radius:10px;

    角を四角にしてみました。
    タグ内でスタイルの設定もOKです!

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

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



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

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

    枠線の太さと色を変えて
    文章を強調してみました。

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


    実線の他にも枠線の種類は色々あります。
  • 実線 soid
  • 点線 dotted
  • 破線 dashed
  • 立体的 groove,ridge,inset
  • 二重線 double
  • 線無し none


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

    grooveは、あんまり使わないと思います。

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



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

    AddQuicktagに関して
    詳細はこちらの記事へどうぞ。



    最後まで読んでいただき
    ありがとうございました。






    ブログ運営でネタ探しとか
    悩んでいませんか?

    動画マーケティングの教科書


    動画作成とマーケティングを
    学べる教材なのに
    私の場合、ブログの
    ネタ探しに対する考えは激変し
    ブログそのものの改善点が
    大量に見つかりました。

    なんということでしょう・・・。

    動画もブログも、
    大切なのは「私」であり「あなた」です。



    スポンサード リンク

    コメントを残す

    画像を挿入できます

    サブコンテンツ

    運営者の紹介

    名前:うみぞう
    年代:40代
    性別:女性
    職業:デザライター
    詳しいプロフィールはこちら
    【メッセージ】
    40代OLが隙間時間を利用してパソコンを最大限に活用したインターネット・マーケティングを実践中!


    ブログランキングに参加中!!

    人気ブログランキング1位

    お陰様で1位をいただきました。

    フォローしてください

    このページの先頭へ