【THE THOR】CSSのカスタマイズで自分だけのオリジナルボックス装飾を使う方法

今回は「THE THOR」の装飾パーツについての記事です。
当サイトでは、デフォルトの装飾だけではなく、オリジナルでカスタムしたボックス装飾を使っています。

当サイトのブログ記事を読んだことがある人ならば、

こんなボックス装飾を

目にしたことが

あると思います。

まさに、これが私がオリジナルでカスタムしたボックスです。

もしも当サイトを見て『「THE THOR」なら、このボックスが使える！』と思ってしまう人がいたら申し訳ないので、謝罪をさせていただきます。
勘違いさせてしまった方、申し訳ありません。

せっかくなので、どんなカスタムをしたのか、解説します。

この記事は、こんな人にオススメ

• ヨフカシ流ボックスの秘密を知りたい方
• 同じようなボックスを使ってみたい方
• 「オリジナルカスタム」に挑戦してみたい方

！注意事項！
ある程度のHTML&CSSの知識が必要
中級者向けの内容です

どんな構造のボックスなのか？

このボックスの構造は、シンプルで簡単です。

各ブロック毎に装飾を適用しています。
それらを隙間なく積み上げて、あたかも一つのボックスであるかのように見せているだけです。

実際の例を挙げて、説明していきましょう。

ボックスの構造を分解してみましょう

記事の冒頭で挙げた「3段のボックス」を例にします。
わかりやすくするため、あえて色を変えて表示することにします。
気色悪いですが、ご了承ください。

分解してみると、

まず第１段目

これが２段目

そして３段目

こんな感じです。

各段は、WordPressで採用されている「ブロックエディタ」の各ブロックそのものです。
それぞれ、どんな装飾をしているか見ていきましょう。

何も装飾していないブロック

まずは、何も装飾していないブロックを確認しましょう。これは、なにも装飾していないブロックです。改行しないで、ただテキストを入力していくと、こんな感じになります。ブロックの範囲を見やすくするために「背景の色」だけ薄くつけておきます。

全てに共通するカスタム

ボックスにする下準備として、文字が表示される領域を、標準の設定より狭くしています。「padding（パディング）」という余白を調整するCSSプロパティを使っています。上の何もしていないブロックと見た目の違いを比べてください。

１段目の装飾

順を追って確認しましょう。

下準備完了の状態

⇩

「背景の色を指定」します

⇩

「文字の色を指定」します

⇩

「枠線を表示」させます

⇩

「角を丸く」させます
（上部の2つだけ）

• 背景の色を指定する
• 文字の色を指定する
• 枠線を表示させる
• 角を丸くする（上部の2つだけ）

同様に、２段目と３段目も

２段目の装飾

これが二段目

• 背景の色を指定する
• 文字の色を指定する
• 枠線を表示させる（左右だけ）

３段目の装飾

そして三段目

• 文字の色を指定する
• 枠線を表示させる（上辺以外の3辺）
• 角を丸くする（下部の2つだけ）

＊三段目の背景については、何も指定がない状態です。

最後の仕上げ「くっつける＝隙間をなくす」

各段の装飾が完了したら、最後に「合体」させれば完成です。

「合体」なので「くっつける」わけですが、Webデザインにおいては「隙間をなくす」という発想で考える方がスムーズです。
というのも、CSSでは「margin（マージン）」という隙間を調整するプロパティを使うことが多いです。

これは隣り合う要素の「間隔」を数値で決めるのですが、「0＝ゼロ」を指定すると「隙間を作らない」という指示になるため、結果「くっつく」表示になるわけです。

これが完成形です

こんなボックスができます。

太文字や、テキストの位置（左右に寄せる、中央配置など）は、WordPressのエディタの方で指定できます。

• テキストブロック（Pタグ）だけでなく
• こんな風に、リストのブロックでも使えます

これが「ヨフカシ流ボックス」の仕組みです。
勝手に自分で「ヨフカシ流」と名付けてますが、構造は理解していただけたと思います。

では、つづいて「どんな方法で、このデザインを適用しているのか？」
ご説明しましょう。

どんな操作をしてる？

