SWELLサイト型トップページを初心者でも簡単に作る方法!設定方法をどこよりもわかりやすく解説

初心者用|SWELLサイト型トップページの作り方!WordPressブログ設定方法をどこよりもわかりやすく解説
調べ人

・WordPressブログのトップページをおしゃれサイト型にしたい

・SWELLを使ってトップページをブログ型からサイト型に変更したい

・そもそもブログ型とサイト型ってなにがどう違うの?定義ってあるの?

ー 当記事の概要 ー

  • WordPressブログテーマ『SWELL』でブログ型からサイト型へ変更する方法を知ることができる
  • 合わせてブログ型とサイト型の違いを解説して、自身が望むオシャレなブログを作れるようになる

この記事を書いている人

Free

結婚を意識するようになってから、資産形成を本気で考え色々行動して、人生好転しているFreeです。
そんな僕はこんな感じです

  • 2018年副業開始:副業月収35万達成
  • 副業実績でブラック企業からITWeb業界に転職成功
  • 資産5,000万目指して爆進中
  • 副業ブログ約2年で本業×副業×共働きで月収130万円越えを達成!

いきなりですが、WordPressテーマを『SWELL』にしてブログ運営を始めているあなたは本当に儲けものです!

ボクは今までWordPressブログで『無料テーマを1つ・有料テーマを3つ』使用してきましたが、間違いなく素晴らしい運営人(了さん)が作っているSWELLのブロックエディタ』とはブロガーに最適解かつ最高のテーマです。

Free

『SWELL』は冗談抜きで最優良テーマ!!
ほんまに使いやすいし、まじでボクたちWordPressブロガー目線で考えてくれている運営陣が心強いです。

ボクの経験ですが、プログラムを知らない人間からすると他のテーマでトップページをブログ型からサイト型にするのはめちゃくちゃ大変でした。

ネッコ

SWELLはブロックエディタ完璧対応やから、ホンマに楽に作れるでーー!!

目次

トップページをブログ型とサイト型の違いとは

※すぐにSWELLでトップページを作る方法・手順を知りたい方は『WordPressブログをサイト型に設定する【3ステップ】』をクリックして飛ばしてくださいね。

WordPressブログをいざ作ってみて、「トップページってどうすれば良い?」と思いググってみると、色々な形があって目移りしますよね。初心者ブロガーの時はボクもそうでした。

さらに、当時ボクはWordPressブログのトップページ”サイト型とブログ型”って何?って思っていたので『SWELL』でトップページを作る前に簡単にわかりやすくサイト型とブログ型を確認します。

わかりやすく簡単に『ブログ型・サイト型』の2つの違いを表で確認

ブログ型
サイト型
  • 日記構成
  • 更新しないと目立つ
  • 雑記系に向いている
  • 収益はアドセンスメイン
  • 話題の内容で集客
  • 並列構成
  • 更新して無くても目立たない
  • 特化系に向いている
  • 収益はアフィリエイトメイン
  • 専門性の内容で集客

ざっくり挙げるとブログ型とサイト型の違いは上記のようなイメージです。明確な定義はあってないようなものですかね。

“ブログ型日記構成”と”サイト型並列構成“のよくある構成として別図で確認すると下図の通り。

WordPressブログトップページ設定ブログ型とサイト型の違い
サイト型トップページとブログ型トップページのよくある構成

図の通り、新着記事メインのブログ型ブログは『日記構成』になります。

対して、サイト型は新着記事をメインコンテンツとして取り扱っていないことがわかります。よってサイト型ブログは『並列構成』と言えます。

Free

ブログ型はファンがつくとめちゃくちゃ強いと思ってる!更新ごとに見に来てくれるから、PV数も伸ばしやすいしね!

Fun

サイト型の方は、目的の記事を探しやすいのと何のサイトわかりやすくなっていることが多いね!PV数少なくてもCVRしやすい形が多いね!

ボクはファンなんてつけられないと思っていることと、シンプルスマートな見た目でわかりやすい構成が好きなので『サイト型のブログ運営』が個人的には好きです。

Free

HTMLサイトマップよりも、カテゴリーを見やすくしてくれているブログ・サイトのほうが情報を探しやすいと思ってるからね!

WordPressブログをサイト型に設定する【3ステップ】

WordPressブログをサイト型に設定する【3ステップ】
WordPressブログをブログ型からサイト型までの【3ステップ】

まず、サイト型に設定するためには必要最低限行うためのステップは3つです。

  • ステップ1:トップページ(フロントページ)と新着記事の『作成』
  • ステップ2:トップページ(フロントページ)と新着記事の『設定』
  • ステップ3:トップページ(フロントページ)を『表示

これらの3ステップを行うことで何がどういうことが出来るかというと、WordPressブログトップページの基本構成を左の画像=ブログ型(SWELLデフォルト)から右の画像=サイト型に変更する事ができます。
※番号順に項目を記載しているので参考にしてくださいね。

