こんにちは、ゆんつです。
最近の僕は遅まきながら少しでも見やすいブログが作れるように日々勉強をしています。
僕のこれまでのブログは
こんな感じで記事と記事の間に区切り線がありません。
この辺りは好き嫌いになるのかもしれませんが、僕としては記事と記事の間に区切りの線があるともっと見やすくなるんじゃないかと思いました。
なので今日は、記事と記事の間に区切りの線を入れてみようとおもいます。
やってみよう
1. ダッシュボード→外観→テーマの編集を選ぶ
2. 編集するテーマを選択で「Simplicity2 child」を選ぶ
3. 適当な場所に以下のコードを貼りつけてファイルを更新を押下する
#main .entry {
border-bottom: 1px solid #ddd;
padding-bottom: 15px;
}
それぞれの意味は
こういうことなので、数値を大きくすれば線が太くしたり余白が広くしたりすることができ、線の種類や色の部分を変更すれば自分の好きな太さや色の線にすることができます。
線種を色々試してみよう
線の種類が色々あるようなので試してブラウザで表示させてみました。
線の見え方の確認に使用しているブラウザはchromeです。
solidからoutsetまではどれも僕の環境では1本線に見えて、どこがどう違うのかブラウザでみた限りではわかりませんでした。
僕はsolidが好きかな。
線の色について
#dddは明るめの灰色なんですが、僕は外枠とも色があっていてこれが一番好きです。
違う色が良い場合はグーグルで色見本を検索すると色んな色のコードが調べられるので、好きな色にしましょう。
余白のサイズについて
padding-bottomが15pxの時
padding-bottomが1pxの時
15pxくらいあったほうがゆったりして見やすいですね。
広くしたい方は数値を大きくして、狭くしたい方は数値を小さくするといいと思います。
4. 実際にブログを見て確認
おおっ！
出来てる出来てる。
でも記事と記事の間に区切り線が出来ると、次は記事の一番下に表示される関連記事の間にも区切り線が入れたくなるものです。
これもやりましょう。
関連記事の記事と記事の間に線を引く
1. 先ほど同様にテーマを選択で「Simplicity2 child」を選ぶ
2. 先ほど張り付けたコードの下あたりに以下のコードを貼りつけてファイルの更新を押下
#main .related-entry {
border-bottom: 1px solid #ddd;
padding-bottom: 15px;
}
3. 実際にブログを見て確認
おおっ！
出来てる出来てる！
まとめ
やってみると非常に簡単に記事と記事の間に線を入れることが出来ました。
これで記事と記事がはっきりと区切られて見やすくなったような気がします。
テーマをいじるとブログの見た目が変化するので実験をしているようでとても楽しいですね。
見やすいページになるようにこれからも徐々に手を加えていきたいと思います。
それでは、またですー。
コメント