soukenWordPressテーマ「Lightning」をカスタマイズ(その8)スライドショーの調整・他ツイートシェアはてブ送るPocket「Lightning」は株式会社ベクトルが開発した無料のWordPressテーマです。シンプルでカスタマイズしやすいBootstrapベースのWordPress公式テーマ前回に引き続き、Lightningのカスタマイズ「その8」。今回はスライドショーの調整と3つのセクションのカスタマイズです。前回はここまで進行しました↓これを最終回までに、以下の状態にまでカスタマイズします。北福岡駅より徒歩2分の痛くない歯医者(架空のサンプルサイトです)【2017/12/6追記】Lightningのバージョン4.1.0アップデートにより、スライドショーの表示時間調整機能が実装されました。*Lightningでスライドショーの表示時間を変更するよって本記事中の表示時間カスタマイズに関する記述は現状に合ってません。そこの部分は飛ばして読んでください。セクションのカスタマイズ「所在地・地図」セクションのカスタマイズ「院長略歴」セクションのカスタマイズ今回はここまでLightningのスライドショーこの歯科サイトのスライドショーには「その2」の記事で画像を設定しました。モバイル用の画像は入れず、以下のPC用画像のみを4枚入れてます。ちなみに、2017/10/28のアップデートにより、スライドショーの画像上にテキストや半透明色を表示できるようになりました。(本サイトでは、文字は画像組み込みで済ませてます。)さて、このLightningのスライドショーには2つの特徴(欠点?)があります。Lightningスライドショーの特徴「1」まず、PC用画像とモバイル用画像の峻別が曖昧なことです。「PC用画像4」の4枚の画像を設定したとします。モバイル用には2枚の画像を設定したとします。「PC用画像4」この4枚の画像がスライドされます。(^_^;)スマホでは2枚のモバイル用画像のみでスライドしてほしいのに。PCでは4枚の画像をスライドさせ、スマホでは1枚の静止画像のみ、なんてことはできません。「PC用画像4」この順でスライドショーになってしまいます。PC表示・スマホ表示共にまともにスライドショーを表示したければ、PC用のみに限定するか、双方に同数の画像を設定するしかありません。謎仕様、説明するだけでややこしいですね・・ちなみに、スライドショーのPC表示とモバイル表示は画面幅で切り替えています。特徴の2番目は、スライドショーの画像表示時間と切替時間が短すぎること。公式のデモサイトを見てもらえると分かりますが、*Lightningデモサイトパカッパカッパカッと4秒間隔で切り替わります。なんでしょうね、このせわしなさは。企業や店舗サイトとしては合わない業種も多いと思います。・まったりした内容、たとえば和風温泉旅館のサイトとか、福祉施設のサイトとか、このパカッパカッパカッでは納品できません。スライドショーには主な調整点が3つあります。◇切り替わる表現形態(スライドやフェードなど)Lightningのスライドショーはこの3つは固定です。切り替わりはスライドのみでフェードなどには出来ません。すごく使いづらいですね。スライドショーのカスタマイズでは、このスライドショーをカスタマイズします。画像の表示時間を変更します。一応、公式の有料プラグインを購入すれば、変更は簡単にできます。拡張機能ちなみに価格は6,980円(税込)です。無料にこだわりたければ自力でカスタマイズするしかないですね。スライドショーのカスタマイズはJS(JavaScript)をいじらないといけないので、JS苦手な私としては今回は他のブログさんの知恵をお借りしました。ありがとうございます。ゆうそうと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」で実装するという手もあります。それぞれ「その2」の記事で実装しました。これをCSSで見栄えの良いものにします。ここはウィジット「カスタムHTML」で実装しています。中のHTMLコードは以下です。</tbody></table></div>コードにはBootstrapのclass「table-responsive」「table」「table-bordered」などを加えてあります。これに対して、子テーマCSSに以下を追加します。セクションのカスタマイズ2番目に「所在地・地図」セクション。Googleマップを埋め込んでいます。ここもウィジット「カスタムHTML」で実装しています。中のHTMLコードは以下です。allowfullscreen></iframe></div>Googleマップの「共有」⇒「地図を埋め込む」で吐き出すコードを、divタグのclass「map」でそのまま挟んでます。このコードを以下に書き換えます。frameborder=”0′′」を削除しています。Googleマップの幅と高さはCSSで制御するので「width」と「height」は必要無いです。「frameborder=”0′′」はそのまま記述するとHTMLのバリデータチェックに引っかかるので、これも削除しています。子テーマCSSに以下を追加します。}このように変化しました。APIキー」の取得が必要となりました(2016年6月22日以降作成分のマップのみ)。詳しくは下記サイトをご参照ください。「院長略歴」セクションのカスタマイズ最後に「院長略歴」セクション。女院長のプロフィール欄です。ここはウィジット「vk_プロフィール」で実装しています。現状は略歴のテキストが小さく、左に寄ってるので格好悪いです。これをセンター寄せにすると、さらに格好悪くなりそうです。この解消策として子テーマCSSに以下を追加します。}略歴の文字サイズを大きくすると共に、枠線で囲みました。これで見栄えが良くなりました。今回はここまでさて、ここまでのカスタマイズ結果です。スライドショー及び3つのセクションのカスタマズを行いました。これでトップページのカスタマイズはほぼ完了です。あとはロゴや各セクション間の間隔などをCSSで微調整するだけなので、ここは割愛します。次回がこのシリーズの最終回となります。「よくある御質問」ページの作成方法を載せます。kenLightningのスライドショーに関しては、どこかのアップデートで修正されるのではと期待しています。「ランサーズトップ本格始動」他RECOMMENDこちらの記事も人気です。Unlimited」で良書を探してみた:まとめページランサーズ定点観測:まとめページランサーズでWEBデザイナーが仕事を受注するには?:まとめページカラーミーショップにてサイト制作中:まとめページschoo授業感想:まとめページブログ主プロフケンです。