The・THOR

The・THORのボックス・ラベル・ボタンのパーツ一覧!【WordPress】

更新日:

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

 

今回は、それらのアイテムを作るためのパーツの一覧を紹介します。

 

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




 

The・THORのボックス・ラベル・ボタンの作り方

 

アイテム作りは、難しいと感じるのは最初だけ。仕組みを覚えてしまえば意外とカンタンです。

おじさん
わたしも最初は意味が分かりませんでした
恥ずかしながら、わたしもです
うさぎ

 

作り方

 

The・THORに装備されているボックス・ラベル・ボタンのカスタマイズ方法は、 コチラの記事に詳しく書きましたので参考にしてみてください。

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

WordPressのテーマ「The・THOR」には、オリジナルのボックスやボタンやラベルを作る機能が装備されています。   最初は難しいかも知れませんが、2、3個作ってみると簡単だと思うよう ...

続きを見る

 

色の変更

 

色の変更をするときは、The・THORだけのカラーコードを使います。

 

The・THORのカラー一覧はコチラの記事に掲載しています。

The・THORのボックスに使える全91色のカラー一覧!

  WordPressの有料テーマ「The・THOR」にはオリジナルのボックス、ラベル、ボタンを作れる機能が装備されています。   この機能では13系統色×7トーンで91色を指定で ...

続きを見る

 

サンプル集
コピペで作れるボックスのサンプル!

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

続きを見る

 

 

サイズのコード一覧

 

「サイズ」はボックスやボタンの横幅を決定します。メインカラムの横幅いっぱいが100%です。

es-size10
es-size25
es-size40
es-size50
es-size60
es-size75
es-size90
es-size100

 

内側余白のコード一覧

 

内側の余白は「padding」と言います。

 

ボタンなどの枠とその中の文字との余白を指定できます。

 

es--padding0
es-TpaddingSS
es-TpaddingS
es-TpaddingM
es-TpaddingL
es-RpaddingSS
es-BpaddingS
es-BpaddingM
es-BpaddingL
es-RpaddingSS
  es-RpaddingS
es-RpaddingM
es-RpaddingL
es-LpaddingSS
es-LpaddingS
es-LpaddingM
es-LpaddingL

 




 

外側余白のコード一覧

 

外側の余白は「margin」と言います。

 

ボタンなどの枠と外の文字との余白を指定できます。

 

 es-margin0
es-TmarginSS
es-TmarginS
es-TmarginM
es-TmarginL
es-BmarginSS
es-BmarginS
es-BmarginM
es-BmarginL
es-RmarginSS
es-RmarginS
es-RmarginM
es-RmarginL
es-LmarginSS
es-LmarginS
es-LmarginM
es-LmarginL

 

ボーダーのコード一覧

 

ボーダーはボックス等の外枠に使うほか、下の画像のように装飾にも使えます。

es-borderSolidS
es-borderSolidM
es-borderDashedS
es-borderDashedM
es-BborderSolidS
es-BborderSolidM
es-BborderDashedS
es-BborderDashedM
es-LborderSolidS
es-LborderSolidM
es-LborderDashedS
es-LborderDashedM
※2019年1月現在、点線は表示できませんでした。

 

文字装飾のコード一覧

 

パーツ内の文字は、下のコードで装飾します。

小さい文字es-Fsmall
大きい文字es-Fbig
極大文字es-FbigL
太字es-bold
es-italic
打ち消しes-strike
アンダーラインes-under
左寄せes-left
中央寄せes-center
右寄せes-right

 

シャドウのコード一覧

 

パーツに影をつけることが出来ます。

 

最近の流行はフラットデザインなので、ボックス外のシャドウを使用することが多そうです。

es-shadowL
es-shadow
es-shadowD
es-shadowInL
es-shadowIn
es-shadowInD
es-TshadowL
es-Tshadow
es-TshadowD

 

おじさん
シャドウはこの画像では分かりにくいと思うので、実際に表示して確認してみてください

 

角丸のコード一覧

 

ボタンなどの角を丸めることができます。

 

ラベルのみ、「ラベルパーツ専用コード」で片側だけ丸めることも出来ます。

es-radius
es-radiusL
es-round

 

背景のコード一覧

 

通常は1色の塗りつぶしですが、グラデーションや方眼紙が用意されています。

es-grada1
es-grada2
es-grid

 

 

ラベルパーツ専用コード一覧

 

ラベル専用のパーツです。「コーナータイトル」は、ボックスと組み合わせて使います。

 

es-Lcorner
es-LroundL
es-RroundL
es-Licon
es-LiconBorder
es-LiconBox
es-LiconCircle

 

アイコンの帯などの色は、「カスタマイザー(外観→カスタマイズ)」→「パーツスタイル設定」→「 その他エディタ用パーツ」→「アイコン系パーツのアイコンカラー」で変更できます。

 

ボタンパーツ専用コード一覧

 

es-BT3d
es-BTshadow
es-BTrich
es-BTarrow
es-BTicon
es-BTiconBorder
es-BTiconBox
es-BTiconCircle

 

ラベル専用のパーツと同様に、アイコン周りのカラーはカスタマイザーの「 その他エディタ用パーツ」で変更できます。

 

おじさん
ボタンの効果も実際に表示して確認してみてください
確かに違いが分からないのがありますね
うさぎ

 

ボックスパーツ専用コード一覧

 

es-Bwhole
es-Bbrackets
es-BpaperLeft
es-BpaperRight
es-BmarkHatena
es-BmarkExcl
es-BmarkQ
es-BmarkA
es-BsubT
es-BsubTradi
es-BsubTround
es-Bicon
es-BiconBg
es-BiconObi
es-BiconCorner
es-BiconCircle

 

ラベル専用のパーツと同様に、QとAの文字色アイコン周りのカラーはカスタマイザーの「 その他エディタ用パーツ」で変更できます。

 

Q&Aボックスは、そのままでは「A」の装飾がなく「Q」とのバランスが悪いです

コードを下のようにすると、Q&Aのバランスが良くなります。

<div class="ep-box es-BmarkQ es-BmarkA bgc-white">

ウラ技!
うさぎ




サンプル集
コピペで作れるボックスのサンプル!

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

続きを見る

 

まとめ

 

今回は、The・THORで使えるパーツの一覧を紹介しました。

 

最初は、思い通りのものが出来ないかも知れませんが、すぐに慣れると思います。

 

頑張ってオリジナルのブログを作っていきましょう!

 

おじさん
ご質問もお待ちしております

 

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

 

-The・THOR

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