SWELLでサイト型にカスタマイズする方法!画像で分かりやすく解説

SWELLでトップページをカスタマイズ
悩んでいる男性

コード知識0の初心者だけど、オシャレなサイト型のトップページを作ってみたい!
でもどうやってカスタマイズすればいいのか分からないから教えて。

今回は、こんな悩みにお答えします。

この記事の内容
  • ブログ型とサイト型の違い
  • SWELLを使った、サイト型トップページのカスタマイズ方法
この記事を書いた人
しんでぃ
  • 本職は最高マーケティング責任者
  • しんでぃブログ(主にブログ運営×SWELL)
  • SWELLレビュー記事は公式サイト掲載
  • ブログ開設5ヶ月目で5桁収益
  • 現在8ヶ月で最高3.6万

Twitter : (@shinshindy33)

ブログを開設してみたけど、デザインはそのまま。そんなことはよくあるかと思います。

しかし、サイトのデザインや設計を見直すだけで、ユーザーの滞在時間や回遊率が伸びるとしたら…。

しかも、コード知識なしの初心者でもオシャレに作成できるなら…。

やってみたいと思いませんか?

今回は、WordPressテーマ「SWELL」を使って、トップページをカスタマイズする方法を解説していきます。

複数の画像を用いて丁寧に解説しているので、読みながら進めていただければ簡単に作成できます。

Shindy

当サイトの設定も紹介していますよ

まだSWELLを導入していない方も、どんなカスタマイズができるか参考にしてみてください。

>>SWELLの口コミ評判レビューはこちら

目次

SWELLで実際にカスタマイズしたサイト型トップページを紹介

当サイトでは、WordPressテーマ「SWELL」を使用して、トップページをサイト型にカスタマイズしています

まずは、カスタマイズ前のブログスタイルと、カスタマイズ後のサイト型のビフォアー・アフターをご覧ください。

しんでぃブログ

実際のページを見てもらうともっとわかりやすいと思うので、トップページをご覧ください。

今回、サイト型にした理由は以下の2点です。

サイト型にした2つの理由

  1. サイト型の方がオシャレで、目を惹きやすい。
  2. 欲しい情報が分かりやすく整理されている

そもそも、ブログ型とサイト型の違いってなんでしょうか。

以下に特徴をまとめてみました。

ブログ型サイト型
特徴新着記事から順番に並ぶカテゴリ事に情報が整理されている
メリット・新しい情報を読みたい人にとって分かりやすい
・読み物コンテンツと親和性がいい
・情報が整理されているので、欲しい情報を探しやすい
・回遊率が高まる
・オシャレ
デメリット伝えたい情報が埋もれやすく、ユーザーも探しにくい一度訪問したユーザーにとっては、目新しさがない
適正日記スタイルやSNSのファンからの流入を狙う場合SEOで初めて訪問するユーザーを狙う場合

このように、ブログ型・サイト型それぞれにメリット・デメリットがあります。

今回、サイトを再設計するにあたっては、「SEOで自然検索から初めてやってくるユーザー」にとって、欲しい情報を簡単に見つけられるように、サイト型を選択しました。

Shindy

人と違ったオシャレなサイトにしたい!という目的も含まれています。

というわけで、今回はサイト型トップページを作成することになりました。

初心者がSWELLでサイト型にカスタマイズすべき理由

SWELL

サイト型にしてみようと思ったけど、なんだか難しそう…。

そう思ったあなた。

実はこのサイトは、HTMLやCSSなどのコード知識を用いることなく、全てSWELLに搭載されている標準機能を使って作成しています。

SWELLはブログにもコーポレートサイトにも使用される、バランスの取れたWordPressテーマで、初心者でも直感だけで簡単におしゃれなサイトを作ることが可能です。

こんな人におすすめ
  • コードの知識ゼロでも完成度の高いサイトを作りたい
  • 使いやすさ・楽しさ重視
  • 記事をサクサク書いて効率化したい

SWELLの機能や、メリット・デメリットをもっと詳しく知りたいという方はコチラ。

