はてなブログでAmazon商品を埋め込むときの設定についての質問です。


たとえば、
http://statsbeginner.hatenablog.com/entry/2014/08/23/110912
↑のブログ記事にAmazonの書籍のリンクを埋め込んでいるのですが、このAmazon商品の部分だけ文字を少し小さくするには、どうすればいいのでしょうか。
CSSでの設定方法を知りたいです。しばらくググった限りでは分かりませんでした…。
よろしくお願い致します。

回答の条件
  • 1人10回まで
  • 13歳以上
  • 登録:2014/08/23 11:28:17
  • 終了:2014/08/23 14:41:23

ベストアンサー

id:a-kuma3 No.1

a-kuma3回答回数4487ベストアンサー獲得回数18562014/08/23 12:51:34

ポイント100pt

デザインCSS で、以下を追加。

DIV.hatena-asin-detail IMG.hatena-asin-detail-image {
    width: 100px;
}

ただ、画像は小さくなるのですが、右側の文字が、画像の下に回り込むことになります。
f:id:a-kuma3:20140823123847p:image

画像の下に、文字が回り込むのが嫌ならば、margin-bottom を指定します。

DIV.hatena-asin-detail IMG.hatena-asin-detail-image {
    width: 100px;
    margin-bottom: 100px;
}

こんな感じ。
  f:id:a-kuma3:20140823124808p:image

それぞれの数値は、調整してみてください。




追記です。

すみません、小さくしたいのは、文字でしたね ><。

説明の文字を小さくするなら、こんな感じ。

DIV.hatena-asin-detail .hatena-asin-detail-info li {
    font-size: 70%;
}

f:id:a-kuma3:20140823142210p:image

書籍名(タイトル)も含めて、小さくするなら、こんな感じです。

DIV.hatena-asin-detail .hatena-asin-detail-info li {
    font-size: 70%;
}
DIV.hatena-asin-detail .hatena-asin-detail-title {
    font-size: 70%;
}

f:id:a-kuma3:20140823142334p:image

他1件のコメントを見る
id:a-kuma3

すみません、小さくしたいのはAmazon商品の領域内の「文字」なのですが、こちらはどうすれば操作できますでしょうか?

すみません、小さくしたいのは文字だ、って、はっきり書いてありますよね X-|
回答に追記しましたので、確認してみてください。

2014/08/23 14:27:48
id:midnightseminar

ありがとうございます!
良い感じに設定できました。
ついでに、教えていただいたimgの設定も変えてみました。
助かりました。

2014/08/23 14:41:09

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

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

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

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

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません