【ブログ初心者でも簡単】SWELLでサイト型ホームページを作る方法

【ブログ初心者でも簡単】SWELLでサイト型ホームページを作る方法
URLをコピーする
URLをコピーしました!

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

ブログテーマSWELLでは、サイト型のホームページをつくることができます。

サイト型のホームページにしたことで、オリジナリティを出すことができたり、目当てのコンテンツに誘導しやすいなどのメリットがあります。

今回は、サイト型ホームページの作り方を解説します。

この記事はこんな人におすすめです
  • サイト型のトップページをつくりたい
  • コードやCSSの知識は無いけど、おしゃれなサイトをつくりたい
  • ブログ訪問者がのぞむコンテンツにスムーズに誘導したい
目次

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

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

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

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

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

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

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

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

STEP
固定ページを新規追加

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

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

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

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

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

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

このページのURLは後々つかうので覚えておいてくださいね。

②ホームページをつくる

ブログを訪れて、はじめに表示される画面(ホームページ)をつくります。

まずは、ホームページの下準備。

STEP
固定ページを新規追加

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

STEP
ページタイトルを設定

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

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

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

新着記事エリア

はじめに新着記事エリアをつくります。

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

全部で7ステップです

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を入力します。

STEP
フルワイドの編集
  1. コンテンツの横幅:お好み
  2. 上下のpadding量:お好み
  3. 背景色:お好み

サイトのデザインに合わせて設定してください。

STEP
フルワイドの境目の編集
  1. 境界線の形状:波
  2. 境界線の高さレベル:4

形状も高さレベルもお好みで。波は「4」くらいあったほうがキレイに見えます。

以上で完成です。次はカラムで分ける作成方法を解説します。

フルワイド内でエリアをわける

次は、フルワイド内に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. カテゴリー表示位置「日付の横」

投稿数やレイアウトはお好みで。カテゴリー表示位置はアイキャッチに被らないように日付の横にしました。

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

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

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

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

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

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

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

CSSやコードを使わずにおしゃれなサイトを簡単に作れることがおわかりいただけたかと思います。

私も初めて作成した時は、戸惑いましたが、慣れてくるとアレンジできるようになります。

ブログテーマSWELLをアレンジして、ブログにオリジナリティを出してみましょう♪

+2

最後までご覧いただきありがとうございます!
「いいねボタン」を押していただけると励みになります。

【ブログ初心者でも簡単】SWELLでサイト型ホームページを作る方法

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

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