>>WordPressテーマSWELLの評判は本当?デメリット無しは嘘

\圧倒的な使いやすさでブログが楽しくなる/

SWELLの導入・移行手順はこちら

サイト型にカスタマイズする前の下準備

それでは、実際にサイト型のトップページを作成していきましょう。

まず、サイト型にカスタマイズする前の下準備作業について解説します。

やることは3つだけです。

  1. 固定ページでトップページを作成する
  2. 固定ページで新着記事一覧を作成する
  3. トップページのサイドバーを非表示にする

順番に解説していきます。

①:固定ページでトップページを作成する

まずは、トップページとなる固定ページを作成します。

WordPressのダッシュボードから、「固定ページ」>「新規追加」をクリックします。

固定ページ編集画面になったら、タイトルを「Home」もしくは「Top」、パーマリンクを「home」もしくは「top」にして、公開をクリックするだけです。

固定ページでトップページを作成
Shindy

このページを、トップページとして後ほどデザインしていきます

②:固定ページで新着記事一覧を作成する

続いて、新着記事一覧ページを作成します。

WordPressのダッシュボードから、「固定ページ」>「新規追加」をクリックします。

先ほどのトップページと同様に、タイトルを「新着記事」、パーマリンクを「new-post」にして、公開をクリックすればOKです。

固定ページで新着記事ページを作成

トップページのサイドバーを非表示にする

トップページを1カラムのサイト型にするには、サイドバーを非表示にする必要があります。

WordPressのダッシュボードから、「外観」>「カスタマイズ」>「サイドバー」に進みます。

トップページにサイドバーを表示するのチェックを外します。

サイドバーの表示・非表示

以上で下準備ができました。

Shindy

簡単ですね

それではいよいよトップページの設計をしていきます。

当サイトのトップページの設計を確認

当サイトの設計は大まかに、3つの部分から成っています。

  • トップページ上部
  • メインコンテンツ部分
  • 新着記事~フッター部分

トップページ上部

トップページ上部は5つのセクションから成っています。

  1. ヘッダーロゴ
  2. グロバールナビ
  3. メインビジュアル
  4. ピックアップバナー
  5. 情報セクション

メインコンテンツ部分

メインコンテンツ部分は、カテゴリごとに記事一覧を表示しています。

新着記事~フッター部分

トップページ下部は3つのセクションから成っています。

  1. 新着記事一覧
  2. フッター直前
  3. フッター

当サイトでは、新着記事は一番下に配置しています。

そのため、ページ上部の情報セクションから、ページ内リンクで飛ばしています。

分からない設定があれば、以下の記事を参考にしてみてくださいね

トップページ上部のカスタマイズ(項目①~⑤)

まずは、トップページの上部からカスタマイズしていきます。

①ヘッダーロゴをカスタマイズ

WordPressのダッシュボードから、「外観」>「カスタマイズ」>「ヘッダー」に進みます。

ヘッダーロゴを設定します。

ヘッダーロゴ

「ロゴ画像の設定」で自分のサイトのロゴ画像をアップロードします。

画像サイズはお好みで選択してください。

ロゴ画像は透過の画像を使いましょう。

ヘッダーロゴの設定

「レイアウト・デザイン設定」でロゴの位置と、メニューの位置を決めます。

ヘッダーのレイアウト設定

当サイトでは、メニューの背景を透明にして、メインビジュアルが見える設定にしています。

「トップページでの特別設定」で、「する」にしてください。

ヘッダーの背景を透明にするかどうか

②グローバルナビをカスタマイズ

グローバルナビを設定します。

グローバルナビの設定

WordPressのダッシュボードから、「外観」>「メニュー」で設定できます。

このメニューは各サイトによって異なるので、詳しくは以下の記事で設定方法ご覧ください。

>>【SWELL】グローバルナビ(ヘッダーメニュー)の設定方法

③メインビジュアルの設定

「外観」>「カスタマイズ」>「トップページ」>「メインビジュアル」に進みます。

