目次
SWELLで投稿ページ下の点線を消す方法｜記事下をすっきり見せるCSS
SWELLの投稿ページでは、記事本文の下や記事フッター付近に区切り線が表示されます。
すっきりした印象にしたいため、投稿ページ下の点線・区切り線を消して自然に見せる方法をまとめました。
記事下の線が気になった理由
記事ページを見たとき、本文の終わりに出る区切り線が不要に感じました。特にシンプルで落ち着いたデザインに寄せたいクライアントにとっては、こうした線はない方が見やすいなと感じます。
使用したCSS
.single-post .p-articleFoot {
border-top: none!important;
margin-top: 0!important;
padding-top: 0!important;
}
.single-post .p-entry__body {
border-bottom: none!important;
}
調整内容のポイント
.p-articleFoot の上罫線を消しつつ、余白も詰めています。
さらに .p-entry__body 側の下線も削除することで、記事本文とその下の要素がすっきりつながるようにしました。
デザイン面でのメリット
コーポレートサイトやすっきりした雰囲気を出したいときにおすすめです。
まとめ
細かな線の有無だけでも、ページ全体の印象は変わります。
「少しごちゃついて見える」と感じたら、まずは記事下の装飾を整理してみるのがおすすめです。
つづく
