【THE THOR】トップページのメインビジュアルをカスタマイズしよう。

有料テーマのTHE THOR(ザ・トール)を購入したけど、メインビジュアルの設定はどうやるの?
カッコいいトップページを作ってみたいけど、始めたばかりの初心者でも出来るかな?

そのような悩みに「ゴリラでも分かるように」お答えします。


本記事では、そんなTHE THORのメインビジュアルの設定方法について紹介をしていきます。

ボタン操作で簡単にデザインを変更できるので、この記事を読めばあなたの思い描くブログが簡単に作成できますよ。

それでは続きをご覧ください。

まずはデモサイトからデザインをダウンロードしよう

引用:THE THOR

THE THORには、プロがデザインしたテンプレートをコピーできる、着せ替え機能というものがついています。

まずはTHE THORのデモサイト一覧から、自分の理想に近いテンプレートをダウンロードしてみましょう。

まずは骨組みを決めてしまって、細かなところを自分で編集するようにしましょう。

>> THE THORのデモサイト一覧はこちら

らくらくサーバーセットプランを購入した場合は、デモサイトのダウンロードまではすでに終わっているはずです。

詳しくは【WordPress】絶対に失敗しないブログの始め方~THE THORのらくらくサーバーセットプラン~ をご覧ください。

メインビジュアルのデザインを変更する

それでは実際にメインビジュアルを変更してみましょう。

WordPressへログインして、ダッシュボードの画面を開きます。

ダッシュボードにあるメニューから、「外観」→「カスタマイズ」をクリック。

カスタマイズ画面が開くので、TOPページ設定をクリック。

TOPページ設定画面から、「メインビジュアル設定」をクリック。

右側のプレビュー画面を参考にしながら、メインビジュアルの設定をしていきましょう。

■メインビジュアルを表示

メインビジュアルの「表示/非表示」切替ができます。

□スマホは非表示にする

チェックを入れると、スマホのみメインビジュアルを非表示にできます。

■表示サイズ(横)

メインビジュアルの横幅を「ワイド・ノーマル・ビッグ」の3つから選べます。

■スマホ表示時のサイズ(縦)

メインビジュアルをスマホで表示したときのサイズを指定できます。

■PC表示時のサイズ(縦)

メインビジュアルをPCで表示したときのサイズを指定できます。

画面下にPC・タブレット・スマホの切替タブがあるので、どのように表示されるのか、確認しながら設定するようにしましょう。

PC画面でうまく調整していても、スマホで見るとバランスが崩れていることもあるので、しっかりと確認するようにしましょう。

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

静止画・YouTube・スライドショーの3つから選択

静止画の設定

[画像を変更]をクリックして、好きな画像を静止画に設定。

[メディアライブラリ] → [ファイルをアップロード]から画像をアップロードしましょう。

■画像のマスクを選択

無し・ブラック・ブラックメッシュ・カラー・カラー+画像の6つから選択

■タイトルを入力(タグ利用可)

■サブタイトルを入力(タグ利用可)

必要に応じて、タイトル・サブタイトルを入力しましょう。

■ボタンのテキストを入力

下記のボタンリンクを入力しないと、ボタンは現れないので気をつけてください。

■ボタンのリンク先を入力

ボタンを押すと、ここに登録したURLに飛ぶようになります。

すべての設定が終われば、プレビューで確認をしてみましょう。

問題なければ、左上にある[公開]をクリックで完了です。

タグ利用可とは?

タグ利用可と記載のある項目は、HTMLを使用することで細かな調整が可能です。

最初は戸惑うかもしれませんが、慣れれれば簡単ですので下記の画像を参考に、挑戦してみましょう。

新規記事の作成ページを開き、任意のテキストを入力しましょう。

フォント、フォントサイズ、太文字など、好きなようにテキストを装飾します。

テキストが完成したら、設定項目から[HTMLとして編集]をクリック。

※ClassicEditorを使用している場合は、ビジュアルモードからテキストモードへ切り替えましょう。

先ほどのテキストがHTMLとして表示されるのでコピーします。

そのままタイトル(タグ利用可)の入力欄に張り付ければ、装飾済みのテキストが反映されます。

フォントサイズなども細かく調整できるので、バランスのいいトップ画面を作ってみましょう。

YouTubeの設定

メインビジュアルにYouTubeの動画を張り付けることもできます。

■動画再生前に表示される画像を登録

■YouTube動画のIDを入力

YouTubeで動画を開き、URL欄のwatch?v=から後ろをコピーして、張り付けましょう。

ゲームやスポーツなどのブログを作るときは、是非とも活用したい機能ですね。

以下、静止画と同じ

スライドショーの設定

■自動再生機能の選択

offの場合は、クリックもしはフリックでスライドするようになります。

■自動再生時のスライド速度

1000=1秒

■スライドエフェクト

横スライド・平面回転・キューブ回転・カバーフローの4つから選択。

以下、静止画と同じ(スライドショー1~5まで登録可)

メインビジュアル下お知らせ設定

メインビジュアルの設定が終われば、次にメインビジュアル下のお知らせ設定をしてみましょう。

左上の[ < ]をクリックして、TOPページ設定画面へ戻ります。

[ × ]を押すと、ダッシュボード画面へ戻ってしまうので、[公開]の押し忘れに注意してください。

[メインビジュアル下お知らせ設定]をクリック。

■メインビジュアル下の注目エリアを表示

「表示/非表示」切替ができます。

■キャッチコピーを入力(タグ利用可)

読者の目線の動きを予想して、キャッチコピーを導入してみましょう。

■ボタン設定

■背景色

お知らせ欄の背景色を選択

メインビジュアル設定・まとめ

いかがだったでしょうか?

今回はメインビジュアルの設定方法を紹介しました。

トップページの中でも、一番目立つのがメインビジュアルです。

メインビジュアルをしっかりと設定することで、デザイン性や収益性を高めることが出来ます。

是非参考にしてみてください。

まだブログを始めていない人は、こちらの【WordPress】絶対に失敗しないブログの始め方~THE THORのらくらくサーバーセットプラン~をぜひ読んでみてください。

今回は以上です。

お疲れ様でした。

関連記事 【WordPress】有料テーマのTHE THOR(ザ・トール)ブログ初心者でも思い通りのブログが作れる。

関連記事 【レンタルサーバー】エックスサーバーとConoHa WING、ブログ初心者にオススメはどっち?