ブロックエディタ（Gutenberg）を使いたい THE THOR ユーザーにオススメのブログ向けWordPressテーマ
ポチップ
THE THOR ザ・トール メインビジュアル設定
当ページのリンクには広告が含まれています。
ポチップ
THE THOR の特徴でもあるメインビジュアルの良さにやっと気づいた、からあげ棒です。
メインビジュアルは画像サイズとデザインが難しく、いまだ暫定的な運用となっています。
だいぶ固まってきました。メインビジュアルはサイトの魅力アップに大きく貢献できる要素だと思います。
目次
THE THORのメインビジュアル設定
設定自体は簡単です。
メインビジュアルの中に使うタイトルテキストや説明文、ボタンと画像サイズのバランスが難所になっています。
外観 → カスタマイズ → TOPページ設定[THE] → メインビジュアル設定
メインビジュアルを使う場合は「表示」を選択
メインビジュアルの表示サイズ設定
表示サイズは好みで3種から選んでください。
ワイドサイズ
画像がヘッダーと隙間なくつながりウインドウ幅いっぱいに表示される。ヘッダーの一部のようになる。
ノーマルサイズ
画像がヘッダーと隙間なくつながりメインカラムと同じ幅で画像を表示。
ビッグサイズ
ヘッダーと隙間ができます。下側とも隙間が出来るのでメインビジュアル画像が独立した状態になります。
表示の縦サイズについて
縦サイズは好みになります。タイトル文字、サブタイトル文字、ボタンが収まるような縦サイズにします。縦幅が小さ過ぎるとボタンやタイトルがはみ出て表示されなくなります。
※参考
タイトル一行、サブタイトル一行、ボタンありで使用している僕の場合は、スマホ表示サイズ[縦]150 / PC表示サイズ[縦]300 にしています。必要なモノが収まる最低限のサイズとして暫定的にこのような設定にしています。
現在は、スマホ[縦]300px / PC表示[縦]450pxのスライドショーモードで運用中。
THE THOR メインビジュアルの表示モード設定
制止画、YouTube背景動画、スライドショーの3つから選べます。
特に難しいところはなく設定項目を埋めていけOKです。
POINT初期設定では文字色が白になっているので色を変更する場合はタグを入力します。
<font color=”#000000″>タイトル</font>
<font color=”#000000″>サブタイトル</font>
<font color=”#000000″>サブタイトル</font>
POINTボタンはテキストとリンクの両方を入力しないと表示されません。
ボタンのカラーは別項目で変更します。プライマリーボタンの設定がメインビジュアルのボタン設定に適用されます。
外観 → カスタマイズ → パーツスタイル設定[THE] → 共通ボタン設定[全ページ用] → プライマリーボタンの設定
※プライマリーボタンとメインビジュアルを指定して個別にCSSで装飾することも可能です。
メインビジュアルの画像サイズについて
メインビジュアル設定ワイドサイズでの話となります。他の設定では検証していないのでご了承ください。
メインビジュアルの画像サイズについては推奨サイズがありません。
公式フォーラムでも大きい画像というだけでオススメサイズは明記されていません。
THE THOR のデモサイトで使われているサイズ 1920×1152px（または1280×853）となっています。
当サイトでのサイズは、1700×765 / 1920×500 の2種類のサイズを使用しています。
縦幅は前述通りスマホ[縦]300px / PC表示[縦]450px の設定です。
メインビジュアルは画面サイズ幅（ウインドウ幅）によって画像サイズが変化します。
自分で設定する縦幅が基本になります。画像の横幅が足りている間、画像の縦幅は維持されます。画像よりもウインドウ幅が大きくなるとその分画像が拡大されます。縦幅のスペースは設定で固定しているので、はみ出した画像は表示されないこととなります。
※以上は公式での解説ではありません。あくまで私の推測です。
メインビジュアル画像の挙動サンプル
以下はメインビジュアルの縦幅を450pxにした場合のサンプルです。
画像は縦横比は保ったまま縮小されます。
画像の縦幅は設定値になり、横幅はウインドウ幅（画面幅）にあわせて成り行きでカットされます。
画像が足りなくなるとウインドウ幅にあわせて画像が拡大されます。縦横比は保ったままなので縦幅が設定値を超えて大きくなります。
設定値より大きくなった分の画像はカットされます。
以上、間違っているかもしれませんが概ねこのような挙動をすると思います。
全てのサイズで思ったような表示をするのは難しいかも知れません。PC表示でウインドウ幅を極端に大きくした場合の表示は妥協して良いと思います。
からあげ棒、オススメのメインビジュアルサイズ
メインビジュアルに設定する縦幅によって必要な横幅が大きく変わってきます。
オススメの画像サイズはケースバイケースということになります。
当サイトの実践上では1920×500 というサイズがどの端末でもほとんど変化なく表示ができています。ただし表示されるのは真ん中部分がほとんどで左右は色があるだけです。画像が足りなくなり縦幅が変動するのを嫌ってかなり横長の画像となっています。
現状でのオススメのメインビジュアル画像サイズは 1920×500 くらいです。
※縦幅設定300〜450pxの場合
※今後変更になる場合があります
あとがき
THE THOR のメインビジュアル機能は様々な使い方ができます。
制止画は通常の広告やビジュアル要素として。YouTube背景動画は強烈なインパクトを与えてくれます。スライドショーではトップページの要素を減らさずにスペース確保できます。
メインビジュアルは画像のサイズとデザインがポイントなので何度も調整して上手く活用したいですね。
ブロックエディタ（Gutenberg）を使いたい THE THOR ユーザーにオススメのブログ向けWordPressテーマ
ポチップ
この記事が気に入ったら
フォローしてね！
ブログテーマ選びについて
この記事はもともと「THE THOR」で作成した過去記事ですが、現在は「SWELL」に移行してブログを運営しています。実際に両方を使った経験から、テーマ選びに迷っている方へ。
- THE THOR（ザ・トール）も今なお魅力的！
洗練されたデザインと、プラグインなしでも完結する圧倒的な多機能さは健在です。「クラシックエディターの操作感が馴染んでいる」「カチッとしたクールなサイトを作りたい」という方には、根強いファンがいる実力派テーマです。
THE THOR（ザ・トール）の詳細を見る - THE THORには最新の正統後継テーマ「GOLD BLOG」がある！
最新のブロックエディターに完全対応した正統後継テーマ「GOLD BLOG（ゴールドブログ）」も登場しています。THE THORの遺伝子である圧倒的なSEO強さやデザイン性を引き継ぎつつ、今のWordPressに最適化されているため、トール派の操作感を崩したくない方には間違いなくおすすめ。
後継テーマ「GOLD BLOG」の詳細を見る - 自由な操作性や書きやすさを重視するなら「SWELL」も最高！
興味本位で購入してあったSWELLに移行しました。簡単に美しい装飾ができ、ページの表示速度も非常に優秀です。ブログ運営の効率を上げたい、デザインに迷う時間を減らしたいという方に。さすが有料テーマで最も選ばれている大人気テーマという感じで楽しく使用しています。
圧倒的に使いやすい「SWELL」を公式サイト
コメント
コメント一覧 （5件）
はじめまして
The Thorで作成する際に、本当に色々とこのサイトにお世話になりました。
ありがとうございます。
ところで、このメインビジュアル、スクリーンサイズにかかわらず表示を右下に合わせたくて苦心しているのですが、なかなかうまくいきません。
（左上はいくらでも非表示になってよい）
もしお力添えをいただければ幸いです。
koromeさん、コメントありがとうございます。
メインビジュアルを右下合わせにするということで、実験してみたところ
以下のCSSで出来るようです。追加CSSなどにコピペしてください。
img.still__img {object-position:100% 100%;}
メインビジュアルの基準位置を変更するというのは今まで思いつきませんでした。
記事化させていただきたいと思います。
ありがとうございました。
いつもこっそりお世話になってます。
詳しい情報をありがとうございます。
THORのTOPページのカスタマイズですが
スライダーで背景
上に静止画（透過）のものを設定したく、ググりましたが、、、
最終的にcssカスタマイズが必要なんだなと思いつつ
欲しいスキルが私にはなく・・・
良い方法があればご教授をいただきたいのです。
Mssさんコメントありがとうございます。「スライダーで背景上に静止画（透過）」というのがどういう状況なのか詳しく教えていただいてもよろしいでしょうか。
[…] からあげ棒、ありったけ THE THOR ザ・トール メインビジュアル設定 […]