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

URLをコピーする
URLをコピーしました!

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

当ブログのトップページはサイト型で表示されています。

当ブログのトップページを見てみる

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

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

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

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

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

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

目次

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

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

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

  1. 新着記事一覧ページをつくる
  2. ホームページをつくる
  3. 作成したホームページを表示させる

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

あやまる

それでは詳しく解説します

①新着記事一覧ページをつくる

①新着記事一覧ページをつくる

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

つまり、新着記事のエリアにある「もっとみる」のページをつくります。

あやまる

早速作ってみましょう!

新着記事一覧ページの作り方
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
固定ページを新規追加

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

STEP
ページタイトルを設定

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

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

あやまる

つづいてエリアごとの作成方法を紹介します

記事をエリアごとに分けると見やすいですよ。

たとえば、

といった感じです。

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

新着記事エリアの作り方

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

あやまる

5つのステップで完成します

新着記事エリアの作り方
STEP
フルワイドを追加
  1. ページ左上の+を選択
  2. SWELLブロック→フルワイドを選択

STEP
見出しを追加

見出しを入力します。テキストでも画像でもお好きなほうで。

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

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

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

STEP
「見出し」を選択
STEP
「インライン画像」を選択
STEP
画像を選択、画像の幅を設定
STEP
見出しスタイルを「セクション用」に変更

セクション用見出しを「下に線」や「左右に線」に設定している場合、画像のまわりに線が出てしまいます。その場合は、「装飾なし」に設定を変更するか、自分でクラスをつけます。

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

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

STEP
投稿リストのカラム・リンクの設定
  1. PCとモバイルのカラム数を選択
  2. MOREリンクの表示テキストを決める
  3. リンク先のURLを追加

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

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

あやまる

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

人気記事エリアの作り方

こんな感じを目指します

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

ホームページの下準備
STEP
固定ページを新規追加

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

STEP
ページタイトルを設定

「人気記事一覧」というタイトルにします。

STEP
新着記事一覧ページの設定をする
  1. ページタイトルを決める
  2. 表示状態を「公開」にする
  3. パーマリンクを「popular」にする

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

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

STEP
ページ属性を設定

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

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

STEP
設定は以上!

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

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

あやまる

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

人気記事エリアの作り方
STEP
フルワイドを追加
  1. ページ左上の+を選択
  2. SWELLブロック→「フルワイド」を選択
STEP
見出しを追加

見出しを入力します。テキストでも画像でもお好きなほうで。

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

インライン画像のやり方

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

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

STEP
人気記事一覧ページへのボタンをつくる
  1. ページ左上の+を選択
  2. SWELLブロック→「SWELLボタン」を選択
STEP
ボタンの設定
  1. 表示させたいテキストを入力
  2. 人気記事一覧ページのURLを入力
  3. ボタンの種類を選ぶ

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

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

あやまる

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

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

こんな感じを目指します

あやまる

それでは特定のカテゴリーの記事だけを集めたエリアを作ってみましょう!

カテゴリーエリアの作り方
STEP
フルワイドを追加
  1. ページ左上の+を選択
  2. SWELLブロック→「フルワイド」を選択
STEP
フルワイドの表示の設定をする
  1. コンテンツの横幅を選ぶ
  2. 上下のpadding量を選ぶ
  3. 背景色を決める

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

つづいて境界線の表示設定をします。

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

境目とは?

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

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

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

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

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

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

ここの部分をつくります

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

見出しの作り方

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

【50/50】を選択。割合はお好みでOKですが、今回は等間隔にします。

STEP
左側のカラムをつくる

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

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

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

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

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

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

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

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

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

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

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

STEP
右側のカラムをつくる

リスト表示させます

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

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

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

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

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

  1. ボタンに表示させたいテキストを入力
  2. リンク先のURLを入力

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

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

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

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

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

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

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

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

これを作る方法です

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

わたしの場合、タグにしているものをキーワードとしているので、リンク先はタグの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. カテゴリー表示位置「表示しない」

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

あやまる

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

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

STEP1〜STEP3まで進み、STEP4のやり方で見出しを作ります。

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

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

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

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

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

あやまる

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

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

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

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

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

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

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

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

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

SWELLを使っているサイト集!

さとしんさん(@__satoshin)がサイト型のトップページを使っているブログを紹介しています。

あやまる

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

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

わたしがCSSなどの知識が無くても作れたのは、ブログテーマ『 SWELL 』のおかげです。

はじめてサイト型を作成した時には戸惑いましたが、慣れてくるとアレンジができるようになります。

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

最後までお読みいただきありがとうございます。

\ 押していただけると励みになります /

ブログランキング・にほんブログ村へ

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
目次
閉じる