BlogFarming

ブログを育てる、ブログファーミン!

The・THOR

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

更新日:

これまで、WordPressの有料テーマ「The・THOR」でオリジナルの ボックスの作り方を紹介してきました。

 

慣れてしまえば簡単とは言え、なかなか最初は難しいと思うので、今回はサンプルのボックスをご紹介します。

 

色や形を変えてアレンジして使ってみてください!




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>

ここに本文

</div>

 

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

 

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

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

 

タイトル:用語

タイトルの色: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 のトップページに記載されています。

 

PR レンタルサーバーでブログはもっと速くなります

 

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

 

+上のボックスの コード

<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>

 

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

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

 

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

 

step
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で使えるボックスのサンプルを紹介しました。

 

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

 

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

 

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

 

PR レンタルサーバーでブログはもっと速くなります

 

-The・THOR

Copyright© BlogFarming , 2019 All Rights Reserved Powered by AFFINGER5.