TwentyFourteenを利用時の記事間の罫線について

解決済 poteton
(@poteton)

8年、 7ヶ月前

いつもお世話になっています。

TwentyFourteenテーマを利用しているのですが、TOPページの記事一覧時に、記事と記事の間に罫線がありますが、アイキャッチを入れた記事の上部には罫線が表示されないようでした。
アイキャッチを入れた記事の後にアサイド等のタイトルが表示されないシンプルなものを投稿すると、境目が曖昧なので、できれば罫線を入れたいと思っています。

どこでこの罫線が入れられているのかがはっきりわからなかったので、お教えいただきたいと思い質問させていただきました。
何となくcontent.phpの中のどれかなのかなあとは思うのですが、どこをどう直したら良いのかがわからない状態です。

どうぞよろしくお願い致します。

3件の返信を表示中 - 1 - 3件目 (全3件中)

천궁 메텔
(@digitmaetel)

8年、 7ヶ月前
11.0 Media Queries
の箇所に
```
.list-view .site-content .hentry {
		border-top: 1px solid rgba(0, 0, 0, 0.1);
		padding-top: 48px;
	}
```
と、ありますね。

Padding, Margin を任意にとって見るのはどうでしょう。

別のアプローチだと

アサイド等のタイトルが表示されないシンプルなものを投稿すると、境目が曖昧なので

背景色を、「アサイド」、「リンク」それぞれに異なるようにするという考え方も良いでしょうね。
トピック投稿者 poteton
(@poteton)

8年、 7ヶ月前

お返事ありがとうございます。
マージンは既にある程度調整してあります。
また、今回はあくまでアイキャッチを入れるとその後(ブログ記事一覧でいうと上)の記事との境の罫線が表示されないため、アサイドなどのシンプルなものを後に投稿してしまうとますます境目が分からなくなってしまうから、アイキャッチ記事の上部にも罫線を入れたい、というのが目的です。

アサイドの記事背景色を変えて目立たせるなどは考えておりません。

罫線を入れる場合どこの修正が必要かわかる方がいらっしゃいましたらアドバイス頂けたら嬉しいです。宜しくお願い致します。
トピック投稿者 poteton
(@poteton)

8年、 6ヶ月前
CSSで自己解決できました。
```
.list-view .site-content .hentry.has-post-thumbnail {
	border-top-style: solid;
	border-top-color: rgba(0, 0, 0, 0.1);
	border-top-width: 1px;
	padding-top: 48px;
}
```
ありがとうございました。

3件の返信を表示中 - 1 - 3件目 (全3件中)

トピック「TwentyFourteenを利用時の記事間の罫線について」には新たに返信することはできません。

トピックタグ

表示