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

この記事は約2分で読めます。

Image

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

丸く切り抜くCSSの指定

CSS – 画像を丸く切り取る

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

/* 丸く切り抜く */
.maruImage200 {
  width: 200px;
  border-radius: 200px;
  -webkit-border-radius: 200px;
  -moz-border-radius: 200px;
}

を追加しました。

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

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

$imgString = '<img src="http://i0.wp.com/%s?resize=200,200" class="maruImage200" />';

これで表示すると、

Image

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

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

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

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

こちらを参考に

    -moz-box-shadow: 2px 2px 3px 3px #CCC;
    -webkit-box-shadow: 2px 2px 3px 3px #CCC;
    box-shadow: 2px 2px 3px 3px #CCC;
    background-color: #EEE;

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

Image

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

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

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

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

兎本美佳

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

ゆうそうとITブログの更新通知が受け取れます!
スポンサー広告

WordPress theme テーマ css インターネット
スポンサーリンク
ゆうそうとITブログの更新通知が受け取れます!
ゆうそうとITブログ

コメント

トップへ戻る

ゆうそうとについての説明

ゆうそうと とは東京都八王子市を中心として、WordPressによるWEBサイトの作成や、スポットでのIT相談を行ったり、年間契約でのIT顧問をなりわいとして活動しています。

特徴としては30年以上IT業界でプログラムを中心として仕事をしてきたものと、美大出身のデザイナーがワンストップで対応するため、幅広い対応が可能であることです。

IT相談は直接お会いしてのご相談の他、ZOOMによるオンライン相談も可能です。