MARBLE自体は素敵なデザインのテーマなのだけど、お客様からちょいちょいカスタマイズしてほしいという依頼があって、色々苦労して微調整したのでメモ。

今回の依頼は２点。

「トップページのスライダーを微妙に大きくしてほしい」

「スマホ用のスライダー画像用意しちゃったんでなんとかPCとは別に使いたい」

ってことで、おおう結構デフォルトの仕様と違うぞ、、、と思いながら探ってみた。

MARBLEのトップページスライダーは、JQueryのflexsliderを使っている。これ自体レスポンシブに対応してる素晴らしいスクリプトなので普通はこれで十分使えるのだけど、どうしてもカスタマイズする必要がでたので。

スライダーを微妙に大きくするには

スライダーは、フルワイドでない場合はコンテンツ幅に合っているのですが、これをちょびっと大きくしたいということであれば、

#flexslider.container-inner{max-width:1300px;}

みたいに数値を指定するだけで幅を広げたりできます。あんまり使うことないかもしれないけど。

 

スライダーにスマホ専用のトップ画像を使いたいということであれば。。。

私の知識が乏しいのできっともっといい方法はあると思うけど、とりあえずそんなに予算かけたくないってことで簡易的な対処方法で。

子テーマのheader.phpの中からスライダー用にfeatured.phpファイルを呼び出しているので、直接いじるのはこのfeatured.phpファイルです。

因みにこの方法を使うと、テーマオプションで画像を追加しただけでは表示されなくなります。なぜならそのプログラム部分を削除してしまうからです（え）

まず、テーマオプションからスライダー画像を表示したいだけ挿入して反映させた状態で、サイトのソースを表示させます。

そこから

<ul class="slides">~~~~~~</ul>

までのソースをまるっとコピー。feature.phpの中の該当部分に上書きしてしまいます。だから、オプションが使えなくなるのです。静的ソースに変えちゃうからね。

たとえば、３枚画像を追加した状態なら、このソースの中に<li></li>部分が３箇所入っていると思います。なるほど、この一つ一つのリストに背景画像として追加画像を表示させているというわけですか。

なので、この背景画像部分をclass指定してしまえば、レスポンシブで違う背景画像が表示できるというわけ。

デフォルトでは、style="background-image:urlとして出力されていますね。ここでオプションの画像を読み込むようになっているのですが、今回はこいつを削除し、それぞれのリストに連番でclass名を付加して直接CSSから表示するようにします。

<li class="slide-child01"></li>

<li class="slide-child02"></li>

<li class="slide-child03"></li>

という感じにします。おわかりだろうか、あとはこの３つのクラスに、レスポンシブのブレイクポイントごとに違う背景画像を指定すればいいだけです。

これで、PCのスライダー画像とは違う画像をスマホで表示することができるようになりました。

結構強引なやり方ですけどね。

あ、でもこのカスタマイズをしても、高さの指定はちゃんとテーマオプションからできるのでそこは助かります。