各スライドの設定で、スライド[1]で画像を選択します。

PC用・スマホ用それぞれ設定できます。(同じ場合はPC用のみでOK)

メインビジュアルの設定

メインビジュアルの画像に一工夫加えることもできます。

当サイトでは、画像のフィルター処理として、「ブラシ」を使用しています。

ブラシ処理
ブラシ効果

フィルターを変更する場合は、表示設定のフィルター処理を変更します。

下記は当サイトの表示設定です。

メインビジュアルの表示設定

もっと詳細に設定したい場合は、以下の記事で設定方法ご覧ください。

>>【SWELL】メインビジュアルの設定方法

④ピックアップバナーをカスタマイズ

ピックアップバナーの設定をします。

ピックアップバナーとは、下記の画像のように、バナー形式で表示されるナビゲーションメニューのことです。

ピックアップバナー

ピックアップバナーは、特に見せたい記事やカテゴリごとに分けることで、ユーザーをうまく誘導できます。

Shindy

写真かイラストどちらかに統一するか、落ち着いた色合いにすると綺麗にまとまります。

当サイトでは、画像比率が1:1.77の画像を、Canvaで作成しています。

カスタマイズ時にトリミング機能はないので、あらかじめ画像比率を調整した上で、カスタマイズしてください。

ピックアップバナー作成手順

  1. 「外観」>「メニューに進む
  2. 「新しいメニュー」を作成
  3. リンク先の記事・カテゴリーをメニューに追加
  4. メニュー名をピックアップバナーにして保存
  5. 追加したメニューの説明欄に画像URLを貼る
  6. デザインとレイアウトを決める
STEP
ピックアップバナー用のカスタムメニュー作成

まずは、ピックアップバナー用のカスタムメニューを作成します。

WordPressのダッシュボードから、「外観」>「メニューに進みます。

左側にあるメニュー項目追加からピックアップバナーのリンク先にしたいページ(記事・カテゴリー・固定ページなど)を右のメニューに追加します。

ピックアップバナーのメニュー作成

追加したら、メニュー名をピックアップバナーにして、ピックアップバナーにチェックを入れて、メニューを保存します。

※メニューの作成方法については、【SWELL】グローバルナビ(ヘッダーメニュー)の設定方法で詳しく解説しています。

STEP
ピックアップバナー用の画像を設定

メニューが完成したら、画像を設定していきます。

先ほどの「外観」>「メニューでメニュー構造に追加したメニューをクリックすると、説明という欄があります。

ここに使用したい画像のURL(自サイトのURLのみ可)を貼り付けて、ページ右下のメニューを保存をクリックすれば、ピックアップバナーの画像が設定できます。

ピックアップバナーの画像を設定する

ピックアップバナーの詳細は以下の記事を参考にしてください。

>>【SWELL】ピックアップバナーの設定方法

STEP
デザインとレイアウトを決める

続いて、デザインとレイアウトを設定していきます。

「外観」>「カスタマイズ」>「トップページ」>「ピックアップバナー」に進みます。

当サイトは、PC4列・SP2列のレイアウトです。以下は当サイトの設定です。

バナーのレイアウト設定
バナーデザイン
Shindy

ピックアップバナーの文字が小さいという方は、以下のコードをCSSで追加すると文字サイズを調整できます。

「外観」>「カスタマイズ」>「追加 CSS」に以下を貼り付けて、font-sizeの後の数字を好きなサイズに調整してください。

※コード修正は自己責任でお願いします。

  
    /* ピックアップバナーのフォントサイズ */
	.c-bannerLink__label {
	font-size: 19px
	}
	/*ここまで*/
  

⑤情報セクションをカスタマイズ

当サイトでは、情報セクション(新着記事情報)を設けています。(新着記事のリンクを押すと、最下部の新着記事に飛びます)

企業サイトでは「お知らせ」や「ニュース」などで使われる部分です。

STEP
固定ページでフルワイドブロックを使用

先ほど作成した固定ページに進み、フルワイドブロックを選択します。

フルワイドブロック
STEP
セクションの見出しを作成

