初心者Vaster2カスタマイズ「記事リストの角を丸く」

画像の角を丸くしたい場合は、「border-radius: 30px;」と追加すれば出来ます。






この数字は角の丸みの大きさで、数字が大きい程丸くなります。
必要な部分へ書き込めば反映されます。

それで、トップページのカスタマイズの時に、試しに上のタグを入れてみましたら反映が出来ましたので、ご紹介します。

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


初心者Vaster2カスタマイズ「記事リストの角を丸く」

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


©さんがつ日記「記事リストの角を丸く」1

トップページの「記事のリスト」に詳細については、

【Vaster2】トップページの記事リストのカスタマイズ|Blogger Labo

上のサイト様が詳しく説明を書いて下さっています。
いつもお世話になっているサイト様です。


HTMLの書き込みは2箇所

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


1つ目

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


2つ目

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

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

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

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


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

今回は簡単でしたね。

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

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





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

©さんがつ日記「記事リストの角を丸く」2

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


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



0 件のコメント :