人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

あつかましくもCSSの件でお尋ねします。ド素人ですが、お力をお貸しくださいますようにお願いします。

ワールドプレスにてAmazonJSのプラグインを使っていますが、添付ファイルにもありますように画像が非常に小さくみにくいと思いますのでもう少し画像(サムネイル)を大きく出来ればなぁと思いますが、個人の力ではできませんでした。是非、画像を大きくする方法をご教授お願いしたいと思います。

また、添付画像にもありますように丸印の部分を消すことができれば合わせてお願いしたいのですが、
宜しくお願いいたします。

CSSファイルはRARで圧縮してUPしていますのでDLしてお願いします。
http://www.hdrer.com/CSS.rar

1468297910
●拡大する

●質問者: dejavu888i
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● a-kuma3
ベストアンサー

実物を見せてもらった方が確実(いろいろカスタマイズをしてそうですし)なのですが、こんな感じのスタイルを適切な場所に入れれば良いと思います。

.amazonjs_image > .amazonjs_link > img {
 max-width: 500px !important;
 width: 200px;
 height: auto;
}

幅を 200px にしてみました。
max-width は、width よりも大きな値に。

プラグイン作者の説明ページでは、いちおう動きそうです。
http://blog.makotokw.com/portfolio/wordpress/amazonjs/


発売日と商品ランキングを消すのは、CSS だけでは難しそうです。
クラスなどの目印がないので順序で指定するしかないのですが、Amazon のデータによって項目数が変わるので。

どうしても消したいなら、プラグインをいじっちゃった方が早いような気がします。
https://github.com/makotokw/wp-amazonjs/blob/master/js/amazonjs.js

もし、Small のテンプレートを使っているのなら、90行目付近。

 var defaultTemplates = {
 Small:[
 '<div class="amazonjs_item">',
 imageTemplate,
 '{{if _ShowDefaultImage}}',smallImageTemplate,'{{/if}}',
 '<div class="amazonjs_info" style="{{if _InfoMarginLeft}}margin-left:${_InfoMarginLeft}px;{{/if}}">',
 '<h4>',linkTemplate,'</h4>',
 '<ul>',
 '{{if Creator}}<li>${Creator}</li>{{/if}}',
 '{{if Manufacturer}}<li>${Manufacturer}</li>{{/if}}',
 priceLiTemplate,
/* 以下の 2行をコメントアウト
 '{{if PublicationDate}}<li><b>' + r.PublicationDate + '</b>${PublicationDate}</li>{{/if}}',
 '{{if SalesRank}}<li><b>' + r.SalesRank + '</b>' + r.SalesRankValue + '</li>{{/if}}',
 */
 '</ul>',
 '</div>',
 reviewLinkTemplate,
 '<div class="amazonjs_footer"></div>',
 '</div>'
 ],

もしくは、スタイルをいじりたい人のために、こんなクラスの指定を入れたらどうでしょう、と修正してプルリクエスト。


dejavu888iさんのコメント
はじめまして、こんばんは。 早速回答ありがとうございました。画像の方は、希望どおり大きくなりました。 そうなんですね。消すのは諦めます。 懇切丁寧に説明頂きまして助かりました。CSS勉強しかけたんですが、挫折してしまいました。 自由にCSS扱えると楽しいでしょうね。また、勉強しようかな? また、機会あれば宜しくお願いします。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