▼・ェ・▼にっき。

ゲームをこよなく愛する▼・ェ・▼のメインBlogデス

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

 

 

 

f:id:bless-you:20161027020725j:plain

 

 

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

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

 

 

 

【 現時点での My ブログ 】

f:id:bless-you:20161027015211j:plain

 

 

 

もぉさ!

▼・ェ・▼すごくない!?

超頑張ってるよね!

 

 

ぇ?

コピペしかしてないだろって?

 

 

お黙り!! ( ・ὢ・ ) オコッ!

 

 

前回、微妙な気持ちになったところで終わったからね。

今日こそは、注目記事欄をおしゃんてぃーにするよ!

 

 

で。

 

 

コピペしただけだとね?

 

 

f:id:bless-you:20161027020144j:plain

 

 

画像が小さくて、隙間が空いちゃうんだよ。

なので・・・

 

 

f:id:bless-you:20161027020419j:plain

 

 

「注目記事」「編集」画面を開いて、

サムネイル画像のサイズを変更したよ。

 

 

先生の指定は、275x110 だったけどね。

▼・ェ・▼の場合、これだとまだ隙間が空いちゃったからさ。

プレビューで確認しながら、数値を変更していくといいよね!

 

 

f:id:bless-you:20161027020725j:plain

 

 

うぇ~い! ٩(ˊᗜˋ*)و

 

 

 

更に微調整を施してみた▼・ェ・▼。

 

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ぽい。

 

f:id:bless-you:20161027022211j:plain

 

f:id:bless-you:20161027022503j:plain

 

  • タイトル欄そのものを少し大きく
  • フォントサイズを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.