【簡単】SWELLカスタマイズ|サイト型トップページの作り方

【簡単】SWELLカスタマイズ|サイト型トップページの作り方

この記事では、ブログテーマ「SWELL」でサイト型トップページを作る方法を紹介しています。

当ブログや姉妹サイト『アカリノオト』のトップページは、サイト型で表示されています。

『アカリノオト』のトップページを見てみる

ブログテーマ『』を使うと、サイト型のトップページを簡単につくることができます。

サイト型のトップページにすると、

  • オリジナリティを出すことができる
  • 訪問者がのぞむコンテンツに誘導しやすい

などのメリットがあります。

コードやCSSの知識が無くても、おしゃれなサイトをつくることができます。

「私も作ってみたい!」と思った方は、ぜひご覧ください。

目次

SWELLでサイト型のブログをつくる順序

サイト型のブログをつくるには、

という手順ですすめます。

今回はこんな感じを目指して作成します!
※スクロールできます

わかりやすいように、ブログの上部から作成していきますね。

①メインビジュアルをつくる

はじめに、メインビジュアルをつくります。

ブログを開いではじめに表示される部分なので大事なところです。

ヘッダー

まずはヘッダーの設定をします。

ヘッダーとはこの部分

WordPressの管理画面から「外観」→「カスタマイズ」→「ヘッダー」へと進みます。

STEP
ヘッダーロゴの設定(画像がある場合)
クリックタップで画像拡大

ロゴ画像があれば「ロゴ画像の設定」にて、画像を設定します。

ちなみに、私が作ったロゴのサイズは2200×500ピクセルです。

ロゴはで作りました。

背景に馴染むように透過で作ることをオススメします。

画像サイズはプレビューで確認しながら、お好みのピクセルで設定してみてください。ちなみに私のブログは

  • 画像サイズ(PC)……60
  • 画像サイズ(PC追従ヘッダー内)……48
  • 画像サイズ(SP)……60

という設定になっています。

STEP
レイアウト・デザイン設定
クリックタップで画像拡大

レイアウト・デザインの設定を以下の通りにすると、私のブログのようなデザインになります。

  • ヘッダーのレイアウト(PC)
    • ヘッダーナビをロゴの横に(右寄せ)
  • ヘッダーのレイアウト(SP)
    • ロゴ:中央 / メニュー:右
  • ヘッダー境界線
    • なし

ヘッダーの背景色や文字色など、他のヘッダーの設定はお好みで。

メインビジュアル

メインビジュアルのロゴの部分は、ブログパーツを使っています。

まずは、ブログパーツで、表示させたいものを作ります。

STEP
ブログパーツをつくる

ワードプレス管理画面から
「ブログパーツ→新規追加」を選択。

STEP
カスタマイズ→トップページ→メインビジュアル

当サイトの設定は以下の通りです。

クリックタップで画像拡大
  • メインビジュアル
    • 画像
  • 表示設定
    • Scrollボタンを表示する
  • メインビジュアルの高さ
    • ウィンドウサイズにフィットさせる
STEP
各スライドの設定

私のブログでは、PC用とSP用で画像を分けています。

参考までに、私は以下のサイズで背景画像を作成しました。

  • PC用…2240 x 1260 ピクセル
  • SP用…900 x 1000 ピクセル

ご自身のサイトに合わせてサイズ変更をしてみてくださいね。

背景画像はで作りました!

STEP
ブログパーツIDを入力

STEP2で作ったブログパーツを表示させるために、ブログパーツIDを入力します。

ブログパーツIDとは?

ワードプレス管理画面から「ブログパーツ」を選択し、右側に表示されている番号のことです。

クリックタップで画像拡大
STEP
最後に「公開」ボタンを押す

最後に「公開」ボタンを押せば完了です。

テキストカラーなどはお好みで設定してみてくださいね。

②ホームページをつくる

②ホームページをつくる

メインビジュアルが完成したら、続いてホームページ(トップページ)をつくります。

ホームページの下準備

まずは、ホームページの土台をつくるために下準備をします。

