The・THOR|コピペで作れるボックスのサンプル!【WordPress】

9月 23, 2019

注意!この記事のサンプルは、ただコピペだけすると文字化けしてしまいます。

ダブルクォーテーションが全角になっているようです。

半角に変更してください。(読者の加藤様に教えていただきました)

THORのサンプルボックスの使い方

紹介したボックスの下にはコードを記載しています。

このコードをコピーし、WordPressのテキストモードに貼り付ければ完了です。

おじさん
コードが間違っているときは、お手数ですがご連絡ください

ボックスのカスタマイズ

ボックスは、色やタイトルを変更できます。

例えば、下のボックスだと以下のようなコードになります。

上のボックスのコード
<div class="ep-box es-BiconBg es-borderDashedM es-radiusL brc-Lpink bgc-white“><span class="ep-label icon-price-tags es-Lcorner es-round es-bold es-Fbig es-RpaddingSS es-LpaddingSS ftc-DPpink bgc-white“> 用語</span>

色のコードは青色で表示しています。

 外枠の色:brc-Lpink(ライトピンク)

 背景色:bgc-white(ホワイト)

このボックスは、2重になっています。タイトル部分のボックスにもカラー指定が必要です。

 タイトルの色:ftc-DPpink(ディープピンク)

 タイトルの背景色:bgc-white

まずは、この辺りのタイトルカラーを変更してみるのが良いでしょう(カラー一覧)。

大きさや形の変更については、「The・THORのボックスやボタンやラベルの作り方」を参考にしてみてください。

Font Awesome5の設定(必要な方のみ)

このページで紹介しているボックスにはFont Awesome 5のアイコンを使用しているものがあります。

アイコンはThe・THORにも用意されていますが、数が少ないのが難点。

Font Awesome 5では1500以上のアイコンが使えるので、きっと欲しいアイコンが見つかるでしょう。

また、アニメーション(例)も設定できるので、ユーザーを惹きつけることにも貢献するでしょう。

設定は簡単です。この機会に設定してみてください。

設定方法

まず、カスタマイザー(WordPressのメニュー→「外観」→「カスタマイズ」)を開きます。

そして「基本設定」→「高度な設定」を開くと、「</head>直上の自由入力エリア」という項目があります。

ここに次のコードをコピペするとFont Awesome 5のアイコンを使用できるようになります。

アニメーションを利用する方は、次のコードも一緒にコピペしてください。


入力が済んだら、「公開」ボタンを押して完了です。

ポイント

FontAwesome5のアイコンはドンドン増えていきます。そして増えるごとにバージョンが上がっていきます

最初のコードの「v5.7.0」はバージョンを表しています。バージョンを最新のものに書き換えておくと、追加されたアイコンも使用できます

バージョンは、Font Awesome 5のトップページに記載されています。

シンプルなボックスのサンプル

上のボックスのコード
<div class="ep-box es-BiconBg es-borderDashedM es-radiusL brc-Lpink bgc-white“><span class="ep-label icon-price-tags es-Lcorner es-round es-bold es-Fbig es-RpaddingSS es-LpaddingSS ftc-DPpink bgc-white“> 用語</span>ここに本文</div>

上のボックスのコード
<div class="ep-box es-BiconBg es-LborderSolidM es-shadowD bgc-VPpink brc-DPpink“>ここに本文</div>

左余白のボックス

おじさん
線だけなのでボックスとは言えません
なのにコードを見るとボックスを2個使ってますね
うさぎ
上のボックスのコード
<div class="ep-box es-LpaddingL bgc-white“><div class="ep-inbox es-LborderSolidM brc-Vturquoise bgc-white“><span class="ep-label es-RpaddingSS es-LpaddingSS es-bold icon-pencil es-Lcorner bgc-white ftc-Dgray“> 補足</span>ここに本文</div></div>

はてなマーク付き

上のボックスのコード
<div class="ep-box es-BmarkHatena es-radius es-borderSolidS brc-DPblue bgc-VPsky“><div class="ep-inbox es-LborderSolidM brc-Bblue bgc-VPsky“>ここに本文</div></div>

びっくりマーク付き

おじさん
はてなマークのボックスと微妙に違います
上のボックスのコード
<div class="ep-box es-BmarkExcl es-radius es-BpaperRight bgc-VPpink“><div class="ep-inbox es-LborderSolidM bgc-VPpink brc-DPmagenta“>ここに本文</div></div>

はてなマークとビックリマークの色の変更はコチラの記事で

フェルト風ボックス

上のボックスのコード
<div class="ep-box es-radius es-shadow bgc-VPpurple“><div class="ep-inbox es-borderDashedM es-radius bgc-VPpurple brc-Lpurple“>ここに本文</div></div>

おじさん
フェルトに見えないかも知れませんが
上のボックスのコード
<div class="ep-box es-borderDashedM bgc-VPmagenta brc-white “>ここに本文</div>

