前回に引き続き、今度は「新着記事」をカスタマイズするよ！
【 現時点での My ブログ 】
▼・ｪ・▼頑張ってるなぁ！
すごいなぁ！
って、さすがに思ったでしょ！？
でもさ。
前回、人気記事のカスタマしたあとさ。
人気記事欄より下の項目が、
バグってんだよね！！ ^p^
ぇ？
▼・ｪ・▼のくせに、賢ぶっていじくるからだって？
お黙り！！ ( ･ὢ･ ) ｵｺｯ！
バグ表示をなんとかするためにも、
今日は、新着記事欄をおしゃんてぃーにするよ！
今回の先生は、コチラ↓
＊リンク先消えました＊
コピペするコードは、先生のところで貰ってね！
で。
このままだとね？
やっぱり画像が小さくて、隙間が空いちゃうからね。
「注目記事」の「編集」画面を開いて、
サムネイル画像のサイズを変更したよ。
先生の指定は、275x110 だったけどね。
▼・ｪ・▼の場合、これだとまだ隙間が空いちゃったからさ。
プレビューで確認しながら、数値を変更していくといいよね！
うぇ～い！ ٩(ˊᗜˋ*)و
更に微調整を施してみた▼・ｪ・▼。
CSSの この部分 ⇩
a.urllist-title-link.recent-entries-title-link.urllist-title.recent-entries-title { position: absolute; top: 0%; left: 0; word-break: break-all; overflow: hidden; background: rgba(77, 77, 77, 0.42); width: 90%; height: 100%; margin-top: 0; padding: 5%; color: rgba(255, 255, 255, 0.985); font-size: 14px; text-align: center; text-shadow: -1px 1px rgba(0, 0, 0, 0.15); -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; }
新着記事に表示される「タイトル」部分に関するCSSぽい。
- タイトル欄そのものを少し大きく
- フォントサイズを14px→15pxへ変更
- フォントスタイルをメイリオへ変更
- タイトルの位置を少し下へ
人気記事のときと全く同じ場所を変更したよ！
赤文字の部分が変更、追加した箇所 ⇩
a.urllist-title-link.recent-entries-title-link.urllist-title.recent-entries-title {
position: absolute;
top: 0%;
left: 0;
word-break: break-all;
overflow: hidden;
background: rgba(77, 77, 77, 0.42);
width: 80%;
height: 100%;
margin-top: 0;
padding: 10%;
color: rgba(255, 255, 255, 0.985);
font-size: 15px;
font-family: "Meiryo",“arial unicode ms”;
text-align: center;
text-shadow: -1px 1px rgba(0, 0, 0, 0.15);
-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;
}
CSSの変更は自己責任でね！
ってところで。
今日の改造は、これでおしまい！
ﾟ*｡．ღ ⊹⊱ ￡ονё & βＬёｓｓ уｏц ⊰⊹ ღ．｡*ﾟ
Thank you.
I love you.