THE THOR メインビジュアル カスタマイズ

THE THOR ザ・トール メインビジュアル の基準位置を変更

THE THOR メインビジュアル カスタマイズ

THE THOR のメインビジュアル の基準位置を変更するカスタマイズを行いました。

例えば「メインビジュアルの左上にロゴを表記」した場合、画面サイズにより切れてしまうことがありますよね。画像の左上を基準にして配置することでこれを防ぎます。

 

THE THOR メインビジュアル の基準位置を変更するカスタマイズ

 

カスタマイズには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 メインビジュアル 標準

 

 

THE THOR メインビジュアル カスタマイズ

関連記事

THE THOR の特徴でもあるメインビジュアルの良さにやっと気づいた、からあげ棒です。 メインビジュアルは画像サイズとデザインが難しく、いまだ暫定的な運用となっています。 だいぶ固まってきました。メインビジュアルはサイトの魅力[…]

THE THOR メインビジュアル

 

あとがき

 

今回のカスタマイズも「お問い合わせ」でいただき記事化させていただきました。

「右下を固定したい」というお問い合わせで、僕は画像のサイズを変更して対応することばかり考えていて、基準の位置をずらす発想はなくまさに「目からウロコ」
とても良い「お問い合わせ」をありがとうございました。

現在の当サイトではメインビジュアルを使用していませんが、また使いたくなるカスタマイズとなりました。