おじさん
フェルトに見えないかも知れませんが、パート2
上のボックスのコード
<div class="ep-box es-radiusL es-borderDashedM brc-white bgc-Llime“><div class="ep-box es-borderDashedM es-radiusL bgc-Llime brc-white “>ここに本文</div></div>

黒板風ボックス

上のボックスのコード
<div class="ep-box es-paddingss es-borderSolidM es-bold es-center es-shadow brc-DLorange bgc-DGgreen ftc-white“><span class="”ep-label es-Fbig es-BborderSolidM brc-Lpink ftc-Lpink“>おしらせ</span>ここに本文</div>

上のボックスのコード
<div class="ep-box es-paddingss es-borderSolidM es-bold es-shadow brc-DLorange bgc-DGlime ftc-white“><span class="”ep-label es-Fbig icon-file-text2 es-bold ftc-Lsky“>重要</span>ここに本文</div>
おじさん
黒板のボックスって定番だけど、使ってるのはあまり見ないですね
なのに2個も
うさぎ

ホワイトボード風ボックス

上のボックスのコード
<div class="ep-box es-paddingss es-bold es-shadow es-borderSolidM brc-Dgray bgc-white es-radius ftc-black“><span class="ep-label es-RpaddingSS es-LpaddingSS es-shadowD es-FbigL bgc-white ftc-Vblue“>今日の予定</span><div class="ep-inbox es-LpaddingSS bgc-white brc-white“>ここに本文</div></div>

上のボックスのコード
<div class="ep-box es-italic es-paddingss es-borderSolidM es-bold es-shadowD es-radius bgc-white ftc-black brc-DLorange“><span class="”ep-label es-Fbig ftc-Vred“>- おしらせ -</span>ここに本文</div></div>

方眼ノート風ボックス

上のボックスのコード
<div class="ep-box es-LborderSolidM es-shadow es-grid es-Bicon icon-calculator ftc-Dgray brc-Bsky“>ここに本文</div>

付箋付きボックス

上のボックスのコード
<div class="ep-box es-BiconBg es-grid es-shadowD es-LpaddingL es-borderDashedM brc-Lsky bgc-VPsky“>ここに本文<span class="ep-label es-LborderSolidM icon-alarm es-RpaddingSS es-LpaddingSS es-TpaddingSS es-BpaddingSS es-size60 es-shadow brc-Lgreen bgc-VPorange“> 時間 </span><span class="ep-label es-LborderSolidM icon-coin-yen es-RpaddingSS es-LpaddingSS es-TpaddingSS es-BpaddingSS es-size60 es-shadow brc-Lpurple bgc-VPorange“> お金 </span><span class="ep-label es-LborderSolidM icon-compass2 es-RpaddingSS es-LpaddingSS es-TpaddingSS es-BpaddingSS es-size60 es-shadow brc-Lred bgc-VPorange“> 場所 </span>ここに本文</div>

上のボックスのコード
<div class="ep-box es-BiconBg es-shadowD es-LpaddingL es-borderSolidM brc-DGorange bgc-Lorange“><span class="ep-label es-RpaddingSS es-LpaddingSS es-shadowD es-FbigL bgc-VPblue ftc-Vblue“>・ メモ ・</span>ここに本文<div class="ep-box es-size60 es-shadow es-LborderSolidM bgc-VPred ftc-Dgray brc-Blime “>1.</div><div class="ep-box es-size60 es-shadow es-LborderSolidM bgc-VPred ftc-Dgray brc-Bblue “>2.</div><div class="ep-box es-size60 es-shadow es-LborderSolidM bgc-VPred ftc-Dgray brc-Bpink “>3.</div>ここに本文</div>
付箋がボックスとラベルだとどう違うんですか
うさぎ
おじさん
わかりません

Q&Aボックス

上のボックスのコード
<div class="ep-box es-BiconBg es-shadowD bgc-VPgreen“><strong>・Q&Aボックス</strong><div class="ep-box es-BmarkQ bgc-VPgreen“>ここに質問</div><div class="ep-box es-BmarkQ es-BmarkA es-BpaddingL bgc-VPgreen“>ここに答え</div></div>

Q&Aのマークの色はカスタマイザー(「外観」→「カスタマイズ」)→「パーツスタイル設定」→「その他エディタ用パーツ設定」で変更できます。

ビフォーアフターボックス

上のボックスのコード
<div class="ep-box bgc-VPturquoise es-radius"><div class="column column-2pc"><div class="column__item"><span class="ep-label es-round es-RpaddingSS es-LpaddingSS bgc-DPred ftc-white“>ビフォー</span>ここに左の写真</div><div class="column__item"><span class="ep-label es-round es-RpaddingSS es-LpaddingSS bgc-DPsky ftc-white“>アフター</span>ここに右の写真</div></div></div>

ビフォー・アフターの画像の貼り方

1

画像は、2枚同じ大きさのものを用意します。

2

ボックスの中に画像を直接入れるのは難しいので、まず記事の空いた場所を貼り付けます。