3ステップに入る前に【ブログ型=Before】と【サイト型=After】の確認

【Before】
SWELLのブログ型
トップページ

WordPressテーマSWELLのトップページブログ型
トップページブログ型

【After】
SWELLのサイト型
トップページ

WordPressテーマSWELLのトップページサイト型
トップページサイト型
【Before】
トップページ
ブログ型
【After】
トップページ
サイト型
  1. ヘッダー
  2. メインビジュアル
  3. 新着記事
  4. サイドバー
  5. フッター
  1. ヘッダー
  2. メインビジュアル
  3. 人気記事
  4. 簡易自己紹介
  5. 新着記事
  6. カテゴリー
  7. フッター

実際に右側のサイト型のトップページは当ブログで今設定しているページなので、『トップページ』をクリックするとみることが出来るので、一度見てみてくださいね。

では、上記の画像のようにトップページをデフォルトのブログ型からカスタマイズしてサイト型に変更していく3ステップをご紹介します。

【ステップ1】トップページ(フロントページ)と新着記事の『作成』

ブログをサイト型にする-STEP1-
ステップ1:トップページ(フロントページ)と新着記事の作成

トップページ(フロントページ)を”作成“するとにより、ブログの入り口の見た目をガラッと変更する土台を作ることができます。

サイト型にするために作成するページは以下の2ページです。

  1. 自分のブログ・サイトの顔となる『トップページ』
  2. 記事更新時に新着順に記事を表示させるための『新着記事一覧のページ』

まず【1.サイトの顔となる『トップッページ』】の作り方手順です。

1.サイトの顔となる『トップッページ』を作成する

1.サイトの顔となる『トップッページ』を作成する
サイトの顔となる『トップッページ』を作成手順
  1. 固定ページをクリックする
  2. 新規追加をクリックする
1.サイトの顔となる『トップッページ』を作成する2
サイトの顔となる『トップッページ』を作成手順
  1. ホームと入力する(わかりやすいのでオススメ)※ホーム以外に自身がわかりやすい表記でも大丈夫です。
    ステップ2の手順③を設定する時にわかるようにしましょう。
  2. homeと入力する(わかりやすいのでオススメ)※home以外に自身がわかりやすい表記でも大丈夫です。
  3. 公開をクリック

上記のトップページを作り込むことにより、後述するステップ2,3で表示されるブログの顔であるトップページをオシャレかつ読者目線で目的に記事を探しやすい作りにすることが出来ます。

Free

SWELLはブロックエディタに完全対応していて、独自のブロックが充実しているため、初心者ブロガーでも直感的に作り込むことが出来るよ!!

※トップページは作り込みが必要です。ブロックエディタを使って自身の好きなようにトップページを作り込んでみてくださいね。

もし、何もわからなくて当ブログのトップページと「同じ」もしくは「似た」ページを真似して作る方法は下記の記事を参考にしてくださいね。

2.記事更新時に表示させるための『新着記事一覧のページ』を作成する

2.記事更新時に表示させるための『新着記事一覧のページ』を作成する
『新着記事』一覧ページを作成手順
  1. 固定ページをクリックする
  2. 新規追加をクリックする
2.記事更新時に表示させるための『新着記事一覧のページ』を作成する2
『新着記事一覧のページ』を作成手順
  1. 新着記事と入力する(わかりやすいのでオススメ)※新着記事以外に自身がわかりやすい表記でも大丈夫です。
    ステップ2の手順③を設定する時にわかるようにしましょう。
  2. new-articlesと入力する(わかりやすいのでオススメ)※new-articles以外に自身がわかりやすい表記でも大丈夫です。
  3. 公開をクリック

上記のトップページを作り込むことにより、後述するステップ2,3で表示されるブログの顔であるトップページをオシャレかつ読者目線で目的に記事を探しやすい作りにすることが出来ます。

これで新しく記事を更新しても、新着記事を順番に表示させることが出来る固定ページの完成です。

この新着記事一覧ページを作ることにより、下記のように新着記事に飛ぶ『ボタンリンク』や『文字内リンク』も簡単に作成することが可能になります。

青色文字をクリックすると新着記事をみることができます

Fun

“ボタン設置”や”文字を打ち込み”『新着記事』のURLを貼るだけで新着記事一覧に飛べるから新着記事のリンクを作るのが超簡単!

では、実際に下準備として、『トップページ(フロントページ)と新着記事一覧のページ』が完成したため、次にステップ2のトップページの『設定』に移行していきます。

【ステップ2】トップページ(フロントページ)の『設定』

ブログをサイト型にする-STEP2-
ステップ2:トップページ(フロントページ)と新着記事の『設定』

“【ステップ1】トップページ(フロントページ)の作成“でつくったフロントページを『WordPressブログ内での役割』設定をします。

