BizVektorのカスタマイズ

BizVektorの3PRエリアはトップページ下に表示され、特に強調したい3つの商品の紹介などに使える便利なパーツです。

BizVektorの3PRエリア

BizVektorの3PRエリア

作成するサイトの性格によっては、この部分を特に目立つようなデザインにしたい場合もあるでしょう。

枠線や見出し、「詳しくはこちら」のフォントサイズや色などに関するCSSを変更すれば広告が目に飛び込んでくるようなデザインにカスタマイズすることもできます。

3PRエリアには「topPr」というidが付いているので見出し、枠線、説明文、「詳しくはこちら」など必要に応じてスタイルを定義しましょう。

参考CSSと表示結果を紹介します。ご自由にお使いください。

/* 3PR見出し文字サイズ */
#topPr h3 {
    font-size: 28px;
}

/* 3PR見出し文字色 */
#topPr h3 a {
    color:#990000;
}

/* 3PR見出し枠線左 */
#topPr .topPrInner h3 {
    border-left:solid 10px orange;
}

/* 3PR説明文 */
#topPr p a {
    font-size: 20px;
    line-height: 130%;
    color:#990000;
    font-family: 'メイリオ' ,Meiryo, sans-serif;
}

/* 3PR「詳しくはこちら」 */
#topPr .moreLink a {
    background-color:orange;
}

変更結果は次のようになります。

3PRエリアのスタイル変更例

3PRエリアのスタイル変更例

それぞれのパーツの色には「#990000」や「orange」などと指定してありますが、カラーコードや色の名前を調べていただき、適当に修正してください。

ちなみに、「詳しくはこちら」のCSSセレクタ「#topPr .moreLink a」から「#topPr」を削除して「.moreLink a」にするとサイト全体の「詳しくはこちら」や「この記事を読む」が同じデザインになります。

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

関連記事

スポンサーリンク