商品リンク|amazlet|CSSカスタマイズ

獏(ばく)
amazletのCSSカスタマイズをご紹介します。

amazlet

今まで使っていた商品紹介の『カエレバ』さんでアマゾンリンクができなくなったようなので、『amazlet』というサービスを使ってみました。この記事は表示テストです。出来れば以前使っていたデザインと同じようにしたいのでCSSもいじりました。

他のプラグインも使ってみたけれど…

『Rinker』や『Amazonjs』は回数制限が~と出てきて、検索機能が使えなかったので、『amazlet』が使えないとアマゾンリンク難民になってしまうのですよ。『amazlet』はデザインもいじれるので上手く表示されるといいのですが…。

CSSデザイン

.amazlet-box {
color: #333;
background: #fff;
font-size: 14px;
line-height: 1.5;
margin-top: 15px;
margin-bottom: 15px !important;
padding: 26px 16px;
border: 1px #e0e0e0 solid;
border-radius: 3px;
-webkit-box-shadow: 0 0 25px #f1f1f1 inset;
-moz-box-shadow: 0 0 25px #ddd inset;
-o-box-shadow: 0 0 25px #f1f1f1 inset;
box-shadow: 0 0 25px #f1f1f1 inset;
position: relative;
}
.amazlet-box a {
text-decoration: underline;
box-shadow:none;
color: #333;
}
.amazlet-box a:hover {
box-shadow:none;
color: #333;
}
.amazlet-image {
margin: 0px 14px 1px 0px !important;
}
.amazlet-image img {
margin: 14px;
}
.amazlet-name a {
color: #5f5f5f;
}
.amazlet-name a:hover {
color: #5f5f5f;
}
.amazlet-powered-date {
font-size: 10px !important;
}
.amazlet-detail {
font-size: 12px;
}
.amazlet-link {
margin-top: 10px !important;
color: #333;
}
.amazlet-link a {
color: #333;
width: 278px;
display: block;
text-align: center;
font-size: 13px;
text-decoration: none;
padding: 12px;
margin: 10px 2px;
background: #f4d078;
background: -webkit-linear-gradient(top,#f7dfa5,#f0c14b);
background: linear-gradient(to bottom,#f7dfa5,#f0c14b);
border-radius: 2px;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
-webkit-tap-highlight-color: transparent;
}
.amazlet-link a:hover {
color: #333;
box-shadow: 0 3px 3px 0 rgba(0,0,0,0.14), 1px 1px 7px 0 rgba(0,0,0,0.12), 1px 3px 1px -1px rgba(0,0,0,0.2);
}
.amazlet-link a:before {
font-family: ‘FontAwesome’;
content: ‘\f270’;
font-size: 90%;
color: #333;
margin-right: 10px;
}
.amazlet-link a:visited {
color: #333;
}
/*** 解像度480px以下のスタイル ***/
@media screen and (max-width:480px){
.amazlet-box {
font-size: 12px;
}
.amazlet-image {
margin: 0px 10px 1px 0px !important;
}
.amazlet-sub-info {
width: 100%;
}
.amazlet-detail {
font-size: 10px;
}
.amazlet-link a {
width: 96%;
margin-right: 6px;
color: #333;
}
}

表示テスト

エッセンシャル思考 最少の時間で成果を最大にする
グレッグ マキューン
かんき出版
売り上げランキング: 1,003

表示されたー!!(喜)

これからは『amazlet』を使っていこうと思います!(*´▽`*)

ABOUT THE AUTHOR

夢幻劇場一次創作ブログ獏(ばく)
一次創作(ファンタジー / 現代 / 和風 / おじさんと少女 / ロボ)が好き。HNの由来は「悪い夢を食べて、良い夢を見せてくれる」という動物の獏から。

LEAVE A REPLY

*
*
* (公開されません)

SPONSORED LINK

 

Return Top