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

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

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

●質問者: midnightseminar
●カテゴリ:コンピュータ インターネット
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

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

デザイン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


midnightseminarさんのコメント
ありがとうございます。 すみません、小さくしたいのはAmazon商品の領域内の「文字」なのですが、こちらはどうすれば操作できますでしょうか?

a-kuma3さんのコメント
>> すみません、小さくしたいのはAmazon商品の領域内の「文字」なのですが、こちらはどうすれば操作できますでしょうか? << すみません、小さくしたいのは文字だ、って、はっきり書いてありますよね <tt>X-|</tt> 回答に追記しましたので、確認してみてください。

midnightseminarさんのコメント
ありがとうございます! 良い感じに設定できました。 ついでに、教えていただいたimgの設定も変えてみました。 助かりました。
関連質問

●質問をもっと探す●



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