WordPress個別サポート

BizVektorの3PRエリアで3つの画像を丸く加工したいことがあるかもしれません。たとえば、次のようなイメージです。

3PRエリアの画像を丸くする

3PRエリアの画像を丸くする

ここでは、CSSを使って3PRエリアの3つの画像を丸くする方法を紹介します。

スポンサーリンク

BizVektorの3PRエリアの画像を丸くする

まずは、3PRエリアに正方形の画像を入れます。

3PRエリアに正方形の画像を入れる

3PRエリアに正方形の画像を入れる

次のCSSを子テーマのstyle.cssまたは「外観」-「CSSカスタマイズ」などのメニューに入力します。

/* 3PRエリアの画像を丸く */
#topPr .prImage {
    border-radius: 50%;
}

/* 左右の枠線を消す */
#topPr,
#topPr .topPrOuter {
    border: none;
}

/* 「詳しくはこちら」をセンタリング */
#topPr .moreLink {
    text-align: center;
}

/* 「詳しくはこちら」のフォントなど */
#topPr .moreLink a {
    font-size: 18px;
    line-height:150%;
}

1行目~4行目が画像を丸くするCSSです。その他、「詳しくはこちら」のスタイルなども設定しています。表示結果は次のようになります。

3PRエリアの画像を丸くする

3PRエリアの画像を丸くする

ちなみに、長方形の画像だと次のようになります。

長方形の画像を丸くしたイメージ

長方形の画像を丸くしたイメージ

違和感があれば、角丸の「border-radius: 50%」を小さくして微調整することができます。たとえば、「border-radius: 60px;」にすると次のようになります。

画像の角丸サイズを変更したイメージ

画像の角丸サイズを変更したイメージ

ついでに、画像のマウスオーバー時に色を薄くするCSSを紹介します。

/* マウスオーバー時に色を薄く */
#topPr .prImage:hover {
    opacity: 0.6;
}

画像にマウスオーバーすると、少し透明になります。

画像のマウスオーバー時に半透明になる

画像のマウスオーバー時に半透明になる

この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
wordpress講座受講予約
WordPress講座の問い合わせ先
脱・初心者を目指すWordPress 189のヒント

関連記事

Lightningのカスタマイズ

WordPressカスタマイズ

WordPressによるサイト作成のヒント

WordPressプラグイン

スポンサーリンク
西沢直木によるWordPress講座の紹介
ホームページ作成講座WordPress個別サポート