2018-07-06 (Fri) 23:06 ✎

al_responsive のカスタマイズ（トップ画像変更）

トップ画像の変更方法です。
背景画像を横幅100%でレスポンシブ対応させる方法は幾つか有りますが、パーセント指定と背景画像変更② でのbackground-size:contein; を使った方法です。
background-size:cover; では、画像の幅と高さの比率を固定して領域を覆うように表示されますが、はみ出した部分は表示されません。
background-size:contain; も画像の幅と高さの比率を固定しますが、表示領域が変更された場合でも画像が全て表示されます。

テンプレートの管理画面下段の [ al_responsive〇c ] のスタイルシート編集枠内
スクロールすると1/4手前位に下記のような箇所が有ります。

/* トップ画像 */
.topimg{
  height:0;
  padding-top:21.64%; /* 表示したい画像の比率（縦サイズ÷横サイズ×100） */
  margin:0 10px;
  background:url('アップロードした画像のURL') no-repeat;
  background-size:contain;
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
}

高さを0に指定してpaddingで高さを出し、背景の表示領域を確保します。
paddingの高さはパーセント指定で、
表示画像の高さ(縦サイズ）÷表示画像の幅（横サイズ）×100
という計算式で求めます。
（青文字の部分は表示したい画像のアップロード先URLを入れて下さい。）

パーセント指定をすることでブラウザのサイズに合わせて高さが変わるようになり、background-size:contain; で表示領域に画像が全て表示されるようになります。
元画像のサイズによっては、高さ(縦）が高くて記事部分が随分と下がってしまったり、幅(横）が足りなくて画像が引き延ばされて画質が荒くなることが有りますので、色々試してみて落ち着くサイズを探してみて下さい。m(__)m
（因みにテンプレートで使用している画像のサイズは 670px×145px です。）

↻2021-12-23

* Category：カスタマイズ

* Comment：(0) * Trackback：(0) * △

al_responsive のカスタマイズ（トップ画像変更）

Comments

Trackback