【WordPress】初心者向け ボックス（囲み枠）のカスタマイズ

こんにちは、ikuzo(いくぞう)です。

無料なのに、いたれりつくせりのテーマ、Cocoon（コクーン）。
たとえば、

今回はこのボックス（囲み枠）をカスタマイズする方法を紹介していきます。

WordPressなら、Cocoon以外のテーマでも使える方法です！

しかもCSSに触ることなくカスタマイズできちゃいます！

Cocoonの機能でボックスを作る

通常、Cocoonの機能を使って文章やリストをボックスで囲むにはビジュアルエディタの“スタイル”を利用します。

ボックスの囲み方はこちら↓↓↓

Cocoonはデフォルトでも沢山の種類のボックスが用意されています。

ボックス(囲み枠)のカスタマイズ

それでもあえて「人と違うボックスを使いたい！」という方には、

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: 2em 0;">
好みのボックスを作るんだい！
</div>

指定方法は、ひとつずつ解説していきます。

上のHTMLをテキストエディタにコピー＆ペーストしていただき、値（これから説明します）を色々変えてみてビジュアルで確認するのが、一番わかりやすいと思います。

何をどうしたいのか？

プロパティと値

プロパティは「何を」の部分です。値は「どうしたいのか」を決めます。

上記の「color: blue」は「文字の色を青くしたい」というデザイン指定になるわけです。

プロパティと値の間には : （コロン）を入れます。

複数のプロパティを指定したいときは ; （セミコロン）で区切ります。

文字の色と太さと大きさ

文字についてはCocoonのビジュアルエディタでも簡単に変更できます。

はっきり言ってビジュアルエディタの方が簡単にできますが、テキストエディタでの書き方も説明させていただきます。

プロパティは「color」です。値は「blue」のように英語で書いてもいいですが、#と6桁または3桁の英数字（カラーコード）で表すのが一般的です。

たとえば青なら「#0000FF」または「#00F」と表します。

カラーコードについては、こちらをご参照下さい。

「font-weight」は文字の太さです。

boldは「大胆な」という意味で、「font-weight: bold」で「文字を太く」という指定になります。

文字の大きさのプロパティは「font-size」です。

基準の文字の大きさが16pxで、1.5倍にしたいのなら「font-size: 24px」または「font-size: 1.5em」と指定します。

単位の読み方はpx（ピクセル）とem（エム）です。

pxとemについては、こちらの記事がとても参考になります。

背景色

背景を塗りつぶすプロパティは「background」です。

文字の色と同じで、値は英語か先ほどのカラーコード（#＋6桁or3桁）を使います。

線の色と種類と太さ

まわりを線で囲む

線の色と種類と太さは、「border」です。

文字とは違い、プロパティ「border」のあとに色と種類と太さを続けて指定します。

色と種類と太さの値は、半角ずつ開けるようにして下さい。

たとえば線の種類を実線（solid）、太さを3px、色を赤にしたいのなら

「border: solid 3px #ff0000」と書きます。

3つの順番に決まりはないので「3px #ff0000 solid」「#ff0000 solid 3px」でも大丈夫です。

ボックスの上と下だけに線をつけることも可能です。

<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」はボックスの周りすべてを線で囲むプロパティですが、

「border-top」「border-bottom」「border-left」「border-right」は個別に指定することにより、好きな位置だけに線をつけることができます。

角の丸み

角の丸みは「border-radius」で指定します。

こちらもpx（ピクセル）またはem（エム）の単位を使用します。

数が小さいと尖った角に、数が大きいと丸みのある角になります。

角を直角にしたければ、border-radiusは書く必要がありません。

余白部分

余白部分のプロパティは「padding（パディング）」と「margin（マージン）」です。

paddingは線の内側の余白を、marginは線の外側の余白を決めます。

たとえば「padding: 0.5em 1em」のように書くと上下のpaddingが0.5em（0.5文字分）で、左右のpaddingが1em（1文字分）という指定方法になります。

4方向ともそれぞれ別の余白を指定したいのであれば、padding:（上の余白）（右の余白）（下の余白）（左の余白）のように上、右、下、左の順番で指定します。

「上から時計回り」と覚えるといいと思います。

たとえばpaddingの上だけを3em、他の右・下・左を0emにするには「padding:3em 0 0 0」と書きます（4つの値は半角ずつ開ける）。

文字の上には3em（3文字）分のスペースができ、一方で下と左側の線と文字の間に余白はなくなりました。

marginの指定も同じように上下が2em、左右が1emなら「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 20px;">
好みのボックスを作るんだい！
</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>

 

最後に

いかがだったでしょうか。

このやり方を知るまでは、Cocoonのダッシュボード＞外観＞テーマエディターのスタイルシート（CSS）をいじくってました。

いつも同じパターンの自家製ボックスを使用するのであれば、そちらの方が手間は省けますが、スタイルシートの編集は多少なりともリスクを伴うようです。

こちらのテキストエディタでボックスを作成する方法であれば、その時の気分でボックスに使う色や線を決めることができますし、リスクもありません。

では最後に、サルワカさんの作った30個のボックスデザインを、スタイルシートの編集なしで使う方法を紹介します。

<div style="ここにCSSを入力">
ここに文字やリストを入力
</div>

↑これをまるっとコピー＆ペーストして下さい。

【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30

HTMLとCSSのコピペですぐに表示できる『囲み枠』『ボックスデザイン』の例を30個紹介します。Webサイトやブログでご活用ください。

saruwakakun.com

“ここにCSSを入力“の部分にサルワカさんのCSSをコピペしちゃいましょう。

すると、

CSSに手をつけなくても、サルワカさんと同じボックス（囲み枠）を作ることができました。

30あるうちの、1～16と21・22は上記の方法で簡単にできます。

26～30もボックスの上に見出しタイトルをつけたやり方を使えば作成できるはずです。

HTMLやCSSについてもっと知りたい方は、サルワカさんのサイトを是非ご覧になって下さい。

とても分かりやすく解説してあり、初心者の私にも大変勉強になるサイトです。