トップページのタイル画像をCSSで画像を丸く切り抜く

Image

CSSで画像が丸く切り抜けるということを知ってちょっと試してみたくなりました。今のトップページは正方形に画像を切り抜いていますが、CSSで丸く切り抜いてみます。

丸く切り抜くCSSの指定

CSS – 画像を丸く切り取る

こちらのサイトを参考にさせていただきました。今のトップに表示している画像は200×200ピクセルの大きさなのでその大きさの丸に切り抜きます。子テーマの style.css

を追加しました。

とりあえず今のトップを置いたまま、確認したいので「[ryus_another_post_link id=3554]」の方法で確かめてみます。

トップページでタイル状に表示している 子テーマの home.php を コピーして、名前をhome_maru.phpとします。画像を表示するコードに class=”maruImage” を追加します。

これで表示すると、

Image

のように画像が丸く表示されました(^^)/

輪郭がはっきりしないので影をつけてみる

丸く切り取るとちょっと画像がわかりにくくなっちゃったので、影を付けてみたいと思います。

CSS3でドロップシャドウ(影)を付ける

こちらを参考に

.maruImageに追加しました。これで、

Image

こんな感じに分かりやすくなったかな~と思います(^^)/

↓ここで見ることが出来ます
https://usortblog.com/?home_option=maru

↓よろしければ style.css はここにあります
style

*今までstyle.cssにコメントを // で入れていたところがあったのですが、文法的に正しくなかったようでたまたま動いていたものもありますが、今回そのせいで動かなかったので修正しましたm(_ _)m。今までの記事で見てコピって上手く行かなかった方がいらしたらごめんなさいです

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

261人の購読者に加わりましょう

トップへ戻る