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

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

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

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

カスタマイズには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」メインビジュアルの設定方法とポイント。

あとがき

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

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

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

[wpap service=”with” type=”detail” id=”B06XRPM55F” title=”WordPressユーザーのためのPHP入門　はじめから、ていねいに。［第2版］”]