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

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

THE THOR(ザ・トール)の「スタイル」の中にある10個のボタン。

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

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

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

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

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

目次

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

THE THOR(ザ・トール)のボタンは10種類あります

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

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

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

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

ボタンの設定の内容

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

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

オレンジ100&ボタンを例に紹介します

* テキストのコード *

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

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

オレンジ100%ボタン解析内容

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

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

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

THE THOR(ザ・トール)のボタンのカラー表1
THE THOR(ザ・トール)のボタンのカラー表2
THE THOR(ザ・トール)のボタンのカラー表3
THE THOR(ザ・トール)のボタンのカラー表4

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

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

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

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」を削除します。

* 修正後のテキストのコード *

<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(ザ・トール)ボタンのアレンジが決まったら設定を登録することもできます

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

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

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

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

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

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

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

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

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

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

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

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

 ランキングサイトに参加しているのでクリックしていただけると嬉しいです(^^♪ 人気ブログランキング

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

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

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

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

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

物販ならアソシエイトに応募と同時に(保険として)もしもからも申請することをお勧めします♪

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

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

A8.netにとうろくして、無料の初心者用のアフィリエイトブログ作成の無料セミナーの参加をオススメします!
THE THOR(ザ・トール)のボタンの使い方とカスタマイズの設定手順を紹介
最新情報をチェックしよう!
>

そら

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

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


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

サイトに広告を掲載してお小遣いが稼げる!【A8.net】
無料登録はこちら
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
無料登録はこちら