STEP
固定ページを新規追加

ワードプレス管理画面から
「固定ページ→新規追加」を選択。

STEP
ページタイトルを設定

ページタイトルは表示されないので、なんでも大丈夫です。

今回は「固定ページ」というタイトルにしておきます。

パーマリンクもそのままでOKです。

ホームページの下準備が終わったら、エリアごとに分けて作っていきます。

たとえば、

といった感じです。

新着記事エリアの作り方

新着記事エリアの作り方を紹介します。

新着記事エリアはこんな感じ

まずは、新着記事一覧ページをつくります。

新着記事一覧ページとは、新着記事のエリアにある「もっとみる」のページのことです。

新着記事一覧ページの作り方
STEP
固定ページを新規追加

ワードプレス管理画面から
「固定ページ→新規追加」を選択。

STEP
新着記事一覧ページの設定をする
新着記事一覧ページの設定をする
クリックタップで画像拡大
  1. ページタイトルを決める
  2. 表示状態を「公開」にする
  3. パーマリンクを「new-posts」にする

ページタイトルは「新着記事」や「New Posts」など、わかりやすいタイトルにしておきましょう。

今回は「New Posts」というタイトルで作成します。

STEP
新着記事一覧ページの設定はおわり

ページの中身は何も書かなくてOKです。

新着記事一覧ページのURLはあとから入力する箇所があります。覚えておいてくださいね。

パーマリンクを「new-posts」にした場合、

URLは「https://アナタのブログのURL/new-posts」といった感じになります。

ちなみに当ブログだと「https://akipoblog.com/new-posts/」です。

「もっとみる」のページが完成したら、新着記事エリアを作っていきます。

新着記事エリアの作り方
STEP
フルワイドを追加
クリックタップで画像拡大
  1. ページ左上の+を選択
  2. SWELLブロック→フルワイドを選択
STEP
フルワイドの設定
クリックタップで画像拡大
  1. コンテンツの横幅を選ぶ
  2. 上下のpadding量を選ぶ
  3. 背景色を決める

ここは基本お好みになります。

STEP
フルワイドの境界線の表示を設定

境界線の表示を設定します。

境界線とはこの境目のことです

境目とは?

先ほどの背景色を決めたところから下へスクロールすると、境界線の設定ができます。

  1. 境界線の形状を選ぶ
  2. 境界線の高さを決める

境界線の形状や高さは、お好きなものを選んでください。

ちなみに当ブログは、形状は「波」で高さは「4」にしています。

波の場合、「4」くらい高さがあったほうが見栄えがいい気がします。(お好みで決めてください)

STEP
見出しを追加
クリックタップで画像拡大

見出しを入力します。

テキストでも画像でもお好きなほうで。

画像の場合はインライン画像で挿入しましょう。

インライン画像にすることで、見出し(h2)として認識されます。

インライン画像の挿入方法

STEP
「インライン画像」を選択
STEP
画像を選択、画像の幅を設定
STEP
投稿リストを追加
クリックタップで画像拡大
  1. ページ左上の+を選択
  2. SWELLブロック→「投稿リスト」を選択
STEP
投稿リストの内容を決める
クリックタップで画像拡大
  1. 表示する投稿数:3
  2. レイアウト:カード型
  3. 投稿の表示順序:新着順
  4. カテゴリー表示位置:日付の横

投稿の表示順序が「新着順」になっていれば、他の項目はお好みで大丈夫です。

STEP
投稿リストのカラム・リンクの設定
クリックタップで画像拡大
  1. PCとモバイルのカラム数を選択
  2. 抜粋文の文字数は「0」にする
  3. MOREリンクの表示テキストを決める
  4. リンク先のURLを追加

リンク先のURLは【①新着記事一覧をつくる】で作成した固定ページのURLを入力します。

どのURLか忘れちゃった人はココをクリックタップしてください。そのステップまで戻ります。

以上で完成です。
次は人気記事エリアの作り方を解説します。

人気記事エリアの作り方

人気記事エリアの作り方を紹介します。

