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

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

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

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

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

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

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

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

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

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

ワードプレスのテキストモード

ここに文章を書く

 

上のhtmlコードから以下のことを
読み取って枠を描いていることがわかります。

 

  • 枠の色:ピンク  #ffc0cb
  • 線種:実線   solid (個体の意味じゃない(^^))
  • 線の太さ:5px
  • 枠中の色:白   background: #ffffff
  • 枠の角:直角 border-radius: 0px
  • 文字と枠の余白: padding 10px

 

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

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

wordpressのコードの詳細図形

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

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

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

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

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

線の種類のコード(border)

border:5px solid #ffc0cbとなっていますが

線の種類には

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

があります。

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

線の種類を描いた図形

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

ここに文章を書く

 

上記のように点線に変わりました。

 

余白のコード(padding)

余白のコードはpaddingです。

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

ここに文章を書く

 

文字と枠の間が広くなりました。

 

余白ってどの部分って昔私は
思っていましたので図形で
説明します。
paddingの説明で余白の部分がどこかわかるようにした図形
余白の部分は図形のように文字と
枠線との間のことになります。

 

ちなみにマージンは外側の部分に
なります。
ちょっと深入りですが
以下の4つの表記の仕方があります。
  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(左右)になります。

ああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

padding:10px 30px 40px

 

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

ああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

 

padding:10px 20px 15px 5px

 

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

ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

 

 

4角の角(border-radius)

4角の角をあらわすのはborder-radius: 0px
なんですが直角なら数値を0pxとしておけば
いいのですが、よく使うのであえて
入れておきました。

 

個々の数値を0→10にしてみると。

 

ここに文章を書く
4角がRになっているのがわかります。

もっとRがほしいなら20とかしていくと
もっと角が丸くなります。
お好みで数値を変えてください。

囲い枠の背景の色(background)

囲い枠の背景の色を決めるコードは
background: #ffffff となります。
バックグランドは日本語でも使用するので
わかりやすいですね。
先程から#の後ろにアルファベットが
並んでいますがそれは色を示します。
上記のものはアルファベットだけですが
通常はアルファベットと数字の羅列です。
原色大辞典で好きな色を選んでみてください。
バックグラウンドは大抵薄い色にしないと
文字が見えづらくなりますので
#ffffff(白)から#ffff00(黄色)に
置き換えてみると。

 

ここに文章を書く
囲い枠の中が黄色くなりました。

 

いろんな囲い枠をコピペで使用したい方は
下記から参照して使ってください。

 

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

 

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

文字数に合わせて囲み枠を作成する
htmlコードは下記の太線の言語を
付け加えるだけで出来ます。
display: inline-block をいつも使うhtmlコードに
付け加えれば文字数に合わせて囲み枠が作成されます。

付ける場所はどこでもいいです
htmlコードは<div style=”border: 5px solid #0000ff; padding: 10px; border-radius: 20px; background: #ffffff; display: inline-block “>ここに文章を書きます。</div>

まとめ

WordPressブログの文章に囲み枠を作成する
htmlコード分割して考えるとわかりやすく
なかったでしょうか。
組み合わせによってさまざまな囲み枠が
出来るので楽しくなってくれば嬉しいです。
今回紹介した以外にもまだまだあるので
追記して紹介していこうと思います。