The・THOR

The・THORのボックスやボタンやラベルの作り方!サンプルあり

更新日:

WordPressのテーマ「The・THOR」には、オリジナルのボックスやボタンやラベルを作る機能が装備されています。

 

最初は難しいかも知れませんが、2、3個作ってみると簡単だと思うようになるはずです。

 

他のサイトには無いオリジナルのアイテムを作ってみましょう!

 




 

最初はラベル・ボタン・ボックスの作り変えから

 

ゼロから作るのは難しいので、最初は作り変えの方法を紹介します。

 

お気に入りのものは The・THORのカスタマイザーの「ラベル・ボタン・ボックス設定」 AddQuicktagなどに登録し、すぐに使えるようにできます。

 

元になるボタンを表示

 

まずオリジナルの元になるボタンを表示して、それを作り変えていきます。。

 

投稿ページの「スタイル」→「ボタン」→「グリーン立体アイコンボタン」で下のボタンを表示します。

 

上のように、ボタンに「アマゾン」などの文字を入力しないとボタンは消えてしまいます

 

これをテキストモードで見ると、下のようになっています。

<a class="ep-btn icon-amazon es-BTiconBorder es-BT3d es-radius bgc-DLlime ftc-white es-TpaddingS es-BpaddingS es-shadow">アマゾン</a>

 

こういう、いかにもコンピュータっていうのは拒否反応が…
うさぎ

 

全体を見るとややこしいけど、それぞれの意味が分かれば意外と簡単です。

 

これらは次のような意味があります。

<a class="ep-btnボタンを作ると宣言
icon-amazonamazonのアイコン
es-BTiconBorderアイコンの後ろのライン
es-BT3dボタンを立体にする
es-radius角を丸くする
bgc-DLlime背景はダルライムという色
ftc-white文字は白
es-TpaddingS文字の上の余白
es-BpaddingS文字の下の余白
es-shadowボタンに影を付ける
">アマゾン</a>ボタンのコードの終わりを宣言

 

このボタンを

「口コミサイトへの、もっと大きなオレンジ色の丸っこいフラットなボタン」にしたい!
うさぎ

と思ったら、それぞれのパーツを一覧から探して下のように変えれば良いのです。

 

赤字が変更箇所です。

<a class="ep-btnボタンを作ると宣言
icon-bubbles口コミのアイコン
es-BTiconBorderアイコンの後ろのライン
es-radiusL角をもっと丸くする
es-FbigL文字を大きく
bgc-Vorange背景はビビットオレンジに
ftc-white文字は白に
es-TpaddingM文字の上の余白を大きく
es-BpaddingM文字の下の余白を大きく
es-shadowDもっとくっきり影を付ける
">口コミ</a>ボタンのコードの終わりを宣言

 

メモ

アイコンは投稿ページの「アイコンオプション」から探します。

 

これを元通りに並べなおすと、下のようになります。

<a class="ep-btn icon-bubbles es-BTiconBorder es-radiusL es-FbigL bgc-Vorange ftc-white es-TpaddingM es-BpaddingM es-shadowD">口コミ</a>

 

実際には下のように表示されます。

 

おじさん
線が弱く感じるから太字にしたほうが良さそう

と、思ったらパーツ一覧から探して、太字のコード「es-bold」をどこかに書き足せばOK。

 

<a class=”ep-btn icon-bubbles es-bold es-BTiconBorder es-radiusL es-FbigL bgc-Vorange ftc-white es-TpaddingM es-BpaddingM es-shadowD”>口コミ</a>

 

こんな感じで、簡単にオリジナルのボタンが無限に作れます。

簡単すぎる!
うさぎ

 

ビジュアルモードの入力方法

 

上のやり方は、テキストモードを使ったものでした。

 

ビジュアルモードでも「スタイル」から、「スタイルセット」や「カラーセット」で編集できます。

 

ただ、やっていただくと分かるのですが、ビジュアルモードでの編集は選択項目が多すぎて時間がかかります。なので、テキストモードでの編集をオススメします。

おじさん
テキストモードはCSSの勉強にもなります

 

ゼロからラベル・ボタン・ボックスを作る

 

作り変えではなく、ゼロから作るときは「スタイル」→「デフォルトパーツ」から何もないベースの状態を呼び出します。

 

それぞれ、ここにトッピングの部分に色や大きさのコードを入れればOKです。(ここにトッピングはわたしが勝手に書いたもので、実際には表示されません)

 

ラベル

<span class="ep-label  ここにトッピング ">テキスト</span>

 

ボタン

<a class="ep-btn ここにトッピング ">テキスト</a>

 

ボックス

<div class="ep-box ここにトッピング ">テキスト</div>

 

 

特殊なボックス

 

ボックスには特殊なものがあります。

 

サブタイトル付きのボックス

 

スタイル」→「ボックス」→「サブタイトルボーダーボックス」でタイトル付きのボックスを表示できます。

 

 

このボックスのサブタイトルは、ボックスの中で一度クリックした後、メニューの「サブタイトル編集」で入力します。

 

こんな感じに表示されます。

 

さらにサブタイトルの枠の色は、「カスタマイザー」→「パーツスタイル設定」→「 その他エディタ用パーツ設定」で変更できます。

 

ボックス内ボックス

 

文字通り、ボックスの中にボックスを入れる機能です。

 

下のように外側のボックスと、内側のボックスで文字の装飾を変える時などに使います。


おじさん
こういうのはアイデア次第で素晴らしいのができそうですね

 




 

うまく表示されないときは

 

コードを入力したのにきちんと表示されないときは以下の原因が考えられます。

 

半角になっていない

 

コードは全て半角入力してください。

 

気づきにくいのは、

  • <>不等号
  • スペース(空白)

この2つです。

 

思うように表示されないときは確認してみてください。

 

同じパーツが複数入っている

 

たとえば背景色にbgc-VPmagentaとbgc-Blimeのように、同じ効果を持つコードを2つ以上入れてしまうと表示がおかしくなります。

 

仕様上の問題

 

The・THORのバグ(プログラム上の不具合)により、組み合わせ方によっては一部の機能がうまく表示されない場合があります。

 

 

サンプル

 

わたしが作ったサンプルをいくつか掲載しておきます。

 

全てプラグインやCSS無しでThe・THORの機能だけで作成しました。

おじさん
この辺でアイデアが無くなりました
はやっ
うさぎ




 

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

これまで、WordPressの有料テーマ「The・THOR」でオリジナルの ボックスの作り方を紹介してきました。   とは言え、なかなか最初は難しいと思うので、今回はサンプルのボックスをご紹 ...

続きを見る

 

まとめ

 

今回紹介したのは、他のテーマには無いThe・THORオリジナルの機能です。

 

せっかくの機能なのにマニュアルで詳しく解説されていません。そのため使っているサイトをほとんど見たことがありません

 

ぜひ活用して、オリジナルのサイト作成に活かしてください!

 

ブログはテーマでも速くなります

 

 

-The・THOR

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