WordPressレスポンシブサイトにおいて、「文字が潰れる」現象を起こさないように文字入りスライドショーを作る方法

2019年1月14日　基本として利用するスライドショープラグインを『MetaSlieder』に変更いたしました。

私どもがWordPressサイト制作案件を承るとき、私どもはトップページに限り、スライドショーを無料設定させていただいております。スライドショーは、『Slideshow』というプラグインを使わせていただくことが多うございます（他のプラグインを使わせていただくこともあります）。

ご注意いただきたいのですが、私どもの公式サイトrainbow-link.com上で動いているスライドショーは、私どもが開発した『アールリンカー』というソフトウェアで動いています。私どもの公式サイトはWordPressでは動いていないのです。私どもの公式サイトは、『レインボーリンク』という私どもが開発したソフトウェアで動いています。『アールリンカー』は、『レインボーリンク』に付属しているスライドショーソフトウェアです。私どもは、WordPressプラグインを開発したり、WordPressサイト制作案件を承ったりしておりますので、WordPressサイトを動かすため、海外にサーバーを借りて、デモサイトを制作しています。プラグイン『Slideshow』の動きをご覧になりたいかたは、私どものWordPressデモサイトにてデモをご覧ください。

スライドショープラグイン『Slideshow』を使うと、管理画面で、スライドショーを管理することができます。

スライドショーの表示を決める場所は、

• Image behaviour
• スライドショーの幅を縮めたら高さも縮める
• レスポンシブを有効にする（ページ幅を縮めたらスライドショーの幅も縮める）

というところです。これらを組み合わせてスライドショーの表示状態を変更します。通常は、この組み合わせでスライドショーをきれいに表示することができます。

「スライドショーの幅を縮めたら高さも縮める」で「はい」を選択し、「レスポンシブを有効にする」で「はい」を選択後、アスペクト比を適切に定めたが、アスペクト比が効かず、スライドショーが表示されない場合、どうしたらよいか。

テーマの作りやインストールしているプラグインとの衝突などで、アスペクト比が効かずにスライドショーが表示されないことがあります。この場合は、「スライドショーの幅を縮めたら高さも縮める」を「いいえ」にして、高さをPC表示時の最適な高さに合わせます。

「PC表示時の最適な高さ」は、通常、ご用意になった画像の高さです。

次に、Image behaviourを設定します。

Image behaviourには、三つの選択肢があります。

「Natural and centered」「Stretch to fit」「Crop to fit」です。

御社がご用意なさった画像に文字が入っている（以下「文字入り画像」）場合で、新規またはリニューアルする予定のWordPressサイトがレスポンシブデザインである場合、３つの選択肢から選択すると、それぞれの選択時に、次のような問題が生じます。

「Natural and centered」をご選択になると、レスポンシブ時に画面を縮めたときやスマホで表示したときに、画像が小さくなりすぎてしまうという問題が生じることがあります（画像の横幅によりますので、一概には申せませんが）。

「Stretch to fit」をご選択になると、文字が潰れるという問題が生じる場合があります（文字を画像全体に広げていない場合は生じないこともありますが。また、この問題はあらゆるブラウザーに同一画像で画像処理する場合によく見られる現象なので、そもそも問題にしないかたもおられます）。「文字が潰れる」と申しましたが、文字だけでなく、画像の「模様」も歪みます。

「Crop to fit」をご選択になると、レスポンシブ時に画面を縮めたときやスマホで表示したときに、画像が全部表示されないという問題が生じます。

「文字入り画像でスライドショーを作りたい場合で、高さをPC表示版に固定せざるを得ないとき」、上記のような問題を乗り越え、レスポンシブ適応させるためにはどうしたらよいか。

解決方法：　PC用とスマホ用とで表示するスライドショーを分ける。

スライドショープラグイン『Slideshow』の管理画面で「PC表示用スライドショー」と「スマホ表示用スライドショー」の二種類のスライドショーを作成します。PC用のスライドショーを複製して、「スライドショーの高さ」を変更することで「スマホ表示用スライドショー」を作ります。

PCで画面を縮めた時は、「PC用スライドショー」が表示されます。そのため、スライドショーの下に、「PC用画像の高さ」 - 「PC用画像の高さでスマホ表示したときに描画された高さ」の空白が生じます。

この解決方法は、テンプレートで処理をする（　PHPを書く　）処理になります。従いまして、御社が「プラグイン付属のショートコードを使って、管理画面内でスライドショーを処理」することはできなくなります。

私どものお客様ではないかたへ： 御社が業者を使っておられない場合は、難しい処理になるかもしれません。

「テンプレート処理はしたくない（できない）。よって上記解決方法は採用することができない」というお客様へ

それでは、別の解決方法をご提案いたしましょう。「文字入り画像」を破棄できますでしょうか？

「文字入り画像」を破棄することができる場合、ご提案する解決方法は次のとおりです：　”「文字入り画像」を破棄し、画像から文字を抜いたものをアップロードして、スライドショーの管理画面の「説明文」を利用して文字を画像に動的に載せるようにする”

この解決方法は、画像を内製されており、著作権者と特に連絡を取り合う必要がない場合に、おすすめする方法です。文字のスタイルは、スタイルシートで変更することができます。

Image behaviourで、「スライドショーの幅を縮めたら高さも縮める」で再度「はい」を選択してください。