CSSコピペで完了!amazletのデザインを簡単カスタマイズ【Amazon風】

amazlet08132

Amazonで販売されている商品をブログなどで紹介する時に便利なツール「amazlet」をカスタマイズしました。

前回「CSSコピペで完了!amazletのデザインを簡単カスタマイズ。」でお伝えしたデザインとベースはほとんど変わりませんが、今回はボタンなどをAmazon風に仕上げてみました。

CSSコピペするだけでカスタマイズ完了しますので、気になった方はどうぞお試しください。

スポンサーリンク

「amazlet」のデザインをAmazon風にカスタマイズ!

カスタマイズ内容を紹介する前に、まずは「amazlet」デフォルトデザインを確認しておきます。

amazletカスタマイズ

とてもシンプルなデザイン。このまま使ってもいいですが、せっかくなら自分のサイトに合ったデザインにカスタマイしたいですよね?

ということで、シンプルなデザインはそのままに、ちょっとAmazonっぽいデザインにアレンジしてみます。

amazletカスタマイズ

「Amazon.co.jpで詳細を見る」の部分をAmazon風のボタンへカスタマイズ。その以外のテキストリンクもAmazonを意識したカラーにCSSを調整しています。

amazletカスタマイズ

またスマホサイズ(正確には幅480px以外)だとこの通り。配置を少し調整し、ボタンも押しやすいサイズにしています。

個人的にシンプルなデザインのほうが好みなので、狙い通りに仕上がりました。

スポンサーリンク

CSSコピペで完了!

今回制作したデザインは、CSSの調整のみでカスタマイズすることが可能です。

以外のコードをご自身のサイトへコピペしてみてください。
※作業前に必ずバックアップを取りましょう。くれぐれも自己責任にてお願いします。

WordPressであれば、使用テーマ(もしくは子テーマ)内の「style.css」へ貼り付けすればOKです。

ボタンのアイコンには「Font Awesome」のWEBフォントを使用しています。ご自身のサイトでFont Awesomeを使用していない場合はアイコンが正しく表示されませんので、上記コード内から以下の箇所だけ削除してください。

すると、以下のようにボタン部分のアイコンが消えてよりシンプルになります。

amazletカスタマイズ

まとめ

いかがでしたか?「amazlet」デフォルトデザインと比べると、ちょっとそれっぽくなったと思います。

カスタマイズ方法は、CSSをコピペするだけで完了するのでとても簡単です。気になった方がいらっしゃいましたら、どうぞお試しください!

ただ使用しているWordPressテーマやその他ブログサービスによっては、CSSをコピペしてもうまく反映されない場合があります。そのため作業前にはバックアップを取ることをおすすめします。

コチラの記事もあわせてチェック!
CSSコピペで完了!amazletのデザインを簡単カスタマイズ。
CSSコピペでOK!カエレバ・ヨメレバ・トマレバのデザインをまとめてカスタマイズ!
スポンサーリンク
amazlet08132

コメントを残す

メールアドレスが公開されることはありません。