【stinger5】記事一覧区切り点線の太さ・色・種類の変更方法

STINGER5head

初心者編です。 僕が初心者ですので。
大げさに変更せず、ほんのすこしだけカスタマイズします。

該当部分のCSS記述を変更します。
CSS変更はいつもどおり。
ダッシュボード画面から外観→テーマ編集ですね。
記事見出し文章の点線は「topnews dl」らしい。

STINGER5デフォルトCSS
トップニュース区切り点線部分。
STINGER5_topnews_dl はむむ…この記述「border-bottom」を変更すればいいってことか。

変更方法

#topnews dl{
	border-bottom: 2px dotted #FF9900;
}

今回はオレンジ色にして点線を1px太くしてみました。
線の種類はそのまま。点線(dotted)のままです。

結果

STINGER5_topnews変更前
STINGER5_topnews変更前

STINGER5_topnews変更後

STINGER5_topnews 変更後

記事見出し文章との境目がはっきりした…と思う。

二本線にしたい。シンプルに一本線で十分。
だと言う方はボーダースタイル(border-style)を変更するだけです。
リンク:border-style-スタイルシートリファレンス

セーフカラーで色を変更したい方はこちらを参照してください。
リンク:WEBセーフカラー216色-WEBカラーリファレンス

前置き

記事と記事の区切り線の色と太さを変更しました。
正確な名前は知らないので区切り点線と当記事では呼ばせて
いただきます。CSSをみてもdotted(点線)ですし。

ワードプレステーマ「STINGER5」の標準では線の太さは 1px
線の種類は点線です。

シンプルなオサレ系デザインを狙うのであれば特に変更する
必要はない仕様となっています。考えられていますね。
でも、これだと各記事の見出し文章との境目が分かりづらいと
感じます。僕はね。
ぱっとみてすぐ分からないとイライラする性質なので。
とりあえずは反応をみながらちょくちょくデザイン変更しようと
おもっているけど反応がないから好き勝ってやっとります。

例の如く前置きを一番後ろに配置しました。
導入部分が長いカスタマイズ記事ってイライラしちゃうので。

コメントを残す

メールアドレスが公開されることはありません。