ザ・トールでサイトロゴとメインビジュアルをジャストサイズで設定しよう

ザ・トールでサイトロゴとメインビジュアルを設定するときに、「ジャストサイズがわからない!と困った経験はありませんか?

私もその一人です。

試行錯誤の結果、ジャストサイズと細かい調整についてわかったので共有しておきます。

ザ・トールのメインビジュアルの設定の仕方

私は特に細かくは設定していないのですが、メインビジュアルの倍率の話をするにはやはり設定の方法からですね。

管理画面にて、外観→カスタマイズ→TOPページ設定→メインビジュアル設定まで進みます。

TOPページ設定→メインビジュアル設定
メインビジュアル設定

メインビジュアル設定の基礎

  1. メインビジュアルを表示するか選択「表示」へ
  2. 「スマホは非表示にする」にチェックするとスマホでは表示されなくなります。
  3. 表示サイズ[横]を指定します。デフォルトでは画面横幅いっぱいになります。
  4. スマホ表示時の表示サイズ【縦】を指定
  5. PC表示時の表示サイズ【縦】を指定
メインビジュアル(静止画)
タイトルとサブタイトル、ボタンを置けます

ザ・トールのメインビジュアルを最適化する方法

ザ・トールのメインビジュアルの最適サイズについてはこちらのサイトを参考にしました。

からあげ棒、ありったけ

ワードプレステーマ「THE THOR」メインビジュアルの設定方法とポイント。メインビジュアルは画像を使い来訪者にインパク…

こちらのサイトは、正直ザ・トールの情報はウチよりたくさんありますね。

私も、今使っている基本設定とかマニュアルサイトにはない情報をまとめていきたいとは思っているのですが….。

さて、画像サイズについてです。PC画面で見るときとスマホ画面で見るときは当然のごとく縮小はされています。

問題なのは、縮小されたときにどうも、端が切れてしまっているということ。

画像のメインビジュアルが真ん中に固まっているならともかく、画像の下端基準で文字が入っていたりすることもあるでしょう。

これは、そうなったとき用の記事です。

メインビジュアルの最適サイズとは?

ずばり、私が検証した結果で最適(最も切れない)サイズは

画像サイズ:1140×300
サイズ比:ノーマル
スマホサイズ(縦):90
PC(縦):300

です。下記は、その調整をしたトップ画像です。

PC用画像
スマホ用画像

1140×300で調整するのがいいでしょうね。他にも、全体サイズによって縦のサイズをうまく調整すれば端切れもなくなります。

そんな微調整めんどくせえ!って方はこちらのサイズを参考にしてくださいね。

最新情報をチェックしよう!
%d人のブロガーが「いいね」をつけました。