この「ヨフカシ流ボックス」を使うには、「事前の準備」と「エディタ上での操作」の二つが必要です。

• 事前準備は、オリジナルCSSの設定を用意して、テーマに仕込みます
• エディタ上での操作は、各ブロックに、そのCSSを適用させます

テーマへの仕込みが出来てしまえば、操作は難しくありません。
また、エディタ上での操作は、ブロックエディタのまま使うことができます。
（クラシックエディタは、必要ありません）

①【事前準備】CSSの用意と仕込み

では、さっそく「仕込み」から見ていきましょう。
その前に、ここで少しだけ「CSSコード」の読み方について、簡単な解説を載せておきます。

まずは「オリジナルのCSSデータ」を用意する

実際に私が使用しているデータを公開します。
これから紹介するコードの「クラス名」には、独自につけた名前が多く登場します。
深く意味は考えず、ただの「名前」だと思ってください。

ボックスにするための下地作り用CSS

【共通カスタム】余白の設定

/*カスタム：ボックス*/
.content .box{
position: relative;
padding:20px;
background-color: #ffffff;
}

「下準備」として設定しているコードです。
クラス名は「box」です。
周囲に「20px」の余白を作るように指示しています。

カスタム用CSS（3個）

【カスタム】背景色の設定

/*カスタム：背景色*/
.content .bg11{background-color:#563e20;}
.content .bg01{background-color:#eeece9;}

「背景の色」を指定するコードです。
クラス名は「bg11」、濃い茶色（#563e20）を指定。
クラス名は「bg01」、うすい茶色（#eeece9）を指定。

【カスタム】文字色の設定

/*カスタム：文字色*/
.content .moji11{color: #563e20;}
.content .moji01{color: #eeece9;}

「文字の色」を指定するコードです。
クラス名は「moji11」、濃い茶色（#563e20）を指定。
クラス名は「moji01」、うすい茶色（#eeece9）を指定。

【カスタム】枠線の設定

/*カスタム：ボーダー*/
.content .sen11{border: 2px solid #563e20;}

「枠線」を指定するコードです。
クラス名は「sen11」です。
周囲の四辺に「2pxの太さ」で「直線」を「濃い茶色（#563e20）」で表示させるという指定です。

追加調整用のCSS（6個）

【オプション】角を丸くする設定

/*角丸（四隅）*/
.content .r4{border-radius: 8px;}

クラス名は「r4」です。
4つの角をすべて丸めて表示する指定。

【オプション】上の2つの角を丸くする設定

/*角丸（上だけ）*/
.content .r2o{border-radius: 8px 8px 0 0;}

クラス名は「r2o」です。
角の丸みを指定する。
「8px　8px　0　0」の表示は、それぞれの角に対応している。
「左上　右上　右下　左下」の順。

【オプション】下の2つの角を丸くする設定

/*角丸（下だけ）*/
.content .r2u{border-radius:  0 0 8px 8px;}

クラス名は「r2u」です。
角の丸みを指定する。
「0　0　8px　8px」の表示は、それぞれの角に対応している。
「左上　右上　右下　左下」の順。

【オプション】線の表示を調整する（左右だけ）

/*線（左右だけ）表示*/
.content .senLR{border-top:none;border-bottom:none;}

クラス名は「senLR」です。
枠線の「上」と「下」の線を非表示にする指定。
「左右」の枠線だけが表示される結果になる。

この指示は「4辺の枠線を表示する指示」とセットで使う。
「枠線表示」+「上下を非表示」＝「左右だけの表示」になる。

【オプション】線の表示を調整する（上部の線を消す）

/*線（上だけ）消す*/
.content .senNT{border-top: none;}

クラス名は「senNT」です。
枠線の「上」の線だけを非表示にする指定。

この指示は「4辺の枠線を表示する指示」とセットで使う。
「枠線表示」+「上を非表示」＝「下左右の表示」になる。

【オプション】くっつける＝隙間をなくす

/*隙間なし*/
.content .gap00{margin: 0;}

クラス名は「gap00」です。
上のブロックとの隙間をなくす設定。
その結果「くっついた」表示に見える。
「ヨフカシ流ボックス」における重要なCSSコード。

使い方のポイントは後ほど「エディタ上の操作」の中で詳しく解説します。

記事内リンク｜「隙間をなくす＝gap00」の使い方

オリジナルCSSをまとめたコード

公開したコードを一つにまとめました。
コピペ＆編集して使うことが可能です。

/*カスタム：ボックス*/
.content .box{position: relative;padding:20px;background-color: #ffffff;}

/*カスタム：背景色*/
.content .bg11{background-color:#563e20;}
.content .bg01{background-color:#eeece9;}

/*カスタム：文字色*/
.content .moji11{color: #563e20;}
.content .moji01{color: #eeece9;}

/*カスタム：ボーダー*/
.content .sen11{border: 2px solid #563e20;}

/*オプション*/

/*角丸（四隅）*/
.content .r4{border-radius: 8px;}
/*角丸（上だけ）*/
.content .r2o{border-radius: 8px 8px 0 0;}
/*角丸（下だけ）*/
.content .r2u{border-radius:  0 0 8px 8px;}

/*線（左右だけ）表示*/
.content .senLR{border-top:none;border-bottom:none;}
/*線（上だけ）消す*/
.content .senNT{border-top: none;}

/*隙間なし*/
.content .gap00{margin: 0;}

テーマにCSSを仕込む方法

これらの「CSSデータ」が用意出来たら、あとはテーマのCSSに組み込みます。

WordPressのダッシュボードからの操作ができます。
「外観➡テーマエディタ➡style-user.cssに書き込む➡ファイルを更新」

後述しますが、私が使っているWordPressテーマ「THE THOR」での操作になります。
子テーマ「THE THOR CHILD」の方で設定してください。

Step.２

ダッシュボードの操作
画面右側の「style-user.css」を選択

Step.３

ダッシュボードの操作
「CSSデータを入力　➡　ファイルを更新」
画像のコードは「公開したコード」です。

これでテーマにオリジナルCSSを仕込むことができました。

あとは、記事を書きながら、使いたい装飾のクラス名をブロックに設定してあげれば、反映されるはずです。

②【エディタ上での操作】CSSの適用方法

ブロックにCSSを適用させる方法は、エディタ画面の右側にある「高度な設定 」から行います。

任意のブロックを選んだ状態で、「高度な設定 ➡ 追加CSSクラス ➡『クラス名』を入力」という作業になります。

この操作は、WordPressに備わっている機能を使います。

Step.４

エディタ上での操作
任意のブロック選択時
画面右側の「高度な設定」を開く

Step.５

エディタ上での操作
「追加CSSクラス」の欄にクラス名を入力する

⇩

クラス名を入力する時の注意事項

• 半角で入力する
• 大文字、小文字の区別があるので「正確」に入力すること
• 複数のクラス名の入力も可能
• クラス名の間は「半角の空白」を１マス入れること

以上、オリジナルCSSの設定と、その使い方を解説しました。

見本として5段ボックスを作ってみます

１段目
角丸（上2つだけ）
使用するクラス名（box bg01 moji11 sen11 r2o）

２段目
背景なし（クラス名入力なし）
使用するクラス名（box moji11 sen11 senLR gap00）

３段目
使用するクラス名（box bg11 moji01 sen11 senLR gap00）

４段目
使用するクラス名（box bg01 moji11 sen11 senLR gap00）

５段目
枠線の調整（上の線なし）
角丸（下2つ）
使用するクラス名（box moji11 sen11 senNT r2u gap00）

このボックスを作るポイント

• 全てのブロックで「box」を入れる
• 「背景が白」の場合は、指定なし
• 枠線の入り方にも注目
• 「gap00」の使い方（１段目には入力しない）

「隙間をなくす＝gap00」の使い方

この「ヨフカシ流ボックス」で、最大のポイントとなるのが「隙間をなくす＝gap00」の使い方です。

基本の考え方として「gap00」を入力したときは、「下のブロック」が「上のブロック」に近づいていくと思ってください。

なので、２段のボックスを合体させる時は、２段目（下）のブロックに「gap00」を入力してください。１段目（上）のブロックとくっついて表示されます。

この流れで、３段目、４段目のときも「上のブロックに合体させる」イメージで、「gap00」を使っていきます。

先ほどの「５段ボックス」でも、１段目には「gap00」を入力していないですが、その他のブロックには「gap00」を入力しています。

「ヨフカシ流ボックス」の組み合わせは自由自在

この記事の中でも、いくつかのボックスパターンをお見せしました。
当サイト内の別記事では、他のパターンも使っています。

状況に応じて使い分けることができ、段数を増やすことも減らすことも思いのままです。
背景や文字の色なども、仕込みの段階で設定しておけば、もっとたくさんの種類を使えるようになります。

まさに使い方次第で、自分だけのボックス装飾を記事内に表示することができます。

デメリットについて

記事作成時に、エディタ画面に装飾が反映されない点は、デメリットになるでしょう。
どんな表示になっているか、なんとなく想像しながら、使うことになります。

目で見て確認したいときは、「プレビュー」を利用してください。

なぜ「オリジナル」を使っているの？

さて、ここまでオリジナルのボックスについて解説してきました。
しかし、一つの疑問が残ります。

そもそも有料テーマを使っているなら、ボックスの装飾も充実しているはずなのに、なぜカスタムしているのか？

答えは、エディタのタイプが原因だったと、言えます。

個人的には「ブロックエディタ」の方が使いやすい

私がWordPressに出会ったのは、2020年の春、3月～4月の頃。
お店の情報発信のために、店長ブログをはじめようとしたのが、きっかけです。

その時点で、すでに「WordPress」は「ブロックエディタの仕様」になっていました。
初めて触れた「ブロックエディタ」に感動したのを、今でも覚えています。
私にとってWordPressとは「ブロックエディタ」を使うのが当たり前だったのです。

有料テーマ「THE THOR」はクラシックエディタを推奨

2020年7月から有料テーマ「THE THOR」を使うようになって、テーマの機能を活用するには「旧エディタ」の方が便利だとわかり「新 / 旧」あることを知りました。

ところが、「ブロックエディタ」に慣れ過ぎた私は、「クラシックエディタ」に苦労してしまいました。今だに使いこなせていない状況、というか、使う気がないです。

じゃ、自分で作っちゃえ！

私は、記事を書くには「ブロックエディタ」の方が作業しやすいです。
文章を書くことに専念できるエディタだと、思っています。

頑固な性格

エディタのタイプを、クラシックに変更するつもりがない。
でも、ボックスも使いたい。

ブロックごとに文章を書いた後「装飾する＝CSSを適用する」方法を考えて閃いたのが「ヨフカシ流ボックス」なのです。

モバイル表示を考えると「いいボックス」かも！

ネット検索は「スマホ」が一番使われる時代になり、Webデザインにおいて「モバイル表示」の優先度は高いです。

この「ヨフカシ流ボックス」は、スマホ画面で見た時にも「情報のまとまり」がわかりやすい表示ではないでしょうか？

導入は自己責任でお願いします

今回「オリジナルの装飾ボックス」をご紹介しました。

もし、ご自身のWordPressサイトで導入してみたい方は、公開したコードを「コピペ＆編集」して使ってみてください。

ただし、注意事項がありますので、ご確認ください。

• コードを導入したことによる、いかなる不具合が起きても責任は負いかねます。
• 導入する前には、サイトデータのバックアップを取ってから行うことを、おすすめします。

使用テーマが異なれば、そもそも反映されないものだと思ってください。

当サイトで使用しているテーマは「THE THOR」です。

同じテーマであれば、導入はスムーズに行えるかもしれませんが、他のテーマでは同じ効果が得られるとは限りません。
そもそも対応するクラス名や、初期設定の違いがあります。

以前「ヨフカシ流ボックス」を無料のWordPressテーマ「Cocoon」で挑戦したことがあります。しかし、ブロック同士の隙間が消えず「一塊のボックス」になりませんでした。

それぞれのテーマに合わせた「クラス名と装飾内容の設定」が必要になるでしょう。

これからもカスタマイズ楽しみます

WordPressは、誰でも使えるようになっている反面、使い方も人それぞれ。
私も私なりに楽しんで使っています。

これからも、もっと勉強して、カスタマイズに挑戦していきたいと思っています。