よく読まれている記事のエリアをつくることで、読者は「とりあえず読んでみようかな」という気持ちになります。

こんな感じを目指します

人気記事エリアをつくる前に「人気記事一覧ページ」をつくります。

人気記事一覧ページの作り方
STEP
固定ページを新規追加

ワードプレス管理画面から
「固定ページ→新規追加」を選択。

STEP
人気記事一覧ページの設定をする
クリックタップで画像拡大
  1. ページタイトルを決める
  2. 表示状態を「公開」にする
  3. パーマリンクを「popular」にする

ページタイトルは「人気記事一覧」にします。

新着記事一覧のページとは違い、こちらのタイトルは表示されます。

STEP
ページ属性を設定

ページ属性はパーマリンクを設定した下のほうにあります。

テンプレートを「人気記事一覧」に設定します。

STEP
設定は以上!

更新ボタンを押して下準備は完了です。

それでは、人気記事エリアを作っていきましょう。

5ステップで出来上がります!

人気記事エリアの作り方
STEP
フルワイドを追加
クリックタップで画像拡大
  1. ページ左上の+を選択
  2. SWELLブロック→「フルワイド」を選択

フルワイドの詳しい設定方法はこちら

STEP
見出しを追加

見出しを入力します。

テキストでも画像でもお好きなほうで。

画像の場合はインライン画像で挿入しましょう。

インライン画像のやり方

STEP
投稿リストを追加
クリックタップで画像拡大
  1. ページ左上の+を選択
  2. SWELLブロック→「投稿リスト」を選択
STEP
投稿リストの内容を決める
クリックタップで画像拡大
  1. 表示する投稿数:3
  2. レイアウト:カード型
  3. 投稿の表示順序:人気順
  4. カテゴリー表示位置:日付の横

投稿の表示順序が「人気順」になっていれば、他の項目はお好みで大丈夫です。

STEP
人気記事一覧ページへのボタンをつくる
クリックタップで画像拡大
  1. PCとモバイルのカラム数を選択
  2. 抜粋文の文字数は「0」にする
  3. MOREリンクの表示テキストを決める
  4. リンク先のURLを追加

人気記事一覧ページのURLは「https://アナタのブログのURL/popular/」を入力します。

このURLは人気記事一覧ページを作成の時に設定したパーマリンクです。

以上で人気記事エリアは完成です。
次はカテゴリーエリアの作り方を解説します。

カテゴリーエリアの作り方

こんな感じを目指します

特定のカテゴリーの記事だけを集めたエリアの作り方です。

カテゴリーエリアの作り方
STEP
フルワイドを追加
クリックタップで画像拡大
  1. ページ左上の+を選択
  2. SWELLブロック→「フルワイド」を選択

フルワイドの詳しい設定方法はこちら

STEP
エリアの見出しをつくる

ここの部分をつくります

見出しの作り方は、新着記事エリアのやり方と同じなので省略します。

見出しの作り方

STEP
カラムを追加
  1. ページ左上の+を選択
  2. デザインブロック→「カラム」を選択
STEP
カラムを編集

【50/50】を選択。

割合はお好みでOKですが、今回は等間隔にします。

STEP
左側のカラムをつくる

ひとつの記事を目立たせて表示させます。

  1. +を選択
  2. SWELLブロック→「投稿リスト」を選択

まずは、特定のカテゴリーの記事だけ表示させる設定をしましょう。

特定のカテゴリーの記事だけ表示させる方法

STEP
Pickupタブへ移動

右側にある「ブロック」→「Pickup」タブに進みます。

STEP
カテゴリーを選ぶ

下のほうにカテゴリーを選択できるところがあるので、表示させたいカテゴリーを選びます。

その後、「Settings」タブを選び直し、表示の設定をします。

  1. 表示する投稿数を「1」
  2. レイアウト「カード型」
  3. 投稿の表示順序はお好みで

アイキャッチをひとつだけ大きく表示させるには、投稿数を「1」の「カード型」を選択します。

表示の順序はお好みで設定してください。

