BizVektorのカスタマイズ

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でお困りのときはご相談を
細かい質問からCSSやPHPのカスタマイズ、トラブル対応まで、この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
WordPress個別サポートの特徴
  • 最短で本日中に問題解決できます
  • 見積もり無料・料金は終了後の後払いです
  • 銀座教室・スカイプ・出張またはメールで対応します
カスタマイズがうまくいかないときは
お急ぎのときはWordPressメールサポートで対応します。ご活用ください。
こんなときはご相談ください(相談・見積もり無料)
  • サイトのデザインをカスタマイズしたい
  • CSS・PHPのカスタマイズがうまくいかない
  • 引っ越し(サーバー移転)したい
  • サイトをSSL対応(https://)したい
WordPress講座の問い合わせ先
WordPress講座申し込み
メールで問い合わせ

関連記事

スポンサーリンク