3

貼り付けた画像のコードをテキストモードでコピペします。

画像のコードは

<img class="size-full wp-image-28″ src="https://blogfarming.jp/wp-content/uploads/2019/01/2019.jpg" alt="" width="400″ height="300″ />

この様になっているので、このコードを「ここに写真」の箇所に貼り付けてください。

大きな見出しのボックス

上のボックスの コード
<div class="ep-box es-shadow bgc-VPyellow“><div class="ep-inbox es-center es-Bwhole es-FbigL es-bold icon-quill bgc-Lorange ftc-white“>POINT</div>ここに本文</div>

アニメ付き

タイトル部分のアイコンは、Font Awesome 5のアニメーションを使用しています。

上のボックスの コード
<div class="ep-box es-LborderSolidM es-shadow brc-Bpink bgc-VPpink“><div class="ep-inbox es-Bwhole es-FbigL es-bold es-size25 es-LborderSolidM es-center ftc-white bgc-Lpink brc-Bpink“><i class=" fas fa-exclamation-circle fa-fw faa-tada animated " style="color: #ffffff;"></i>注意</div>ここに本文</div>
Font Awesome 5を利用しない方は、太字の部分を削除してください
うさぎ

3ステップボックス

上のボックスの コード
<div class="ep-box es-radius bgc-VPturquoise brc-DPblue“><span class="ep-label es-radius es-FbigL es-bold es-under bgc-VPturquoise ftc-Vpink“>問題解決の3ステップ</span><span class="ep-label es-radius es-bold es-RpaddingSS bgc-DPsky ftc-white“><i class="fas fa-fw fa-shoe-prints fa-rotate-270 fa-fw " style="color: #ffffff;"></i>ステップ1</span>ここに本文<hr class="hr-dotted" /><span class="ep-label es-radius es-bold es-RpaddingSS bgc-DPsky ftc-white“><i class="fas fa-fw fa-shoe-prints fa-rotate-270 fa-fw " style="color: #ffffff;"></i>ステップ2</span>ここに本文<hr class="hr-dotted" /><span class="ep-label es-radius es-bold es-RpaddingSS bgc-DPsky ftc-white“><i class="fas fa-fw fa-shoe-prints fa-rotate-270 fa-fw " style="color: #ffffff;"></i>ステップ3</span>ここに本文<hr class="hr-dotted" /></div>
Font Awesome 5(足跡のアイコン)を利用しない方は、太字の部分を削除してください
うさぎ

動く見出し付きボックス

Font Awesome 5アニメーション付きのボックス4つです。

ただの色違いとのご意見もありますが
うさぎ

アニメ

上のボックスの コード
<div class="ep-box es-radius es-borderSolidM bgc-white brc-gray“><span class="ep-label es-bold es-radius es-Lcorner es-Fbig es-RpaddingSS es-LpaddingSS bgc-VLgray ftc-VDgray“><i class=" fas fa-edit fa-lg fa-fw faa-float animated " style="color: #191919;"></i>メモ</span>ここに本文</div>

アニメ

上のボックスの コード
<div class="ep-box es-radius es-borderSolidM bgc-white brc-Vred“><span class="ep-label es-radius es-bold es-Lcorner es-RpaddingSS es-LpaddingSS bgc-VPred ftc-Vred“><i class=" fas fa-exclamation-triangle fa-lg fa-fw faa-ring animated " style="color: #e60112;"></i>注意</span>ここに本文</div>

アニメ

上のボックスの コード
<div class="ep-box es-borderSolidM es-radius bgc-VPorange brc-Vorange“><span class="ep-label es-RpaddingSS es-LpaddingSS es-radius es-bold es-Fbig es-Lcorner bgc-VPorange ftc-Vorange“><i class=" fas fa-bell fa-lg fa-fw faa-wrench animated " style="color: #f49801;"></i>ポイント</span>ここに本文</div>

アニメ

上のボックスの コード
<div class="ep-box es-borderSolidM es-radius bgc-VPgreen brc-DPgreen“><span class="ep-label es-radius es-bold es-Lcorner es-RpaddingSS es-LpaddingSS bgc-VPgreen ftc-DPgreen“><i class=" far fa-thumbs-up fa-lg fa-fw faa-tada animated " style="color: #007c36;"></i>ここがオススメ</span>ここに本文</div>

ポイント

Font Awesome 5のカラーは、カラー一覧の「#××××××」のカラーコードで指定します。

まとめ

今回は、The・THORで使えるボックスのサンプルを紹介しました。

このままコピペして使っていただいても構いませんが、出来れば色や形を変えてカスタマイズしてみてください。

カスタマイズしているうちに、オリジナルのボックスが作れるようになります。

設定など分からないことは、ご質問をお寄せください。

テックアカデミー

ド素人の40歳のおじさんが
2ヶ月間WordPressを学んで
自在にカスタマイズできるようになり、
在宅収入を得られるようになった
オンラインスクール

The・THORの関連記事一覧