ウェブリブログの旧デザインを継承した CSS を変更する(パート5)

「最近の記事」をタイトルだけにするには・・・

最近の記事の変更.png

<1:サムネイルを表示しない>
1483 行から
.Module .RecentEntry .RecentEntryThumbnail {
margin-right: 10px;
width: 44.9%;
height: 80px;
overflow: hidden;
position: relative;
display: none; ← 追加した行
}

<2:文字表示幅を広げる>
1517 行から
.Module .RecentEntry .RecentEntryWrap {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 55.1%;

width: 100%; ← 変更した行
}

<3:本文を表示しない>
1537 行から
.Module .RecentEntry .RecentEntry__body {
line-height: 1.4;
max-height: 31px;
overflow: hidden;
color: #516275;
display: none; ← 追加した行
}

以上で、「最近の記事」から一応、サムネイル表示と本文の文頭なしで、タイトル表示のみにできます。ただし、文字サイズや行間などの微調整は必要かもしれません。

【新デザインの場合】
最近の記事の変更2.png

<1:サムネイルを表示しない>
622 行から
.module--recent-entry .recent-entry__thumbnail {
margin-right: 10px;
float: left;
width: 70px;
height: 70px;
overflow: hidden;
position: relative;
display: none; ← 追加した行
}


<2:本文を表示しない>
660 行から
.module--recent-entry .recent-entry__body {
line-height: 1.5;
overflow: hidden;
display: none; ← 追加した行
}

選択したデザインによっては該当しないこともありますので、ご了承ください。

"ウェブリブログの旧デザインを継承した CSS を変更する(パート5)" へのコメントを書く

お名前
メールアドレス
ホームページアドレス
コメント