THE THOR（ザ・トール）の「スタイル」の中にある１０個のボタン。
このボタンを自分好みにクラシックエディタ画面でカスタマイズする方法を紹介します(^^♪
デフォルトのまま使用でもいいのですが、自分の好みのボタンにして使用したいですよね？
色々試してみたのですが、すべての組み合わせを変えていくことは出来ませんでした。
ボーダー（枠）を使用していないボタンには、ボーダー（枠）変更はできなかった。。。。(￣▽￣;)
外観の設定を自分好みに変えてもいいのですが、どのボタン自分の好みなのかわかる為に一度カスタマイズしてみるといいかもと思い記事にしてみました(￣▽￣;)
- 1 THE THOR(ザ・トール)の10種類のボタンを紹介
- 2 THE THOR(ザ・トール)ボタンのコード内容
- 3 THE THOR(ザ・トール)で用意されているボタンの色
- 4 THE THOR(ザ・トール)オレンジ100％ボタン色をカスタマイズ
- 4.1 THE THOR(ザ・トール)ボタン背景色を水色に変更してみる
- 4.2 THE THOR(ザ・トール)オレンジ100％色ボタン横幅25％にカスタマイズ
- 4.3 THE THOR(ザ・トール)オレンジ100％色ボタン内側余白系カスタマイズ
- 4.4 ボタンのトップの余白を「中」に変更 「es-TpaddingM」
- 4.5 ボタンのボトムの余白を「中」に変更 「es-BpaddingM」
- 4.6 ボタンのレフトの余白を「中」に変更
- 4.7 ボタンのライトの余白を「中」に変更
- 4.8 ボタンの文字サイズ（特大）にカスタマイズ（es-FbigL ）
- 4.9 ボタンの文字色をネイビーにカスタマイズ（ftc-Lblue）
- 4.10 ボタンのボーダー色カスタマイズ
- 4.11 ボタンに下線を入れてみる（es-BborderSolidM）
- 4.12 ボタンの「>」を消す（es-BTarrow)
- 5 THE THOR（ザ・トール）ボタンのカスタマイズ例
- 6 THE THOR（ザ・トール）ボタンのアレンジが決まったら登録設定しよう♪
- 7 THE THOR（ザ・トール）登録できるアレンジボタンは１０個
- 8 THE THOR（ザ・トール）ボタンのカスタマイズの設定手順を紹介♪ まとめ
THE THOR(ザ・トール)の10種類のボタンを紹介
それぞれがどんなボタンか表示させてみました(^^♪
＜ PR ＞
THE THOR(ザ・トール)ボタンのコード内容
THE THOR（ザ・トール）のボタンはデモサイトの設定のように、設定の組み合わせで出来上がってます。
すべてのコードは書き出しませんでした(￣▽￣;)
オレンジ100％ボタンのコード構成
＊ テキストのコード ＊
実際にボタンのコードを解析していきましょう(^^♪
この設定でオレンジ100％ボタンは構成されています。
THE THOR(ザ・トール)で用意されているボタンの色
基本となるベースの色は12色、全部で9１色の色から好きな色を選択することが出来ます。
＜ PR ＞
THE THOR(ザ・トール)オレンジ100％ボタン色をカスタマイズ
ここからはボタンを実際にカスタマイズしていく方法を紹介していきます。
THE THOR（ザ・トール）のボタンの設定を指定していくたびに、コードが追加されていきます。
THE THOR(ザ・トール)ボタン背景色を水色に変更してみる
「bgc-Vorange」と「bgc-Lsky」の２個の背景色の指定コードがあります。
背景は後ろのコードが優先されますので、削除しなくても大丈夫なようです。
が、私は２個指定が気持ちが悪いので、削除します(￣▽￣;)
THE THOR(ザ・トール)オレンジ100％色ボタン横幅25％にカスタマイズ
このボタンの横幅はデフォルトでは100％です。
横幅の選択画面で、25％を選択してください。
「es-size100」 と 「es-size25」 のサイズ指定のコードが２個が存在しています。
サイズ指定は前のコードが優先されてしまうようなので、「es-size100」を削除してください。
THE THOR(ザ・トール)オレンジ100％色ボタン内側余白系カスタマイズ
上の余白、下の余白、右の余白、左の余白と1カ所づつ指定してカスタマイズしていきます。
サイズ指定も前のコードが優先されるようなので、変更前の余白のコードは削除してください。
違いを比べるのに元のボタンも表示させてみました。
ボタンのトップの余白を「中」に変更 「es-TpaddingM」
ボタンのボトムの余白を「中」に変更 「es-BpaddingM」
ボタンのレフトの余白を「中」に変更
このオレンジ100％ボタンにはデフォルトでレフトの余白の指定はありませんのでコードは省きました。
ボタンのライトの余白を「中」に変更
このオレンジ100％ボタンにはデフォルトでライトの余白の指定はありませんのでコードは省きました。
ボタンの文字サイズ（特大）にカスタマイズ（es-FbigL ）
ボタンの文字色をネイビーにカスタマイズ（ftc-Lblue）
ライトトーンのブルーに変更してみます。
文字色も前のコードが優先されるようなので、変更前のコードを削除してください。
「ftc-white 」と「ftc-Lblue」の２個が存在していますので、「ftc-white」を削除します。
＊ 修正後のテキストのコード ＊
ボタンのボーダー色カスタマイズ
オレンジ１００%ボタンにはボーダー(枠）がありません。
この設定が使えるのはボーダーが使用されている「ブルーボーダーボタン」や「ピンクアイコンボタン」になります。
ボタンに下線を入れてみる（es-BborderSolidM）
「■スタイルセット」→「ボタンパーツ」→「アイコンボーダー」
ボタンの「>」を消す（es-BTarrow)
コードから「es-BTarrow」を削除してください
THE THOR（ザ・トール）ボタンのカスタマイズ例
THE THOR（ザ・トール）オレンジ100％色ボタンのカスタマイズ4例
背景色： ベリーペールトーンのピンク
文字色： ディープトーンのマゼンダ
背景色： ベリーペールトーンのピンク
文字色： ディープトーンのマゼンダ
背景色： ベリーペールトーンのスカイ
文字色： ダルトーンのネイビー
背景色： ベリーペールトーンのブルー
文字色： ダルトーンのブルー
THE THOR（ザ・トール）グリーンシャドウ100％色ボタンのカスタマイズ4例
ふちから中に向かって黒でマスクをかけてあります。
薄い背景色だとグレーになっていしまうので、ある程度の色の濃さは必要だと思います(￣▽￣;)
背景色： ライトトーンのイエロー
文字色： ダルトーンのレッド
背景色： ライトトーンのスカイ
文字色： ダルトーンのブルー
背景色： ライトトーンのイエロー
文字色： ダルトーンのレッド
背景色： ライトトーンのスカイ
文字色： ダルトーンのブルー
THE THOR（ザ・トール）ボタンのアレンジが決まったら登録設定しよう♪
上記の方法で、自分の使いたいアレンジが決まったら、登録しましょう(^^♪
「外観」→「カスタマイズ」→「パーツスタイル設定」→「ボタン設定」の順にクリックしていってください。
THE THOR（ザ・トール）登録できるアレンジボタンは１０個
デフォルトで準備されているボタン10個すべてアレンジして登録しなおせます。
アレンジしたことがわかるように、水色ラインの場所に自分がわかる名前を付けましょう。
黄色ラインのは所にはコードをコピペするか、自分でアレンジしたコードに変更します。
コードをコピペできるようにこれから増やしていきますので、少々お待ちください(￣▽￣;)
THE THOR（ザ・トール）ボタンのカスタマイズの設定手順を紹介♪ まとめ
ボタンのカスタマイズの組み合わせをカスタイズしていくと、無数の組み合わせがあってどこまで記載していこうか迷いました(￣▽￣;)
今日はここまでにしておきます。
この記事は囲み枠と同じで、少しずつ追記していきます。
ランキングに参加しているのでバナーをクリックしていただけると嬉しいです♪
私が無料で登録している2つのアフェリエイトの会社です。
どちらもメリットがあるので、アフェリエイトに興味があるなら登録をお勧めします。
私が個人でAmazonアソシエイトに応募して落ちましたが、
「もしもアフェリエイト」を通して申請したら合格しました。
もしもから申請をお勧めします♪
A8.netは広告主数・登録サイト数共に日本最大級のアフィリエイトサービスプロバイダーです。
ここもおすすめ♪アフェリエイトの会社によって、扱っている商品は違ったり、又、同じ商品でも成約金額が違う場合があるので複数の登録をお勧めします(^^)/