新着記事を表示させたければ「新着順」、一番読まれている記事を表示させたければ「人気順」、ランダム表示がよければ「ランダム」にチェックします。

STEP
右側のカラムをつくる
↑テキスト型の表示

当サイトは「リスト型」表示になっていますが、今回は「テキスト型」のやり方を紹介します。

まずは、特定のカテゴリーの記事だけ表示させる設定をしましょう。

特定のカテゴリーの記事だけ表示させる方法

STEP
Pickupタブへ移動

右側にある「ブロック」→「Pickup」タブに進みます。

STEP
カテゴリーを選ぶ

下のほうにカテゴリーを選択できるところがあるので、表示させたいカテゴリーを選びます。

特定のカテゴリーの記事だけ表示されるようになったら「Settings」のタブに戻り、

  1. 表示する投稿数を「3」
  2. レイアウト「テキスト型」
  3. 投稿の表示順序「新着順」
  4. カテゴリー表示位置「表示しない」

テキスト型にすることでアイキャッチは表示されません。

特定のカテゴリーの記事しか表示されないので、カテゴリ表示位置は「表示しない」のほうがスッキリして見やすいです。

②を「リスト型」にすれば、当サイトと同じ表示になります。

つづいて、MOREリンクの設定です。

クリックタップで画像拡大
  1. ボタンに表示させたいテキストを入力
  2. リンク先のURLを入力

リンク先のURLは、カテゴリーのURLを入力してください。

ピックアップエリアの作り方

作り方はカテゴリーエリアと同じ作り方です。

カテゴリーエリアの作り方

STEP6にある「投稿記事リスト」の設定を変えるだけで、ピックアップ記事が表示されます。

投稿の表示順序を「ランダム」だけでおしまいです。

STEP7にあるMOREリンクの設定は空白のままでも大丈夫です。

プロフィールエリアの作り方

こんな感じを目指します

プロフィールエリアの作り方
STEP
フルワイドを追加
クリックタップで画像拡大
  1. ページ左上の+を選択
  2. SWELLブロック→「フルワイド」を選択

フルワイドの詳しい設定方法はこちら

STEP
見出しをつくる

ここの部分をつくります

見出しの作り方は、新着記事エリアのやり方と同じなので省略します。

見出しの作り方

STEP
画像・テキスト・ボタンを追加
  1. 表示させたい画像を追加
  2. 段落を追加し、好きなように書く
  3. SWELLボタンを追加

SWELLアイコンを表示させてみよう

SWELLアイコンとはこんなアイコンです→

「詳しいプロフィール」の部分はプロフィールページへリンクをしています。

SWELLアイコンの一覧

SWELLボタンの設置

  1. ページ左上の+を選択
  2. SWELLブロック→「SWELLボタン」を選択

ボタンの文字はご自由に。リンク先はお問い合わせのページにしています。

応用①:「キーワードから探す」をつくる方法

これを作る方法です

「キーワードから探す」をつくる方法
STEP
キャプション付きブロックを選ぶ
  1. ページ左上の+を選択
  2. SWELLブロック→「キャプション付きブロック」を選択
STEP
リストを選択する
  1. ページ左上の+を選択
  2. 「リスト」を選択

リストの設定の中で「横並び」を選択するとこの画像のようになります。

STEP
キーワードを入力してリンクを設定する
  1. キーワードを入力する
  2. キーワードにリンクを設定する

キーワードはお好きなワードでOKですが、それぞれのキーワードにリンク先を設定する必要があります。

上記の場合、キーワードにタグのURLを設定しています。

すべてのタグが表示されてしまいますが、「タグクラウド」というブロックもあります。

こちらを使えば、いちいちリンク先を設定する必要はありません。

応用②:フルワイド内でエリアをわける方法

次は、フルワイド内に2つのエリアをつくる方法です。

今回はカテゴリーエリアピックアップエリアにしてみました。

ご自身のブログにあった項目で設定しみてください。

こんな感じを目指します

こちらは7つのステップで出来ます

フルワイド内でエリアをわける方法
STEP
フルワイドを追加
クリックタップで画像拡大
  1. ページ左上の+を選択
  2. SWELLブロック→「フルワイド」を選択

