「Lightning」は株式会社ベクトルが開発した無料のWordPressテーマです。
*Lightning シンプルでカスタマイズしやすいBootstrapベースのWordPress公式テーマ
前回に引き続き、Lightningのカスタマイズ「その8」。
今回はスライドショーの調整と3つのセクションのカスタマイズです。
前回はここまで進行しました↓

これを最終回までに、以下の状態にまでカスタマイズします。
*北福岡歯科クリニック | 北福岡駅より徒歩2分の痛くない歯医者
(架空のサンプルサイトです)

【2017/12/6追記】
Lightningのバージョン4.1.0アップデートにより、スライドショーの表示時間調整機能が実装されました。
よって本記事中の表示時間カスタマイズに関する記述は現状に合ってません。
そこの部分は飛ばして読んでください。
~ 目次 ~
- 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番目は、スライドショーの画像表示時間と切替時間が短すぎること。
公式のデモサイトを見てもらえると分かりますが、
パカッパカッパカッと4秒間隔で切り替わります。
なんでしょうね、このせわしなさは。
なので、企業や店舗サイトとしては合わない業種も多いと思います。
のんびり・まったりした内容、たとえば和風温泉旅館のサイトとか、福祉施設のサイトとか、このパカッパカッパカッでは納品できません。
スライドショーには主な調整点が3つあります。
◇画像の表示時間
◇画像の切替時間
◇切り替わる表現形態(スライドやフェードなど)
Lightningのスライドショーはこの3つは固定です。
切り替わりはスライドのみでフェードなどには出来ません。
すごく使いづらいですね。
スライドショーのカスタマイズ
では、このスライドショーをカスタマイズします。
画像の表示時間を変更します。
一応、公式の有料プラグインを購入すれば、変更は簡単にできます。
ちなみに価格は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で微調整するだけなので、ここは割愛します。
さてさて、次回がこのシリーズの最終回となります。
「よくある御質問」ページの作成方法を載せます。

Lightningのスライドショーに関しては、どこかのアップデートで修正されるのではと期待しています。
この記事は内容が古くなっています。
最新バージョンのLightningと合わない箇所が多々あると思います。
新しいLightningによるサイト制作シリーズはこちらから。