海外行ったことないけどebay輸出

ebay輸出のブログ / File exchangeの使い方 / Affinger4カスタマイズ / Amazonプライムビデオ


PR 特典サイト

AFFINGER4 の特典としてオリジナル子テーマをご用意しました!

子テーマは当サイトでも使用中です!
詳しくはこちら⇒:SuiKEN (スイケン)

Affinger4の公式ボタンをカスタマイズ【震えるボタン/押したくなるぜぇ~】

投稿日:2017年3月5日 更新日:

Affinger4のボタンをカスタマイズしてみました。機能として備わっている公式ボタン・詳細ボタンを震えるボタンに変えて、もっとコンバージョン上がったら最高だよね!というゲスイ所からです。

プラグインは必要ないですし、CSSやfunctionsなどのファイル編集もいりません。CVが実際に上がるかはさておき、簡単な内容なのでAffinger4を使っている誰にでもおススメできます。

震えるボタンとは

すでに震えてますが、次のボタンはどちらが気になりますか?w

はい、そういうわけでウザい青い方を目指すAffinger4カスタマイズですw

安心してください!

会いたくて押してほしくて小刻みに震えるタイプもあります。

Affinger4の基本的な機能である公式ボタン詳細ボタンの使い方から震えるボタンを作ってみましょう。2,3工程で出来上がります。

まずは公式ボタンを普通に設置する方法を紹介します。すでにご存じの方は公式ボタンを震えるボタンにする方法へどうぞ

Affigner4で公式ボタン・詳細ボタンを作る方法

Affinger4には、ボタンを簡単に作れる機能が備わっています。

この2つです。

基本的なボタンの作り方をまずは紹介(2パターンあります)

パターン1:リンクからボタンを作る

ボタン作るので一番簡単な方法だと思う。

ボタンにしたいリンクをドラッグして、公式ボタンか詳細ボタンのどちらかをクリックするだけ。

もう少し具体的に言うならば、

  1. linkボタン押してURLとテキストを入力する。さらに完成したリンクのaタグをドラッグして選択します。
  2. 編集画面のテキストタブ上にある公式ボタン・詳細ボタンのどちらかをクリック
  3. 完成。下の画像を参照

button-shake-01

これでリンクがボタンになります。

<div class="rankstlink-r2"><p><a>http://hogehoge</a></p></div>ってな感じでで<aのリンクタグが自動で挟まれるよ。

パターン2:公式ボタンから作る

リンクからではなく、公式ボタンを先にクリックして作る方法もあります。

  1. ボタン入れたい所で公式ボタンをクリックする
  2. <div class="rankstlink-r2"><p>に続いて<aタグでリンクを入力する
  3. 再び公式ボタンを押す。※表示が"/公式ボタン"とスラッシュ付きに変わってると思います。

button-shake-02

これでタグが閉じられます。すげーって思った。

パターンごとの結果はどちらも同じです。

ちなみにボタンの色はAffingerのランクCSS管理で変更可能。変更していない場合は、公式ボタンが赤詳細ボタンが青です。

ココまでが通常ボタンの作り方。今回はこの先!震えるぜぇ~

公式ボタン・詳細ボタンを震えるボタンにする方法

震えるボタンにするための大まかな工程は2つ

  1. headへcssリンクを入力 (Affinger4の機能使う)
  2. ボタンのHTMLへcssスタイルを指定する

まずは記事編集画面の下の方にある「headに出力するコード※エスケープ処理されません」へ

into-head

その中に次のコードを入力します。

コードについての詳細は本家CSSHAKEサイトへ

この例ではコードを記事ごとに挿入してますが、AFFINGER4 管理の上級者向け設定にある枠でもOK。その場合、記事ごとではなくサイト全体にかかります。あ、サイト全体が意味不明に震えるわけではないのでご安心ください。。

intohead

あとは記事編集画面に戻って、CSSクラスを指定したら完成です。

マウス載せると小刻みに震えるタイプで指定してみましょう。編集画面内で、先ほど入力したボタンコードに class="shake" という文字をコピペします。

入力場所はaタグ内です。次のような感じ

はい、これで完成です。

記事の上の方で紹介した押したくて震えるボタンになりました。更新するとマウスオンでボタンが震えると思います。

震えない場合は、キャッシュクリアしてみてください。ブラウザやOSで異なると思いますが、Ctrl + F5 とかソレっぽいやつです。

スポンサーリンク

いくつかの震えるパターン

class="shake"を今回は使いましたが、いくつかパターンがあります。

 

あー痛い。目がちかちかする。

ごめんなさい。次のリストが上記の指定内容です。

  • class="shake-slow"
  • class="shake-horizontal"
  • class="shake-vertical"
  • class="shake-rotate"

他にも震え方のパターンがありますので、参考にさせて頂いているCSShakeのサイトもどうぞ

通常はマウスオンした時だけ動きます。

上のボタンのように最初から動くようにする場合は、shake-constantも重ねて指定するとOKです。

Affinger4の公式ボタン・詳細ボタンを震えるボタンへカスタマイズする方法まとめ

  1. リンクの上で、公式ボタン・詳細ボタンをクリックすれば、通常のボタンが作れる。
  2. headにコードを入力して、class="任意"をボタンリンクのaタグに挿入する。
  3. Affinger4の震えるボタン完成

コンバージョンが実際に上がるか分かりませんが、ここぞという所で使うとかなり目立ちますねw ボタン以外も震えさせたりできます。

yotta
次のページで震えるボタンたくさん使っておすすめ映画紹介してるよ!

Amazonプライムビデオの映画からオススメ50本以上を紹介!【ジャンル別】【随時更新】

Affingerについてはこちらもどうぞ

\ シェアしてください /

  • この記事を書いた人
  • 最新記事

yotta(よった)

海外オークションサイトのebayでセラー(販売者) やってるよ。たどたどしい英語を操り目指すは友達100人♪ 書く前にツイートで発散します。好きなアルコールは芋焼酎です。

-Affinger4, ブログ運営

Copyright© 海外行ったことないけどebay輸出 , 2017 All Rights Reserved.