こんにちは、ikuzo(いくぞう)です。
今回はWordPressのテキストエディタのみで、オリジナルのボックス（囲み枠）を作る方法を紹介します。
WordPressのテキストエディタでボックス（囲み枠）を作る方法
WordPressは、テキストエディタだけでもボックス（囲み枠）を作ることができます。
たとえば上のボックスですが、テキストエディタには次のように書いてあります。
<div style="color: blue; font-weight: bold; font-size: 20px; background: yellow; border: solid 3px red; border-radius: 10px; padding: 0.5em 1em; margin: 3em 0;">好みのボックスを作るんだい！</div>
見やすいように整理するとこんな感じです。
<div style="color: blue;
font-weight: bold;
font-size: 20px;
background: yellow;
border: solid 3px red;
border-radius: 10px;
padding: 0.5em 1em;
margin: 3em 0;">
好みのボックスを作るんだい！
</div>
<div style=”プロパティ＋値“>文章</div>というコードをテキストエディタに書くことによって、お好みのボックスが作れます。
“プロパティ＋値“の部分には、ここでは
文字の色と太さと大きさ・ボックスの背景色・線の種類と太さと色・線の角の丸み・ボックスの余白を指定しています。
プロパティと値については次の章で詳しく説明します。
コードを実際にテキストエディタに貼り付けて、ビジュアルエディタで確認しながらやるのが、わかりやすいと思います。
ボックスの何をどうするかはプロパティと値で指定する
ボックスの何をどうするは、プロパティと値で指定します。
プロパティは「何を」の部分で、値は「どうする」の部分です。
上の「color: blue」は「文字の色を青くする」という指定になります。
そしてプロパティと値の間には「コロン」を、値の後には「セミコロン」を入力します。
プロパティの順番に決まりはありません。
文字の色と太さと大きさの指定方法
文字の色や大きさなどはWordPressのツールバーでも指定できますが、ここではテキストエディタで直接指定する方法を説明します。
文字の色
文字色のプロパティは「color」です。
値は「blue」のように英語で書いてもいいですが、#と6桁（または3桁）のカラーコードで入力するのが一般的です。
たとえば青なら「#0000FF」または「#00F」と入力します。
「#6桁」のカラーコードは、こちらのサイトで調べることができます。
コードに使用するアルファベットは大文字、小文字のどちらでも大丈夫です。ただしコードは、記号やスペースを含めて必ず半角文字を使用してください。全角文字が1文字でも混ざるとコードが効きません。
文字の太さ
「font-weight」というプロパティで文字の太さを指定します。
「font-weight: bold」で「文字を太く」という指定になります。
値は「100」「200」……「900」といった指定方法もあります。
「900」が一番太くて「700」が「bold」と同じ太さだよ。
文字の大きさ
文字の大きさのプロパティは「font-size」です。
たとえば通常の文字の大きさが16pxで、1.5倍にしたいのなら「font-size: 24px」または「font-size: 1.5em」と指定します。
単位の読み方はpx（ピクセル）とem（エム）です。
pxとemについては、こちらの記事が参考になると思います。
背景色の指定方法
背景色を指定するプロパティは「background」か「background-color」です。
文字色と同じで、値はカラーコードで指定します。
線（囲み枠）の色と種類と太さの指定方法
線（囲み枠）のプロパティは「border」です。
「border」ひとつで、線の種類、太さ、色を一度に指定できます（値は1つか2つだけでも可）。
値の順番に決まりはありません。
値を複数入れる場合は、値と値の間には必ず半角スペースを入れるのが決まりです。
全角スペースを入れるとコードが効かなくなるので注意してください。
線の種類は「solid（実線）」のほかにも「dashed（破線）」や「double（二重線）」などがあります。
それぞれの線を指定する方法
四方すべてに線をつけずに、「上と下だけ」「左側だけ線をつける」という指定も可能です。
上の線のプロパティ……border-top
右の線のプロパティ……border-right
下の線のプロパティ……border-bottom
左の線のプロパティ……border-left
上と下だけ線をつける場合は、このように書きます。
<div style="color: blue;
font-weight: bold;
background: yellow;
border-top: solid 3px red;
border-bottom: solid 3px red;
padding: 0.5em 1em;
margin: 2em 0;">
好みのボックスを作るんだい！
</div>
こちらは、少し太目の線を左側だけにつけてみました。
<div style="color: blue;
font-weight: bold;
background: yellow;
border-left: solid 10px green;
padding: 0.5em 1em;
margin: 2em 0;">
好みのボックスを作るんだい！
</div>
角の丸みの指定方法
ボックスの角の丸みはプロパティ「border-radius」で指定します。
値の数字が大きいと丸みのある角に、数字が小さいと丸みが少ない角になります。
角を直角にする場合は、border-radiusは書く必要がありません。
余白部分の指定方法
余白のプロパティは「padding（パディング）」と「margin（マージン）」です。
内側の余白を指定するプロパティが「padding」で、外側の余白を指定するプロパティが「margin」です。
たとえば「padding: 0.5em 1em」と書くと
上下のpaddingが0.5em（0.5文字分）で、左右のpaddingが1em（1文字分）という指定です。
4方向とも個別に指定するのであれば、上、右、下、左の順番で値を書きます。
「上から時計回り」と覚えよう。
ここでも値と値の間には必ず半角スペースを入力します。
たとえば上を3em、右・下・左を0emでpaddingを指定する（”padding: 3em 0 0 0“と書く）と、
このように文字が左下に寄ったボックスが出来上がります。
marginも同じように、たとえば上下に2文字分の余白、左右に1文字分の余白を作るのなら
「margin: 2em 1em」と指定します。
paddingとmarginについてはサルワカさんの、こちらの記事に分かりやすく解説してあります。
ボックスにタイトルをつける方法
テキストエディタのみで、ボックスにタイトルをつけることも可能です。
<div style="display: inline-block;
background: red;
color: #ffffff;
font-weight: bold;
padding: 0.5em 1em;
margin: 0;">
見出しタイトル
</div>
<div style="color: blue;
background: yellow;
font-weight: bold;
border: solid 3px red;
padding: 0.5em 1em;
margin: 0 0 2em 0;">
好みのボックスを作るんだい！
</div>
こちらはボックスの線の上にタイトルを重ねてみました。
<div style="position: relative;
background: yellow;
color: blue;
font-weight: bold;
border: solid 3px red;
border-radius: 10px;
margin: 2em 0 ;
padding: 1em 1em;">
<span style="position: absolute;
display: inline-block;
top: -25px;
left: 10px;
background: red;
color: #fff;
font-weight: bold;
border-radius: 10px;
padding: 0.3em 1em;">見出しタイトル
</span>好みのボックスを作るんだい！
</div>
かんたんにボックスを作る方法
ボックスを作るプロパティと値は理解していただけたでしょうか。
それでは最後に、サルワカさんの作った30個のボックスデザインを、テキストエディタに入力するだけで使える方法を紹介します。
<div style="ここにCSSを入力"> ここに文字やリストを入力 </div>
これをまるっとコピーしてメモ帳などペーストして下さい。
サルワカさんのサンプル30から気に入ったボックスを選びます。
そして”ここにCSSを入力“の部分にサルワカさんのCSSをコピペしちゃいましょう。
そして2つを組み合わせたコードをテキストエディタに貼り付けると
このようにサルワカさんと同じボックス（囲み枠）をかんたんに作ることができます。
30あるうちの、1～16と21・22は上記の方法で簡単にできます。
26～30もボックスの上に見出しタイトルをつけたやり方を使えば作成できるはずです。
HTMLやCSSについてもっと知りたい方は、サルワカさんのサイトを是非ご覧になって下さい。
とても分かりやすく解説しているので大変勉強になるサイトです。
コメント