つい先の投稿で関連記事のイメージ画像を丸くする方法を投稿しました。
ですが、
それだけですと全体的なバランスが取れないことに気づきました^^;
なので、
zenbackという関連記事?などを表示するツール?サービスのキャプチャ画像を丸くする方法です。
同じくCSSをいじります。
スポンサーリンク
修正・追加するCSSは以下です。
自分の関連する記事のイメージ画像を丸くするCSS
#zenback-widget #zenback-related-article .zenback-module-item.hasthumb .zenback-module-item-image {
float: none;
width: auto;
height: 110px;
margin: 0;
BORDER-RADIUS: 100%;
}
お知らせのイメージ画像を丸くするCSS
#zenback-widget #zenback-news-hasimage .zenback-module-item-image, #zenback-widget #zenback-ad-hasimage .zenback-module-item-image {
height: 110px;
margin: 0;
width: auto;
text-align: center;
float: none;
BORDER-RADIUS: 100%;
}
お知らせのイメージ画像の下の広告イメージ画像(logly)を丸くするCSS
#logly-lift-869470 .logly-lift-ad-image-inner img {
position: absolute;
max-width: none;
max-height: none;
border-style: none;
BORDER-RADIUS: 100%;
}
これで上記画像のように、
zenbackでのキャプチャされてきたイメージ画像は全部丸くできました。
あとは、
どこか抜け目がないかどうかなのですが…。
また、
気づいた際に追加投稿します。
自分への備忘録として残しておきたいと思います。
もし、
参考になる方がいらっしゃれば幸いです。
[…] zenbackのイメージ画像を丸くする方法 […]