The・THORのカスタマイズ!TOPページ設定編【WordPress】

8月 7, 2019

TOPページはブログの玄関になるページです。

ブログのコンセプトや読んで欲しい記事やカテゴリーをTOPページに記載し、自分のブログをアピールします。

そのため、トップページは特別な設定が出来るようになっています

今回は、The・THORのトップページのカスタマイズを解説します。

おじさん
ランキングなどは記事数が無いと作れないので、トップページは10記事程度書いてからでも良いですね

メインビジュアル設定

WordPressのカスタマイザー(「外観」→「カスタマイズ」)にある「TOPページ設定」をクリックします。

メインビジュアルのサイズ

メインビジュアル」とは、ヘッダー下の画像のことです。

画像の横幅は3段階で、縦は自由に設定できます。

スマホとパソコンでは縦の表示サイズが違うので注意が必要です。

下の画像は、全てスマホの縦が300、PCが500です。

表示サイズ・ノーマルのPC

表示サイズ・ノーマルのスマホ

表示サイズ・ビッグのPC

表示サイズ・ビッグのスマホ

おじさん
スマホは同じじゃないかな

表示サイズ・ワイドのPC

表示サイズ・ワイドのスマホ

メインビジュアルの画像サイズ

ここで表示される画像のサイズは、上の設定のワイドで最大1980×500pxです。

それよりも小さい画像を登録すると、縦横比はそのままで横幅いっぱいまで画像を拡大します。

例えば、5cm×5cmの画像を登録すると、下のように上下がカットされます。

メインビジュアルに重ねる

メインビジュアルには文字、イラスト、リンクボタンを重ねて表示できます

画像はコードを貼り付けるようになっています。投稿記事などに一旦画像を載せ、テキストモードのコードを貼り付けるのが速いと思います。

この設定で下のように表示されます。

メインビジュアルの縦幅が500px、貼り付けた画像(黄色いシルエット)が1000×200pxです。

たとえば1000×300pxの画像を貼り付けると、下のようにボタンが窮屈になってしまいます。メインビジュアルを広げるなど調整してください。

メインビジュアルに画像を重ねる場合は、png形式がオススメです。

メモpng形式とは画像の形式の一つで、背景を透明に出来るのが特徴です。

メインビジュアルをYouTube にする

メインビジュアルをYouTubeにすることもできます。

メインビジュアル設定の「メインビジュアルの表示モード設定」で「YouTube背景動画」にチェックを入れます。

YouTubeに設定してもスマホでは静止画が配置されるので、静止画を設定します。

YouTubeのIDは表示したいYouTube動画を開き、URLの v=×××××××の×××××××を入力します。

これでスマホには静止画、パソコンにはYouTubeが表示されます。

YouTubeでも静止画と同様に、文字やイラストを重ねられます。

YouTubeを使うときは自分でアップロードしたものを使いましょう
うさぎ
おじさん
他人の動画はいつ消されるか分からないですね

メインビジュアルをスライドショーにする

メインビジュアルの表示モード設定」のスライドショーにチェックを入れます。

スライドショーはカスタマイザーで変更が確認できません(私だけかも)。実際のサイトを見ながら調整してください。

画像は1~5枚設定でき、1枚でもスライドショーは実行されます。

おじさん
永遠に同じ画像がスライドされます

スライドショーも静止画と同様に、文字やイラストを重ねられます。

メインビジュアル下の注目エリア設定

メインビジュアルの下のスペースにキャッチコピーリンクボタンを設置できます。

カルーセルスライダー設定

カルーセルスライダーとは、回転木馬や回転式コンベアーという意味。

The・THORでは、メインビジュアルの下に記事のサムネイルタイトルをグルグルと回転式に表示できます。

表示するタイトルやカテゴリーは、IDで選択できます。

IDは、投稿一覧またはカテゴリーで確認します。

たとえばカテゴリーのID2の記事だけは表示したくない場合は、下のように設定すればOKです。

ピックアップ3記事設定

カルーセルスライダーの下に注目させたい記事を3つ表示することができます。

記事IDは、投稿一覧で確認できます。

記事ランキング設定

TOPページの下の方にランキングを表示できます。

デフォルトでは記事の閲覧数(PV)順に表示されますが、自分の決めた記事だけを表示することも可能です。

設定はカルーセルスライダーと同様です。

カテゴリ最新記事設定

ランキングの下にカテゴリ別の最新記事を表示できます。

デフォルトでは投稿順ですが、カルーセルスライダーと同様に任意の記事だけを表示することも可能です。

The・THORの関連記事一覧

まとめ

今回はTOPページの記事作成について紹介しました。

TOPページは、訪問者が一番よく見るページになります。

気合を入れて作成しましょう!

 

テックアカデミー

ド素人の40歳のおじさんが
2ヶ月間WordPressを学んで
自在にカスタマイズできるようになり、
在宅収入を得られるようになった
オンラインスクール