【THE THOR】CSSカスタマイズでオリジナルのボックス装飾に挑戦しよう！

今日も元気に個人商店を営んでいる40代「ヨフカシ（@yofukashi-kirin）」です。

WordPressテーマ「THE THOR」のデザインカスタムについての記事です。

記事を作成するときに「ボックス（囲う装飾）」を利用していると思います。

当サイトの記事で、

このようなボックス装飾を

見たことが

ありませんか？

これは独自にデザインしたパーツを使っています。

Web制作でデザインを調整する「CSS」という仕組みを使っています。

当記事では実際のCSSコードを公開しながら、オリジナル装飾の作り方、使い方を紹介します。

こんな人にオススメ！

• 「ヨフカシBOX」の秘密を知りたい
• 同じようなボックスを使ってみたい
• CSSカスタマイズに挑戦してみたい

ある程度のHTML&CSSの知識が必要です。
中級者向けの内容です

オリジナルボックスの構造を解説

まず、オリジナル装飾「ヨフカシBOX」の構造を簡単に説明します。

実は「ヨフカシBOX」の正体は、「各ブロックを積み上げただけ」という、非常にシンプルな方法で構成されています。

装飾されたブロックを隙間なく積み上げる

WordPressブロックエディタの「各ブロック」にCSSで装飾（デザイン）を適用しています。

そして、装飾されたブロックを隙間なく積み上げることで、あたかも一つのボックスであるかのように表示しています。

「ヨフカシBOX」ができるまで

ここからは、冒頭で紹介した「3段ボックス」ができるまでの工程を解説します。

「3段ボックス」を分解すると、

まず第１段目

これが２段目

そして３段目

こんな感じです。

各段は、WordPressのブロックエディタの「P（段落）ブロック」です。

これらを隙間なく重ねて表示すると「ボックス風」の見た目になります。

１段目

２段目

３段目

装飾する前に「下ごしらえ」が必要

ボックス風にデザインするための準備として、コンテンツ（文字や画像など）が表示される領域を標準より狭くします。

「準備なしのブロック」と「準備ありのブロック」の違いを確認してください。

準備なし

まずは、標準のブロックを確認しましょう。これは、ブロックの範囲を見やすくするために「背景の色」を薄くつけただけの「P（段落）ブロック」です。標準のブロックに文字を入力していくと、こんな感じになります。余白がない状態です。

準備あり

一方「下ごしらえ」を施したブロックです。「padding（パディング）」という余白を調整するCSSプロパティを使い、上下左右にそれぞれ余白を作っています。文字を入力する領域が狭くなりました。ボックスとして使うブロックに必要な設定です。

では、ボックス装飾の準備をしたところで、各ブロックに、どんな装飾をしているか見ていきましょう。

１段目の装飾

1段目から順を追って確認しましょう。

２段目の装飾

続いて２段目デザイン。

３段目の装飾

そして三段目。

なお、これが3段目の正確な状態

＊三段目の背景は、何も指定しません。

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

各段の装飾ができたら、最後に「合体」させます。

「合体」なので「くっつける」わけですが、Webデザインにおいては「隙間をなくす」という発想で考える方がスムーズです。

というのも、CSSでは「margin（マージン）」という隙間を調整するプロパティを使います。

「margin」は隣り合う要素の「間隔」を数値で設定することができます。

「0＝ゼロ」を指定すると「隙間を作らない」という指示になるため、結果「くっつく」表示になるわけです。

これが完成形です。

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

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

これが「ヨフカシBOX」の仕組みです。
各ブロックを積み上げる構造なので、3段以上のボックスも簡単に作ることができます。

では、つづいて具体的な設定方法と使い方を紹介します。

「ヨフカシBOX」の設定方法と使い方

「ヨフカシBOX」が使えるようになる3ステップを確認します。

1. CSSデータの用意（作成）
2. CSSデータをWordPressに仕込む
3. 編集画面で個別に設定する

なお「ヨフカシBOX」は、ブロックエディタにデザインを適用するものです。

①CSSデータを用意する（作成する）

まずは、デザインの設計書「CSSデータ」を用意します。

ゼロの状態からデザインを設計するには、Webサイト制作で扱う「CSS（シー・エス・エス）」の知識が必要になります。

しかし、必ずしも自分で作る必要はありません。

他人が作った「CSSデータ」の読み方がわかれば、内容を理解したうえでアレンジして利用することも可能です。

公開しているCSSデータについて

これから紹介するCSSコードには、「.content」と「独自につけたクラス名（.○○）」がセットで記述されています。