前項で作成した2つのページをWordPressブログに問題なく、表示させるために下記の通り、役割設定を行う必要があります。

【ステップ2】トップページ(フロントページ)の『設定』
【ステップ2】トップページ(フロントページ)の『設定』手順
  1. ダッシュボードから設定 > 表示設定をクリックする
  2. 最新の投稿ではなく、固定ページをクリックする
  3. 【ステップ1】トップページ(フロントページ)と新着記事の『作成』時の記事名を選択します。※ステップ内では”ホーム”と”新着記事”をおすすめとして解説しています・
  4. 変更を保存をクリックする

ステップ2の設定を終えるとブログがどのような状態になっているかというと、以下の通りです。

  • トップページ:WordPressブログの顔であるトップページがステップ1で作成した『トップページ』として設定され表示できるようになる
  • 新着記事:新しい記事を投稿するごとにステップ1で作成した『新着記事』として設定され表示できるようになる

【ステップ3】トップページ(フロントページ)を『表示』

ブログをサイト型にする-STEP3-
ステップ3:トップページ(フロントページ)を表示

“【ステップ2】トップページ(フロントページ)の設定”したフロントページを『WordPressブログ内でのメインビジュアル』表示をします

最後に画像の部分を設定します。

Fun

基本的には動画ではなく画像がオススメだよ!理由は『データが軽い分』動画より画像のほうが、表示スピードに好影響を与えるからね!

ネッコ

SEO的にも有利だとか…ムニャムニャ…zzz

では、手順を画像つきでわかりやすく確認していきましょう。

【ステップ3】トップページ(フロントページ)を『表示』手順1
【ステップ3】トップページ(フロントページ)を『表示』手順
  1. ダッシュボード > カスタマイズをクリック
  2. カスタマイズ画面に移行するので、トップページをクリック
ネッコ

もうちょっとやから頑張ってや〜!

【ステップ3】トップページ(フロントページ)を『表示』の手順②
【ステップ3】トップページ(フロントページ)を『表示』手順
  1. メインビジュアルをクリック
  2. 表示しない・画像・動画から1つ選択する。オススメは画像(動画はサイトが重たくなります)
  3. トップページのメイン画像周りに『余白』をつけるかどうかの設定
    scrollボタンを表示するとトップページのメイン画像に『scroll』表記が出る
    ※どちらもお好みで大丈夫です。個人的には“なし”がオススメ
  4. トップページのメイン画像の高さサイズをお好み設定
    ※当ブログのサイズ【PC:40vw 】【SP(スマホ):45vh】
  5. 下へスクロールする
  6. 画像に表示されるボタンをお好みで選択する
    ※丸めると柔らかいイメージになります
  7. トップページのメイン画像へ施す加工をお好みで決める
    フィルター処理:『なし・ブラー・グレースケース・ドット・ブラシ』から選択
    オーバーレイカラー:メイン画像に被せるカラーを選択して透明度を決める
    ※当ブログは【フィルター処理なし・オーバーレイカラー不透明度0】
【ステップ3】トップページ(フロントページ)を『表示』の手順③
【ステップ3】トップページ(フロントページ)を『表示』手順
  1. PCで表示させたい画像を選択する
  2. スマホで表示させたい画像を選択する
  3. お好みでOK(表示したい文字を入力)
    ※当ブログは画像に直接文字をいれているので、メインテキストもサブテキストも入力していません
  4. トップ画像に設定したいalt属性値を入力する(キーワードやブログタイトルを入力)
    ※alt属性値の意味が知りたい方は、株式会社アーティス『alt属性値の目的や役割』がわかりやすいです
  5. 下へスクロールする
  6. ⑬で入力したテキストの文字色やシャドウ(装飾)を決める


これで固定ページのトップページサイト型を作ることが出来ました。

最後に:最初から完璧なトップページは作らなくてOK!

WordPressブログを開設すると、どうしてもトップページや他の装飾部分を完璧にして運営したい!と考えてしまいがちです。かくいうボクもその一人でした。

しかし、最初から完璧なトップページを作ることは困難です。『WordPressブログで収益化を図りたい=顧客(ユーザー)目線に立つ必要があるから』です。

すなわち、自分がこだわり抜きたいブログ(サイト)だと読者(ユーザー)からすると見にくかったり、回遊しにくかったりします。

GoogleアナリティクスやGoogleサーチコンソールを使用して、データを活かした上でブログ(サイト)修正が必要になってきますので、このタイミングで仕上げていくイメージで全然問題ありませんよ!

何より、『リサーチ』と『記事を書くこと』が重要ですので、まずは外観は80点くらいで良しとして、リサーチと記事をかくことに注力していきましょう。

それでは良いブログ生活を!

よかったらシェアしてね!

コメント

コメントする

CAPTCHA


目次
閉じる