ブログの人気記事アイキャッチを真ん丸にする　Vaster2カスタマイズ

初心者のVaster2カスタマイズです。
色々な部分を「丸くしてみよう」という事で「border-radius:」を使います。
その「border-radius:」ですが、画像をまん丸にする場合は「border-radius:50%;」で設定が可能です。

この画像を真ん丸にするコードを利用して、サイトのトップページの見た目を簡単に替える事が出来そうな場所といえば・・・トップページの「人気の記事」だと思います。

では、その画像部分をまん丸にしたいと思います。

今回もHTMLの編集を行いますので、事前にバックアップは取りましょう。

「人気の記事」の画像を真ん丸に

トップページの「人気記事」のCSSはいつものようにHTML画面の中で、「人気記事」という日本語の下に「.popular-post ul li a {　」の部分から始まる所です。

その「人気記事」一番最後（月別アーカイブの始まる前）に下記を追加します。

今回の記入場所は一箇所です。これでスマホの人気記事もまん丸になります。

(9月21日追記「.item-thumbnail img{」の部分が抜けていました・・・すみません。
画像のCSSを追加するという事です。説明部分も少し加筆修正しています。）

再度追記です、画像自体の左に余白があったのでそれをなくす「padding-right:0」を追加しました。



たった1箇所の追加のですが、見た目が可愛らしく変わりました。

「記事ページの角を丸くする」

記事ページの角を丸くするHTML

続いて、「記事ページの角を丸くする」です。
先日、トップページの記事リストの角を丸くしましたが、

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

今回は中身のページの角を取ります。
同じ様に事前にバックアップは取っておきましょう。

「人気ページ」のCSSは「記事ページ」という日本語の下に「.main-outer{　」の部分から始まります。
そこへ、

border-radius: 20px;

を追加すればOkです。数字はお好みの大きさに替えましょう。

パンくずリストの位置を変更

角の丸みの数字を大きくすると、「パンくずリスト」が丸い角の部分と重なる場合があります。
その場合は、CSSの「パンくずリスト」という部分の「.breadcrumb-wrapper {　」のマージンの数字を変えてみましょう。

margin: 30px 0 0 15px;

margin: で数値を4つ設定した場合は、「上」・「右」・「下」・「左」の順に設定されます。
数字はお好みの位置で変えて下さい。

最初の設定では、数値が3つで、「上」・「左右」・「下」になっており、その左右の値が「０」ですので、この様に変更をしました。

おまけで、線のスタイルを変える

「.main-outer{　」の中へ線のスタイルを決めるHTMLを加えると、ドットで表示する事も出来ます。その他の線のスタイルは

border-style－スタイルシートリファレンス

上記のサイト様に載っています。上の画像の様な「点と点」で囲む場合は

border-style:dotted 2px;

と追加すればOKです。（「2px」の部分はドットの大きさです。設定しない場合の「border-style:dotted; 」では上記の画像の大きさになりました。）


という事で、色々と丸味を付けてサイトの見た目を変えてみました。

真ん丸と、丸みをつけるコードを様々な場所に使えば、もっと見た目が可愛らしくなります。
お好みの場所を変えてみてくださいね。