来世できっと役に立つ情報サイト

パンダが空を

雑記

WordPress+AffingerのCVボタンを超かっちょよくする小技

更新日:

CVボタンのデザインにはあまりこだわりはないけど、先日ボタンがバグったのもありこれを機に作り直しました。

ついでに少しぐらいオシャレ感出してみたかったのでまとめました。上手くできなかったら教えてください。

タイトルにあるようにWordpress+AffingerのCVボタンをCSSでオシャンティにしたいあなた(つーかぼくだ)こんな感じで30分もあれば作れます。ほぼ自分メモです。

 

用意するもの

この4つがあればできます。

  • WordPress+Affinger+子テーマ
  • CSSボタンデザイン
  • 有限工房さんのプラグイン(あった方が100倍便利)
  • 30分ぐらいの時間

 

CSSを編集

CSSをコピー

ザサイベース様のサイト(http://thesaibase.com/design/css-cv-buttons#i-8)へアクセスし、次のCSSをお借りします。

 

CSSを貼り付ける位置

WordPress+Affinger+子テーマを適用した状態。

WordPress管理コンソール > 外観 > カスタマイズ > 追加のCSS に追加しましょう。

 

幅が上手く合わない場合

CSSをいじってるとどこかでwidthが適用されて、意図しない幅になる場合があります。

そんなときは次の Width に !important を追加してちょうど良さげな幅にしましょう。

width: xx% の数値を変更すれば簡単に幅が変わります。

 

 

 

ボタン配置するとこんな感じ

 

ビジュアル状態のままボタンを追加

いちいちテキストモードにして該当箇所にボタンを配置してってのは面倒ですよね。そんなときはこちらの超便利プラグインをご活用ください。(プラグイン追加方法の説明は割愛します)

https://ygkb.jp/apps/quick-ad-insert/

プラグインを追加すると <ad> ってのが増えて、ボタンを押すと…

 

このように、ビジュアルモードのままボタンを追加できるのです。

 

ボタンのカスタマイズ

いろいろ変更できます。もっとカスタマイズしたい方はすみません、ご自分でお願いします。

またはザサイベース様にお問合せくださいませ。

btn-cv CVボタン基本(色は緑)
is-red ボタンを赤くする
is-blue ボタンを青くする
is-black ボタンを黒くする
is-reflection ボタンを一定時間で光らせる
is-trembling ボタン内部の矢印アイコンを動かす
is-bounce ボタンをバウンドさせる

ボタンのコードから消したり増やしたりすれば反映されます。お試しあれ。

 

終わりに

いかがだったでしょうか?って一度は言ってみたかった。

ザサイベース様のサイトにも書いてあるように、ださいボタンの方がクリックされるっぽいです。恐らくですが、こじゃれた感じ出すと脳が疲弊するのではないでしょうかと推察。

シンプルにボタン感出した方がぽちられるかもしれません。

 

よって、ボタン配置する云々でCVが上がらないとか言われてもぼくのせいではないですね。

その辺は完全に自己責任でお願いします。

 

 

 

スポンサーリンク

スポンサーリンク

スポンサーリンク

スポンサーリンク

-雑記

Copyright© パンダが空を , 2017 All Rights Reserved.