続いて、見出しを作成します。

Shindy

What’s Newにあたる部分です

見出しにはサブタイトルをつけられます。

サブタイトルをつける場合は、一旦サブタイトルを含めた見出しを作成し、サブタイトル部分を選択した上で、テキスト装飾の「注釈」を使用するとサブタイトルになります。

セクション用見出しのサブタイトル
セクション用見出しのサブタイトルの作り方
STEP
コンテンツサイズを変更

続いて、フルワイドブロックを編集していきます。

編集は画面右側で設定できます。

フルワイドブロックの編集

コンテンツサイズで、コンテンツの幅を決めます。当サイトでは、サイト幅を使用しています。

フルワイドブロックのコンテンツサイズの編集
STEP
カラー設定

フルワイドブロックのテキストカラーと背景色を決めます。

フルワイドブロックのカラー設定

オーバーレイカラーと不透明度を設定することで、背景画像の上にカラーを重ねることができます。

STEP
背景画像の設定

フルワイドブロックに背景画像を利用する場合は、画像をメディアから選択します。

フルワイドブロックの背景画像の設定

当サイトでは背景効果に、Fixed Backgroundを利用しています。

「Fixed Background機能」。スクロールしても背景が固定されています(※PCのみ)

「パララックス機能」。スクロールに合わせて、背景が微妙に動きます

  • デバイスで制限では、デバイスごとにブロックの表示・非表示が設定できます。
デバイス制限

この機能を利用して、先ほどと同じブロックを二つ作成し、一方の背景効果をPCで「Fixed Background」に、もう一方をSPで「パララックス機能」に、と言った設定も可能です。

メインコンテンツのカスタマイズ(項目⑥)

続いてメインコンテンツを作成します。

STEP
固定ページでフルワイドブロックを使用

先ほどの情報セクションの下に、新たにフルワイドブロックを追加します。

追加方法は先ほどと同じです。

STEP
セクションの見出しを作成

続いて、見出しを作成します。こちらも先ほどと同じ方法です。

Shindy

カテゴリや記事一覧に関連する見出しをつけましょう

STEP
コンテンツサイズを変更

続いて、画面右側のコンテンツサイズで、情報セクションと同じコンテンツの幅を設定します。

フルワイドブロックのコンテンツサイズの編集
STEP
カテゴリ用の写真を追加

当サイトではカテゴリごとに、カテゴリ用のビジュアルを使用しています。

ただ写真を使用するだけであれば、画像ブロックから画像を追加するだけですが、上記のように左と右で分ける場合は、「カラム」を使用します。

カラムブロックを選択
カラムブロックを選択
カラムのパターンを選択
カラムのパターンを選択

冒頭のSWELLのブロックでは、70/30を使用しています。

STEP
タブを挿入

カテゴリ内をさらに分けて表示したい場合は、「タブ」を使用します。

SWELLのタブブロック

このようなタブが作成できます。ここに後ほど投稿リストを入れて、入れ子構造にします。

「tab 1」という箇所をクリックして、好きなタブの名前(子カテゴリ名など)をつけましょう。

タブのスタイルや、サイズ・表示方法は右側のブロック編集から選択できます。

パソコン用、スマホ用両方で設定可能です。

swellタブブロックのスタイル
swellタブブロックのタブサイズ
STEP
投稿リストをタブ内に作成

タブができたら、各タブ内に投稿リストを作成していきます。

SWELLブロックの投稿リスト

投稿リストを呼び出したら、右側の編集の「Settings」で、表示したい記事を設定していきます。

投稿リストの表示設定

当サイトのカテゴリー「SWELL」(上記画像)の表示設定は以下の通りです。

Settings上記画像の設定
表示する投稿数6
レイアウトカード型
投稿の表示順序人気順
各種表示設定公開日・更新日
最大カラム数PC:3列、SP:1列
抜粋文の文字数PC:80、SP:0
Shindy

当サイトでは、カテゴリーによって表示方法を変更しています

