THE THOR(ザ・トール)ボタンの使い方♪カスタマイズ設定手順紹介

THE THOR(ザ・トール)の10個のボタン。

自分好みにクラシックエディタ画面でカスタマイズする方法を紹介します(^^♪

デフォルトのまま使用でもいいのですが、自分の好みのボタンにして使用したいですよね?

色々試してみたのですが、すべての組み合わせを変えていくことは出来ませんでした。

ボーダー(枠)を使用していないボタンには、ボーダー(枠)変更はできなかった。。。。( ̄▽ ̄;)

外観の設定を自分好みに変えてもいいのですが、どのボタン自分の好みなのかわかる為に一度カスタマイズしてみるといいかもと思い記事にしてみました( ̄▽ ̄;)

目次

THE THOR(ザ・トール)の10種類のボタンを紹介

それぞれがどんなボタンか表示させてみました(^^♪

2段表示の文字だとサークルアイコンボタンなんて太っちょさん(笑)

THE THOR(ザ・トール)ボタンのコード内容

THE THOR(ザ・トール)のボタンはデモサイトの設定のように、設定の組み合わせで出来上がってます。

ボタンの横幅 ボタンの背景
es-size bgc

 

ボタンの中の文字について
(文字サイズ特大はコードの後ろにLを追加して使用します)
ボタンの中の余白について
(それぞれのコードの後ろにS/M/Lを追加して使用します)
es-Fsmall 文字サイズ(小) es-Tpadding 上の余白(S,M,L)
es-Fbig 文字サイズ(大、特大) es-Bpadding 下の余白(S,M,L)
es-left 文字位置(右) es-Rpadding 左の余白(S,M,L)
es-center 文字位置(中央) es-Lpadding 右の余白(S,M,L)
es-right 文字位置(左)

すみません。すべてのコードは書き出しませんでした( ̄▽ ̄;)

オレンジ100%ボタンのコード構成

オレンジ100&ボタン

* テキストのコード *

<a class="ep-btn 
bgc-Vorange es-size100 ftc-white es-TpaddingS 
es-BpaddingS es-BTarrow es-bold">
オレンジ100%ボタン</a> 

実際にボタンのコードを解析していきましょう(^^♪

es-size100 ボタンの横幅/100% es-BTarrow 右端に「>」
ftc-white 文字色   /白色 es-bold 文字を太字
es-TpaddingS 上の余白  /小 bgc-Vorange 背景色/ オレンジ
es-BpaddingS 下の余白  /小

この設定でオレンジ100%ボタンは構成されています。

THE THOR(ザ・トール)で用意されている色

基本となるベースの色は12色、全部で91色の色から好きな色を選択することが出来ます。

ヴィヴィッドトーン(V) ブライトトーン(B) ディープトーン(DP) ライトトーン(L) ダルトーン(DL) ベリーペールトーン(VP) ダークグレイッシュトーン(DG) モノトーン
イエロー イエロー イエロー イエロー イエロー イエロー イエロー ホワイト
Vyellow Byellow DPyellow Lyellow DLyellow VPyellow DGyellow
オレンジ オレンジ オレンジ オレンジ オレンジ オレンジ オレンジ ベリーライトグレー
Vorange Borange DPorange Lorange DLorange VPorange DGorange VLgray
レッド レッド レッド レッド レッド レッド レッド ライトグレー
Vred Bred DPred Lred DLred VPred DGred Lgray
マゼンダ マゼンダ マゼンダ マゼンダ マゼンダ マゼンダ マゼンダ グレー
Vmagenta Bmagenta DPmagenta Lmagenta DLmagenta VPmagenta DGmagenta gray
ピンク ピンク ピンク ピンク ピンク ピンク ピンク ダークグレー
Vpink Bpink DPpink Lpink DLpink VPpink DGpink Dgray
パープル パープル パープル パープル パープル パープル パープル ベリーダークグレー
Vpurple Bpurple DPpurple Lpurple DLpurple VPpurple DGpurple VDgray
ネイビー ネイビー ネイビー ネイビー ネイビー ネイビー ネイビー ブラック
Vnavy Bnavy DPnavy Lnavy DLnavy VPnavy DGnavy black
ブルー ブルー ブルー ブルー ブルー ブルー ブルー
Vblue Bblue DPblue Lblue DLblue VPblue DGblue
スカイ スカイ スカイ スカイ スカイ スカイ スカイ
Vsky Bsky DPsky Lsky DLsky VPsky DGsky
ターコイズ ターコイズ ターコイズ ターコイズ ターコイズ ターコイズ ターコイズ
Vturquoise Bturquoise DPturquoise Lturquoise DLturquoise VPturquoise DGturquoise
グリーン グリーン グリーン グリーン グリーン グリーン グリーン
Vgreen Bgreen DPgreen Lgreen DLgreen VPgreen DGgreen
ライム ライム ライム ライム ライム ライム ライム
Vlime Blime DPlime Llime DLlime VPlime DGlime

THE THOR(ザ・トール)オレンジ100%ボタンをカスタマイズ

ここからはボタンを実際にカスタマイズしていく方法を紹介していきます。

THE THOR(ザ・トール)のボタンの設定を指定していくたびに、コードが追加されていきます。

THE THOR(ザ・トール)ボタン背景色を水色に変更してみる

カスタマイズしたいボタンを選択した状態で、カスタマイズのプルダウンの中の「■カラーセットを選択」→「背景色」→「ライトトーン」→「スカイ」の順にクリックしてください。(画像と違ってごめんなさい)

ライトトーン「スカイ」に変えたボタン

<a class="ep-btn bgc-Vorange es-size100 
ftc-white es-TpaddingS es-BpaddingS 
es-BTarrow es-bold bgc-Lsky">
ライトトーン「スカイ」のボタン</a>

「bgc-Vorange」と「bgc-Lsky」の2個の背景色の指定コードがあります。

背景は後ろのコードが優先されますので、削除しなくても大丈夫なようです。

が、私は2個指定が気持ちが悪いので、削除します( ̄▽ ̄;)

THE THOR(ザ・トール)オレンジ100%ボタン横幅25%にカスタマイズ

このボタンの横幅はデフォルトでは100%です。

ボタンをクリックした後、「スタイル」→「サイズ系」を順にクリックしてください。

横幅の選択画面で、25%を選択してください。

* テキストのコード *
<a class="ep-btn
 bgc-Vorange es-size100 ftc-white es-TpaddingS
 es-BpaddingS es-BTarrow es-bold es-size25">
オレンジ100%ボタン</a>

「es-size100」 と 「es-size25」 のサイズ指定のコードが2個が存在しています。

サイズ指定は前のコードが優先されてしまうようなので、「es-size100」を削除してください。

☆注意☆ 


このコードを2個とも削除すると、文字列の幅になります。

THE THOR(ザ・トール)オレンジ100%ボタン内側余白系カスタマイズ

上の余白、下の余白、右の余白、左の余白と1カ所づつ指定してカスタマイズしていきます。

サイズ指定も前のコードが優先されるようなので、変更前の余白のコードは削除してください。

違いを比べるのに元のボタンも表示させてみました。

ボタンのトップの余白を「中」に変更 「es-TpaddingM

オレンジ100%ボタン   オレンジ100%ボタン(元)

ボタンのボトムの余白を「中」に変更  「es-BpaddingM

オレンジ100%ボタン   オレンジ100%ボタン(元)

ボタンのレフトの余白を「中」に変更

このオレンジ100%ボタンにはデフォルトでレフトの余白の指定はありませんのでコードは省きました。

オレンジ100%ボタン   オレンジ100%ボタン(元)

ボタンのライトの余白を「中」に変更

このオレンジ100%ボタンにはデフォルトでライトの余白の指定はありませんのでコードは省きました。

オレンジ100%ボタン   オレンジ100%ボタン(元)

ボタンの文字サイズ(特大)にカスタマイズ(es-FbigL

オレンジ100%ボタン

ボタンの文字色をネイビーにカスタマイズ(ftc-Lblue)

ライトトーンのブルーに変更してみます。

文字色も前のコードが優先されるようなので、変更前のコードを削除してください。

「ftc-white 」と「ftc-Lblue」の2個が存在していますので、「ftc-white」を削除します。

オレンジ100%ボタン

* テキストのコード *

<a class="ep-btn 
bgc-Vorange es-size100 es-TpaddingS es-BpaddingS 
es-BTarrow es-bold es-FbigL ftc-Lblue">
オレンジ100%ボタン</a>

ボタンのボーダー色カスタマイズ

オレンジ100%ボタンにはボーダー(枠)がありません。

この設定が使えるのはボーダーが使用されている「ブルーボーダーボタン」や「ピンクアイコンボタン」になります。

ボタンに下線を入れてみる(es-BborderSolidM)

「■スタイルセット」→「ボタンパーツ」→「アイコンボーダー」

オレンジ100%ボタン

ボタンの「>」を消す(es-BTarrow)

コードから「es-BTarrow」を削除してください

THE THOR(ザ・トール)ボタンのカスタマイズ例

THE THOR(ザ・トール)オレンジ100%ボタンのカスタマイズ4例

 

オレンジ100%ボタンをカスタマイズ

 

  • ボタンの「>」を消しています。
  • 内側余白系: 上下(中)
  • 角丸系: 角丸10px

 

アレンジボタン1

背景色: ベリーペールトーンのピンク

文字色: ディープトーンのマゼンダ

ep-btn es-bold bgc-VPpink ftc-DPmagenta es-size25 es-TpaddingM es-BpaddingM es-radiusL

 

アレンジボタン2

背景色: ベリーペールトーンのピンク

文字色: ディープトーンのマゼンダ

ep-btn es-bold bgc-VPred ftc-DPmagenta es-size25 es-TpaddingM es-BpaddingM es-radiusL

 

アレンジボタン3

背景色: ベリーペールトーンのスカイ

文字色: ダルトーンのネイビー

ep-btn es-bold bgc-VPsky ftc-DLnavy es-size25 es-TpaddingM es-BpaddingM es-radiusL

 

アレンジボタン4

背景色: ベリーペールトーンのブルー

文字色: ダルトーンのブルー

ep-btn es-bold bgc-VPblue ftc-DLblue es-size25 es-TpaddingM es-BpaddingM es-radiusL

THE THOR(ザ・トール)グリーンシャドウ100%ボタンのカスタマイズ4例

 

グリーンシャドウ100%ボタン

ふちから中に向かって黒でマスクをかけてあります。

薄い背景色だとグレーになっていしまうので、ある程度の色の濃さは必要だと思います( ̄▽ ̄;)

  • ボタンの「>」を消しています。
  • 内側余白系: 上下(中)
  • 角丸系: ラウンド
  • ボタンの横幅のサイズ指定はしていません。

 

 アレンジボタン/ラウンド1 

背景色: ライトトーンのイエロー

文字色: ダルトーンのレッド

ep-btn es-shadowIn es-bold bgc-Lyellow ftc-DLred es-round es-TpaddingM es-BpaddingM

 

 アレンジボタン/ラウンド2 

背景色: ライトトーンのスカイ

文字色: ダルトーンのブルー

ep-btn es-shadowIn es-bold es-radius bgc-Lsky es-round es-TpaddingM es-BpaddingM ftc-DLblue

 

丸 1

背景色: ライトトーンのイエロー

文字色: ダルトーンのレッド

ep-btn es-shadowIn es-bold es-radius bgc-Lyellow ftc-DLred es-round es-TpaddingM es-BpaddingM

 

丸 2

背景色: ライトトーンのスカイ

文字色: ダルトーンのブルー

ep-btn es-shadowIn es-bold es-radius bgc-Lsky es-round es-TpaddingM es-BpaddingM ftc-DLblue
☆注意☆ 

サイズ指定のコードを削除して、文字数を少なくすると丸にもなります。

THE THOR(ザ・トール)ボタンのアレンジが決まったら登録設定しよう♪

上記の方法で、自分の使いたいアレンジが決まったら、登録しましょう(^^♪

「外観」→「カスタマイズ」→「パーツスタイル設定」→「ボタン設定」の順にクリックしていってください。

THE THOR(ザ・トール)登録できるアレンジボタンは10個

デフォルトで準備されているボタン10個すべてアレンジして登録しなおせます。

アレンジしたことがわかるように、水色ラインの場所に自分がわかる名前を付けましょう。

黄色ラインのは所にはコードをコピペするか、自分でアレンジしたコードに変更します。

コードをコピペできるようにこれから増やしていきますので、少々お待ちください( ̄▽ ̄;)

THE THOR(ザ・トール)ボタンのカスタマイズの設定手順を紹介♪ まとめ

ボタンのカスタマイズの組み合わせをカスタイズしていくと、無数の組み合わせがあってどこまで記載していこうか迷いました( ̄▽ ̄;)

今日はここまでにしておきます。

この記事は囲み枠と同じで、少しずつ追記していきます。

ランキングに参加しているのでバナーをクリックしていただけると嬉しいです♪

人気ブログランキング

私が無料で登録している2つのアフェリエイトの会社です。

どちらもメリットがあるので、アフェリエイトに興味があるなら登録をお勧めします。

私が個人でAmazonアソシエイトに応募して落ちましたが、

「もしもアフェリエイト」を通して申請したら合格しました。

もしもから申請をお勧めします♪

A8.netは広告主数・登録サイト数共に日本最大級のアフィリエイトサービスプロバイダーです。

ここもおすすめ♪アフェリエイトの会社によって、扱っている商品は違ったり、又、同じ商品でも成約金額が違う場合があるので複数の登録をお勧めします(^^)/

/ブログを装飾/そらのまなびぶろぐ/初心者向けTHE THOR初期設定/便利なサイト&ツール/

 

最新情報をチェックしよう!
>

そら

プログラマーとして働いていたが結婚後を機に田舎に戻り、独学でHTML・Perlを勉強し自宅でWEBの仕事をはじめるも、アレルギー児の子育てで断念。 子供の手が離れたのを機にWorldpressの勉強をしながらブログをはじめました。

 そらのまなびぶろぐ について 


そらのまなびぶろぐでは、wordpressの有料テーマ【THE THOR(ザ・トール)】を使用して収益化ブログの作り方を初心者向けに紹介しています。 エディタの使い方、アドセンス申請に必要なページの書き方&作り方、ブログの装飾の方法までを紹介しています。