ボックスいっぱい

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

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

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

 

関連記事

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

ラベルカスタマイズ

 

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

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

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

と思います。

 

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

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

 

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

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

 

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

 

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

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

 

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

 

 

 

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

 

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

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

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

 

関連記事

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

ラベルカスタマイズ

 

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

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

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

作成していきます。

 

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

 

コンテンツ

 

参考コード:ep-box bgc-VPsky es-BsubT es-borderSolidM brc-VPblue es-BsubTradi

 

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

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

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

 

コンテンツ

 

参考コード:ep-box bgc-VPorange es-borderSolidM brc-VPred es-BsubTradi

 

コンテンツ

 

参考コード:ep-box bgc-VPlime es-borderSolidM brc-Llime es-BsubTradi

 

背景はベリーペールトーンにボーダーはライトトーンなどと組み合わせです。

 

コンテンツ

 

参考コード:ep-box bgc-VPyellow es-borderSolidM brc-Lyellow es-BsubTradi

 

コンテンツ

 

参考コード:ep-box bgc-VPred es-borderSolidM brc-Lred es-round es-BsubTround

 

コンテンツ

 

参考コード:ep-box bgc-white es-borderSolidM brc-VPpink es-radius es-BsubTradi

 

コンテンツ

 

参考コード:ep-box es-borderSolidM bgc-white icon-clipboard es-Bicon

 

ここにタイトル

ここにコンテンツ

 

参考コード

<div class=”ep-box bgc-white es-borderSolidM brc-black”>

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

 

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

 

 

ここにタイトル

 

参考コード:ep-box icon-notification es-Bicon bgc-VPturquoise es-BpaperRight

 

コンテンツ

 

参考コード:ep-box bgc-VPsky es-BborderSolidM brc-Lsky

 

コンテンツ
参考コード:ep-box bgc-VPlime es-borderDashedM brc-Llime

 

コンテンツ

 

参考コード:ep-box bgc-VPpurple es-LborderSolidM

 

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

 

参考コード:ep-box es-borderSolidM bgc-white brc-VPsky es-radius es-shadowL

 

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

 

参考コード:ep-box es-borderSolidM bgc-white brc-VPsky es-shadow

 

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

 

参考コード:ep-box es-borderSolidM brc-VPsky bgc-white es-shadowD

 

タイトルをここに入力

ここにコンテンツ

 

 

参考コード

<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のボックス機能も一時はどうなるかと思いましたが、

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

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

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

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

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

 

 

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

THE THOR(ザ・トール)の最新記事4件