WordPressテーマ「Lightning」をカスタマイズ（その８）スライドショーの調整・他

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

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

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

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

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

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

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

【2017/12/6追記】
Lightningのバージョン4.1.0アップデートにより、スライドショーの表示時間調整機能が実装されました。

＊Lightningでスライドショーの表示時間を変更する

よって本記事中の表示時間カスタマイズに関する記述は現状に合ってません。
そこの部分は飛ばして読んでください。

～目次～

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

Lightningのスライドショー

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

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

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

さて、このLightningのスライドショーには２つの特徴（欠点？）があります。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

＊Lightningデモサイト

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

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

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

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

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

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

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

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

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

＊Lightning Charm | 拡張機能

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

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

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

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

内容を要約すると、

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

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

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

となります。

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

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

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

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

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

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

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

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

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

これを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;
    }

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

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

２番目に「所在地・地図」セクション。
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;
    }
    
}