「注目記事」のモジュールデザイン。
やっとのことで、念願のデザインに近づけた!
【 現時点での My ブログ 】
もぉさ!
▼・ェ・▼すごくない!?
超頑張ってるよね!
ぇ?
コピペしかしてないだろって?
お黙り!! ( ・ὢ・ ) オコッ!
前回、微妙な気持ちになったところで終わったからね。
今日こそは、注目記事欄をおしゃんてぃーにするよ!
で。
コピペしただけだとね?
画像が小さくて、隙間が空いちゃうんだよ。
なので・・・
「注目記事」の「編集」画面を開いて、
サムネイル画像のサイズを変更したよ。
先生の指定は、275x110 だったけどね。
▼・ェ・▼の場合、これだとまだ隙間が空いちゃったからさ。
プレビューで確認しながら、数値を変更していくといいよね!
うぇ~い! ٩(ˊᗜˋ*)و
更に微調整を施してみた▼・ェ・▼。
CSSの この部分 ⇩
a.urllist-title-link.entries-access-ranking-title-link.urllist-title.entries-access-ranking-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.entries-access-ranking-title-link.urllist-title.entries-access-ranking-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の変更は自己責任でね!
ってところで。
今日の改造は、これでおしまい!
゚*。.ღ ⊹⊱ £ονё & βLёss уoц ⊰⊹ ღ.。*゚
Thank you.
I love you.