ボタンいっぱい

THE THOR パーツカスタム ボタン編

ワードプレステーマ THE THORのパーツカスタム編の

ボタンのカスタム編を紹介していきます。

半分以上は自分で覚える為に作成していますが、初心者の方にも

参考になればいいかと思い記事にしています。

 

ボタンも他サイトでもWordpressのSNSボタンやボタンのカスタムなど

盛んにカスタマイズされているので、人目を惹くようなセンスの良いデザインが

作成出来れば、クリック率上昇に貢献できると思います。

THE THORではボタンが光る演出もありますので、クリックされやすいように

工夫されていますので、さらにセンスの良いボタンを作成できるように

頑張って作成してみたいと思います。

 

THE THOR パーツカスタマイズ ボタン

 

有料Wordpressテーマ THE THORでは自由にパーツが作成出来ますが、

使いこなせないと宝の持ち腐れで高機能なテーマを活かせませんので、

自分でも作成出来るように覚えていきましょう。

特に標準のボタンでもカラーなどを変更すれば、十分に使えるデザインなので

自信がない超初心者はデフォルトのボタンで我慢するか、こちらでいくつか

ボタンを作成しますので、気に入ったら自由に使ってください。

 

ボタンを作成してみる

 

文字の部分は好きなテキストに書き換えてください。

 

サンプルボタン

参考コード

<a class=”ep-btn bgc-Vorange ftc-white es-round es-shadowD es-grada2 es-size25″>サンプルボタン</a>

 

サンプルボタン

参考コード

<a class=”ep-btn bgc-Vsky es-radiusL es-size25 ftc-white icon-circle-right es-BTicon es-BT3d es-BTrich”>サンプルボタン</a>

 

サンプルボタン

参考コード

<span style=”font-size: 12pt;”><a class=”ep-btn bgc-black ftc-white es-round es-size25 icon-cloud-download es-borderSolidM brc-Vred es-BTicon es-grada1 es-BTarrow”>サンプルボタン</a></span>

 

サンプルボタン

参考コード

<a class=”ep-btn bgc-VPpink es-radiusL es-size40 es-BTshadow es-BTarrow es-BTrich ftc-white ftc-VDgray”>サンプルボタン</a>

 

サンプルボタン

参考コード

<a class=”ep-btn bgc-Vred es-BT3d es-round ftc-white es-size25 es-shadowD”>サンプルボタン</a>

 

サンプルボタン

参考コード

<a class=”ep-btn bgc-Bblue ftc-white es-BTrich es-BTarrow es-radius es-size25″>サンプルボタン</a>

 

サンプルボタン

参考コード

<span style=”font-size: 12pt;”><a class=”ep-btn bgc-Lgreen es-round es-size25 icon-feedly ftc-white es-BTicon es-BT3d”>サンプルボタン</a></span>

参考コード

<div><a class=”ep-btn bgc-Bsky icon-twitter ftc-white es-round es-BT3d es-size25 es-BTicon”>サンプルボタン</a></div>

 

サンプルボタン

参考コード

<a class=”ep-btn es-round es-size25 icon-rss ftc-white es-BTicon es-BT3d es-bold bgc-Lorange”>サンプルボタン9</a>

 

サンプルボタン

参考コード

<a class=”ep-btn bgc-Llime ftc-white es-radius es-BTrich es-bold icon-amazon es-BTicon es-BTiconBorder es-LpaddingSS es-left es-size25 es-RpaddingSS”>サンプルボタン</a>

 

サンプルボタン

参考コード

<a class=”ep-btn bgc-Bnavy icon-facebook2 ftc-white es-size25 es-grada2 es-BTicon es-round”>サンプルボタン</a>

 

サンプル

サンプルの部分を消すと正方形のアイコンになります。

テキストを入れないと消えてしまうので…

投稿画面ではデザインが崩れているかも知れません

同じようなかんじでSNSボタンを作成しましょう。

 

参考コード

<a class=”ep-btn icon-twitter ftc-white bgc-Lsky es-radiusL”>サンプル</a>

 

共通ボタンはこんな感じです。

カラー変更も自由にできます。

 

 

 

 

まとめ

 

有効Wordpressテーマ ザトールではこのように慣れれば簡単にボタンが

作成出来ますので、ボタンをカスタムしなくてもいいので、余計なCSSコードなど

入れなくてもいいので、エラーの心配もないですし、重くなる要素も

少ないので安心して好きなパーツを作成できます。

 

ボタンのCSSカスタムなどが好きな方は自由に作成するのも良いですが

何かあった時にいちいちコードを入れ直したりと面倒ですからデフォルトでも

これだけボタンデザインがカスタマイズ出来ますので、デフォルト使いでも

十分だと思います。

 

今回でパーツカスタマイズシリーズは終わりですが、気に入ったデザインが

作成できたら更新していこうと思いますし、まだ自分の標準パーツも

どうするか決めてないですので、試行錯誤してパーツ作成していきます。

 

 

ボタンいっぱい
最新情報をチェックしよう!

THE THOR(ザ・トール)の最新記事4件