Vaster2の記事リストの角を丸くする

それでは、初心者のVaster2カスタマイズで「記事リストの角を丸く」を書いてみます。

Vaster2「記事のリスト」のカスタマイズ

「記事のリスト」のカスタマイズ部分は？

ＨＴＭＬの書き込みは２箇所

では、いつもの様にバックアップを取りましたら、HTMLの編集画面へ進んで下さい。

１つ目

「.post-outer{　」を探して、「｛　｝」の中へ、「border-radius: 15px;」を追加してください。
この数字は上に書いた様に任意の数字で大丈夫です。

２つ目

続いて、「トップページ、カテゴリ、アーカイブの記事一覧」のCSSの中から
「.article-list:hover{　」を探して同じコードを書きます。

必ず１つ目と同じ数字で「 border-radius:15px;」と追加してください。

ここは、PC画面時にこの部分にカーソルが寄った時に反転する場所の設定です。

ですので、同じ数字で角を丸くしましょう。

背景色を変えるともっと見た目が変わる

今回は簡単でしたね。

ですが、見た目がかなり変わったかと思います。
角が丸いと女性っぽい感じがしたり、可愛い感じになったり、柔らかい感じがしますね。

ただ、背景の色と記事リストの色が同じだと、あまり違いが分からないかもしれません。
その場合は、

初心者Vaster2カスタマイズ「サイトの雰囲気を色で替える」


でご紹介した部分の、「上級者向け」→「ページ全体の背景」の色を変えて下さい。


分りやすく、濃いめの色を選択してみました。
また、角の丸みの大きさを変えるともっと変化が分かりやすいです。


という事で、サイトの色・文字・記事のリストの見た目を変えるだけで、とてもオリジナリティが出ます。
好きなようにカスタマイズして楽しみましょう！