「.content」は記事のメインとなるコンテンツ部分を指定するクラス名なので、念のため入力しています。なるべく、そのまま使ってください。

「独自につけたクラス名（.○○）」の方には、深い意味はありません。

あとで記事内で装飾する工程で「クラス名」は頻繁に入力します。

私が個人的につけた「単なる名前」です。

アレンジする時は、自分が使いやすい名前に変更しても問題ありません。

では、実際に私が使用しているデータを公開します。

余白を設定するCSSコード

• ボックス風に見せるための準備
• 選んだブロックに余白を作ることができる
• 用途別に4種類を作った

万能ボックスの「Aタイプ」

どこでも使える、ソロでも使える、万能ボックス！
＊これがAタイプ

Aタイプ：4辺同じ幅

/*ブロック内の余白設定*/
/*クラス名「box1」*/
/*余白（4辺同じ幅20px）を設定する*/
.content .box1{
position: relative;
padding:20px;/*余白の設定*/
background-color: #ffffff;/*背景の設定*/
}

「くっつく」Aタイプ：4辺同じ幅

/*ブロック内の余白設定*/
/*クラス名「box10」*/
.content .box10{
position: relative;
padding:20px;/*余白（4辺同じ幅20px）を設定する*/
background-color: #ffffff;/*背景の設定*/
margin: 0;/*他のブロックとの隙間の設定*/
}

/*ブロック内の余白設定*/
/*クラス名「box2」*/
.content .box2{
position: relative;
padding:10px 20px;/*余白の設定　上下10px　左右20px*/
background-color: #ffffff;/*背景の設定*/
}

/*ブロック内の余白設定*/
/*クラス名「box3」*/
.content .box3{
display: inline-block;
padding: 0 10px;/*余白の設定　上下0px　左右10px*/
background-color: #ffffff;/*背景の設定*/
}

横幅一杯に広がる「Dタイプ」

これがDタイプ

Dタイプ：横幅一杯に広がる

/*ブロック内の余白設定*/
/*クラス名「box4」*/
.content .box4{
display: block;
padding: 0 10px;/*余白の設定　上下0px　左右10px*/
background-color: #ffffff;
}

「display：block」は念のため入力しています。

デザインに関するCSSコード

背景の色

• 選んだブロックの背景色を変えることができる

/*ブロックの背景色指定*/
/*クラス名「bg11」*/
.content .bg11{
background-color:#563e20;/*背景色（濃い茶）*/
color:#ffffff;/*文字色（白）*/
}

