THE THORのメインビジュアルは、サイトの顔となる重要な部分です。
静止画、動画、スライドショーなど、様々な表現方法を選択することができるTHE THOR。
どの設定を使用するか悩みますよね^^;
この記事では、THE THORのメインビジュアルの詳細設定について解説していきます。
訪問者の心を惹きつける自分好みのメインビジュアルを作りましょう♪
この記事はコピペのCSSカスタマイズも紹介してあるので、カテゴリーは「THE THORカスタマイズ」にしました(^_^;)
メインビジュアルの画像はどこで準備？
「CANVA」、「adobe Express」などのサイトで作成するのが簡単でおすすめです。
無料の画像も、このサイトで用意されています。
下の記事で2つのサイトの比較をしていますので参考にしてください。
＞＞＞初心者でも簡単！魅力的なアイキャッチ画像が作成できるサイト紹介♪
無料のイラストや写真のサイトを紹介していますのでこちらも作成の参考にしてください。
THE THOR（ザ・トール）メインビジュアル設定
①「外観」 → 「カスタマイズ」→「TOPページ設定[THE]」 → 「メインビジュアル設定」をクリックしてください。
- 表示設定
- メインビジュアル画像を設定
- 画像のカスタマイズ設定
メインビジュアルで使用する画像の登録場所は、「メインビジュアルの表示モード選択」で「静止画」を選択すれば、「静止画時の設定」、「YouTube背景動画」を選択すれば「YouTube背景動画時の設定」、「スライドショー」を選択すれば「スライドショー時の設定」というふうに表示されます。
PRTHE THOR（ザ・トール）メインビジュアルPC表示の設定
■メインビジュアルを表示するか選択
表示になっていると思いますので、そのままで。
もし表示したくないならプルダウンをクリックして非表示を選択してください。
THE THOR（ザ・トール）メインビジュアルの表示サイズを選択
■表示サイズ[横]を選択
「ノーマルサイズ」 「ワイドサイズ」 「ビックサイズ」から選択できます。
選択してみてしっくりするのを選択してください。
THE THOR（ザ・トール）メインビジュアルの表示サイズ設定
■PC表示時の表示サイズ[縦]を指定
THE THOR（ザ・トール）メインビジュアルの表示モードを設定
■メインビジュアルの表示モードを選択
- 静止画(default)
- YouTube背景動画
- スライドショー
この３パターンから表示モードを選択します。
THE THOR（ザ・トール）メインビジュアルのスマホの表示設定
スマホでの表示も選択することができます。
スマホにメインビジュアルを表示したい方
デフォルトで表示されるようになっています。
□スマホは非表示にする にチェックが入っている場合はチェックを外してください。
（■メインビジュアルを表示するか選択）
■スマホ表示時の表示サイズ[縦]を指定
スマホにメインビジュアルを非表示にしたい方
■メインビジュアルを表示するか選択
□スマホは非表示にする にチェックを入れて下さい。
スマホのメインビジュアルの表示モードの設定
スマホだけ表示モードを変えるということはできません。
THE THOR（ザ・トール）メインビジュアル静止画像設定と文字
■タイトルを入力 (タグ利用可）
このタイトルの入力場所に文字を入れると、画像の上にまた大きな文字がどーんと表示されます。
文字の大きさはタグで設定します。
<font size=”6″ color=”#fffefc”>そらのまなびぶろぐ</font>
font size=”6″
この数字を変えると、文字のサイズが変わります。
サイズ指定は 1〜7 で指定します。
color=”#fffefc”
これは文字の色の指定です。
好きな色に変えてください。
■サブタイトルを入力 (タグ利用可）
ここのサブタイトルの入力場所に文字を入れると、タイトルの下に
画像の上にまた大きな文字がどーんと表示されます。
<font size=”2″ color=”#fffefc”>サイト修正中です<br>
https://soramanabrog.com</font>
■ボタンのテキストを入力
文字の下にボタンを利用したい場合に設定します。
「外観」→「カスタマイズ」→「パーツスタイル設定」→「共通ボタン設定（全ページ用）」の順にクリックしてください。
「プライマリーボタンの設定」で指定します。
メインビジュアル上のボタンを角を丸くカスタマイズ
「外観」→「カスタマイズ」→「追加CSS」に下のコードをコピペしてください。
.btn__link-primary{
border-top-left-radius: 25px;
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
border-bottom-left-radius: 25px;
}
THE THORメインビジュアルを自由自在に♪詳細設定を解説 まとめ
最後にHTMLの説明をしました。コピペもちろんOKなので文字を変えて使用してください。
でもメインビジュアルどうしようか、ほんと迷いますよね。