ジャパニーズMANGA：スマホ表示時のトップ画像の表示位置を調整したい場合

こんにちは、ガタガタです。

テンプレート「ジャパニーズMANGA」について、以下のようなお問い合わせがありました。

同様のことでお悩みの方がいらっしゃるかもしれないので、ご相談には個別にメールで回答するとともに、サイトでもカスタマイズ方法を紹介することにしました。ぜひ参考にしてください。

コードをstyle.css最下部に追記します

追記するのは、次のコードです。

@media (max-width: 766px) {
#title img {
object-position: 50% （ここに好きな値）;
}
}

「ここに好きな値」の部分を、0%～100%の間でイラストに合うように書き換えてください。ふたつの値の間は、半角スペースで区切ります。

以下、コードの内容を解説します。

画面横幅が766px以下の時に適用します

@media (max-width: 766px) {　…　}　という記述は、「画面の横幅が766px以下のときだけ、次のコードを適用します」という宣言です。

当サイトのテンプレートは、全て画面の横幅に応じてレスポンシブ対応を行っています。

ちなみに、パソコンでもウインドウの横幅を小さくすると、上記のコードで書いたCSSが適用されます。レスポンシブ対応の確認をしたいときはご活用ください。

画像の表示基点位置を調整します

object-positionとは、imgタグで画像を表示するとき、表示の基点となる位置を指定するプロパティです。

object-position: 横方向 縦方向;

初期値では、object-position: 50% 50%;　で、縦横いずれも中央が基点になっています。

「ジャパニーズMANGA」では、PCでの表示に合わせて縦に長い画像を使うと、スマホで表示したときに中央部分だけがトリミングされるため、一番見せたい部分が見切れてしまう場合があります。

そこで、object-positionの縦方向の値を0%～100%の間で調整すれば、一番見せたい部分がちょうど表示されるようにカスタマイズできます。

人物の立ち絵などをお使いの場合は、20%～40%くらいの値にすれば、ちょうど顔のあたりが表示されるかと思います。

スマホ表示時にもっとイラストを広く見せたい場合

style.cssの243行目前後に、以下のような記述があります。

@media (max-width: 766px) {
  #title {
    ～中略～
    height: 150px;
    ～中略～
  }
}

この「150px」の値を大きくすれば、スマホで見たときの画像表示がもっと大きくなります。

その他、お困りごとがあればお気軽にご相談ください

「do」は、サイトを自作したい方のサポートをできるだけ行っていく方針です。テンプレートのカスタマイズについて、調べてもわからないことがあればお気軽にご相談ください。

今回のように、他の方にとっても有益なカスタマイズ情報であれば、サイト上でも公開していきます。

今後ともよろしくお願いいたします！