カテゴリー
エッジプラス1テンプレートの質問

Ver2 E003の画像の表示について

お世話になっております。

現在、Ver2 E003でモジュール等分を利用して同じ高さの画像を2枚横に並べて表示させているページがあります。
2枚の画像は、マージン&パディングゼロで並べるべく、モジュール等分から算出した横幅ピッタリでそれぞれ加工しています。

ところが、この2枚の画像が縦も横も微妙に縮小されて表示されてしまい、参っています。
そしてその結果として、2枚の画像の間に17ピクセルの隙間ができているのです(※左画像の左端と右画像の右端には隙間がありません)。

この勝手に隙間ができる事象は、仕様か何かなのでしょうか。

もしそうだとすれば、画像の縮小表示の解消法をお教え下さい。
そうれはなく設定が足りないということであれば、その設定方法をご案内いただけると助かります。

「Ver2 E003の画像の表示について」への9件の返信

念のためにお伝えしますが、画像の縮小に関しては横だけでなく縦も同様です。
また、表示確認はPCのディスプレイサイズでおこなっています。

ちなみに、試しに横幅が異なり高さが同一の画像(こちらも横幅をモジュール等分から算出)を2枚並べて表示させたところ、同様に縮小されたうえに縦(高さ)も異なって表示されています。

これは横幅が異なるためと思われますが、画像の縦(高さ)は揃えたいのでこれでは困ります。
やはり自動縮小を解消したいので、宜しくお願いします。

お世話になっております。
株式会社トータルネットぷらんにんぐサポートチームです。

①2枚の画像間に隙間が出来てしまう件

作成しているページを見てみないと何とも言えませんが
モジュール間の余白はテンプレート上の仕様となっております。

解決策としては

A)2枚の画像を左右結合した状態でアップロード
B) マージンのCSSを特定して、!important;を利用し強制的に解除する

が有効かと思います。
Bに関してはテンプレート自体の改変に当たる為、サポート対象外となっております。
CSSを特定の上、テンプレートファイル内のCSSの書き換えを行って下さい。

②縦横の画像が縮小表示されてしまうという件
モジュール等分のサイズの算出方法ですが、12等分しただけでは正確な値にならない可能性が高いかと思います。こちらも実際にページを見てみないと何とも言えませんが、

A)親のモジュールにマージンが入ってしまっている。
B)デフォルトテンプレートのwrapper部分にマージンが入っている可能性がある

などが原因と考えられます。

レスポンシブデザインの特質上、画像を入れ込んだ際に縦横比を保ったままBOX内で縦横幅を100%化して縮小させて表示をされるという仕様が一般的です。
E003テンプレートに限った事ではありません。

これは、スマートフォンで見た時の解像度による画像の「ぼやけ」を回避する為の
共通の仕様となっており本格的なレスポンシブを意識するのであれば実際の解像度の
2倍~3倍(機種により解像度が異なるのでここは現状、全世界共通で決まった倍数はありません)

iPhoneユーザーが多ければ、iPhoneに合わせるなどの対応が必要です。

以下ページに少し参考になる文献がありましたので掲載しておきます。
http://iphone.f-tools.net/html5/Width-Smart-Phone.html

以上、お手数をお掛けしますがご確認の程よろしくお願い申し上げます。

お返事ありがとうございます。

お返事を読んだところ、2枚の画像の周りに余白ができるのは画像が微妙に縮小されてしまうことが原因だと感じました。
つきましては、この縮小の仕様をパソコン表示時にのみ解除させたい(つまり100%サイズで表示させる)ので、やり方をご案内ください。

ちなみに、以下のお話ですが
————————————————————————————————————–
レスポンシブデザインの特質上、画像を入れ込んだ際に縦横比を保ったままBOX内で縦横幅を100%化して縮小させて表示をされるという仕様が一般的です。
E003テンプレートに限った事ではありません。
————————————————————————————————————–
これは、パソコンで表示させた場合の話ですか?
私はパソコンでの表示の場合について、お尋ねしているのですが。

レスポンシブのテンプレートで、スマホやタブレット端末での表示の場合ならわかりますが、パソコンで表示した場合まで画像が縮小される仕様は他に見たことがありません。
念のために手持ちのレスポンシブテンプレート5種類で作成したサイトを確認しましたが、いずれのテンプレートでもパソコンで表示させた場合画像は縮小されず原寸で表示されています。

再度経緯と質問を整理します。
前提は、サイトをパソコンで表示した場合のみです。

◆画像が勝手に縮小表示されてしまう
◆その結果画像の周囲に隙間ができてしまう
◆パソコンで表示させた場合には画像を原寸で表示させる方法は?
◆パソコンでも画像を自動縮小させているのであれば、それを解除する方法 or 設定は?

以上、宜しくお願い致します。

お世話になっております。
パソコン表示での件との事、承知致しました。

外観→テーマ編集よりstyle.cssを選択して以下を削除をお試し下さい。

//88行目
.dslc-html-module-content img {
height: auto;
width: 100%;
}

//32行目
img, object, embed, video {
max-width: 100%;
}

どちらも必要なタグですが、32行目を削除した場合、スマフォでの横幅100%表示ができなくなってしまいます。その場合は残したままでもご要望通りになる可能性も御座います。

また、テンプレート内の記述削除に関しましては完全サポート対象外となります。
自己責任にてお願い致します。

88行目の削除、88行目と32行目の両方を削除のそれぞれをやりましたが、いずれでも変化がありません。
相変わらず、画像は微妙に縮小されたままです。

他にも、CSSで画像サイズの制御に関連している部分があるのではないでしょうか。

ちなみに、画像はパソコンでは原寸で表示させたいのですが、スマホとタブレットは最適化されるようにしたいので(レスポンシブですから)、その点ご配慮をお願いします。

お世話になっております。
弊社でも同様の作業をさせて頂きましたが、
画像の等倍サイズでの表示には成功しております。

また、これ以外にCSSで管理している部分があるとすれば何らかの設定・プラグイン側の問題かブラウザキャッシュ等の問題が考えられます。

実際にサイトを見てみないと何とも言うことができませんので該当ページのURLを別スレッドもしくはお問い合わせフォームより拝見させて頂く事は可能でしょうか。

お手数をお掛けしますが、ご確認の程よろしくお願い申し上げます。

サイトを見ていただき、結局「12ラインシステムの都合上、プラグイン側のCSSが効いてしまっており左右に分ける事はCSSに関する深い理解がない限り難しい」との結論でしたが、“左右に分ける事”云々ではなくパソコンで表示させた場合は画像が縮小されないようにしたいだけです。
12ラインシステムでも縮小されないようページ全体の横幅および画像2枚の横幅すべてを計算したうえで作成していますから、本来であればパソコンで表示した場合画像は縮小されないはずなのです。

パソコンで表示させた場合も画像が縮小されるのは、“幅●%、高さ○%”といったようにスタイルシート等で制御されているからでしょうか。
それとも、スタイルシート等で強制的にマージンを入れるよう指示されているがために画像が縮小表示されてしまうのでしょうか。

また、9月10日の発言では“弊社でも同様の作業をさせて頂きましたが、画像の等倍サイズでの表示には成功しております。”とありますが、メールでいただいた前掲のご回答とだいぶ内容が異なっています。
この際には、どのような条件で原寸表示を実現したのでしょうか。

同じように12ラインシステムが導入されている環境であるにもかかわらず原寸表示を実現できたのであれば、私でも再現性があるはずです。
ぜひ実現できた環境ややり方を、ご教示ください。

コメントを残す