WordPressブログの文章に囲み枠を作成するhtmlコードをわかりやすく解説！

WordPressでブログを書く時には
文章だけではちょっと文字の羅列になるので
読みづらくなります。

そこでブログの文章に囲み枠を作成することで
メリハリが付きとてもみやすく読みやすくなります。

囲み枠のhtmlコードがいまいちわからない人の
ためにこれだけわかっていれば
もうコードなんて怖くはありません。

WordPressブログの文章に囲み枠を作成する

ブログで文章だけだと見た目にも影響してくるので
どうしても囲み枠などは必要になってくると思います。

htmlコードの基本がわかれば本当に囲み枠なんて
簡単に作成できますし、枠の太さ、色、線の種類など
自由自在になります。

WordPress囲み枠を作成するhtmlコードをわかりやすく解説！

囲み枠を作成するhtmlコードは下記のように
書かれていると思います。

<div style=”border: 5px solid #ffc0cb; padding: 10px; border-radius: 0px; background: #ffffff;”>ここに文章を書く</div>

テキストに上記のhtmlコードを書くと下記のような
囲い枠が作成されます。

 

 

 

色は原色大辞典参照します。

ここでわかりやすくするためにコードを
分解してみます。

<div style=”と“>ここに文章を書く</div>の
間にあるものを覚えるだけで大丈夫です。

そのなかでborder～、padding～の順番は
関係ないので自分の好きな順番に
していたほうが後からテキストで
書き換えたりするときには見やすいでしょう。

コードとコードの間はセミコロン；で
つながれています。

そして数字を入れる際はコロン：を
使っています。

分解すればなんとなくわかってきたと
思いますがどうでしょうか♪

線の種類のコード(border）

border：5px　solid　＃ffc0cbとなっていますが

線の種類には

• solid　実線
• dotted　点線
• dashed　破線
• double　二重線
• groove　くぼんだ線（立体的）
• ridge　　隆起した線（立体的）

があります。

わかりやすく図形にしましたので
参照してください。

今solidになっているところを
上記のなにかに置き変えてみましょう
solid→をdottedにしてみます。

 

 

余白のコード(padding）

余白のコードはpaddingです。

padding：10pxとなっていますが
数値を30pxに置き換えてみます。

 

 

 

1. padding：10px
2. padding：10px　30px
3. padding：10px　30px　40px
4. padding：10px　20px　15px　5px

それぞれの違いを紹介します。

padding：10px

padding：10px　30px

padding：10px　30px　40px

 

padding:の後の数字の並んでいる順番で
10px（上）30px（下）40px（左右）
になります。

 

padding：10px 20px 15px 5px

 

padding:の後の数字の並んでいる順番で
10px（上）20px（右）15px（下）5px（左）
になります。

 

 

4角の角（border-radius）

 

 

囲い枠の背景の色（background）

 

 

 

Word Pressを使い囲み枠線を簡単に作る方法！コピペするだけで簡単！

 

文字数に合わせて囲み枠を作成する（display: inline-block）

まとめ