THE THOR のメインビジュアル の基準位置を変更するカスタマイズを行いました。
例えば「メインビジュアルの左上にロゴを表記」した場合、画面サイズにより切れてしまうことがありますよね。画像の左上を基準にして配置することでこれを防ぎます。
THE THOR メインビジュアル の基準位置を変更するカスタマイズ
カスタマイズにはCSSを使います。
使い方は簡単、コードをコピペするだけ。コピペする場所は「追加CSS」になります。
操作手順
外観 → カスタマイズ → 追加CSS
外観 → カスタマイズ → 追加CSS
コピペするコード（基準位置：左上）
img.still__img {
object-position:0% 0%; /* 左上 */
}
左上以外を指定することも可能です。
以下のコードから必要な一行をコピペして上記コードに入れてください。
object-position:0% 0%; /* 左上 */ object-position:0% 50%; /* 左中 */ object-position:0% 100%; /* 左下 */ object-position:50% 0%; /* 中上 */ object-position:50% 50%; /* 中中（標準） */ object-position:50% 100%; /* 中下 */ object-position:100% 0%; /* 右上 */ object-position:100% 50%; /* 右中 */ object-position:100% 100%; /* 右下 */
以上でカスタマイズは完成です。
※カスタマイズは自己責任でお願いします。
メインビジュアル 画面サイズによる画像の変化について
THE THOR のメインビジュアルは画面サイズ(ウインドウサイズ)により変化します。
画像は元々の縦横比を保ちながら、メインビジュアルを完全に覆うように拡大縮小します。画像の幅と高さ、どちらか短い(足りない)ほうが画面を覆うまで変形し、長い部分ははみ出て非表示となります。
関連記事
THE THOR の特徴でもあるメインビジュアルの良さにやっと気づいた、からあげ棒です。 メインビジュアルは画像サイズとデザインが難しく、いまだ暫定的な運用となっています。 だいぶ固まってきました。メインビジュアルはサイトの魅力[…]
あとがき
今回のカスタマイズも「お問い合わせ」でいただき記事化させていただきました。
「右下を固定したい」というお問い合わせで、僕は画像のサイズを変更して対応することばかり考えていて、基準の位置をずらす発想はなくまさに「目からウロコ」
とても良い「お問い合わせ」をありがとうございました。
現在の当サイトではメインビジュアルを使用していませんが、また使いたくなるカスタマイズとなりました。
