【SANGOを自分でカスタマイズ】オリジナルのボタンにアイコンをプラスしてみた

ボタンにアイコンを追加してみた

カスタマイズは自己責任でやろう!

「自己責任」の意味がわからない方、初めてカスタマイズする方はこちら

カスタマイズは自己責任。ぼくはこんな風に思っています。


この記事では
ボタンにアイコンをプラスしたカスタマイズ方法を説明。
POINT
このカスタマイズは、アフィリエイトリンクを自分好みのボタンにする方法です。

アイコンの位置は後ろ側がおすすめ

らいとさん(@kame3r)がこちらの記事でわかりやすく検証しています!
参考 クリックされやすい記号の配置はどちら?(ボタンの前vs後ろ)ABテストラボ

使うソフトなどはこちら

必須

WordPressWordPress

グーグルクロームGoogle Chrome

推奨

ファイルジッラFile zilla

サブクライムテキストsublime text

ボタンにアイコンをプラスする

アイコンの位置
左よりと右寄りがあります。before{ }内のleftrightに変更することで位置を変更できます。
ボタンの幅
デフォルトは幅100%にしています。変更する際はbtn-c a{ }内のwidthをの値を変更してください。

 

何種類か作成してみました。すべてaタグで挿入できるカスタマイズです。

 

しゃれたアイコンでもつけたろ!
大概にしとけよ

 

記事の使い方はこんな感じ
  • テキスト部分はWordPressのテキストエディタに記入するコードです。
  • style.css部分は小テーマのstyle.cssに貼り付けるか、テーマー編集で貼り付けてください。

アイコン(丸)+普通の青いボタン

マウスを載せたときにうっすら色が薄くなるボタンです。

<a>がアフィリエイトリンク。

アイコン(丸)+普通の赤いボタン

うっすら色が変わる赤バージョンです。

<a>がアフィリエイトリンク。

アイコン(丸)+Amazonっぽい色のボタン

うっすら色が変わる黄色(Amazonっぽい色)です。

<a>がアフィリエイトリンク。
黄色は良いよね

その色合いはやばいやろ!

アイコン(四角)+普通の青いボタン

アイコンの背景を四角にしてみました。

<a>がアフィリエイトリンク。

アイコン(四角)+普通の赤いボタン

<a>がアフィリエイトリンク。

アイコン(四角)+Amazonっぽい色のボタン

<a>がアフィリエイトリンク。

アイコン(くの字)+普通の青色のボタン

アイコンをくの字に変更してみました。

<a>がアフィリエイトリンク。

アイコン(指差し)+普通の赤いボタン

アイコンを指差しに変更してみました。

<a>がアフィリエイトリンク。

アイコン(矢印)+Amazonっぽい色のボタン

アイコンを矢印に変更してみました。

<a>がアフィリエイトリンク。

アイコン(四角)+マウスホバーで変わる青いボタン

マウスホバーすると背景が白くなり、枠線が出てくるようにしました。

<a>がアフィリエイトリンク。
 反対バージョンです
<a>がアフィリエイトリンク。

これはお気に入り♪

アイコン(浮き上がる丸)+普通の青いボタン

マウスを乗せるとアイコンが浮かび上がるようにしてみました。

<a>がアフィリエイトリンク。

今回一番頑張ったのはアコーディオン部分です!
どんどん沼にはまっていく感じだな

 

コメント( ˶ˆ꒳ˆ˵ )

avatar