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

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

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

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

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

今回はスライドショーの調整と3つのセクションのカスタマイズです。

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

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

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

~ 目次 ~

  • Lightningのスライドショー
  • Lightningスライドショーの特徴「1」
  • Lightningスライドショーの特徴「2」
  • スライドショーのカスタマイズ
  • 「診療・受付時間」セクションのカスタマイズ
  • 「所在地・地図」セクションのカスタマイズ
  • 「院長略歴」セクションのカスタマイズ
  • 今回はここまで

Lightningのスライドショー

この歯科サイトのスライドショーには「その2」の記事で画像を設定しました。

モバイル用の画像は入れず、以下のPC用画像のみを4枚入れてます。

ちなみに、2017/10/28のアップデートにより、スライドショーの画像上にテキストや半透明色を表示できるようになりました。
(本サイトでは、文字は画像組み込みで済ませてます。)

さて、このLightningのスライドショーには2つの特徴(欠点?)があります。

Lightningスライドショーの特徴「1」

まず、PC用画像とモバイル用画像の峻別が曖昧なことです。
(何のこっちゃ分からない表現ですが)

スライドショーの画像をPC用とモバイル用(スマホ・タブレット)に分けてるのは良いのですが、
たとえば、PC用に
「PC用画像1」
「PC用画像2」
「PC用画像3」
「PC用画像4」
の4枚の画像を設定したとします。

で、モバイル用には2枚の画像を設定したとします。
「モバイル用画像1」
「モバイル用画像2」

普通、こういう設定をすると
PCで見た場合は4枚のPC用画像でスライドショー、
スマホで見た場合は2枚のモバイル用画像でスライドショー、
と思うじゃないですか?

ところが、スマホで見ると
「モバイル用画像1」
「モバイル用画像2」
「PC用画像3」
「PC用画像4」
この4枚の画像がスライドされます。

なんでしょうね、この謎仕様 (^_^;)
スマホでは2枚のモバイル用画像のみでスライドしてほしいのに。

なので、PCでは4枚の画像をスライドさせ、スマホでは1枚の静止画像のみ、なんてことはできません。
スマホで見ると、
「モバイル用画像1」
「PC用画像2」
「PC用画像3」
「PC用画像4」
この順でスライドショーになってしまいます。

PC表示・スマホ表示共にまともにスライドショーを表示したければ、PC用のみに限定するか、双方に同数の画像を設定するしかありません。

まさに謎仕様、説明するだけでややこしいですね・・

ちなみに、スライドショーのPC表示とモバイル表示は画面幅で切り替えています。
(*2017/10/28のアップデートにより変更)

Lightningスライドショーの特徴「2」

特徴の2番目は、スライドショーの画像表示時間と切替時間が短すぎること。

公式のデモサイトを見てもらえると分かりますが、

Lightningデモサイト

パカッパカッパカッと4秒間隔で切り替わります。
なんでしょうね、このせわしなさは。

なので、企業や店舗サイトとしては合わない業種も多いと思います。

のんびり・まったりした内容、たとえば和風温泉旅館のサイトとか、福祉施設のサイトとか、このパカッパカッパカッでは納品できません。

スライドショーには主な調整点が3つあります。
◇画像の表示時間
◇画像の切替時間
◇切り替わる表現形態(スライドやフェードなど)

Lightningのスライドショーはこの3つは固定です。
切り替わりはスライドのみでフェードなどには出来ません。

すごく使いづらいですね。

スライドショーのカスタマイズ

では、このスライドショーをカスタマイズします。
画像の表示時間を変更します。

一応、公式の有料プラグインを購入すれば、変更は簡単にできます。

Lightning Charm | 拡張機能

ちなみに価格は6,980円(税込)です。

無料にこだわりたければ自力でカスタマイズするしかないですね。

スライドショーのカスタマイズはJS(JavaScript)をいじらないといけないので、JS苦手な私としては今回は他のブログさんの知恵をお借りしました。
ありがとうございます。

テーマLightningのカスタマイズー子テーマを作ってスライダーのスピードを変更する | ゆうそうとITブログ

内容を要約すると、

1,親テーマのJSフォルダの中にある「all_in_header_fixed.min.js」をコピーする。
コピー先は、子テーマに「js」フォルダを作ってその中に。

2,子テーマ「all_in_header_fixed.min.js」のコードの数値を書き換え

3,子テーマの「function.php」の一番下にコードを追加

となります。

*具体的な内容は上記ブログ記事をご参照ください
*「function.php」のコード追加は慎重に行ってください。
記述ミスがあると画面が真っ白になって泣くことになります。

この3段階の作業でスライドショーの画像表示時間を変更できます。
私の場合は4秒⇒8秒に切り替えました。

残念ながら
◇画像の切替時間
◇切り替わる表現形態(スライド・フェードなど)
この2つに関してはググってみてもカスタマイズの方法が分かりません。

いっそスライドショーごと外してしまって、代わりに「slick.js」や「bxSlider」で実装するという手もあります。

ですが、このシリーズのカスタマイズの趣旨は「サイト運営主自身での更新・修正を可能とする」ということなので、自身で画像を取り替えられるLightningのスライドショーをそのまま使いました。

