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

amazlet02052 3

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

今回はそんな「amazlet」のデザインをカスタマイズしてみました。CSSをコピペするだけで完了するので簡単ですよ。

スポンサーリンク

amazletデフォルトデザイン

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

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

amazlet02056

するとこの通り、左に商品画像、右に商品情報(リンク)がずらっと並びます。

デザインも、ご自身のサイト上で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!カエレバ・ヨメレバ・トマレバのデザインをまとめてカスタマイズ!

スポンサーリンク
amazlet02052 3

2 件のコメント

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

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

    • アバタロウ様

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

  • コメントを残す

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