ワードプレステーマ THE THORのパーツカスタム編の
ボタンのカスタム編を紹介していきます。
半分以上は自分で覚える為に作成していますが、初心者の方にも
参考になればいいかと思い記事にしています。
ボタンも他サイトでもWordpressのSNSボタンやボタンのカスタムなど
盛んにカスタマイズされているので、人目を惹くようなセンスの良いデザインが
作成出来れば、クリック率上昇に貢献できると思います。
THE THORではボタンが光る演出もありますので、クリックされやすいように
工夫されていますので、さらにセンスの良いボタンを作成できるように
頑張って作成してみたいと思います。
THE THOR パーツカスタマイズ ボタン
有料Wordpressテーマ THE THORでは自由にパーツが作成出来ますが、
使いこなせないと宝の持ち腐れで高機能なテーマを活かせませんので、
自分でも作成出来るように覚えていきましょう。
特に標準のボタンでもカラーなどを変更すれば、十分に使えるデザインなので
自信がない超初心者はデフォルトのボタンで我慢するか、こちらでいくつか
ボタンを作成しますので、気に入ったら自由に使ってください。
ボタンを作成してみる
文字の部分は好きなテキストに書き換えてください。
参考コード
参考コード
<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>
参考コード
参考コード
参考コード
参考コード
参考コード
参考コード
参考コード
参考コード
サンプルの部分を消すと正方形のアイコンになります。
テキストを入れないと消えてしまうので…
投稿画面ではデザインが崩れているかも知れません
同じようなかんじでSNSボタンを作成しましょう。
参考コード
共通ボタンはこんな感じです。
カラー変更も自由にできます。
まとめ
有効Wordpressテーマ ザトールではこのように慣れれば簡単にボタンが
作成出来ますので、ボタンをカスタムしなくてもいいので、余計なCSSコードなど
入れなくてもいいので、エラーの心配もないですし、重くなる要素も
少ないので安心して好きなパーツを作成できます。
ボタンのCSSカスタムなどが好きな方は自由に作成するのも良いですが
何かあった時にいちいちコードを入れ直したりと面倒ですからデフォルトでも
これだけボタンデザインがカスタマイズ出来ますので、デフォルト使いでも
十分だと思います。
今回でパーツカスタマイズシリーズは終わりですが、気に入ったデザインが
作成できたら更新していこうと思いますし、まだ自分の標準パーツも
どうするか決めてないですので、試行錯誤してパーツ作成していきます。
