ハーレクイン図書館　　　　　マイ本棚（Amazonツール）の設置―テンプレートカスタマイズ

ハーレクイン図書館　　　　　
ハーレクインのことなら何でも・・・　　　　　　　　　　　　　　　　　　　　　　　　　ＦＣ２館

マイ本棚（Amazonツール）の設置―テンプレートカスタマイズ

新刊情報☆ ハーレクイン1月5日刊

powerd by amazon360

先ほども紹介したアマゾン360の『マイ本棚』↑
本棚の中の本は拡大して見ることが出来ます。
すごいツールでしょ！

ところが・・・早速設置したところ
↓こんな風になってしまいました。
？？？

あれれ・・・なんかおかしい･･･

原因はツール製作者さんのこちらの記事で判明。
AMAZON360 MY本だな設置
ちゃんとFC2ブログで動作テスト済でした

ただ貼り付けただけでは使用しているテンプレートによって
本だなの中で、本が浮いているようになってしまう場合があります。
その場合は、「テンプレートの設定＞編集＞スタイルシートの編集」を・・・
つづきを読む

つまり余白設定をゼロにしないと
本がきちんと並べられないということ。

そ～なのか！

しかし原因がわかっても

にはちょっと難しかった･･･
テンプレートによって色々パターンがあるのでって
本当にいろいろパターンがあるようで、
どこがその箇所なのか、見つけるのに悪戦苦闘。

まっ、こんな便利なツールのためなら
苦労もなんのそのですが・・・

ということで参考までにカスタマイズのメモを残します。
当図書館の使用テンプレートはFC2の公式テンプレート[rose]です。
テンプレートの前半部は省略します。

中ごろの/* 記事表示部分 */という箇所を目安に探してください。

/* 記事表示部分 */
#left {
width: 485px;
float: left;
overflow: hidden;
margin: 5px 10px 0 0;
background: #FFF;
}

/* 記事の見出し(タイトル) */
#left h3 {
font-size: 110%;
color :#FAD53A;
padding: 0px 0px 0px 0px;
margin-left:5mm;margin-top:8mm;
border-bottom: 0px dashed #FAD53A 90% center;
background: url() no-repeat top left #fff;}

/* 記事表示部分/コメントなどを囲うブロック要素の属性 */
.content {
margin: 0 0 10px 0;
padding: 15px 15px 0 15px;
line-height: 1.4;
border-top-width: 0;
border-left: 0px solid #6D7966;
border-right: 0px solid #6D7966;
border-bottom: 0px solid #6D7966;
}

/* 記事内の画像 */
.content img {
border: 1px solid gray;
margin: 0 10px 5px 0;
}
↑
この部分を以下のように書きかえる
赤字部分に注目。

/* 記事内の画像 */
.content img {
border: 1px solid gray;
margin: 0 0　0 0;
}

記事内の画像というところが
ポイントだったんですね。この部分の余白設定をゼロにすると
本が浮き上がらなくなります。
ついでにborder: 1px solid gray;の部分をwhiteにしたりすると
一冊一冊の区切り線も目立たなくなります。
でもちょっと見にくいのでグレイ（gray)のままにしました。