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


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

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

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

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2016/07/13 00:32:58

ベストアンサー

id:a-kuma3 No.1

回答回数4973ベストアンサー獲得回数2154

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

.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>'
    ],

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

id:dejavu888i

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

2016/07/13 00:32:31

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません