【ブログ初心者でも簡単】SWELLでサイト型ホームページを作る方法
当ブログのホームページはサイト型で表示されています。
ブログテーマSWELLでは、サイト型のホームページをつくることができます。
サイト型のホームページにしたことで、オリジナリティを出すことができたり、目当てのコンテンツに誘導しやすいなどのメリットがあります。
今回は、サイト型ホームページの作り方を解説します。
- サイト型のトップページをつくりたい
- コードやCSSの知識は無いけど、おしゃれなサイトをつくりたい
- ブログ訪問者がのぞむコンテンツにスムーズに誘導したい
サイト型のブログをつくる順序
サイト型のブログをつくるには、
- 新着記事一覧ページをつくる
- ホームページをつくる
- 作成したホームページを表示させる
という手順ですすめます。
それでは詳しく解説します
①新着記事一覧ページをつくる
はじめに、新着記事一覧ページをつくります。
つまり、新着記事のエリアにある「もっとみる」のページをつくることです。
ワードプレス管理画面から「固定ページ→新規追加」を選択。
- ページタイトルを決める
- 表示状態を「公開」にする
- パーマリンクを「new-posts」にする
ページタイトルは「新着記事」や「New Posts」など、わかりやすいタイトルにしておきましょう。
今回は「New Posts」というタイトルで作成します。
ページの中身は何も書かなくてOKです。
このページのURLは後々つかうので覚えておいてくださいね。
②ホームページをつくる
ブログを訪れて、はじめに表示される画面（ホームページ）をつくります。
まずは、ホームページの下準備。
ワードプレス管理画面から「固定ページ→新規追加」を選択。
ページタイトルは表示されないので、なんでも大丈夫です。
今回は「固定ページ」というタイトルにしておきます。
つづいてエリアごとの作成方法を紹介します
新着記事エリア
はじめに新着記事エリアをつくります。
新着記事エリアはこんな感じ
全部で7ステップです
- ページ左上の＋を選択
- SWELLブロック→フルワイドを選択
見出しを入力します。テキストでも画像でもお好きなほうで。
画像の場合はインライン画像で挿入しましょう。インライン画像にすることで、見出し（h2）として認識されます。
セクション用見出しを「下に線」や「左右に線」に設定している場合、画像のまわりに線が出てしまいます。その場合は、「装飾なし」に設定を変更するか、自分でクラスをつけます。
- ページ左上の＋を選択
- SWELLブロック→投稿リストを選択
- 表示する投稿数：６
- レイアウト：カード型
- 投稿の表示順序：新着順
- カテゴリー表示位置：日付の横
投稿の表示順序が「新着順」になっていれば、他の項目はお好みで大丈夫です。
- PCとモバイルのカラム数を選択
- MOREリンクの表示テキストを決める
- リンク先のURLを追加
リンク先のURLは【①新着記事一覧をつくる】で作成した固定ページのURLを入力します。
- コンテンツの横幅：お好み
- 上下のpadding量：お好み
- 背景色：お好み
サイトのデザインに合わせて設定してください。
- 境界線の形状：波
- 境界線の高さレベル：4
形状も高さレベルもお好みで。波は「4」くらいあったほうがキレイに見えます。
以上で完成です。次はカラムで分ける作成方法を解説します。
フルワイド内でエリアをわける
次は、フルワイド内に2つのエリアをつくる方法です。
今回は特定のカテゴリーとピックアップにしてみました。
作り方は同じなので、ご自身のブログにあった項目で設定しみてください。
こんな感じを目指します
こちらも7つのステップです
- ページ左上の＋を選択
- SWELLブロック→フルワイドを選択
- ページ左上の＋を選択
- デザインブロック→カラムを選択
【50/50】を選択。割合はお好みでOKですが、今回は等間隔にします。
- ＋を選択
- 見出しを選択
見出しはテキストでも画像でもお好きなほうをどうぞ。
- ＋を選択
- SWELLブロック→投稿リストを選択
右側の「Pickup」を選択。
表示させたいカテゴリーまたはタグを選択。
- Settingsを選択
- 表示する投稿数を選択
- レイアウトを選択
- カテゴリー表示位置「表示しない」
今回は特定のカテゴリーを表示させるので、カテゴリーの表示位置は「表示しない」を選びました。
特定のカテゴリーエリアの完成です
右側のエリアの作り方もほぼ同じです。
STEP4のやり方で見出しをつくり、STEP５の投稿リストの追加まで進めたら
- Settingsを選択
- 表示する投稿数・レイアウトを選択
- ランダム表示にする
- カテゴリー表示位置「日付の横」
投稿数やレイアウトはお好みで。カテゴリー表示位置はアイキャッチに被らないように日付の横にしました。
右側のエリアも完成！フルワイド内でのエリアわけも終了です。
③作成したホームページを表示させる
固定ページで作成が終わったら、ホームページに表示させる設定をします。
ワードプレス管理画面から「外観→カスタマイズ→WordPress設定→ホームページ設定」と進みます。
- ホームページを「固定ページ」を選択
- 投稿ページを「New Posts」を選択
最後に「公開」ボタンを押して、完了です。
サイト型をつくる方法のまとめ
CSSやコードを使わずにおしゃれなサイトを簡単に作れることがおわかりいただけたかと思います。
私も初めて作成した時は、戸惑いましたが、慣れてくるとアレンジできるようになります。
ブログテーマSWELLをアレンジして、ブログにオリジナリティを出してみましょう♪
最後までご覧いただきありがとうございます！
「いいねボタン」を押していただけると励みになります。
この記事が気に入ったら
フォローしてね！