[ 解決済 ] JPNSTYLEでトップページスライドショーでボタンの文字が完全に隠れてしまっています。

[With閲覧者]

トップページスライドショー
で設定した項目をもっと上に移動したい。
特にボタンの文字が完全に隠れてしまっています。
スライド画像は写真サイズの4:3で表示しています。
※画像が横長でも写真サイズでも以下の項目は
隠れないようにしてほしい。

・スライドタイトル（任意）
・スライドテキスト（任意）
・ボタンの文字（任意）

どうぞ宜しくお願いします。

[With閲覧者]

スライドショーの追記で
スライド画像によりますが
タイトル・テキストがとても見えずらいです。
文字の影の色（任意）を使用してもきれいに見えません。
透明度のある背景枠（四角など）に色を付けて
文字を入れられるようにすると良いと思います。

どうぞ宜しくお願いします。

[With閲覧者]

追記：JPNSTYLEを使用しております。

どうぞ宜しくお願いします。

//////////////////////////

トップページスライドショー
で設定した項目をもっと上に移動したい。
特にボタンの文字が完全に隠れてしまっています。
スライド画像は写真サイズの4:3で表示しています。
※画像が横長でも写真サイズでも以下の項目は
　隠れないようにしてほしい。

・スライドタイトル（任意）
・スライドテキスト（任意）
・ボタンの文字（任意）

どうぞ宜しくお願いします。

[kurudriveキーマスター]

ちょっとののような状況になる状況がよくわかりません。
スライドテキストの文字量非常にが多いとかでしょうか？

スライド画像によりますが
タイトル・テキストがとても見えずらいです。

こちらは スライドに被せる色 (任意) と スライドに被せる色の濃さ で調整してください。
テキスト部分だけの背景などは、機能として追加すると設定項目が多くなりすぎて使いづらくなると思うので個別にCSSカスタマイズにて対応ください。

• この返信は3 ヶ月前に  kurudrive さんが編集しました。

[With閲覧者]

ご連絡を頂き、誠にありがとうございます。
「ヘッダー画像中の
タイトル、テキストの文字と
ボタンの位置が下過ぎて隠れています。」の件。

Google Crome、Internet Explore共に
見て頂いた方が分かりますのでお伝えします。
「有償製品に関するお問い合わせ」から
サイト先をお伝えします。

何卒、宜しくお願い致します。

[kurudriveキーマスター]

## 症状について

デザインスキン JPNSTYLE 利用時に縦横比が正方形に近い横長の画像を設定し、
横長のウィンドウサイズで閲覧した際に発生

## 原因

現行のLightning ではスライドの縦横比をユーザーが決めやすいようにスライドでのトリミングは行っておらず、アップロードした画像の縦横比のままとなる。
その縦横比でスライド上の文字などは上下中央に配置されるが、JPNSTYLE に限ってはスライドが固定なため、文字やボタンが下部に隠れるという症状が発生する。

## 解決に対する検討

■ スライド画像を上を添えにして画面下にはみ出している部分をトリミングすれば可能。しかし、上下中央にしたいという声も出るので下部をトリミングするのか画像を上下中央配置で上下はみ出し分をカットするのか選択機能をつける必要がある
（この対応はさほど難しくない）しかしながら…
■ 画面の表示エリアを基準にしたスライドエリアのトリミング方法にすると画面幅が狭い時にスライドの表示エリアは縦長になる。
　□ 表示横幅に併せてスライド画像を縮小すると下の部分に元の画像の高さ以上の空白ができる
　→ これを回避するためのモバイル時に縦長の画像をユーザーが指定する
　→→ どの画面サイズでも問題ないように調整するにはPC・モバイル両画像の縦横比をいろいろ試す必要がある
　→→→ 今の仕様のままカスタマイズ画面に記載の推奨サイズの画像をPC版用に用意して貰うのと本質的にかわらない
□ 表示横が狭い時に表示横幅からはみ出る左右部分をトリミングする
　→ 画面全部が入る前提で画像を用意して既に利用しているサイトで、左右が切れるようになるのでユーザーから苦情がくる

と、いう事情で、いろいろと技術検証しましたが、今の段階で仕様変更はできません。
変更するとしたら、Bootstrap4対応版などを出すタイミングで根本的に表示領域に応じて自動で上下左右をカットする仕様に変更するというような対応になります。

推奨サイズよりも縦サイズの大きい画像を使いたい場合は、CSSを外観 > 追加CSSなどに記載してください。

@media ( min-width:992px ){
	.slide picture {
		width:100%;
		height:85vh;
		display:block; overflow:hidden;
	}
}

• この返信は3 ヶ月前に  kurudrive さんが編集しました。
• この返信は3 ヶ月前に  kurudrive さんが編集しました。

[With閲覧者]

CSS追加でタイトル、テキストの文字を中央に
設置することが出来ました。

誠にありがとうございました。

[投稿者]

投稿