トップページのメイン画像(デフォルトはグレー画像)をオリジナル画像に設定する

トップページのメイン画像は初期設定では、

サイズ:960x300pxの背景グレーの画像[/mt-static/support/theme_static/eiger/images/mainimage-sample.png]が表示されている。

この画像をオリジナル画像に変更する。

まずはじめに、デフォルトメイン画像と同じサイズで設定を行ってみる。

  1. メニュー[アイテム] > [新規]
  2. [ファイルを選択]をクリックして、画像をアップロードする。
  3. アップロードした画像アイテムをクリックし、[タグ]フォームに、@SITE_MAIN_IMAGEと入力し、[変更を保存]をクリックする。
  4. インデックステンプレートを再構築する。

トップページ画像の設定方法

このタグの変数設定により、メイン画像が表示されるようになる。(現在のトップページメイン画像である)

次にデフォルト画像サイズよりも大きめの画像を挿入してみた。

1024x680pxの写真を設定した場合。

ブラウザを960px以上にしている場合、横幅は960pxに縮小され、縦横比を保ち縦幅は638pxとなって表示される。

幅960px以上のブラウザで

左 960x300px 右 1024x680px(実際の表示サイズは960x638px)

メイン画像の縦横サイズ2種類の比較

スタイルシートで確認するとわかるが、マニュアルには画像サイズの指定はされていないが

メイン画像のサイズは幅960px以上、縦は任意(300px前後)が推奨ではないかと思われる。

?

※rainerテーマのメイン画像の場合は、
メイン画像に挿入する画像サイズは推奨サイズという設定があり、実際に表示される大きさ(縦横サイズ)は固定されており、固定幅より大きいサイズの画像を挿入しても、一部分が表示(中央部分)される仕様になっており、タグ挿入の方法は同じであるが、CSSの設定方法が異なっている。