ブロックを囲う枠を表示する 「 CSS border」
ワードプレスではブロック単位で要素を配置していきます。文章が書かれている部分も段落ブロックになっていますが、たとえば注意書きなどのように、際立たせたい文章の場合があります。文字に色を付け、文字の背景にも色を付けるパターンもありますが、ブロック自体に枠線を表示し枠内に色を付けることでより際立たせることができます。
例えば、このような感じです。
プラグインを使ったり、クラシックエディタに切り替えてhtmlを記入したりなどいくつか方法がありますが、ここではCSSを使います。やってみると意外と簡単です。
記事編集画面右側にある設定サイドバーの一番下の「高度な設定」と、外観カスタマイズの一番下の「追加 CSS」 を使います。ワードプレスのテーマファイルはLuxeritas(ルクセリタス)を使用しています。
記事が増えてくると、同じ枠線パターンを内容に応じて使い分けると統一感が出て分かりやすくなると思います。そこで、パターンに名前を付けます。まずは記事編集画面で、枠を付けたいブロックをクリックして編集状態にし、「高度な設定」内、「追加cssクラス」に半角英数字で入力します。たとえば、memo、note、attentionなど内容に応じて分かりやすい名前を付けます。ここでは、「枠線表示用の段落ブロック」と書いた段落ブロックをクリックし、追加CSSクラスに「memo01」と記入しました。
編集画面右上の「プレビュー」をクリックし、「新しいタブでプレビュー」をクリックします。
「カスタマイズ」をクリックします。
左サイドバー一番下の「追加 CSS」をクリックします。
CSS記入欄が表示されます。右側はプレビュー画面です。1行目は分かりやすくするためにコメントを記入します。/*と*/の間に挟みます。2行目に先ほど名前を付けたクラス名を、.(ドット)の後に記入します。「.memo01」となります。そして3行目に波括弧{を記入します。閉じ括弧は自動的に入力されます。これで準備完了です。この波括弧の中にプロパティと値を記入していきます。（1行目のコメントは必ずしも必要ではありません。）
線種 「border-style」
{プロパティ:値}の形で記入します。ここでは枠線のスタイルを表すプロパティである「border-style」、次に「:」（コロン）、そして「値」ですが、実線の「solid」、二重線の「double」、点線の「dotted」などを入力します。
border-styleに対応する値は10種類あります。ただし、その内2種類は「hidden」と「none」で、非表示の値なので実質8種類です。下の赤字の値を記入することによってそれぞれ左のような枠線で囲うことができます。
線幅 「border-width」
上の画像の枠線は分かりやすくするために8pxの太さにしてあります。もちろん太さも自由に設定することができます。太さを設定するプロパティは「border-width」を使います。複数のプロパティを指定するときは「 ; (セミコロン) 」でつなぎます。書き方としては、{border-style:値;border-width:値}となります。
他のプロパティを追加していく場合も；（セミコロン）でどんどんつないでいきますが、ちょっと見にくくなるので、改行やスペースを使って見やすく並べます。
border-widthに対応する値は、細い「thin」、中ぐらいの「medium」、太い「thick」の3種か、数値で指定します。数値で記入するときは単位を付けます。単位に関しては絶対単位や相対単位などいくつかありますが、ここでは「px」を使います。
線色 「border-color」
線種と太さのプロパティを記入したら、白黒では味気ないので線に色を付けます。「border-color」プロパティを使います。先ほどと同様に、；（セミコロン）でつなぎます。対応する値は、色名・カラーコード・RGB値のいずれかを使って色を指定しますが、名前を使えるのは下の16色の基準色を含めて147色です。もっと細かく指定したい場合は、カラーコードかRGB値を記入します。
| 色名 | コード | RGB値 |
|---|---|---|
| black | #000000 | (0,0,0) |
| gray | #808080 | (128,128,128) |
| silver | #c0c0c0 | (192,192,192) |
| white | #ffffff | (255,255,255) |
| navy | #000080 | (0,0,128) |
| blue | #0000ff | (0,0,255) |
| aqua | #00ffff | (0,255,255) |
| teal | #008080 | (0,128,128) |
| green | #008000 | (0128,0) |
| olive | #808000 | (128,128,0) |
| lime | #00ff00 | (0,255,0) |
| yellow | #ffff00 | (255,255,0) |
| fuchsia | #ff00ff | (255,0,255) |
| purple | #800080 | (128,0,128) |
| maroon | #800000 | (128,0,0) |
| red | #ff0000 | (255,0,0) |
カラーコード表とカラーネーム表はネット検索で探せます。RGB値は、R値・G値・B値それぞれ０～255までの数字で指定します。255×255×255=約1658万通りの色が使えます。
下の画像は青色指定の例です。カラーネームでもカラーコードでもRGB値でも、同じ青色で表示されます。RGB値の書き方は、rgb(R値,G値,B値) となります。
背景色 「background-color」
次は枠内に色を付けます。「background-color」プロパティを使います。色の指定は先ほどと同様にカラーネーム・カラーコード・RGB値のいずれかを記入します。下の例では、カラーネームの「yellow」を指定しました。
四辺を個別に指定 「top・right・bottom・left」
ここまでの例では、ブロックを囲う四角形の四辺すべてを一括で指定しました。ですので、当然四辺とも同じ線種・太さ・色になっていますが、個別に指定することもできます。四辺をそれぞれ別の色や太さにしたり、例えば左だけあるいは左と下だけ表示して見出しのようにしたりすることもできます。
4辺それぞれのプロパティは以下の通りです。
例えば、borderプロパティで枠線を設定した後、「border-top」プロパティを追加して「hidden」という非表示の値を記入すると、他の辺はそのままで上辺だけ非表示にすることができます。
このように、各辺それぞれを個別に自由自在に設定することができますが、各辺ごとに style,width,color の3つのプロパティを記入するのは面倒です。そこで、3つの値を一括で記入します。下に記したCSSは、上3行が囲み枠全体の設定で、破線・太さ5px・青色を指定しています。下3行は4辺の内、底辺のみの設定で、実線・太さ8px・赤色を指定しています。
border-style : dashed ; →線種：破線
border-width : 5px ; →線の太さ：5px
border-color : blue ; →線色：青
border-bottom-style : solid ; 底辺の線種：実線
border-bottom-width : 8px ; 底辺の太さ：8px
border-bottom-color : red 底辺の線色：赤
下の画像のように、3辺が青色の破線で底辺だけ赤色の実線の枠になります。
上記の6行を、下に記した2行にまとめることができます。それぞれの値を半角スペースで区切って入力します。上記の6行も下の2行も全く同じ囲み枠になります。
border : dashed 5px blue;
border-bottom : solid 8px red
追加CSSの記入が終わったら「公開」をクリックします。ちょっと紛らわしいですが、編集記事がまだ公開前の下書きの段階であれば、この時点でウェブ上に公開されるわけではありません。編集画面に戻って記事の編集を続けて行います。プレビューしたときにCSSが適用されて表示されるだけです。あくまで実際の公開は編集画面上の公開ボタンからです。（すでにウェブ上に公開済みの記事の場合は公開ボタンをクリックした時点ですぐに反映されます。）
ブロック囲み枠の表示は以上です。枠の幅の指定や、「em」「rem」など数値の単位についてはこちらに記載しています。
