満員の通勤電車もプラス思考にチェンジ! ブログ媒体運営に欠かせない知識とスキルを身に付けて 1つの世界に依存しないワラジライフを楽しんでいます。

*

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

      2017/06/09

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

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

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

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

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

例えば

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

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

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

    「更新型」というブログの特性からも
    過去記事を書き換えるよりも
    追記した方が時系列で表現できるので
    誠実な対応ができるかと思います。
    [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;
    角を四角にしてみました。
    タグ内でスタイルの設定もOKです!

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

    ↓コードはこちら↓

    <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」を試してみました。

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

    ↓コードはこちら↓

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

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

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

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

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

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

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

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

    [br num=”3″]

     - サイトの作成・運営 , , , , ,