サイドバーの最新記事設定ver,2(サイドバーより小さい画像の対処)
一昨日のブログ「とりあえず触れてみた」のソースの最初の画像データが、サイドバーより小さかったので、表示が「小さい幅を基準に大きい幅ははみ出して切り取る」の仕様を無視していたようなので(上下に黒のスペースが表示されていました)、かずや先生が更に修正CSSソースを考えてくれました。
「サイドバー画像の基本スタイル」コメントから下を、以下の物に上書きしてください。
/*サイドバー画像の基本スタイル*/
.htbl_new_entry_img {
position: relative;top: 50%;
- webkit-transform: translateY(-50%);
- ms-transform: translateY(-50%);
- o-transform: translateY(-50%);
- moz-transform: translateY(-50%);
transform: translateY(-50%);
max-width: none !important;
width: 100% !important;
max-height: none !important;
height: 100% !important;
}
/*サイドバー画像が閾値以上に横長だった場合のスタイル*/
.htbl_new_entry.htbl_new_entry_img_max .htbl_new_entry_img {
margin-left: 50%;
- webkit-transform: translate(-50%, -50%);
- ms-transform: translate(-50%, -50%);
- o-transform: translate(-50%, -50%);
- moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: auto !important;
}
/*サイドバー画像が閾値以上に縦長だった場合のスタイル*/
.htbl_new_entry.htbl_new_entry_img_min .htbl_new_entry_img {
height: auto !important;
}
.htbl_new_entry_img {}内のみの修正ですからね。
かずや先生、ありがとう!
以下は、かずや先生からのコメント。
「max-width」と「max-height」の指定だと枠のサイズより小さいサイズの画像だと
画像が拡大されないんで余白が出ちゃってたみたい。
そんな仕様があったんですね・・・。
昨日に修正データが送られたんだけど、昨日の分のブログを書き終ってから・・・と思って後回しにしていたら、終わる気配が無くて今日修正しました(;´・ω・`)
「マナがアレンジした ウディタ講座ソースの説明」の方は、今日も頑張って追加更新していきます・・・orz