ザトールならWordPress初心者でも簡単にメインビジュアル設定可能！

自分のブログの顔ともいえるトップページの設定はこだわりたいところですよね。

特に美しいデザインが売りの一つであるザトールを購入したのであれば尚更です。

この記事では、トップページ設定にあるメインビジュアル設定についてお伝えしています。

ちなみにここでは 静止画のみを扱っています。

YouTube背景動画・ スライドショーについては扱っておりません。

またご要望があればアップしますのでご連絡下さい。

メインビジュアル設定の流れ

メインビジュアルの設定画面には下記にあげた1３項目の選択肢があります（バージョンにより変更になる場合がありますが、慣れれば気づきます）。

ここでは細かい設定の前にメインビジュアル設定の全体像をお伝えします。

「メインビジュアル設定」から、
・メインビジュアルの「表示・非表示」の決定
・スマホの「表示・非表示」の決定
・表示サイズ[横]の選択決定
・スマホ表示時の表示サイズ[縦]の設定
・PC表示時の表示サイズ[縦]の設定

「メインビジュアルの表示モード設定」から、
・メインビジュアルの表示モードの選択

※今回は静止画だけの前提なので、下記は静止画の設定バージョンとなります。

「静止画時の設定」から、
・画像の選択（画像が設定されている場合は画像の変更）
・画像マスクの選択
・カラー系マスクを使用した場合の色指定
・タイトルの入力（大サイズ太字）
・サブタイトルの入力（小サイズ）
・ボタンテキストの入力（しなくてもOK）
・ボタンリンク先のURL入力（ボタンがなければ必要ありません）

項目が沢山あるように見えますが、使用するかしないかは自分で決められます。これからの説明と見比べながらご自身のサイト画面がどのように変化するかを体験していきましょう。

その際は、２つのサイトを表示させながらやりましょう。念のためその方法も伝えます。

最上部のタブを右クリックし中断にある「タブを別のウィンドウに移動」へカーソルを合わせると、右側に「新しいウィンドウ」が出るのでクリックします。

それではここまで準備ができたら、ご自身のブログ管理画面を見ながら進めていきましょう。

メインビジュアル設定

メインビジュアル設定には６つの項目があります。順番に説明していきますね。

メインビジュアルの表示・非表示

まず一つ目の項目がメインビジュアルの表示をするかの選択です。

画像にある枠に囲まれた表示部分をクリックすると「非表示」か「表示」を選べます。こちらを非表示にするとカルーセルスライダーなどの設定がなければ、いきなり記事になります。

※カルーセルスライダーなどの設定方法は別記事として準備します。

カルーセルスライダーなどがある場合はそれらが最初に表示されることにます。

いきなり横に流れるカルーセルスライダーも面白いと思いますが、ここでは使用していません（バージョン変更やプライグインの影響によりバグることも多いので）。

続いて、メインビジュアルをスマホで表示するか非表示にするかの選択です。

スマホは画面が小さいですから、メインビジュアルのサイズ設定によっては非表示にしたほうがいいかもしれません。このブログはメインビジュアル大きめですが表示させています。

これについては、下記のスマホ表示時の表示サイズをみて再度検討するとして、ここは飛ばしても結構です（画像を設定したら戻りましょう）。

表示サイズの選択

次にメインビジュアルの表示サイズを選択します。

ここでも画像にある枠にカーソルを合わせクリックすると項目が表示されます。表示項目はワイドサイズ、ノーマルサイズ、ビックサイズの三つから選びます。

トールで最初から用意されている画像はどれもお洒落で格好いいのであまり気になりませんが、自分で用意した画像だと違和感がある場合もあります。

ですから、ここは一旦保留して「静止画の設定」をしてから実際に自分の画像を登録してから3パターンを試してみましょう。

※お勧めはワイドサイズです。画面いっぱいに画像が表示され見やすいですね。

スマホ＆PCの表示サイズを指定します。

こちらも「静止画の設定」をしてから調整しましょう。

調整の仕方は、枠にカーソルを合わせクリックして数値を入力するか、枠の右側にカーソルをあわせると上下のアイコンがあらわれるのでそこをクリックすれば一つずつ、長押しすると一気に数値が進みます。

調整すると上下（縦）の幅が調整されます。

ちなみにこの項目に限らず、それぞれの選択肢は一度やってみることをお勧めします。何度やり直しても「公開」を押さなければ問題ありませんし押したとしもやり直せばいいだけです。※大きな問題にはなりません。

体験して慣れることが一番大切です。

是非ここから続く内容も試しながら実践しましょう。

※スマホの表示確認は機種によって確認画面と異なる場合があります。ですが、あまりそこに囚われると前進できなくなるのでほどほどにしましょう。

メインビジュアルの表示モード設定

続いて、下に進むと「メインビジュアルの表示モード設定」があります。

選択肢には「静止画/ YouTube背景動画/スライドショー」の三つがあるので、その中から選びます。

最初にお断りしていた通り、ここでは「静止画のみ」で話を進めます。

ここから下は選択した表示モード、ここでは静止画に対応した内容が表示されます（古いバージョンは全部あったように思いますが、こちらの方が使いやすいですね）。

画像を登録

