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

the thorのエディタ機能オリジナルラベルを作成していく

ラベルカスタマイズ

有料ワードプレステーマ the thorのエディタ機能のオリジナルパーツ作成機能

の使い方が大体わかって来ましたので、紹介して行こうと思います。

既に他のサイトでも使い方などが紹介されていますが、やはり自分で作成したものを

なるべく使いたいですし、機能も完全に使えるように覚えておきたいので、

記事にしながら覚えて紹介していきます。

 

最初にこのテーマを導入された方などはthorのテーマを覚えるだけでも

精一杯でしょうし、その方たちでも簡単に使えるようにカスタムコードも

のせておこうと思います。

 

何より自分がまず覚えることが大事ですし、初心者の方には簡単に使えるように

紹介して行こうと思います。

まずはオリジナルラベルの作成の仕方から紹介します。

 

the thorのオリジナルラベル作成

 

the thor(ザ・トール)のオリジナルパーツの作成方法はわかりましたが、

やはりネックとなるのがカラーの組み合わせやデザインでパーツのセンスが

問われるところでしょう。

そこでまず、実際のカラーを全部公開して、どのカラーがどんな風に表示されるのか

確認しておきたいので、全カラーをのせたいと思います。

 

ラベルのデフォルトパーツを使い紹介したいと思います。

スタイル
デフォルトパーツ→ラベルと選択

 

 

デフォルトパーツ

 

まずこれが基本のパーツになりますので、これを作成しましょう。

カラーの背景色でだけ掲載しますのでそれを参考にパーツを作成しましょう。

文字色は黒か白で見やすいのを選択します。

 

コードは【外観】→【カスタマイズ】→【パーツスタイル設定】→【ラベル設定】

でスタイルに入れると使えると思います。

あまりコードが長くなると使えないかもです。

 

スタイル
カラーセット→背景色と選択
カラーセット (種類)
背景色→任意のカラーを選択

 

カラーセット→種類(共通)
カラーセット→右種類
共通色カラー
基本のカラーの種類

 


 

ビビッドトーン(ヴィヴィッドトーン?)

 

ヴィヴィッドトーン

参考上記コード

bgc-Vyellow ep-label es-round es-size25 brc-Vyellow es-shadowD es-TshadowD es-center es-grada1 es-solidThickL bgc-Vlime ftc-white brc-DLorange

もしかしたらビビッドトーンかも知れません

色が少し濃いですね。

イエロー

オレンジ

レッド

マゼンダ

ピンク

パープル

ネイビー

ブルー

スカイ

ターコイズ

グリーン

ライム


 

ブライトトーン

 

ブライトトーン

参考上記コード

ep-label es-grid es-radiusL ftc-black es-shadowL es-TshadowL es-center es-size25 es-bold

色が少し薄めですね。

イエロー

オレンジ

レッド

マゼンダ

ピンク

パープル

ネイビー

ブルー

スカイ

ターコイズ

グリーン

ライム


ディープトーン

 

ディープトーン

ボックス内にラベルを入れる事が出来ます。「コーナータイトル(ボックス内)を選択」

ボックスの中にラベルを作成するとこのような画像になります。

ボックスを作成後→スペースを確保した後→ラベルを作成「コーナータイトル(ボックス内)」

イエロー

オレンジ

レッド

マゼンダ

ピンク

パープル

ネイビー

ブルー

スカイ

ターコイズ

グリーン

ライム


ライトトーン

 

ライトトーン

かなり薄めなカラーでこの辺りのカラーが使えそうな気がします。

参考上記コード

ep-label bgc-Bsky es-round es-grada2 es-size40 es-center es-shadowInL es-shadowL es-italic es-TshadowL ftc-white

イエロー

オレンジ

レッド

マゼンダ

ピンク

パープル

ネイビー

ブルー

スカイ

ターコイズ

グリーン

ライム


ダルトーン

 

ダルトーン

参考上記コード

ep-label bgc-Lorange es-grada1 es-radius es-under es-shadowD es-shadowInD es-TshadowD ftc-VDgray es-size25 es-center es-bold

イエロー

オレンジ

レッド

マゼンダ

ピンク

