閲覧いつもありがとうございます!フォロー&シェアよろしくお願いします。

the thor パーツカスタム ボックス編

ボックスいっぱい

前回、THE THORのパーツカスタムのラベルをカスタマイズを

行いましたが、今回はボックスの方を紹介していこうと思います。

 

関連記事

有料ワードプレステーマ the thorのエディタ機能のオリジナルパーツ作成機能の使い方が大体わかって来ましたので、紹介して行こうと思います。既に他のサイトでも使い方などが紹介されていますが、やはり自分で作成したものを[…]

ラベルカスタマイズ

 

会社の昼休みにスマホでどんなデザインにしようかと、インプットして来ましたので

それなりのデザインが出来るとは思いますが、ラベル編もビジュアルエディタと

投稿した画面で若干違いが出ましたので不安はありますが、ボックスを作成していこう

と思います。

 

今回はシンプルなボックスとオーソドックスなボックスとやまとしカスタムのボックスを

作成していこうと思いますので、参考にしたい方はコードを使ってください。

 

サブタイトルのカラーやアイコンのカラー変更などは下記から出来ますので

設定しておいてください。

 

パーツスタイル設定
パーツスタイル設定
パーツスタイル設定(項目)
パーツスタイル設定(項目)

 

コードはボックス設定のスタイルに入れると反映します。(ep boxから始まるコード)

<div class=から始まるコードはHTMLを挿入から入れられます。

 

サブタイトル(カラー変更)
サブタイトル(カラー変更)
ボックス設定
ボックス設定(スタイルにコードをコピペ)

 

 

 

  
スポンサーリンク

THE THOR(ザ・トール)のパーツカスタマイズ BOX編

 

ボックスの作成方法もラベルと同じ感じで作成しますので、ラベル編、他で紹介

していますので、パーツのカラーや作成方法を参考にしてもらったうえで

こちらのボックス(BOX)作成編を閲覧下さい。

 

関連記事

有料ワードプレステーマ the thorのエディタ機能のオリジナルパーツ作成機能の使い方が大体わかって来ましたので、紹介して行こうと思います。既に他のサイトでも使い方などが紹介されていますが、やはり自分で作成したものを[…]

ラベルカスタマイズ

 

他の方もすでに紹介されてますが、前から考えていましたし何より

半分以上は自分が覚えるために記事にしていますので、もう後戻りはできませんし

他のサイトなどのボックスデザインを参考にしながら、使えそうなデザインを

作成していきます。

 

シンプルなデザインからthe thorのボックスを作成

 

<div class=”ここに参考コードを挿入</div>

※上記の「ここにコード」の所に参考コードを入れることでボックスが作成できます。

上記はコードではないので使えませんが参考コードはコードとしてあります。

 

テキストに切り替えてボックスを作成時のコードと参考コードを入れ替えると

上手く反映されると思います。

コードはHTMLを挿入かテキスト表示に切り替えて使ってください。

 

HTMLを挿入からテキストのコードを入れるだけでも反映されましたので

そちらの方が簡単かも知れませんのでどちらかをお使いください!

 

コンテンツ

 

参考コード

ep-box bgc-VPsky es-BsubT es-borderSolidM brc-VPblue es-BsubTradi" title="タイトル">コンテンツ

 

テキストコード

<div class=”ep-box bgc-VPsky es-BsubT es-borderSolidM brc-VPblue es-BsubTradi” title=”タイトル”>コンテンツ</div>

 

※タイトル部分のカラーなどは設定で変更下さい。

サブタイトルボックスのタイトルのカラー変更も出来たら良かったのですが…

同じ同系色でまとめた方が良いでしょう。

 

コンテンツ

 

参考コード

ep-box bgc-VPorange es-borderSolidM es-BsubTradi bgc-VPsky bgc-VPblue brc-Lsky es-radius" title="ここにタイトル">コンテンツ

 

テキストコード

<div class=”ep-box bgc-VPorange es-borderSolidM es-BsubTradi bgc-VPsky bgc-VPblue brc-Lsky es-radius” title=”ここにタイトル”>コンテンツ</div>

 

コンテンツ

 

参考コード

ep-box es-borderSolidM es-BsubTradi es-radiusL bgc-white brc-Lsky es-shadow" title="ここにタイトル">コンテンツ

 

テキストコード

<div class=”ep-box es-borderSolidM es-BsubTradi es-radiusL bgc-white brc-Lsky es-shadow” title=”ここにタイトル”>コンテンツ</div>

 

コンテンツ

 

参考コード

ep-box es-BsubTradi bgc-white es-radius es-shadowD" title="ここにタイトル">コンテンツ

 

テキストコード

<div class=”ep-box es-BsubTradi bgc-white es-radius es-shadowD” title=”ここにタイトル”>コンテンツ</div>

 

コンテンツ

 

参考コード

ep-box es-borderSolidM brc-Lred es-BsubTround bgc-VPred es-radiusL" title="ここにタイトル">コンテンツ

 

テキストコード

<div class=”ep-box es-borderSolidM brc-Lred es-BsubTround bgc-VPred es-radiusL” title=”ここにタイトル”>コンテンツ</div>

 

 

コンテンツ

 

参考コード

