サイドバーの最新記事設定(現状完成版)

現状の妥協レイアウトCSSをUPします。

・角を丸くする。
・記事の間を調整。
・常に画像の横幅を100%表示。
・縦横比は、元画像のまま。
・縦は常に中央に表示。

設定変更

横幅は、サイドバーサイズに依存するようです。
縦幅は、自分で設定変更が可能なようです。
HTMLとJSは、いじっていませんので、元設定のままでOKです。


↓私と同じようにしたい場合は、まずは下記のサイトで指示通りにする。
はてなブログの「最新記事」を画像付きにするコードを作るやつ。 - #ChiroruNote

それから、CSSはこちらをコピペして使って下さい。
※数値は各自で調整して下さい&素人なので上手く行かなかったらごめんなさい。

/* ----- 最新記事設定 ----- */
.htbl_new_entries {
height: 100%;
width: 100%;
}
.htbl_new_entry {
position: relative;
background: #000000;   /* 余白の背景を黒にした */
width: 100%;
height: 100px;  /* 多分ここが縦幅サイズを指定する所 */
overflow: hidden;
margin-top: 3px;   /* 記事の間のスペースを少し広げた */
border-radius: 10px;  /* 四隅の角を丸くした */
}
.htbl_new_entry_img {
position: relative;


/* 画像を縦の中央に配置。 */
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
/* ここまで */


 max-width: 100%;  /* 横幅の上限 */
}
.htbl_new_entry_text {
position: absolute;
top: 0px;
word-break: break-all;
overflow: hidden;
background: rgba(15, 15, 15, 0.60);
width: 90%;
height: 100px;
margin-top: 0px;
padding: 0 5%;
color: rgba(255, 255, 255, 0.95);
text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
-webkit-transition: all 0.35s ease-out;
-moz-transition: all 0.35s ease-out;
-o-transition: all 0.35s ease-out;
transition: all 0.35s ease-out;
}
.htbl_new_entry_text:hover {
background: rgba(255, 255, 255, 0.05);
color: transparent;
text-shadow: none;
padding-top: 100px;
}
.htbl_new_entry_text span.entry_title {
display: table-cell;
vertical-align: middle;
text-align: center;
height: 100px;
font-size: 14px;
font-weight: lighter;
}
.htbl_new_entry_text span.entry_date {
position: absolute;
bottom: 0;
right: 10px;  /*日付の表示位置を少し左にずらした*/
font-size: 10px;
color: rgba(255, 255, 255, 0.4);
text-shadow: none;
}


かずや先生が再度アドバイスをして下さったので、上手く行きました。
ちなみに、アドバイス通りに以下の文を .htbl_new_entry_img 内へ追加すると・・・。

max-height: 100%; /* 縦幅の上限 */

↓こうなります。
縦幅上限設定追加
・横幅が基準比より長いと、横幅を100%表示。
・縦幅が基準比より長いと、縦幅を100%表示。

このメニューは横長なので、縦の上限も100%にすると余り部分(黒い隙間)が大きくなる為、私は縦の上限を入れませんでした。
横に長すぎる作品は、めったに作らないと思うし。



最終目標
最終目標
・基準比より短い幅を100%表示にして画面中央に張り、はみ出た所は非表示にする。
ちなみに、 max-height: と max-width: の max をそれぞれ min に変えてもダメでした。
CSSだけでは無理かもしれないので、とりあえず保留(´・ω・`)

広告を非表示にする

※ここにある物の著作権は、「うっちょん」または「マナ」にあります。 無断転載等は禁止しています。
© 2002 ucchon    © 2014 mana