パープル

ネイビー

ブルー

スカイ

ターコイズ

グリーン

ライム


ベリーペールトーン

 

ベリーペールトーン

かなり薄めの色ですね。背景に使えるかも…

参考上記コード

ep-label bgc-VPlime es-round es-size10 es-center es-Fsmall es-shadow es-shadowIn ftc-Bred es-bold

イエロー

オレンジ

レッド

マゼンダ

ピンク

パープル

ネイビー

ブルー

スカイ

ターコイズ

グリーン

ライム

こんな感じで背景に使えるかも?

 

 

 

 


ダークグレイッシュトーン

 

ダークグレイッシュトーン

参考上記コード

ep-label ftc-white es-radiusL es-grada2 bgc-DGyellow es-TshadowL es-shadowL es-shadowInL es-strike es-size25 es-center

イエロー

オレンジ

レッド

マゼンダ

ピンク

パープル

ネイビー

ブルー

スカイ

ターコイズ

グリーン

ライム


モノトーン

 

モノトーンのカラー
モノトーンのカラー

 

モノトーンだけカラーが少し違います。

モノトーン

上記参考コード

ep-label bgc-Lgray es-grada1 es-round es-shadowL es-size10 es-center ftc-white

ホワイト

ベリーライトグレー

ライトグレー

グレー

ダークグレー

ベリーダークグレ

ブラック


 

スタイルセット(ラベル)

 

スタイル
スタイル
スタイルセット→種類

 

これらの設定項目を使い適当に作成してみます。

気に入ったパーツがあれば使ってください。

大きさなどは自分で調整してください。

 

参考用見本

 

ep-label es-grada1 bgc-VPgreen es-round es-shadowD

 

参考用見本2

 

ep-label bgc-VPsky es-round es-grada2 es-shadowInD

 

参考用見本3

 

ep-label bgc-VPyellow es-size25 es-radiusL es-center es-borderSolidM

 

参考用見本4

 

ep-label bgc-Llime es-round es-grada1 es-shadow es-shadowInL

 

参考用見本5

 

ep-label es-borderDashedM bgc-Lpink ftc-white es-round

 

参考用見本6

 

ep-label es-borderSolid bgc-Borange es-shadowL es-radiusL es-grada1 brc-white ftc-white

 

参考用見本7

 

ep-label bgc-VPgreen es-radius es-bold es-BborderSolidM

 

参考用見本8

 

ep-label es-LborderSolidM brc-Bred bgc-black ftc-white es-LroundR

 

参考用見本9

 

ep-label es-LborderDashedM brc-Bsky brc-VDgray es-LroundR es-shadowD

 

参考用見本10

 

ep-label bgc-DGnavy es-borderSolidM ftc-white es-round brc-Vred

 

こんな感じでパーツを作成してみました。

個人的な感想では、やはり自分で覚えて作成した方が良いでしょうね。

組み合わせにより色んなラベルが作成出来るので、個性が出せて良いですが、

最初でセンスのいいデザインがたくさん入っていた方が初心者や超初心者には

助かるでしょうね。

最初でこのテーマを購入された方はかなり苦戦すると思いますので好きなパーツが

あれば使ってくださいね。

なにかセンス良さそうなデザインが作成出来たらまた更新して、パーツを増やしておきます。

 

まとめ

 

使いこなせればセンスのいいパーツを無限に作成出来ますので、

ぜひ使い方を覚えてセンスの良いパーツをご自身で作成しましょう。

 

他のサイトや書籍などを参考にしながら作成した方がセンスの良いラベルは作成

出来ると思いますので、パーツのカスタマイズに頑張ってください。

 

当サイトの適当に作成したパーツで良ければ自由にお使いください。

今後、ボックスやボタンも紹介していく予定なので参考にしたい方が

いましたら、閲覧に来てもらえれば他のサイトを参考にしながら頑張って作成します(笑)

結構、自分で考えてパーツをカスタムするのも楽しいですから、初心者には難しいとは

思いますが、頑張って覚えましょう。

 

次はボックスを作成する予定です。

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

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

ラベルカスタマイズ
最新情報をチェックしよう!
スポンサーリンク