yuuuk asked 4年 前
はじめまして。
メイン画像についての過去の質問を拝見しつつ、Landscapeでのトップ画を「3:4」に画像編集し直したり、htmlコードを編集して左寄せにしてみようとしたりしましたがモバイル表示に関しては「これだ！」という解決方法に至っていません。
１）こちらの質問にある、251行目付近の「</head>」前にhtmlコード貼り付けをし、左寄せにしようとしましたが反映されません。（実際には251行目にはなく、260行目付近に「</head>」があったのでその直前に貼ったのですが。）その付近のhtmlを貼っておきます。
２）左寄せが成功したら少しよくなるかなと思うのですが、そもそも使いたい写真的には一部が切り取られることでモバイル時に上質なトップ画とはなりそうにありません。
もし仮に、htmlコードを追加することで、「16:9」の比率の画像を別途アップロードし、モバイル表示時に適用することができるのだとしたら是非やりたいのですが、そういったことは可能でしょうか？
このテーマではトップ画はPC表示時に重きを置いてデザインされていると思われ、もちろんPC表示時のクオリティを崩したくはないのですが、現状、PCよりモバイルで見る方の方が圧倒的に多いと思うので、モバイルでの表示時のクオリティも落としたくありません。
よい解決法が無いかなと思って質問させていただきます。
どうぞよろしくお願いいたします。
BaseDesignInfo Staff answered 4年 前
ご質問ありがとうございます。
いくつかのご相談が混在しておりますので、一度現状を確認できるURLをお知らせいただけますでしょうか？追加されたというCSSが反映されない理由は分かるかもしれません。
よろしくお願いいたします。
BaseDesignInfo Staff answered 4年 前
ありがとうございます。
とても素敵サイトで、トップの写真も素晴らしく良いですね。
まず(1)について、参照されたトピックは1枚の固定画像の場合のコードであったため、スライド状態では反映れないというのが原因です。
スライドの場合はこのようになります。
ul.slides li { background-position: left !important; }
もし画像1つ1つで指定を変えたい場合は
ul.slides li.first { ... }
ul.slides li.second { ... }
とすることで、画像ごとに指定を変えることもできます。
（「background-position」というCSSでは「left」以外にも左右中央など様々な指定が可能です。どんなことが可能なのかは、一般的なCSSの知識の領域となるためCSSの参考書や情報サイトなどをご参照ください。）
現状では写真自体が横長の構図のため、これを縦長で配置するということは難しいかと思いますが、拝見した感想としてはスマホ状態でもむしろ良く見えているようにも感じます。
1枚目は全体が見えないことが、2枚目は上部に大きな余白ができることで被写体、そしてロゴが引き立っているように見えます。
「スマホ用の画像もアップロードしておき、PCかスマホで切り替わるようにする」も、もしHTMLに習熟されており、BASEのカスタマイズも可能という方であれば不可能ではありません。
ただ現状の写真の良さから思うに、現状でもとても良くまとまって見える為、CSSでの位置微調整で対処されればそれが最も良いのではと思います。
客観的な感想も入っていますが、参考にしていただけたらと思います。
どうぞ宜しくお願いいたします
yuuuk
replied 4年 前 早速のご回答ありがとうございます！
写真についてもお褒めいただき光栄です。
スライド状態での指定方法について、ご教示いただきありがとうございます。
試してみましたが、私がコードをはめ込んだ場所が間違っているのかまだ反映されず、、、
（コードを貼るとスパムとされてしまうかもなのですが）
下記に間違っている箇所はございますか？
#MainVisual span
ul.slides li.first { background-position: left !important; }
ul.slides li.second { background-position: left !important; }
ご指摘いただいたモバイル表示での写真も悪くないのではというご意見、
なんだか自分に無い視点だったのでとても新鮮でした。
あまり原画にこだわらずに現状を活かせる形で、モバイル表示の着地点を探ってみます。
ありがとうございました！
＆よろしくお願いいたします。
BaseDesignInfo Staff answered 4年 前
少し修正させてください。「#MainVisual span」は1枚画像用なので取り除き、次のようになります。
ペーストする場所は合っていますので、今のを一旦削除して、次の4行をそのままコピーペーストしてください。
<style type="text/css">
ul.slides li.first { background-position: left !important; }
ul.slides li.second { background-position: left !important; }
</style>
yuuuk
replied 4年 前 「#MainVisual span」を取り除き、
上記2行をコピーペーストしました。
が、残念ながら左には寄らないようです。。
「4行」と書かれているということは、表示されてない別の2行があるのでしょうか？
↓ カギ括弧は除いてご覧ください。
「 {BackgroundTag}」
「 {GoogleAnalyticsTag}」
「」
「ul.slides li.first { background-position: left !important; }」
「ul.slides li.second { background-position: left !important; }」
「」
「」
yuuuk
replied 4年 前 再度コメント失礼します。
上の投稿後に、見えなかった2行が見えるようになりました。
そちらを貼り付けた所、モバイル表示で左寄りにすることができました。
大変お手数をおかけしましたが、丁寧なご対応のおかげで問題を解決することができました。本当にありがとうございます。
画像も少し修正しつつ、ベストな形に持っていけるようにしてみます m(_ _)m
同一の投稿が大量に送信されておりスパム判定されておりますので、一度お待ちいただければと思います。HTMLコードをそのまま貼り付けることもエラーの原因となる場合がありますので削除し、内容確認でき次第お返事させていただきます。
スパム判定されていたとのこと、大変失礼いたしました。
自分の画面では投稿されたことが確認できていなかったため、原因と思われるものを修正しつつ何度かトライしていました。ご確認ありがとうございます。