ep-box bgc-white es-borderSolidM es-radius es-BsubTround es-radiusL brc-DPred" title="ここにタイトル">コンテンツ
テキストコード
<div class=”ep-box bgc-white es-borderSolidM es-radius es-BsubTround es-radiusL brc-DPred” title=”ここにタイトル”>コンテンツ</div>
メニュー

ここにコンテンツ

ここにコンテンツ

ここにコンテンツ

※ここからはテキストコードのみにします。

HTMLを挿入かテキスト表示に切り替えてコピペで使えることを確認済みです。

 

テキストコード

<div class=”ep-box bgc-white es-borderSolidM es-radius”>
<div class=”ep-inbox es-Bwhole es-center bgc-black ftc-white es-Fbig”>メニュー</div>
ここにコンテンツ

ここにコンテンツ

ここにコンテンツ

</div>

 

ここにタイトル
ここにコンテンツ

ここにコンテンツ

 

テキストコード

<span class=”ep-label es-Lcorner bgc-black ftc-white”>ここにタイトル</span>
ここにコンテンツ

ここにコンテンツ

</div>

the thor オーソドックスなボックスをカスタマイズとやまとしカスタム

 

 

ここにタイトル

 

テキストコード

<div class=”ep-box icon-notification es-Bicon bgc-VPturquoise es-BpaperRight”>ここにタイトル</div>

 

コンテンツ

 

テキストコード

<div class=”ep-box bgc-VPsky es-BborderSolidM brc-Lsky”>コンテンツ</div>

 

コンテンツ

 

テキストコード
<div class=”ep-box bgc-VPlime es-borderDashedM brc-Llime”>コンテンツ</div>

 

コンテンツ

 

テキストコード

<div class=”ep-box bgc-VPpurple es-LborderSolidM”>コンテンツ</div>

 

コンテンツ(シャドウ系ライト)

 

テキストコード

<div class=”ep-box es-borderSolidM bgc-white brc-VPsky es-radius es-shadowL”>コンテンツ(シャドウ系ライト)</div>

 

コンテンツ(シャドウ系ノーマル)

 

テキストコード

<div class=”ep-box es-borderSolidM bgc-white brc-VPsky es-shadow”>コンテンツ(シャドウ系ノーマル)</div>

 

コンテンツ(シャドウ系ダーク)

 

テキストコード

<div class=”ep-box es-borderSolidM brc-VPsky bgc-white es-shadowD”>コンテンツ(シャドウ系ダーク)</div>

 

タイトルをここに入力

ここにコンテンツ

 

 

テキストコード

<div class=”ep-box es-BborderSolidM es-shadowD es-radius”>

<span class=”ep-label es-Lcorner bgc-Lsky bgc-black ftc-white”>タイトルをここに入力</span>

 

HTMLに挿入からコードを入れるとパーツデザインが反映されます。

 

ここにタイトル

ここにコンテンツ

ここにコンテンツ

 

テキストコード

<div class=”ep-box bgc-white es-borderSolidM brc-VPturquoise”>
<div class=”ep-inbox es-Bwhole bgc-VPgreen icon-list2 es-Bicon”>ここにタイトル</div>

 

メニュー

ここにコンテンツ

ここにコンテンツ

 

テキストコード

<div class=”ep-box bgc-white es-borderSolidM brc-VPpink”>
<div class=”ep-inbox es-Bwhole es-center es-bold es-Fbig bgc-VPmagenta”>メニュー</div>

 

口コミ

東京都:山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。


東京都:山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。

 

プリセットパーツの口コミボックスでボックスも作成出来ますので

中身を消して作成するのも簡単でしょう。

 

このエリアにレビュータイトルを記入します。
N.Sさん

評価: 3.5このエリアにレビュー本文を記入します。

 

同じくレビューボックスも中身を消して書き直すのも簡単で良いでしょう。

 

まとめ

 

このようにTHE THOR(ザ・トール)Wordpressテーマには自分でパーツを作成する機能が

標準で入っているので、他の方や他のテーマを使っている方に差を付けることが出来ると

思いますが、慣れないとパーツカスタムは簡単には出来ないと思うので参考にして

もらえたらと思います。

 

まだやまとしのパーツのカスタムも基本形を作成していないので、これから気に入った

ボックスやラベルやボタンを作成していきたいと思います。

また気が向いた時にでもデザインを更新しておきますので、また閲覧に来てもらえると

頑張って新しいデザインを作成します。

 

次はボタンを作成する予定です。

ボタンは作成するのは難しい気がしますが、なるべくセンスのあるボタン

を作成したいとは思いますが、どうなることやら…

 

THE THORのボックス機能も一時はどうなるかと思いましたが、

実際自分で使い方を覚えてボックスを作成してみると、意外と一般的なデザインが

作成できると思いました。

お気に入りのデザインを作成するには時間がかかるとは思いますが、

頑張って作成方法を覚えてボックスを作成すると愛着が湧くと思いますので、

頑張って作成しましょう。

使用中のWordPressテーマ「THE THOR」
4.5

SEO対策済み、サイト高速化表示対応、AMP・PWA対応で商品管理機能などの高機能な設定が標準装備で、絞り込み検索機能も便利です。テーマ専用のフォーラムもありますのでサポートも安心です。まずはデモサイトでテーマをチェックしてみましょう。

ボックスいっぱい
最新情報をチェックしよう!