mikotohodo-三言ほど-

くだらない雑談と小さな情報を日常に

MENU

関連記事、二列にして縮めたい。

縦幅を縮めたい。ただその想い一つだけ。

で、これを縮めたい。調べたら出てくるのだろうけど、暇なんで自力でやる。

関連記事

ここのテーマだと、関連記事内にli.urllist-item.related-entries-itemなるところがあり、そこら辺から触っていきたい。

li.urllist-item.related-entries-item {
 width: 50%;
 float: left;
}

とりあえず50%とか指定しときゃ良いんだろうの50%である。

横に50パーセント指定

概要がはみ出て記事が入りきらない。隙間が出来ておかしいので嫌いなんだけどdisplaynoneで消そうと思う。

.urllist-entry-body.related-entries-entry-body {
display: none;
}

ここまできて、これで本当に良いのかと自分のやっていることを80%くらい疑いつつ作業は続く。

関連記事

右側のサムネに左側のタイトルが濃厚接触しすぎなので、ちょっとだけ離したい。

a.urllist-title-link.related-entries-title-link.urllist-title.related-entries-title {
padding-right: 10px;
display: block;
}

さて、ここにきて貼り付けていた画像が小さかったことに気付く。なかなかの不手際。

関連記事二列

で、これらの適応範囲を768pxまでにしたいので@media screen and (min-width: 768px)で囲う。

@media screen and  (min-width: 768px){
li.urllist-item.related-entries-item {
 width: 50%;
 float: left;
}
.urllist-entry-body.related-entries-entry-body {
 display: none;
}
a.urllist-title-link.related-entries-title-link.urllist-title.related-entries-title {
padding-right: 10px;
display: block;
}
}

@mediaの書き方が未だにいまいち分からない。あと見出し一つも使わなかった安定の殴り書きでそろそろ〆ようと思う。おつかれした。