「MOREリンクの表示テキスト」と「MOREリンクのURL」は、投稿リスト下にボタンを作成し、好きなページに飛ばすことができます。

当サイトでは、デザインの関係上この機能は用いず、SWELLボタンブロックで作成しています。

次にどの記事を表示するかを決めます。

「Pickup」をクリックして、表示したい記事やカテゴリーを指定します。

投稿リストのPickup設定
投稿リストのPickupタクソノミー設定
  • 投稿ID:投稿ごとに自分で指定できます。投稿IDは、WordPressダッシュボードの「投稿一覧」で確認できます。
  • 除外する投稿ID:同様の方法で、投稿ごとに除外することもできます。
  • カテゴリー:選択したカテゴリーに属する投稿を表示/非表示(含む/含まない)にします。
  • タグ:選択したタグに属する投稿を表示します。

新着記事~フッター部分(項目⑦~⑨)

最後に、トップページの下部をカスタマイズします。

⑦新着記事をカスタマイズ

新着記事は、メインコンテンツと同じ「投稿リスト」で設定しています。

全ての投稿を対象にするので、「Pickup」の設定は不要で、「Settings」の投稿の表示順序を新着順にするだけです。

「もっと見る」のリンク先は、先ほど固定ページで作成した、「新着記事」のページのURLです。

⑧フッター直前ウィジェットをカスタマイズ

フッター直前ウィジェット

コンテンツとフッターの間に、ブロックを挿入したい場合は、「フッター直前ウィジェット」を使用します。

WordPressのダッシュボードから、「外観」>「カスタマイズ」>「ヘッダー」に進みます。

フッター直前のウィジェット

画面左側にある利用できるウィジェットの「テキスト」を、「フッター直前」のウィジェット内に入れます。

事前にブログパーツで作っておいた、パーツのIDをテキスト内に入力するだけで、OKです。

ブログパーツを呼び出す時のショートコードは、[blog_parts id="〇〇〇"]です。

⑨フッターのカスタマイズ

フッター

フッターエリアは、好きなウィジェットを入れてカスタマイズすることができます。

カスタマイズは、Wordpressのダッシュボードの「外観」>「ウィジェット」で、フッター(PC)1・フッター(PC)2・フッター(PC)3・フッター(スマホ)のエリアに、好きなウィジェットを入れれば可能です。

詳しい設定方法は、以下の記事で解説しています。

>>【SWELL】フッターのレイアウト設定・カスタマイズ方法

作った固定ページをトップページにする

最後に、最初に下準備で設定した「新着記事一覧ページ」とカスタマイズした「固定ページ」がトップページになるように設定します。

WordPressのダッシュボードから、「外観」>「カスタマイズ」>「WordPress設定」>「ホームページ設定」に進みます。

ホームページ設定

設定画面で、以下のように設定します。

  • ホームページの表示:固定ページを選択
  • ホームページ:先ほど作った固定ページ(Home)を選択
  • 投稿ページ:新着記事用の固定ページ(新着記事)を選択

設定ができたら「公開」をクリックすれば、作成した固定ページがトップページとなります。

Shindy

お疲れさまでした!あとは、ご自身で色々アレンジしてみてくださいね。

まとめ:SWELLなら、直感操作だけでオシャレなサイト型にカスタマイズできる

以上、SWELLを使って、サイト型にカスタマイズする方法を解説しました。

SWELLを使用すれば、HTMLやCSSをなどのコード知識がなくても、簡単におしゃれなサイトを作成することが可能です。

自分だけのデザインは、他のサイトとの差別化になりますし、文章を読ませずとも訪問者に「読んでみたい」と思わせる重要なポイントとなります。

SWELLを使って、ぜひ自分好みのサイトを作っみてください。

Shindy

もしお役に立てたなら、@shinshindy33宛てのメンションで紹介してもらえると嬉しいです!
分からない場合もお気軽にお問い合わせください。

\オシャレなサイトを簡単に作りたいなら/

SWELLをもっと知りたい方はコチラ

SWELLでトップページをカスタマイズ

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

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