「診療・受付時間」セクションのカスタマイズ

スライドショーの後は、トップページの3つのセクションをカスタマイズします。

「診療・受付時間」「所在地・地図」「院長略歴」の各セクションです。

それぞれ「その2」の記事で実装しました。

これをCSSで見栄えの良いものにします。

まずは「診療・受付時間」から。
ここはウィジット「カスタムHTML」で実装しています。

中のHTMLコードは以下です。

<div class="top-table table-responsive">
<table class="table table-bordered">
    <thead>
      <tr class="t-info"><th>診療時間</th><th></th><th></th><th></th><th></th><th></th><th></th><th></th></tr>
    </thead>
    <tbody>
      <tr><th class="t-info">9:30~13:00<br>※受付は12:30まで</th><td></td><td></td><td></td><td></td><td></td><td></td><td>×</td></tr>
      <tr><th class="t-info">14:30~19:00<br>※受付は18:30まで</th><td></td><td></td><td></td><td></td><td></td><td>×</td><td>×</td></tr>
    </tbody>
</table>
</div>

コードにはBootstrapのclass「table-responsive」「table」「table-bordered」などを加えてあります。

これに対して、子テーマCSSに以下を追加します。

.top-table th,
.top-table td {
    text-align:center;
    vertical-align: middle !important;
    font-weight:bold;
    }

.top-table td {
    font-size:20px;
    }

.top-table .t-info {
    background-color:#02c676;
    color:#fff;
    }

このように変化しました。

「所在地・地図」セクションのカスタマイズ

2番目に「所在地・地図」セクション。
Googleマップを埋め込んでいます。

ここもウィジット「カスタムHTML」で実装しています。

中のHTMLコードは以下です。

<div class="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3322.9436245082884!2d130.41603891520344!3d33.606767180729676!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x354191d8fea793a9%3A0x7e9137456b77a9fd!2z44CSODEyLTAwNDUg56aP5bKh55yM56aP5bKh5biC5Y2a5aSa5Yy65p2x5YWs5ZyS77yX4oiS77yX!5e0!3m2!1sja!2sjp!4v1503568273855" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

Googleマップの「共有」⇒「地図を埋め込む」で吐き出すコードを、divタグのclass「map」でそのまま挟んでます。

このコードを以下に書き換えます。

<div class="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3322.9436245082884!2d130.41603891520344!3d33.606767180729676!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x354191d8fea793a9%3A0x7e9137456b77a9fd!2z44CSODEyLTAwNDUg56aP5bKh55yM56aP5bKh5biC5Y2a5aSa5Yy65p2x5YWs5ZyS77yX4oiS77yX!5e0!3m2!1sja!2sjp!4v1466754489032" style="border:0" allowfullscreen></iframe>
</div>

「iframe」タグの中から「width=”600″ height=”450″ frameborder=”0″」を削除しています。

Googleマップの幅と高さはCSSで制御するので「width」と「height」は必要無いです。

また、「frameborder=”0″」はそのまま記述するとHTMLのバリデータチェックに引っかかるので、これも削除しています。

そして子テーマCSSに以下を追加します。

.map {
    text-align:center;
    margin-top:0px;
    }

.map iframe {
    width:85%;
    height:500px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    }

@media (min-width: 992px) {

.map {
    margin-top:20px;
    } 
    
.map iframe {
    width:100%;
    height:600px;
    } 
    
}

このように変化しました。

ちなみに、Googleマップの埋め込みに関しては、アクセスの多いサイトは「Google Map APIキー」の取得が必要となりました(2016年6月22日以降作成分のマップのみ)。

詳しくは下記サイトをご参照ください。

Google Mapsの表示にはAPI登録が必須になりました

Google Mapがエラーで表示されなくなった場合の直し方

「院長略歴」セクションのカスタマイズ

最後に「院長略歴」セクション。
女院長のプロフィール欄です。

ここはウィジット「vk_プロフィール」で実装しています。

現状は略歴のテキストが小さく、左に寄ってるので格好悪いです。

しかし、これをセンター寄せにすると、さらに格好悪くなりそうです。

この解消策として子テーマCSSに以下を追加します。

.profile_text {
    border:dotted 1px #e8871e;
    padding:20px 20px;
    border-radius:10px;
    margin-top:30px;
    }
    
@media (min-width: 768px) {
    
.profile_text {
    font-size:20px !important;    
    }
    
}  

@media (min-width: 992px) {

.profile_text {
    padding:20px 30px;
    margin-top:50px;
    }
    
}

略歴の文字サイズを大きくすると共に、枠線で囲みました。

これで見栄えが良くなりました。

今回はここまで

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

スライドショー及び3つのセクションのカスタマズを行いました。

これでトップページのカスタマイズはほぼ完了です。
あとはロゴや各セクション間の間隔などをCSSで微調整するだけなので、ここは割愛します。

さてさて、次回がこのシリーズの最終回となります。
「よくある御質問」ページの作成方法を載せます。

 

ken
Lightningのスライドショーに関しては、どこかのアップデートで修正されるのではと期待しています。

 

関連記事

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

2017.10.16

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

2017.10.02

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

2017.09.25

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

2017.09.18

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