「画像を選択」があるので、そこをクリックすると画像選択のパネルが開きます。そこでファイルをアップロードするか、メディアライブラリの中から画像を選びましょう。

ここでは画像のサイズなど指定はありませんが、ザトールのデモサイトでは1920×1152pxもしくは1280×853が使用されていました。

このブログでは背景となる画像には500×300と小さめを使用しています。若干ボケ感がありますが、背景として使用しているので問題ないかと思っています。

画像のマスクを選択

画像を選択すると、その下には画像にマスクをするかを選びます。選べる項目は「無し/ブラック/ブラックメッシュ/カラー/カラー+画像グレー」の5パターンからです。

それぞれのパターンの見解

【無し】なしの場合は画像そのままとなります。画像の美しさなどが際立ちますが、画像によってはこの後にあるタイトルなどが見えにくい場合もあります。

【ブラック】画像に薄い黒のマスクがかかります。画像の色が抑えられ、明るい文字が見えやすくなります。

【ブラックメッシュ】黒い網の目状のマスクが入ります。網の部分が黒くなっておりそのマスクがない部分は通常の画像のようです（肉眼ではわかりにくいですが）。

ブラックは全体的に薄い黒でもやっとしますが、こちらは非常に細かい黒の網目なので、全体的にはしまりますが、画像の発色も残り引き締まった印象になります。

タイトルなどの文字も見やすいため、個人的には一番おすすめです。

【カラー】カラーは自分の指定した色をマスクとして画像に入れます。画像の色味を抑えたり、明るさを補足したり、好みに応じて使用します。

【カラー+画像グレー】こちらも好みの色味を入れるのは同じですが、画像自体をグレーにした上に入れるというものです。もとの画像の色味がなくなるので、より選んだカラーが目立ちます。

カラー系マスクの色を選択

画像のマスク選択で「カラー」か「カラー+画像グレー」を選択された方の使用項目です。

色を選択にカーソルを合わせると色を選択するパネルが開きます。色選択の横にでる数値を入れるか、色のパレットからご自身の好きな色を選択しましょう。

感覚で色を決めても問題ありませんが、その場合は選んだ色の数値をメモしておきましょう。

ブログの全体イメージに関わるので、できればしっかり数値指定することが望ましいです。

タイトルを入力

いよいよタイトル入力です。タイトル入力とありますが、ここにはご自身の好きな言葉を入れられます。

文字数によっては画面上で勝手に改行されるので注意しましょう。とくにPC画面とスマホ画面を見ながら確認することを推奨します。

PC、スマホともに機種により変わると思いますが、PCではおよそ21文字、スマホでは9文字で改行されました。

タグの利用について

赤枠で「タグ利用可」とあるのは、HTMLタグを使い文字の強調や文章の改行などを任意で行います。

ネットで調べると様々なタグがあります。

調べる際には「改行　タグ」というように検索すればいろいろ出てきますよ。

念のためいくつかタグを張っておきますね

これらのタグを<font>タグに加えていきます（上記サンプルタグだけでは記載されません）。

例）サイズ、色ともに変更したい場合の記述

<font size=”●” color=”●”> 入力したい文字</font>

●に数字や色の数値、入力したい文字にはお好きな文字を入れます。

サイズだけ、色だけの場合はそれぞれのタグを消せばOKです。

改行タグは別に＜br＞を入れると改行されます。

ちなみに私が画像登録のところで記載した「背景となる画像」ですが、あるタグを使うとここにもう一つ画像が貼れます。

そのタグがこちらです。

<img src=”登録した画像のURL” alt=”IMAGE”>

これを使用するには、メディアで画像を登録しておく必要があります。その際、メディアライブラリで画像を指定すると右下に「リンクコピー」という>部分があるので、そこにあるURLをコピーします。

それを上記のタグの「登録した画像のURL」の部分に張り付けると画像表視されます。

※この時の画像ファイルはPNGで保存されたものが望ましいです。PNGについてはまた記事にします（予定ですが、要望あれば早めます）。

サブタイトルを入力

タイトルと同じく好きな言葉、文章を記載できます。

タイトルと同じく文字数によって改行されます。PC画面ではおよそ56文字、スマホでは18文字で改行となります。

ここでもタグを使用して自分好みにかえましょう。

ボタンのテキストを入力

こちらについては最初に消去していこう表示されなくなっており、いろいろ調べたのですが分からず放置しています。

必要な方はデモサイトに記載されているものを使用して下さい。

この下にある「ボタンのリンク先URLを入力」はボタンがあればそこにリンクを張りつけてボタンをクリックするとそちらに飛ぶようになります。

まとめ

以上がザトールのメインビジュアルの設定方法でした。

静止画限定であったり、ボタンテキストがわからないなど至らぬ点がありましたが、必要であればそれらを調べることも経験になりますので是非チャレンジして下さい。

はじめて扱うと難しく感じる部分がありますが、なれれば数分で設定できるので何度もやり直しながら習得していきましょう！

なにもなかったトップページに自分の創った画像が出てくると嬉しいですよね。着実に前進している自分を承認しましょう！

おめでとうございます！

また次のステップで会いましょう。
最後までご覧いただきありがとうございました。