/*ブロックの背景色指定*/
/*クラス名「bg01」*/
.content .bg01{background-color:#eeece9;/*背景色（うすい茶）*/}

文字の色

• 選んだブロックの文字色を変えることができる

/*ブロックの文字色指定*/
/*クラス名「moji11」*/
.content .moji11{color: #563e20;/*文字の色（濃い茶）*/}

枠線の色

• 選んだブロックに枠線（ボーダー）を付けることができる
• 線の太さ、線の種類、色が設定できる

/*ブロックの枠線指定*/
/*クラス名「sen11」*/
.content .sen11{border: 2px solid #563e20;/*太さ＊ 種類（直線） 濃い茶色*/}

枠線の左右だけ表示する

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

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

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

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

/*線　下だけ消す*/
.content .senNU{border-bottom: none;}

角のデザインに関するCSSコード

4つの角を丸くする

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

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

3つの角を丸くする

/*角丸（左上以外3つ）*/
.content .r3{border-radius: 0 5px 5px 5px;}

クラス名は「r3」です。
左上の角以外を丸くする。

上の2つの角を丸くする

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

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

下の2つの角を丸くする

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

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

「隙間をなくす＝margin：0」の使い方に注意！

「ヨフカシBOX」において、最大のポイントとなるのが「隙間をなくす＝margin：0（マージンゼロ）」の使い方です。

くっつける＝隙間をなくす

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

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

使い方のポイント

ヨフカシ作成のCSSデータだと「gap00」や「くっつくAタイプ」の「box10」などの「margin: 0;」を設定してあるクラス名の取扱いについて

基本的に「margin:0（マージンゼロ）」を適用したブロックは、「上のブロック」に近づくと考えてください。

つまり上下に並ぶブロックを合体させる時は、上のブロックにくっつけるために、下のブロックに「margin：0（マージンゼロ）」を設定することになります。

なので最上段のブロックには「margin：0（マージンゼロ）」の設定は不要です。

2つめ以降のブロックからCSSを適用させていきます。

また3段や4段のボックスを作るときも、下のブロックに「margin：0（マージンゼロ）」を設定する作業を繰り返して作ります。

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

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

/*ブロック内の余白設定*/
/*クラス名「box1」*/
/*余白（4辺同じ幅20px）を設定する*/
.content .box1{
position: relative;
padding:20px;/*余白の設定*/
background-color: #ffffff;/*背景の設定*/
}

/*ブロック内の余白設定*/
/*クラス名「box10」*/
.content .box10{
position: relative;
padding:20px;/*余白（4辺同じ幅20px）を設定する*/
background-color: #ffffff;/*背景の設定*/
margin: 0;/*他のブロックとの隙間の設定*/
}

/*ブロック内の余白設定*/
/*クラス名「box2」*/
.content .box2{
position: relative;
padding:10px 20px;/*余白の設定　上下10px　左右20px*/
background-color: #ffffff;/*背景の設定*/
}

/*ブロック内の余白設定*/
/*クラス名「box3」*/
.content .box3{
display: inline-block;
padding: 0 10px;/*余白の設定　上下0px　左右10px*/
background-color: #ffffff;/*背景の設定*/
}


/*ブロック内の余白設定*/
/*クラス名「box4」*/
.content .box4{
display: block;
padding: 0 10px;/*余白の設定　上下0px　左右10px*/
background-color: #ffffff;
}

/*ブロックの背景色指定*/
/*クラス名「bg11」*/
.content .bg11{
background-color:#563e20;/*背景色（濃い茶）*/
color:#ffffff;/*文字色（白）*/
}

/*ブロックの背景色指定*/
/*クラス名「bg01」*/
.content .bg01{background-color:#eeece9;/*背景色（うすい茶）*/}

/*ブロックの文字色指定*/
/*クラス名「moji11」*/
.content .moji11{color: #563e20;/*文字の色（濃い茶）*/}

/*ブロックの枠線指定*/
/*クラス名「sen11」*/
.content .sen11{border: 2px solid #563e20;/*太さ＊ 種類（直線） 濃い茶色*/}

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

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

/*線　下だけ消す*/
.content .senNU{border-bottom: none;}

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

/*角丸（左上以外3つ）*/
.content .r3{border-radius: 0 5px 5px 5px;}

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

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

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

②WordPressに「CSSデータ」を仕込む

用意した「CSSデータ」を、WordPress本体に設定します。

1. WordPressダッシュボード（管理画面）の
2. →外観から
3. →テーマエディタを開き
4. →「style-user.css」にデータを入力（コピぺでOK）
5. →「ファイルを更新」する

WordPressテーマ「THE THOR」の子テーマ「THE THOR CHILD」の設定方法です。

[ti label=”01″ title=”WordPressのダッシュボードを開く”][/ti]
[ti label=”02″ title=”メニュー「外観」を選択”][/ti]
[ti label=”03″ title=”「テーマファイルエディター」を選択”]

[/ti]
[ti label=”04″ title=”編集するテーマが「子テーマ」になっていることを確認する”]

[/ti]
[ti label=”05″ title=”「style-user.css」を選択”]

[/ti]
[ti label=”05″ title=”CSSデータを入力する”]

[/ti]
[ti label=”06″ title=”ファイルを更新する”]

最後に忘れないようにね！[/ti]

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

あとは記事を書きながら、任意のブロックにCSSデータを適用させて、ボックス風のデザインを再現していきます。

➂記事を作成する時の使い方（デザインを適用させる方法）

では、いよいよ記事を作成する時の使い方を説明します。

「ヨフカシBOX」のデザインを記事の装飾として反映させる方法です。

この操作は、WordPressの記事編集画面（エディタ画面）で行います。

「高度な設定」から「追加CSSクラス」に「クラス名」を入力する

CSSデータをブロックに適用させたいときは「クラス名」が必要です。

1. ブロックを選択した状態で
2. →高度な設定を開く
3. →追加CSSクラスの欄
4. →クラス名を入力する

記事編集画面（エディタ画面）の右側「高度な設定 」を開くと表示される「追加CSSクラス」に「クラス名」を入力する作業を行います。

[ti label=”01″ title=”任意のブロックを選択する”]

[/ti]
[ti label=”02″ title=”画面右側の設定から「高度な設定」を開く”]

[/ti]
[ti label=”03″ title=”「追加CSSクラス」の欄を選択”]

[/ti]
[ti label=”04″ title=”「クラス名」を入力する”]

入力したクラス名とデザイン

• box1 → 余白20pxを設定
• bg03 → 背景色（うすい黄色）
• moji33 →　文字の色（黄色）
• sen33 → 枠線（黄色）
• r4 → 角を丸める

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

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

[/ti]

以上が、オリジナルCSSデータの設定方法と、記事作成時の使い方の解説です。

「ヨフカシBOX」のメリットとデメリット

オリジナルの装飾パーツの良いところ、不便なところを紹介します。

メリット➀：自由自在に組み合わせられる

「ヨフカシBOX」のメリットは、状況に応じて自由に使えることです。

• ブロックの付け外しが思いのままに設定できる
• Pブロック以外にも、画像やリストにも適用できる
• デザインの変化もつけることができる

ブロックの付け外しが思いのまま

基本的に「隙間をなくす＝くっついたように見える」と「枠線で囲う＝ひとつのまとまりに見える」の効果を合わせて「ボックスに見える」仕組みです。

ブロックの組み合わせに制限はありません。

P（段落）ブロック以外にもデザインを適用できる

WordPressのブロックエディタは、文章を入力できる「P（段落）ブロック」以外に、画像データを挿入できる「イメージブロック」や、箇条書きの文章を作成できる「リストブロック」など、さまざまなタイプのブロックがあります。

「ヨフカシBOX」は、各ブロックに対してCSSでデザインを反映させている仕組みなので、ブロックのタイプを選ばずに適用させることができます。

画像ブロックの例

キケン！

デザインの変化をつけることができる

デザインのパターンが一定になってしまうと、読者が飽きてしまい注目させたい効果が半減してしまうこともあります。

「枠線」や「背景色」を調整して変化をつけるだけで、デザインバリエーションを増やすことができます。

枠線　+　背景

枠線のみ

背景のみ

カラーパターンも仕込みの段階で設定しておけば、もっとたくさんの種類を使えるようになります。

メリット②：モバイル表示に対応したデザイン

インターネットの検索は「パソコン」より「スマホ」で行う人が多い時代になりました。

Webサイトのデザインも「モバイル表示」に対応したデザインが重要視されています。

「ヨフカシBOX」は、スマホの画面で見た時にも「情報のまとまり」がわかりやすい装飾なので、モバイル表示にも対応したデザインになっています。

例えば、こんな使い方ができます。

デメリット：編集画面で確認できない

「ヨフカシBOX」は、記事作成時のエディタ画面では、デザインが反映されません。

編集作業をしているときは「どんな表示になっているか？」を想像しながら、設定することになります。

実際の画面を確認したいときは「プレビュー」を利用してください。

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

さて、ここまでオリジナルのボックス装飾について解説してきました。
しかしTHORには、記事装飾のパーツが備わっています。

わざわざデザインを仕込む必要はありません。

それでもカスタムしている理由は、記事の編集システムにあります。

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

私がWordPressに出会ったのは、2020年の春でした。（3月～4月の頃）

お店の情報発信のために「店長ブログ」をはじめようとしたのが、きっかけです。

その時点でWordPressは「ブロックエディタ」が誕生しており、私がはじめて触れたのは「ブロックエディタ」でした。

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

2020年7月にWordPressテーマ「THE THOR」を購入し使うことになってから、エディタに古いクラッシックタイプがあることを知りました。

「THE THOR」は、ブロックエディタが誕生する前に開発されたテーマということもあり、機能を使いこなすには「古いクラッシックエディタ」を利用する方がオススメされています。

しかし、すでに「ブロックエディタ」に慣れていた私は、「クラッシックエディタ」の扱いに苦労しました。

未だに使いこなせていない状況です。

それなら自分で作っちゃえ！

個人的には、「ブロックエディタ」の方が、文章作成がしやすいと感じています。

そこで、ブロックごとに装飾して合体させる方法を考えて作ったのが「ヨフカシBOX」です。

「ヨフカシBOX」導入は自己責任でお願いします

今回、オリジナルの記事装飾パーツ「ヨフカシBOX」を紹介しました。

導入してみたい方は、公開しているコードを自由にコピーして使っていただいて構いません。

ただし、注意事項があります。

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

使用テーマが異なれば反映されない可能性があります

「ヨフカシBOX」は、当サイトで使用しているWordPressテーマ「THE THOR」に対応したものです。

同じWordPressテーマであれば、導入はスムーズに行えるかもしれませんが、他のWordPressテーマでは、対応するクラス名や初期設定の違いなどの影響で、同じデザインが反映されない可能性もあります。

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

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

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