「Lightning」は株式会社ベクトルが開発した無料のWordPressテーマです。
＊Lightning – シンプルでカスタマイズしやすいBootstrapベースのWordPress公式テーマ
前回に引き続き、Lightningのカスタマイズ「その５」。
今回もCSSによるカスタマイズを扱います。
前回はここまで進行しました↓
これを最終回までに、以下の状態にまでカスタマイズします。
＊北福岡歯科クリニック | 北福岡駅より徒歩2分の痛くない歯医者
（架空のサンプルサイトです）
～ 目次 ～
- 「3PRセクション」とは？
- 「3PRセクション」の変更
- 「VK_PR Blocks」と「VK_3PRエリア」の違い
- 画像にシャドウを入れる
- 今回はここまで
「3PRセクション」とは？
今回、まずは「3PRセクション」をカスタマイズします。
「3PRセクション」とは、トップページ上段のPRしたいポイントを３つ表示しているエリアです。
この形態、最近のサイトでは多く見られますね。
ここはウィジェットの「VK_PR Blocks」で作成しています。
ちなみに「VK_PR Blocks」を使うと以下の選択が可能です。
◇PR事項を「３列」か「４列」のどちらかで選択
◇画像表示かアイコン（Font Awesome使用）表示かを選択
本サイトではPR事項は３列で画像を使用しましたが、普通の企業サイトなどではアイコンのほうが合ってるかも知れません。
「3PRセクション」の変更
まず、画像が丸く小さいので、これを変更します。
＊プラグイン「VK ExUnit」のアップデート（2017/10/24）に伴い、コードを変更しました。
.prBlock .prBlock_image { width:100% !important; max-width:400px !important; margin-left:auto !important; margin-right:auto !important; height:auto !important; border-radius:10% !important; margin-bottom:20px; } .prBlock .prBlock_image img { width:100% !important; max-width:400px !important; height:auto !important; }
大きく見やすくなりました。
画像は正方形で角丸にしました。
コードが「important」の嵐で忸怩たるものがありますが・・(^_^;)
次に、文字を修正します。
.prBlock_title { background-color:#02c676; color:#fff; font-weight:bold; padding:10px 0; } .prBlock_summary { text-align:left !important; margin-top:25px; } @media (min-width: 992px) { .prBlock_summary { font-size:18px !important; } }
見出しが目立ってメリハリが出ました。
また、文字サイズはPC閲覧時（画面幅992px以上）に若干大きくしました。
「VK_PR Blocks」と「VK_3PRエリア」の違い
ちなみに、「VK_PR Blocks」と似たようなウィジェットに「VK_3PRエリア」があります。
「VK_3PRエリア」は、Lightningの先代テーマである「BizVektor」から実装されているウィジェットです。
どちらもPR事項を表示するウィジェットです。
「VK_3PRエリア」を表示すると初期状態では以下のようになります。
「VK_3PRエリア」の特徴と「VK_PR Blocks」との違いは、
◇PR事項は３つで固定
◇アイコンは使用できない。画像のみ。
◇画像は正方形
となります。
「VK_PR Blocks」と比べると柔軟性に欠けるので、本サイトでは使用してません。
画像にシャドウを入れる
画像にマテリアルっぽいシャドウ（影）を入れます。
＊プラグイン「VK ExUnit」のアップデート（2017/10/24）に伴い、コードを変更しました。
.prBlock .prBlock_image { box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) !important; }
画像にシャドウが入り、立体感が出ました。
今回はここまで
さて、ここまでのカスタマイズ結果です。
３PRは画像が大きくなり、見出しの部分も見やすくなりました。
全体的には、今回は３PRと画像の部分的なカスタマイズのみなので、あまり変化は感じませんね。
さてさて、次回はインフォメーション機能をカスタム投稿タイプで実装します。
だいぶ完成形に近づいてきました。
この記事は内容が古くなっています。
最新バージョンのLightningと合わない箇所が多々あると思います。
新しいLightningによるサイト制作シリーズはこちらから。