【Stinger5のカスタマイズ】記事を区切るドットの幅を端から端まで伸ばす

こんにちは！
今更ながらブログテーマをStinger3からStinger5に変えました。
アップデートをした事によりレスポンシブデザインになりました。
レスポンシブデザインは流行っているんですね。そもそもテーマ変えるまでレスポンシブデザイン自体知りませんでした。
今までパソコン用の見た目とスマホ用の見た目と2つ用意されていたのですが、1つになり画面のサイズに合わせて自動で最適化してくれるようになりました。

今回はStinger5のカスタマイズについてです。
そのままでもシンプルでかっこいいデザインなので十分なのですが、少し変えてみたりしたいなと思って。
マイナーなネタなのであんま需要あるかわかりませんが、忘備録的に書いてみます。

記事を区切るドットの幅を端から端まで伸ばす

タイトルにもありますが、

Stinger5にはタイトルの記事と記事の間に区切りをとしてドットがあります。
このドットの部分を伸ばして記事の端まで伸ばします。

やりたいなって思って調べてみたけど出てこなかったので、適当に調べたカスタマイズ記事を参考にしつつ自分でやってみました。
僕はパソコン系は全く知識ないんで直感的に試してました。CSSとかいわれても何なのか全然わからない。
いい方法かはわかりませんが結果的に出来たのでそのやり方で。

大雑把に

見た目的には少しだけ変わるだけですが、結構何箇所か弄ります。

わかりやすくレイヤー1と2にわけて考える。
ドットの点線はレイヤー2に含まれるのでレイヤー2を広げればドットが記事の端から端までになります。

Step1

レイヤー1は要らなくなるので透過させます。そしてレイヤー2の位置を修正。
・home.php
・archive.php
・search.php
この3つを少しだけ弄ります。
開くと

<main>

って場所が上の方にあるので、その場所を

<main style="background-color:transparent; padding-left:0px; padding-top:0px; padding-right:0px;">

と3つファイルとも変えます。

Step2

レイヤー2に背景をつけたり、間隔とかを修正。
・style.css
を弄ります。
cssの上の方に以下を追加。

/*ドット幅を広げる*/
#topnews dl{
width:660px
float:left;
background-color: #fff;
}
#topnews dt{
width:100%;
}
#topnews dl:first-child {
padding-top:0px
}
#topnews dd h3{
font-size:15px;
}

僕は/* リンクの色 */ってところの上に追加しました。


CSSはもう一箇所弄ります。
中間より上のあたりに

#topnews dl {
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #999;
}
#topnews dl:first-child {
padding-top: 20px;
}

の部分があるのでそこを

#topnews dl {
padding-top: 20px;
padding-right: 40px;
padding-left: 40px;
padding-bottom: 20px;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #999;
}
#topnews dl:first-child {
padding-top: 40px;
}

と書き換えます。

以上で完成

これで書き換えたものをFTPとかでアップロードすれば完成です。
ページを確認したらドットの点線の幅が広がっているはず。

こんな感じになります。
テーマを弄るのは難しいですが楽しいですね。

-カスタマイズ