2017-07-03

Vaster2トップページ　サムネ画像を丸くしてみた Blogger·Vaster2 カスタマイズ#7　

どうも。
今日は蒸し暑い1日でした。
台風3号も列島を横断しそうなので、明日以降蒸し暑さが続くようです。我が家も扇風機だけでは耐えられずエアコンオンでしたよ。

トップページのサムネイル画像を円く

さて最近、Twitterの仕様変更でプロフィールアイコンの表示が丸くなり、四角ベースでプロフィールアイコンを作成したいたユーザーの方は混乱してしまったらしいですね。

まぁ四角と丸では中に表示される情報量は丸の方が少なくなるわけで、あまり良い変更では無い気がしますが。

それでも、ちょっと思いついたのですが、Bloggerのトップページ記事一覧のサムネイル画像も丸くして雰囲気を変えるのもいいかなぁ〜なんて。

確かにサムネイルの表示される情報量は減りますが、見栄えを変えてみるのも面白いでしょう。

作業自体は、以前実施した記事一覧の画像をCSSのみで調整した続編となります。

border-radius:

ボックスの四隅を丸める（円）の使用にするプロパティになります。
プロパティに続き値を「px」または、「%」で指定しますが、各角に縦軸と横軸のサイズを指定する事も出来ます。

例えば4つの角全てを同じ半径で丸くしたい場合は、border-radius:30px;とすると以下のようになります。

border-radius:30px;

左上角と右下角を丸くする場合、border-radius:30px;にすると以下のよう左上と右下のみ丸くなります。

border-radius: 30px 0 30px 0;

*値は左上（30px）右上（0）右下（30px）左下（0）と左上から時計回りで指定します。

さらに各角の縦軸と横軸なサイズを変える事も出来ます。
上の例とは違った雰囲気の丸さになります。

border-radius: 30px 0 30px 0 / 10px 0 10px 0 ;

*値は左上横軸（30px）右上（0）右下横軸（30px）左下（0）/ 左上縦軸軸（30px）右上（0）右下縦軸（30px）左下（0）と横軸と縦軸を/で指定します。

以下は、height:100px; width:100px;のボックス要素にborder-radius:50%にした場合です。

ボックスに4つの角を50%で丸くしてあげると円のボックスが出来上がります。
この仕組みを使って、画像も真ん丸にする事が出来ます。

cssを変更

テンプレートのバックアップを取って、実際にcssを変更します。

Vaster2 cssの.article-list imgを検索して、以下の通りに追加変更します。
このクラスを指定しているスタイルが、トップページの記事画像サムネイルのスタイルになります。

尚、当該クラスのスタイルは、以前の記事で変更していますので、Vaster2のデフォルトで記述されているのcssと違っています。

.article-list img{
 float:left;
 width:200px;
 height:200px;
border-radius:50%; /* add 2017.7.3 add */
~中略~
}

画像サイズはwidthとheightを同サイズにして正方形としておき、border-radius:50%を追加しています。

さらにボックスに枠を付けたい場合は、「border: 1px solid 好きな色;」を追加します。
枠線があった方がサムネイルが丸い事を強調されて見やすくなります。

.article-list img{
 float:left;
 width:250px;
 height:250px;
border-radius:50%; /* add 2017.7.3 add */
border: 1px solid black;
~中略~
}

どうでしょうか、つまらない変更だとはおもいますが、雰囲気は変わりましたよ。

戻したい時も1行or2行削除するだけなので、簡単お手軽に出来ます。

今回はトップページの記事一覧でしたが、他のサムネ画像でも変更は可能だと思いますよ。

Bloggerテンプレートカスタマイズ