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

amazletカスタマイズ

Amazonの商品を簡単に紹介できるWEBサービス「amazlet」。Amazonで見ていた商品を1クリック+コピペで紹介することができ、便利で重宝しているWEBサービスです。

今回はそんな「amazlet」のデザインをカスタマイズしてみました。

CSSをコピペするだけでカスタマイズ完了しますのでとても簡単にできますよ。

スポンサーリンク

amazletデフォルトデザイン

まずはamazletで作成したリンクをそのままブログへ載せた時のデザインを見てみましょう。

Kindle Paperwhiteのリンクをamazletで作成してみます。

amazlet02056

するとこの通り「amazlet」のデフォルトデザインは、左に商品画像、右に商品情報(リンク)が並びます。

特にカスタマイズせずamazletを使うと、このようなデザインで表示されます。非常にシンプルなデザインですね。

もちろんこのまま使うのもアリなんですが、使っているうちに僕のようにもっと自分のサイトに合ったデザインにアレンジしたいと考える方もいるはずです。

それでは続いて、カスタマイズしたamazletを紹介します。

スポンサーリンク

カスタマイズ後のamazlet

amazlet02052

CSS調整後のamazlet!

僕は基本的にシンプルなデザインのほうが好きなので、カスタマイズといってもほとんど細かな調整です。

外枠を追加し、文字の大きさ・カラー・余白などのバランスを調整。そして「Amazon.co.jpで詳細を見る」の部分はボタンのようなデザインに仕上げました(ボタン先頭にはアイコンフォントも追加)。

またスマホで表示した場合は以下のように。

amazlet02057

レスポンシブなのでスマホで表示しても基本はPCと変わりません。

ただしスマホの画面幅で表示した場合は、ボタン(「Amazon.co.jpで詳細を見る」の部分)は枠内横幅いっぱいに表示。タップしやすくしました。

CSSコピペでカスタマイズ完了!

さて上記amazletのデザインですが、CSSは以下の通りです。

上記コードをコピペすればカスタマイズ完了です。

WordPressなら「style.css(できれば子テーマ内)」へコピペするだけです。

なお、このコードではアイコンフォントとして「Font Awesome」というWEBフォントを使用しています。Font Awesomeを利用していない場合、ボタン部分のアイコンが正しく表示されませんので、上記コードから以下の部分だけ削除してください。

するとこの通り。アイコンフォント未使用だとこのようにさらにシンプルなデザインになります。

amazlet02051

アイコンが消えてボタンがよりシンプルに。

まとめ

いかがでしょうか。

カスタマイズはCSSコピペだけで完了しますので、「amazlet」のデザインをちょっとカスタマイズして使ってみたかったという方は、ぜひ参考にしていただければと思います。

なお、サイト記述済のCSSなどによってはうまく反映されない可能性もありますので、カスタマイズは必ずバックアップを取ってから行いましょう。

できればローカル環境で確認したうえでアップロードすることをおすすめします。

amazletと同類のWEBサービスは他にもあります。なかでも「カエレバ」は、Amazon以外に楽天やYahooショッピングなどへのリンクも同時に作成できるので、amazletと同じくらいよく使います。

この「カエレバ」のカスタマイズについては以前に以下の記事で紹介しているのでよろしければご覧ください。

CSSコピペでOK!カエレバ・ヨメレバ・トマレバのデザインをまとめてカスタマイズ!
CSSコピペでOK!カエレバ・ヨメレバ・トマレバをまとめてカスタマイズ[ver2]

よくあるご質問(Q&A)

本デザインのカスタマイズに関してご質問いただいた内容を共有します。

「Amazon.co.jpで詳細を見る」のボタンサイズを少し小さくしたい

ボタンサイズは以下の値を調整すれば可能です。

スポンサーリンク
amazletカスタマイズ

5 件のコメント

  • こういうものを、ずっと待っていました!
    シンプルながらAmazonオレンジのアクセントが効いた、とてもよいデザインですね。
    ありがたく使わせていただいております。
    ありがとうございます!

    ブログ記事でも紹介させていただきました。
    「Amazonアフィリエイトに便利なツール「amazlet」とデザインカスタマイズ」
    http://cocolochronicle.com/amazon-amazlet-customize/

    • アバタロウ様

      ブログ記事拝見しました。
      ありがとうございます!
      すごくシンプルなデザインで僕も気にいってます。

  • 「Amazon.co.jpで詳細を見る」の部分ボタンのサイズを少し小さくするにはどうすればいいのでしょうか?

    • >神無月様

      ボタンサイズは「.amazlet-link a」内の以下の箇所を小さくしてみてください。

  • コメントを残す

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