注目記事欄を改造！ - 【 DUDE ・完結編 】

「注目記事」のモジュールデザイン。

やっとのことで、念願のデザインに近づけた！

【 現時点での 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の変更は自己責任でね！

ってところで。

今日の改造は、これでおしまい！

ﾟ*｡．ღ ⊹⊱  ￡ονё & βＬёｓｓ уｏц  ⊰⊹ ღ．｡*ﾟ

Thank you.

I love you.