【はてなブログ】記事一覧の一つ一つを枠で囲う美しいデザイン
こんにちは！さくらです。
私は現在、はてなブログの無料版を利用しています。
有料版は記事一覧ページのカスタマイズの幅が広いですが、無料版だと限られた範囲でカスタマイズすることになりますよね。
私が記事一覧ページに関しておこなったカスタマイズの中で一番手間どったのが、それぞれの記事を枠で囲むことでした。
他のカスタマイズに関しては"コピペでOK！"と書かれたとても親切なブログがたくさん見つかり、そちらを参考にさせていただきました。
ですが、それぞれの記事を枠で囲むことに関しては、なんど検索してもそれについて書かれた記事は見つからず……。
やっとできた！一覧の一つ一つの記事を枠で囲むカスタマイズ
一旦は諦めたのですが、それでもやっぱり「記事一覧ページをもっと見やすく美しくしたい！」という気持ちが再燃し、試行錯誤の末に先日ようやく枠で囲むことができました。
↓ 仕上がりはこのようになります。
（枠線の色、太さや角丸スタイルなどは自由に変えられます）
このように記事一覧に枠をつけたいと思っている方のお役に立てたらと思い、このカスタマイズ方法を記事にすることにしました。
お困りの方がいればぜひ参考になさってくださいね！
まずはトップページを記事一覧のスタイルにする
今回ご紹介するカスタマイズは、まずこの作業をした後のカスタマイズとなります。
まだトップページを記事一覧スタイルに変更されていない方は「はてなブログ 無料版 記事一覧」で検索すると、たくさんの方がカスタマイズ方法を紹介してくださっていますのでそちらを参考にされてください＾＾
記事一覧スタイルに変更できたらまたこちらへお越しくださいね。
もうトップページを記事一覧にしてるよ！という方は続きを見ていきましょう。
はてなブログ無料版の記事一覧の一つ一つに枠をつける
それでは、本題のそれぞれの記事を枠で囲むCSSをご紹介します。
貼り付ける場所は「デザイン」→「カスタマイズ」→「デザインCSS」です。
そこに以下の青文字部分のCSSをコピペして完了です！
/*****記事一覧の枠のスタイル*****/
.page-archive .archive-entry {
border: 1px #55555 solid; /*枠線の太さ、色、スタイル*/
align-items: center;
padding: 15px; /*枠の内側の余白*/
box-sizing: border-box;
justify-content: space-around;
border-radius: 5px; /*枠の角を丸くする*/
}
枠線の角丸が不要の場合は、border-radius: 5px; /*枠の角を丸くする*/の行ごと削除してください。
このカスタマイズの何に手間どったか
このカスタマイズをするにあたり何に手間どったかというと、一行目の
.page-archive .archive-entry {
↑ この英字部分の指定です。
私はHTMLとCSSの知識ゼロで始めたので「記事一覧の一つ一つの記事」をなんと指定したらよいのか全くわかりませんでした。
でも、デザインについて書かれた沢山のブログを参考にしながらCSSを作り上げていくなかで、この指定部分を考えながら何度も試していたら・・・ついにできました！
実現したいデザインが目に見えてやっと形になった瞬間、ちょっと感動してしまいました。
とても参考になる、見やすくて美しいブログ集
このブログを作るにあたり、たくさんの方々のお知恵を拝借させていただきました。
なかでもとてもお世話になったブログを紹介させていただきます。
本当にありがとうございます！
おわりに
いかがでしたか？
一つ一つの記事に枠線をつけるという、たったこれだけのシンプルなカスタマイズで、トップページがぐんと見やすく美しくなりました。
よろしければ皆さんもぜひお試しください＾＾
それではまた！
