ブログと聞いてイメージするのは、トップページに新着記事がずらりとならんだサイトではないでしょうか。
ブログ型のトップページでもいいのですが、せっかくブログをやるならトップページもこだわりたい!
ホームページのように、新着記事やカテゴリーごとの配置にこだわりたい!!
オリジナリティのあるブログにしたい!!!
「でもトップページをサイト型にするのって難しそう・・・」
大丈夫です!!
SWELLならサイト型へ簡単にカスタマイズできます。
今回は、SWELLを使ってトップページをサイト型にカスタマイズする方法をお話しします。
- SWELLでサイト型のトップページを作る手順
- SWELLの便利なブロック機能
![](https://ryulifeblog.com/wp-content/uploads/2020/09/97ff0e400bc3bae5193f7272fc46a00c.png)
サイト型ってなに?
![](https://ryulifeblog.com/wp-content/uploads/2020/09/d160a53f71104dc4e5ed3c300ba3ba79-1.png)
![](https://ryulifeblog.com/wp-content/uploads/2020/09/d160a53f71104dc4e5ed3c300ba3ba79-1.png)
![](https://ryulifeblog.com/wp-content/uploads/2020/09/d160a53f71104dc4e5ed3c300ba3ba79-1.png)
必要な情報がまとめられたページのことだよ
SWELLでトップページをサイト型にカスタマイズ
![](https://ryulifeblog.com/wp-content/uploads/2020/12/1811562-1.jpg)
![](https://ryulifeblog.com/wp-content/uploads/2020/12/1811562-1.jpg)
サイト型にする手順は簡単です。
- 新着記事用の固定ページを作る
- トップページ用の固定ページを作る
- カスタマイザーでホームページ設定
この3つの手順でサイト型にできます。
それぞれの手順を説明していきます。
新着記事用の固定ページを作る
まずは、新着記事一覧を表示するための固定ページを作ります。
「固定ページ」「新規追加」をクリックします。
![トップページサイト型カスタマイズ](https://ryulifeblog.com/wp-content/uploads/2020/12/5-5.jpg)
![トップページサイト型カスタマイズ](https://ryulifeblog.com/wp-content/uploads/2020/12/5-5.jpg)
「タイトル」「URLスラッグ(new-postと入力)」を入力して「公開」をクリックします。
![トップページサイト型カスタマイズ](https://ryulifeblog.com/wp-content/uploads/2020/12/6-5.jpg)
![トップページサイト型カスタマイズ](https://ryulifeblog.com/wp-content/uploads/2020/12/6-5.jpg)
新着記事一覧用のページはこれで完了です。
トップページ用の固定ページを作る
トップページ用の固定ページを作ります。
「固定ページ」「新規追加」をクリックします。
![トップページサイト型カスタマイズ](https://ryulifeblog.com/wp-content/uploads/2020/12/5-5.jpg)
![トップページサイト型カスタマイズ](https://ryulifeblog.com/wp-content/uploads/2020/12/5-5.jpg)
「タイトル」にHOMEと入力して公開をクリックします。
この固定ページがトップページ用の固定ページです。
トップページ用のページ編集方法は、後ほどご説明します。
カスタマイザーでホームページ設定
さきほど作成したトップページ用固定ページと新着記事用固定ページをホームページ設定します。
「外観」「カスタマイズ」「WordPress設定」「ホームページ設定」の順番でクリックします。
「固定ページ」にチェックを入れます。
「ホームページ」にさきほど作成したトップページ用固定ページを選択します。
「投稿ページ」にさきほど作成した新着記事用固定ページを選択します。
![トップページサイト型カスタマイズ](https://ryulifeblog.com/wp-content/uploads/2020/12/21.jpg)
![トップページサイト型カスタマイズ](https://ryulifeblog.com/wp-content/uploads/2020/12/21.jpg)
これでホームページ設定は完了です。
SWELLトップページ用の固定ページを編集しよう
ホームページ設定が終わったら、トップページ用の固定ページを編集します。
通常はこの編集作業がとても難しいのですが、SWELLならとても簡単です。
さぁ編集だ!!
とその前に、まずはどんなトップページにしたいかデザインしましょう。
設計図がないと家は建ちませんよね。
ブログも完成したデザインをイメージすることで、作業が楽になります。
クラゲブログはこんな感じでデザインしました。
![トップページサイト型カスタマイズ](https://ryulifeblog.com/wp-content/uploads/2020/12/5.0-1.jpg)
![トップページサイト型カスタマイズ](https://ryulifeblog.com/wp-content/uploads/2020/12/5.0-1.jpg)
手書きでもいいのですが、字が汚いのでエクセルで作ってます。
では、さっそく作っていきましょう。
見出しを作る
見出しブロックか画像で見出しを作ります。
画像で見出しを作る場合は、canvaで作るのが簡単です。
Canvaはこちら
クラゲブログはサイズ300×70で見出しを作りました。
Canvaの使い方は、こちらの記事を参考にしてください。
画像のように好きな見出しを選びます。
![トップページサイト型カスタマイズ](https://ryulifeblog.com/wp-content/uploads/2020/12/7-6.jpg)
![トップページサイト型カスタマイズ](https://ryulifeblog.com/wp-content/uploads/2020/12/7-6.jpg)
画像の場合はクリックすると拡大して表示されます。
気になる場合は「SWELL設定」「機能停止」で「投稿画像をクリックで拡大表示する機能を停止」にチェックを入れましょう。
投稿リストで記事を並べる
見出しの下に投稿リスト機能で記事を並べます。
ブロックを追加して「投稿リスト」をクリックします。
これだけで簡単に投稿リストを呼び出せます。
![トップページサイト型カスタマイズ](https://ryulifeblog.com/wp-content/uploads/2020/12/8-5.jpg)
![トップページサイト型カスタマイズ](https://ryulifeblog.com/wp-content/uploads/2020/12/8-5.jpg)
投稿リストでは呼び出した記事のレイアウトを変更したり、呼び出す記事を選択できます。
リストのレイアウトについては、こちらを参考ください。
\タブをクリックして切り替え/
![トップページサイト型カスタマイズ](https://ryulifeblog.com/wp-content/uploads/2020/12/9-4.jpg)
![トップページサイト型カスタマイズ](https://ryulifeblog.com/wp-content/uploads/2020/12/9-4.jpg)
特定の記事をピックアップすることも可能です。
カテゴリーやタグで絞り込んだり、投稿IDで追加したり削除もできます。
\タブをクリックして切り替え/
![トップページサイト型カスタマイズ](https://ryulifeblog.com/wp-content/uploads/2020/12/11-2.jpg)
![トップページサイト型カスタマイズ](https://ryulifeblog.com/wp-content/uploads/2020/12/11-2.jpg)
これだけで投稿リストを追加できます。
投稿リストを使って、レイアウトやカテゴリーや並び方をクリックするだけです。
簡単ですね。
カラムを使って左右に並べる
カラムブロックを使えば、左右にブロックを並べられます。
ブロックを追加して「カラム」をクリックします。
今回は50/50のカラムを使いました。
![トップページサイト型カスタマイズ](https://ryulifeblog.com/wp-content/uploads/2020/12/13-3.jpg)
![トップページサイト型カスタマイズ](https://ryulifeblog.com/wp-content/uploads/2020/12/13-3.jpg)
左右のカラムに投稿リストを追加して記事を並べます。
自分が考えたデザインになるようにカラムを活用しましょう。
ちょっとひと工夫(新着1番目の記事が被ってしまう)
左に最新記事、右に2番目以降の記事を並べたかったのですが、1番目の記事が被ってしまいました。
投稿IDで右の1番目の記事を削除することもできますが、毎回修正するのはめんどうです。
CSSを使って自動的に修正されるようにします。
![トップページサイト型カスタマイズ](https://ryulifeblog.com/wp-content/uploads/2020/12/14-3.jpg)
![トップページサイト型カスタマイズ](https://ryulifeblog.com/wp-content/uploads/2020/12/14-3.jpg)
カラム右側を選択して「追加CSSクラス」になんでもいいので入力します。
今回は「newpost1」と入力しました。
![トップページサイト型カスタマイズ](https://ryulifeblog.com/wp-content/uploads/2020/12/15-2.jpg)
![トップページサイト型カスタマイズ](https://ryulifeblog.com/wp-content/uploads/2020/12/15-2.jpg)
「外観」「カスタマイズ」「追加CSS」で以下のコードを入力します。
- .追加CSSクラスに入力した文字 > ul >li:first-child {
- display: none;
- }
![トップページサイト型カスタマイズ](https://ryulifeblog.com/wp-content/uploads/2020/12/16-2.jpg)
![トップページサイト型カスタマイズ](https://ryulifeblog.com/wp-content/uploads/2020/12/16-2.jpg)
これでオッケーです。
プレビューで見ると、右カラムの1番目の記事が消えました。
記事数が1つ少なくなるので「表示する投稿数」で調整しましょう。
![トップページサイト型カスタマイズ](https://ryulifeblog.com/wp-content/uploads/2020/12/17-2.jpg)
![トップページサイト型カスタマイズ](https://ryulifeblog.com/wp-content/uploads/2020/12/17-2.jpg)
SWELLボタンで記事一覧へのリンクを作る
最後にSWELLボタンで、新着記事一覧やカテゴリー一覧へのリンクを作ります。
ブロックを追加して「SWELLボタン」を選択します。
![トップページサイト型カスタマイズ](https://ryulifeblog.com/wp-content/uploads/2020/12/18-2.jpg)
![トップページサイト型カスタマイズ](https://ryulifeblog.com/wp-content/uploads/2020/12/18-2.jpg)
「ボタンに表示するテキスト」「ボタンのリンク先」を入力します。
ボタンは5種類あるので、好きなボタンを選びましょう。
![トップページサイト型カスタマイズ](https://ryulifeblog.com/wp-content/uploads/2020/12/19-2.jpg)
![トップページサイト型カスタマイズ](https://ryulifeblog.com/wp-content/uploads/2020/12/19-2.jpg)
これで1つのエリアが完成しました。
パソコンとモバイルでデザインが変わるので、モバイル版もチェックしましょう。
あとは、同じ手順で下におすすめ記事やカテゴリー別記事エリアを作っていきます。
カテゴリーが多い場合は、タブ切り替えブロックが便利です。
![トップページサイト型カスタマイズ](https://ryulifeblog.com/wp-content/uploads/2020/12/20.jpg)
![トップページサイト型カスタマイズ](https://ryulifeblog.com/wp-content/uploads/2020/12/20.jpg)
SWELLの便利な機能
SWELLには便利な機能がたくさんあります。
サイト型のページを作るのに便利な機能を紹介します。
フルワイドブロック
フルワイドブロックを使えば、ちょっとしたアレンジができます。
フルワイドブロックで、上下の境界線の形状を変えることで、デザインにアクセントがつきます。
![トップページサイト型カスタマイズ](https://ryulifeblog.com/wp-content/uploads/2020/12/7f3f9106a5c1dbc11f7ef5f8b46d7a8f.jpg)
![トップページサイト型カスタマイズ](https://ryulifeblog.com/wp-content/uploads/2020/12/7f3f9106a5c1dbc11f7ef5f8b46d7a8f.jpg)
このようなデザインにできます。
![トップページサイト型カスタマイズ](https://ryulifeblog.com/wp-content/uploads/2020/12/ae529759b7feba94c9272e6f77043416.jpg)
![トップページサイト型カスタマイズ](https://ryulifeblog.com/wp-content/uploads/2020/12/ae529759b7feba94c9272e6f77043416.jpg)
上下のpadding量を調整すれば、真ん中のブロックを大きくできます。
![トップページサイト型カスタマイズ](https://ryulifeblog.com/wp-content/uploads/2020/12/33159877405cce21719b1dc50f1a9677.jpg)
![トップページサイト型カスタマイズ](https://ryulifeblog.com/wp-content/uploads/2020/12/33159877405cce21719b1dc50f1a9677.jpg)
![トップページサイト型カスタマイズ](https://ryulifeblog.com/wp-content/uploads/2020/12/7d778e7b64d141cbffe79d8ff0461d03.jpg)
![トップページサイト型カスタマイズ](https://ryulifeblog.com/wp-content/uploads/2020/12/7d778e7b64d141cbffe79d8ff0461d03.jpg)
フルワイドブロックには画像も設定できます。
![トップページサイト型カスタマイズ](https://ryulifeblog.com/wp-content/uploads/2020/12/740c33baee2f19dc1fd572bced167eef.jpg)
![トップページサイト型カスタマイズ](https://ryulifeblog.com/wp-content/uploads/2020/12/740c33baee2f19dc1fd572bced167eef.jpg)
オーバーレイカラーとオーバーレイの不透明度を設定することで、写真にオーバーレイ(薄く覆う)効果をつけられます。
![トップページサイト型カスタマイズ](https://ryulifeblog.com/wp-content/uploads/2020/12/94e5bd13f2a1084b62d8e34294b8a93d.jpg)
![トップページサイト型カスタマイズ](https://ryulifeblog.com/wp-content/uploads/2020/12/94e5bd13f2a1084b62d8e34294b8a93d.jpg)
背景画像はスクロールしても動かないようにできます。
「Fixed Background」にチェックを入れます。
![トップページサイト型カスタマイズ](https://ryulifeblog.com/wp-content/uploads/2020/12/606a20a4cfd69c959dc903db340992af.jpg)
![トップページサイト型カスタマイズ](https://ryulifeblog.com/wp-content/uploads/2020/12/606a20a4cfd69c959dc903db340992af.jpg)
スクロールすると背景画像は動かないので、手前の部分が背景画像の上をすべるような動きになります。
画像だと分かりにくいので、当ブログトップページの下側を見ていただければ分かりやすいです。
\タブをクリックして切り替え/
![トップページサイト型カスタマイズ](https://ryulifeblog.com/wp-content/uploads/2020/12/7b3b4780063a206486e8886602b73216.jpg)
![トップページサイト型カスタマイズ](https://ryulifeblog.com/wp-content/uploads/2020/12/7b3b4780063a206486e8886602b73216.jpg)
サイドバーがあると画面の端まで画像が届かず切れてしまいます。
気になる場合はサイドバー設定から「トップページにサイドバーを表示する」のチェックを外しましょう。
スマホの場合はFixed Backgroundが機能せず、背景画像もスライドします。
背景色を変える
エリアごとに背景色を変えることで、同じ背景色が続くよりも目立つトップページができます。
背景色を変える方法は2つあります。
- 複数ブロックを選択してグループ化 ⇒ 色設定で背景色を変更
- フルワイドブロックの中に見出しや投稿リストを作る ⇒ カラー設定で背景色を変更
複数ブロックを選択してグループ化 ⇒ 色設定で背景色を変更
複数ブロックをドラッグで選択します。
![トップページサイト型カスタマイズ](https://ryulifeblog.com/wp-content/uploads/2020/12/d8b02df704aeaff0650bab4b044fcb97.jpg)
![トップページサイト型カスタマイズ](https://ryulifeblog.com/wp-content/uploads/2020/12/d8b02df704aeaff0650bab4b044fcb97.jpg)
左上のメニューから「グループ化」をクリックします。
![トップページサイト型カスタマイズ](https://ryulifeblog.com/wp-content/uploads/2020/12/f5ff5a3957586fc15d97ae425db4a65b.jpg)
![トップページサイト型カスタマイズ](https://ryulifeblog.com/wp-content/uploads/2020/12/f5ff5a3957586fc15d97ae425db4a65b.jpg)
「背景色」で好きな背景色に変更できます。
![トップページサイト型カスタマイズ](https://ryulifeblog.com/wp-content/uploads/2020/12/ec11ba0cf454029f71c2839bd79f5163.jpg)
![トップページサイト型カスタマイズ](https://ryulifeblog.com/wp-content/uploads/2020/12/ec11ba0cf454029f71c2839bd79f5163.jpg)
フルワイドブロックの中に見出しや投稿リストを作る ⇒ カラー設定で背景色を変更
フルワイドブロックの中に各ブロックを作った場合は、フルワイドブロックの背景色で変更できます。
![トップページサイト型カスタマイズ](https://ryulifeblog.com/wp-content/uploads/2020/12/e7b95800d207efb79c40759ec4438fdc.jpg)
![トップページサイト型カスタマイズ](https://ryulifeblog.com/wp-content/uploads/2020/12/e7b95800d207efb79c40759ec4438fdc.jpg)
SWELLでトップページカスタマイズ まとめ
![](https://ryulifeblog.com/wp-content/uploads/2020/11/animal_chara_computer_penguin.jpg)
![](https://ryulifeblog.com/wp-content/uploads/2020/11/animal_chara_computer_penguin.jpg)
SWELLでトップページをサイト型にカスタマイズする方法をお話ししました。
- 固定ページでトップページを作る
- 見出しは見出しブロックか画像で作る
- 投稿リストで記事を呼び出して並べる
- SWELLボタンで各カテゴリーへのリンクを作る
SWELLなら簡単にサイト型のトップページが作れます。
難しいコードを入力しなくても、クリックだけで簡単にカスタマイズできるのは素晴らしいです。
トップページは一番見られるページなので、こだわりのあるページにしたいですね。
この記事を読んでSWELLが気になったかたは、ぜひ公式ページでさまざまな機能を見てください。
![](https://ryulifeblog.com/wp-content/uploads/2020/12/swell2_pr_banner.jpg)
![](https://ryulifeblog.com/wp-content/uploads/2020/12/swell2_pr_banner.jpg)
今日はここまで!おつクラゲ~(:]ミ (:]彡
コメント