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

E004 スマホ表示の時だけ、画像を中央表示にしたい

ご利用のテンプレート:E004
ご利用のサーバー:エックスサーバー
お客様のスキル:HTML・CSSを勘で数値など変える程度
ご質問内容:

初心者的な質問ですいません。

現状で画像を

画像

のようにして文字回り込みさせますと、

PCではバッチリなのですが、
iphoneで表示すると文字が横に寄って読みづらくなってしまいます。
(※添付画像参照)

これをスマホ表示にした際に
画像のみ中央表示で、文字は回り込みせず下から表示されるようになりませんでしょうか?

自分で何度もいじってみたのですがうまくいきません。
お手数おかけしますがよろしくお願いいたします。

「E004 スマホ表示の時だけ、画像を中央表示にしたい」への2件の返信

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

http://www.eugene08.com/column/%E3%83%95%E3%82%A1%E3%82%B9%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0%E3%81%AB%E5%AF%BE%E3%81%99%E3%82%8B%E5%BF%83%E6%A7%8B%E3%81%88/
↑ 弊社サイトですが、このような動きにしたいということでよろしかったでしょうか?

このように画像の配置替えみたいなことをするには、
Media Queries(メディアクエリ)という方法(cssの記述)を使わないと
そのような配置にはなりません。
例にあげた弊社サイトはcssを追加しています。

レスポンシブサイトはメディアクエリで作られています。

幅480pxまで → スマートフォンサイズ
幅481px~768pxまで → タブレットサイズ
幅769px~ → パソコンサイズ

として設定をして、
例えばスマホサイズのときは画像サイズ幅100%にし、中央に配置。
タブレット以降は、画像を幅35%にし、float:left(左寄り)に配置

などといったcssを書き込まなくてはいけません。

他社のテーマでは投稿画像もすべてメディアクエリで制御していたりしますが、
いろいろな配置にしたいときにでも同じような配置になってしまうので、
E004などではそのようなcssにしていません。

サンプルとしてcssを掲載します。

コレをstyle.cssの一番下にでも追加してアップしてください。
もしくは管理画面の投稿ページのカスタムcssのフィールドに追加してください。
追加方法がご自身のお好きなように(やりやすいように)お願いします。

上のように、投稿画面の「テキスト」でタグを書き込んでください。

作成してあったcssがあったので記載しましたが、
本来はお客様の質問に対するcssの作成やレイアウトの構築、カスタマイズをしていません。
ですので、もし「違う画像サイズにしたい」「タブレットのときは違う動きにしたい」などというときは、
ご自身でカスタマイズしてくださいますようよろしくお願いします。

詳しい説明ありがとうございました!
お教えいただいたCSSをサイトに合うようカスタマイズしたところ
希望したとおり見栄え良く表示できるようになりました。
かなりうれしいです。ありがとうございました。

コメントを残す