フルワイドの詳しい設定方法はこちら

STEP
カラムを追加
  1. ページ左上の+を選択
  2. デザインブロック→「カラム」を選択
STEP
カラムを編集

【50/50】を選択。

割合はお好みでOKですが、今回は等間隔にします。

STEP
左側のエリアをつくる

まずは、左側のエリア(カテゴリーエリア)の見出しをつくります。

  1. +を選択
  2. 見出しを選択

見出しはテキストでも画像でもお好きなほうをどうぞ。

画像を使う場合は、インライン画像にしましょう。
インライン画像のやり方

STEP
投稿リストを追加
  1. +を選択
  2. SWELLブロック→投稿リストを選択
STEP
表示させたいカテゴリーを選択

右側の「Pickup」を選択。

表示させたいカテゴリーまたはタグを選択。

STEP
表示を整える
  1. Settingsを選択
  2. 表示する投稿数を選択
  3. レイアウトを選択
  4. カテゴリー表示位置「表示しない」

今回は特定のカテゴリーを表示させるので、カテゴリーの表示位置は「表示しない」を選びました。

以上で左側のエリアの完成です

右側のエリア(ピックアップ記事エリア)の作り方もほぼ同じです。

フルワイドの設定は必要ないので、左側エリアのSTEP4から進めます。

STEP5の投稿リストの追加まで進めたら、

  1. Settingsを選択
  2. 表示する投稿数・レイアウトを選択
  3. 投稿表示の順序「ランダム」にする
  4. カテゴリー表示位置「日付の横」

投稿数やレイアウトはお好みで。

カテゴリー表示位置はアイキャッチに被らないように日付の横にしました。

今回はピックアップ記事でしたが、③投稿表示の順序を「人気順」にすれば、人気記事の表示になります。

右側のエリアも完成!フルワイド内でのエリアわけも終了です。

応用③:カテゴリーアイコンをつくる方法

こんな感じのもの

カテゴリーアイコンの作り方
STEP
フルワイドを追加
クリックタップで画像拡大
  1. ページ左上の+を選択
  2. SWELLブロック→「フルワイド」を選択

フルワイドの詳しい設定方法はこちら

STEP
リッチカラムを選択
  1. ページ左上の+を選択
  2. 「リッチカラム」を選択
STEP
カラム数を決める

当サイトの場合、3つのカテゴリーなので「3」に設定しています。

カラム間の余白も自由に設定してください。

STEP
カラムの中に画像を追加

用意した画像を追加します。

画像を作るならがオススメです!

STEP
画像にリンクを貼る

画像を選択して、リンク(カテゴリーのURL)を設定します。

画像にそれぞれリンクを設定したら完了です。

③作成したホームページを表示させる

固定ページで作成が終わったら、ホームページに表示させる設定をします。

ワードプレス管理画面から「外観→カスタマイズ→WordPress設定→ホームページ設定」と進みます。

  1. ホームページを「固定ページ」を選択
  2. 投稿ページを「New Posts」を選択

最後に「公開」ボタンを押して、完了です。

サイト型をつくる方法のまとめ

CSSやコードを使わずに、簡単にサイト型のトップページが作れました。

サイト型トップページを作れたのは、ブログテーマ『』のおかげです。

慣れてくるとアレンジができるようになりますよ。

』を使って、オリジナリティ溢れるサイトを作ってみませんか?

SWELLを使っているサイト集

さとしんさん(@__satoshin)が運営しているWebNote+では、サイト型のトップページを使っているブログを数多く紹介しています。

いろんなデザインが見られるので勉強になりますよ!

当ブログも掲載してもらいました。ありがとうございます。

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

この記事を書いた人

ひとりの女の子を育てるシングルマザー。本業だけの収入では不安なため、副業としてブログ運営を始める。ブログ開設から約3ヶ月で月1万円の収益を達成。その後収益は伸び続けている。A8メディアオブザイヤー2021【子育て・マタニティ部門】1位受賞。

目次