WordPressテーマ「Lightning」をカスタマイズ(その5)3PRの変更・その他

WordPressテーマ「Lightning」をカスタマイズ(その5)3PRセクションの変更・その他

「Lightning」は株式会社ベクトルが開発した無料のWordPressテーマです。

Lightning – シンプルでカスタマイズしやすいBootstrapベースのWordPress公式テーマ

前回に引き続き、Lightningのカスタマイズ「その5」。

今回もCSSによるカスタマイズを扱います。

前回はここまで進行しました↓

これを最終回までに、以下の状態にまでカスタマイズします。

北福岡歯科クリニック | 北福岡駅より徒歩2分の痛くない歯医者
(架空のサンプルサイトです)

~ 目次 ~

  • 「3PRセクション」とは?
  • 「3PRセクション」の変更
  • 「VK_PR Blocks」と「VK_3PRエリア」の違い
  • 画像にシャドウを入れる
  • 今回はここまで

「3PRセクション」とは?

今回、まずは「3PRセクション」をカスタマイズします。

「3PRセクション」とは、トップページ上段のPRしたいポイントを3つ表示しているエリアです。

この形態、最近のサイトでは多く見られますね。

ここはウィジェットの「VK_PR Blocks」で作成しています。

ちなみに「VK_PR Blocks」を使うと以下の選択が可能です。
◇PR事項を「3列」か「4列」のどちらかで選択
◇画像表示かアイコン(Font Awesome使用)表示かを選択

本サイトではPR事項は3列で画像を使用しましたが、普通の企業サイトなどではアイコンのほうが合ってるかも知れません。

「3PRセクション」の変更

まず、画像が丸く小さいので、これを変更します。

.prBlock_image img {
    width:100% !important;
    max-width:400px !important;
    margin-left:0 !important;
    margin-right:0 !important;
    height:auto !important;
    border-radius:10% !important;
    margin-bottom:20px;
    }

大きく見やすくなりました。
画像は正方形で角丸にしました。

コードが「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事項は3つで固定
◇アイコンは使用できない。画像のみ。
◇画像は正方形
となります。

「VK_PR Blocks」と比べると柔軟性に欠けるので、本サイトでは使用してません。

画像にシャドウを入れる

画像にマテリアルっぽいシャドウ(影)を入れます。

.mainSection img {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) !important;
    }

各画像にシャドウが入り、立体感が出ました。

今回はここまで

さて、ここまでのカスタマイズ結果です。

3PRは画像が大きくなり、見出しの部分も見やすくなりました。

全体的には、今回は3PRと画像の部分的なカスタマイズのみなので、あまり変化は感じませんね。

さてさて、次回はインフォメーション機能をカスタム投稿タイプで実装します。

 

ken
だいぶ完成形に近づいてきました。

 

関連記事

WordPressテーマ「Lightning」をカスタマイズ(その9)よくある御質問ページの作成

2017.10.16

WordPressテーマ「Lightning」をカスタマイズ(その8)スライドショーの調整・他

2017.10.09

WordPressテーマ「Lightning」をカスタマイズ(その7)全幅コンテンツの実装

2017.10.02

WordPressテーマ「Lightning」をカスタマイズ(その6)インフォメーションの設置

2017.09.25

WordPressテーマ「Lightning」をカスタマイズ(その4)見出しの変更・その他

2017.09.08

WordPressテーマ「Lightning」をカスタマイズ(その3)フォントの変更・クレジットの非表示

2017.09.04

WordPressテーマ「Lightning」をカスタマイズ(その2)WP管理画面からのカスタマイズ

2017.08.28

WordPressテーマ「Lightning」をカスタマイズ(その1)準備編

2017.08.21

テーマの知識が無いと困る!? 今後のWordPress制作

2017.08.09