【SWELL】トップページをサイト型にカスタマイズする方法

記事内にプロモーションを含む場合があります
【マネするだけ】SWELLのトップページをサイト型にカスタマイズする方法
初心者さん

SWELLのトップページをサイト型にしたいけどやり方がわからない

このような疑問にお答えします。

SWELLのトップページをサイト型にするのは、むずかしそうに見えて実はかんたんです。

サイト型とは

サイト型とは、トップページにコンテンツを見やすく配置したデザインのこと。

ブログ内容、コンテンツの位置がひと目でわかるため、回遊率やクリック率の向上が見込めます。

手順

手順どおりに進めると、以下のようなサイト型トップページになります。

コイン部ログのサイト型トップページ

今回は当ブログを例に、サイト型トップページの作り方を解説。

サイト型のデザインは無数にありますが、基本構造は同じです。

もちろん、そのまま真似していただいてもOK

この記事を読めば、SWELLのトップページをサイト型にカスタマイズできますよ!

SWELLの購入方法はこちら

プロフィールカード

\国内人気No.1/

目次

SWELLのトップページをサイト型にする前の準備

SWELLのトップページをサイト型にする前に、準備が2つあります。

  • 見本となるブログを探す
  • 最低20記事は必要

見本となるブログを探す

自分のブログをどのようなデザインにしたいか、見本となるブログを探しましょう。

見本はなくても構いませんが、ある方がカスタマイズしやすいです。

サイト型トップページのSWELLブログを探すには、SWELL公式サイトの「ピックアップショーケース」からどうぞ。

おしゃれなブログばかりで参考になりますよ。

SWELL公式サイトの「ピックアップショーケース」

もしくはブロガー、さとしんさん作成の「SWELLサイト集」をご覧ください。

ちなみに、私は「misclogさん」を参考にしました。(シンプルで見やすい!)

最低20記事は必要

最低20記事は公開しておきましょう。

記事が少ないとカテゴリーの配置もままならないため、サイト型にする意味がありません。

サイト型トップページのメリットは、膨大な数の記事からお目当ての記事やカテゴリーが見つけやすいこと。

記事数が少なければ「ブログ型」でもすぐ見つけられるので。

エイタ

20記事以下ではサイト型トップページする意味がない

SWELLの使い方はこちら

SWELLのサイト型トップページの作り方

SWELLのサイト型トップページの作り方

SWELLのサイト型トップページの作り方は4ステップです。

コイン部ログのサイト型トップページ

作り方はかんたんで、固定ページでお好きなブロックを組み合わせるだけ。

HTMLやCSSの知識は必要ありません。

SWELLのヘッダー周辺をカスタマイズ

SWELLのヘッダー解説

ステップ1では、サイトの顔にあたる「ヘッダー周辺」をカスタマイズします。

  • メインビジュアルの設定
  • ヘッダーロゴの設定
  • グローバルナビの設定

メインビジュアルの設定

ノマドワーカーのイメージ画像

メインビジュアルはウェブサイトを開いたとき最初に目にするエリア。

SWELLでは写真、もしくは動画を設置できます。

STEP
メインビジュアルの素材を用意
Unsplash
出典:unsplash

まず、メインビジュアルに表示する画像やイラストを準備します。

私は写真素材サイト「unsplash」から選びました。

画像が決まったらトリミング(切り抜き)しましょう。

推奨サイズ

  • PC横幅…1600px
  • PC高さ…500〜1000px
  • スマホ横幅…960px
  • スマホ高さ…500〜1200px
エイタ

当サイトは1600×500

STEP
メインビジュアル設定
カスタマイザーのメインビジュアル項目

「外観」>「カスタマイズ」>「トップページ」>「メインビジュアル」

STEP
画像を選択
メインビジュアルの表示内容選択画面
STEP
表示設定
SWELLのメインビジュアル表示設定画面

表示設定ではメインビジュアルのデザインを調整できます。

こだわりがなければそのままでOK

「フィルター処理」で画像のテクスチャ(表面の質感)を変えると、雰囲気がガラリと変わります。

SWELLメインビジュアル「ブラー効果」適用例
ブラー
SWELLメインビジュアル「グレースケール効果」適用例
グレースケール
SWELLメインビジュアル「ドット効果」適用例
ドット
SWELLメインビジュアル「ブラシ効果」適用例
ブラシ

「オーバーレイカラー」は色と不透明度を調整し、メインビジュアルに重ねられます。

SWELLメインビジュアル「オーバーレイカラー効果」適用例2
黄色:透過率0.3
SWELLメインビジュアル「オーバーレイカラー効果」適用例1
赤色:透過率0.4
エイタ

当サイトはデフォルト設定のまま

STEP
各スライドの設定
SWELLのメインビジュアル表示設定画面2
SWELLのメインビジュアル表示設定画面3

「画像を選択」から画像をアップロード。

メインテキスト、サブテキストに文字を入れない場合は削除してください。

「メインテキスト」「サブテキスト」を加えると以下のようになります。

SWELLメインビジュアルテキスト、ボタン適用例

作成したブログパーツ、リンクボタンも挿入可能。

ヘッダーロゴの設定

コイン部ログのヘッダーロゴ画像

ヘッダーロゴを使うと、ブログ名を画像で表示できます。

テキストよりオリジナリティを出しやすいのが特徴。

STEP
Canvaでロゴ作成
Canvaの編集画面
フォント:やさしさゴシック

無料デザインツール「Canva」でロゴを作成します。

推奨サイズは1600×360(SWELL公式と同じ)

「自分でロゴなんて作れない…」という人でも大丈夫。

Canvaの検索窓に「ロゴ」と入力するとテンプレートが表示されるので、気に入ったロゴをアレンジすればOK

エイタ

「ブログ名+フォント変更」だけでも立派なロゴになる

STEP
ヘッダーメニュー設定
カスタマイザーのヘッダー選択画面

「外観」>「カスタマイズ」>「ヘッダー」

STEP
ヘッダーロゴの設定
SWELLのヘッダーロゴ設定画面

「画像を選択」をクリックし、作成したヘッダーロゴ画像をアップロード。

画像サイズは適宜調整してください。

STEP
トップページでの特別設定
SWELL「トップページでの特別設定」画面

ヘッダーの背景を透明にする場合、「する(白or黒)」を選択。

透過時のロゴ画像をアップロードしましょう。

エイタ

当ブログは背景を透明(文字色は白)にしてる

SWELL「トップページでの特別設定」透過しないバージョン
透明に「しない」
SWELL「トップページでの特別設定」透過白バージョン
透明に「する」白
SWELL「トップページでの特別設定」透過黒バージョン
透明に「する」黒
STEP
ヘッダーの追従設定
SWELL「ヘッダーの追従設定」

ヘッダーの追従設定にチェックを入れると、画面をスクロールしてもヘッダーが固定表示されます。

エイタ

当ブログは両方チェックを入れてる

そのほか「ヘッダー」内の設定項目
  • レイアウト・デザイン
  • ヘッダーバー
  • キャッチフレーズ
  • ヘッダーメニュー(グローバルナビ)
  • ヘッダーメニュー(SP)
  • 検索ボタン
  • メニューボタン
  • カスタムボタン

ヘッダー内の設定項目は豊富です。

必要に応じて使ってくださいね。

グローバルナビの設定

SWELLのグローバルナビ

グローバルナビには好きなリンク先を配置できます。

最も目立つ場所なので、最初に読んでほしい記事やカテゴリーを設置すると効果的です。

STEP
新しいメニューを作成
SWELLの「グローバルナビ」メニュー作成画面

「外観」>「メニュー」

「新しいメニューを作成しましょう。」をクリック。

STEP
メニュー名を入力
SWELLの「グローバルナビ」メニュー作成画面3

メニュー名を入力したら「メニューを作成」をクリック。

(グローバルナビなどわかりやすい名称を付けましょう)

STEP
メニュー項目の追加
SWELLの「グローバルナビ」メニュー作成画面2

画面左【メニュー項目を追加】から、作成したメニューにコンテンツを追加します。

最後に【グローバルナビ】にチェックを入れ、「メニューを保存」をクリックすれば完成。

サイト型トップページのメインコンテンツを作成

コイン部ログのサイト型トップページ「メインコンテンツエリア」

サイト型トップページのメインコンテンツは「固定ページ」で作成します。

固定ページとは

固定ページとは、カテゴリーやタグに属さない独立したページのこと。

「お問い合わせ」や「プロフィール」ページに使われます。

サイドバー表示をオフ

はじめに、サイドバーの表示をオフにします。

「フルワイドブロック」を使うため、サイドバーがあるとキレイに表示できないからです。

「外観」>「カスタマイズ」>「サイドバー」

SWELLのサイドバー設定画面

「トップページにサイドバーを表示する」のチェックを外してください。

チェックを外したら【公開】をクリックすれば完了。

固定ページを2つ作成

固定ページで「投稿ページ」「フロントページ」を作りましょう。

  • 投稿ページ…新着記事を表示するページ
  • フロントページ…トップに表示されるメインページ

固定ページを2つに分ける理由は、サイト型にするとデフォルトの新着記事ページが非表示になるから。

サイト型トップページ用に「新着記事」を表示するページが必要なのです。

エイタ

あまり気にせず「2つ必要なんだな」くらいの認識でOK

投稿ページの作成

投稿ページ(新着記事を表示するページ)の作り方は2ステップ。

STEP
新規固定ページを追加
SWELLの「新規固定ページを追加」画面

「固定ページ」>「新規固定ページを追加」

STEP
タイトルを入力して公開
SWELLの固定ページ「新着記事」編集画面

タイトルに「新着記事」、パーマリンクには「new post」と入力し【公開】をクリック。

「タイトル」や「パーマリンク」はわかりやすければ何でもOK

ただし、パーマリンクは英数字がおすすめ。日本語だと文字化けする可能性があります。

フロントページ

フロントページ(メインページ)の作り方は2ステップ。

STEP
新規固定ページを追加
SWELLの「新規固定ページを追加」画面

「固定ページ」>「新規固定ページを追加」

STEP
タイトルを入力して公開
SWELLの固定ページ「メインページ」編集画面

タイトルに「メインページ」、パーマリンクには「main」と入力し【公開】をクリック。

文字化け防止のためにも、パーマリンクは英数字がおすすめです。

エイタ

コンテンツは「フロントページ」に追加するよ

フロントページでメインコンテンツを作成

この項目がサイト型トップページのメインです。

「フロントページ」にコンテンツを追加していきましょう。

新着記事エリア

SWELL「コイン部ログ」の新着記事エリア画面

新着記事エリアの作り方は以下のようになります。

STEP
フルワイドブロックの追加
SWELL「フルワイドブロック」追加画面

ブロックメニューに「フルワイド」と入力し、フルワイドブロックを呼び出します。

フルワイドブロックを追加すると、コンテンツを画面いっぱいに表示可能。

STEP
フルワイドブロックの設定
SWELL「フルワイドブロック」の設定画面1
SWELL「フルワイドブロック」の設定画面2

右サイドメニューでフルワイドブロックのデザインを設定できます。

上記画像は当サイトの設定です。

STEP
見出しの入力
SWELL「フルワイドブロック」新着記事エリアのタイトル入力画面

「新着記事」「New Post」など、短くわかりやすいキーワードを入力。

STEP
カラムの追加
SWELL「フルワイドブロック」新着記事エリアのカラム入力画面

カラムブロックを呼び出し、「33/66」サイズのカラムを追加。

SWELL「フルワイドブロック」新着記事エリアのカラム選択画面
STEP
【左カラム】投稿リストの追加
SWELL「フルワイドブロック」投稿リスト追加画面

左カラムの「+」をクリックし、投稿リストを追加します。

STEP
【左カラム】投稿リストの編集
SWELL「フルワイドブロック」左側投稿リスト編集画面

右サイドメニューで投稿リストが編集できます。

SWELL「フルワイドブロック」左側投稿リストの右サイドメニュー編集画面
SWELL「フルワイドブロック」左側投稿リストの右サイドメニュー編集画面2

左カラムには最新記事を一つだけ表示するので、【表示する投稿数】はかならず「1」にしてください。

STEP
【右カラム】投稿リストの追加
SWELL「フルワイドブロック」投稿リスト追加画面

右カラムの「+」をクリックし、投稿リストを追加します。

STEP
【右カラム】投稿リストの編集
SWELL「フルワイドブロック」右側投稿リスト編集画面

右サイドメニューで投稿リストを編集します。

SWELL「フルワイドブロック」右側投稿リストの右サイドメニュー編集画面
SWELL「フルワイドブロック」右側投稿リストの右サイドメニュー編集画面2

【MOREリンクのURL】には「ドメイン+new-post/」と入力してください。

STEP
CSSの追加

このままでは左右のカラムの最新記事が被ってしまうので、CSSを追加し右カラムには最新記事を表示させないよう設定します。

右カラムを選択し、右サイドメニューの高度な設定内にある【追加CSSクラス】に「li-first-none」を追記。

SWELL「フルワイドブロック」右側投稿リストの追加CSS編集画面

CSSコードをコピー。

.li-first-none > ul >li:first-child {
    display: none;
}

ページ下部にある【カスタムCSS&JS】を開き「CSS用コード」に貼り付けて完了。

SWELL投稿画面の「CSS用コード」入力画面

これで、最新記事が左カラムにのみ表示されます。

人気・おすすめ記事エリア

SWELL「コイン部ログ」の人気・おすすめ記事エリア画面

人気・おすすめ記事エリアの作り方は以下のとおりです。

STEP
フルワイドブロックの追加
SWELL「フルワイドブロック」人気・おすすめ記事エリアのカラム入力画面

「新着記事エリア」の下にフルワイドブロックを挿入します。

STEP
フルワイドブロックの設定
SWELL「フルワイドブロック」の設定画面上段
SWELL「フルワイドブロック」の設定画面下段

右サイドメニューでフルワイドブロックのデザインを設定。

背景色は「白(#FFFFFF)」

「上下のPADDING量(PC)」を60にしています。

STEP
見出しの削除
SWELL「フルワイドブロック」の見出し削除画面

デフォルト表示される見出しを削除。

STEP
カラムの追加
SWELL「フルワイドブロック」カラムブロック追加画面

「50/50」のカラムを追加します。

SWELL「フルワイドブロック」カラムブロック選択画面
STEP
見出しの追加
SWELL「フルワイドブロック」見出し追加画面

左カラムの「+」をクリックし、見出しを追加。

STEP
見出しのスタイル設定
SWELL「フルワイドブロック」見出し設定画面

右サイドメニューの【スタイル】で見出しを「セクション用」に変更。

STEP
見出しの入力
SWELL「フルワイドブロック」見出し入力画面

「人気記事」と入力。(お好みでどうぞ)

STEP
投稿リストの追加
SWELL「フルワイドブロック」投稿リスト追加画面

左カラムに投稿リストを追加します。

STEP
投稿リストの編集
SWELL「フルワイドブロック」投稿リスト編集画面

右サイドメニューで投稿リストを編集します。

SWELL「フルワイドブロック」左側投稿リストの右サイドメニュー編集画面1
SWELL「フルワイドブロック」左側投稿リストの右サイドメニュー編集画面2

レイアウトを「リスト型」、投稿の表示順序を「人気順」にするのを忘れずに。

STEP
右カラムに投稿リストを追加
SWELL「フルワイドブロック」右カラムへの投稿リスト追加画面

ステップ5〜9と同じように、右カラムに投稿リストを追加します。

STEP
【右カラム】投稿リストの編集
SWELL「フルワイドブロック」右カラム追加画面

右サイドメニューで投稿リストを編集。

【pickup】に切り替え、「投稿ID」を直接入力するなど任意の記事を配置しましょう。

SWELL「フルワイドブロック」右側投稿リストの右サイドメニュー編集画面

カテゴリーエリア

SWELL「コイン部ログ」のカテゴリーエリア画面

カテゴリーエリアの作り方は以下のとおりです。

STEP
フルワイドブロックの追加
SWELL「フルワイドブロック」追加画面

「人気・おすすめエリア」の下にフルワイドブロックを挿入します。

STEP
フルワイドブロックの設定
SWELL「フルワイドブロック」の設定画面上段
SWELL「フルワイドブロック」の設定画面下段

右サイドメニューでフルワイドブロックのデザインを設定。

コンテンツサイズ「サイト幅」、「上下のPADDING量(PC)」を60に。

STEP
見出しの削除
SWELL「フルワイドブロック」の見出し削除画面

デフォルト表示される見出しを削除。

STEP
リッチカラムの追加
SWELL「フルワイドブロック」リッチカラム追加画面

右サイドメニューでPC、タブレットの列数を「3」に変更。

SWELL「フルワイドブロック」リッチカラム編集画面
STEP
見出しの追加
SWELL「フルワイドブロック」見出し追加画面

カラムの「+」をクリックし、見出しを追加。

STEP
見出しのスタイル設定
SWELL「フルワイドブロック」見出しスタイル編集画面

右サイドメニューの【スタイル】で見出しを「セクション用」に変更。

STEP
見出しの入力
SWELL「フルワイドブロック」リッチカラム見出し入力画面

見出しはお好みでどうぞ。

当サイトはカテゴリー名を入力しています。

STEP
投稿リストの追加
SWELL「フルワイドブロック」リッチカラム投稿リスト追加画面

見出しで改行し、投稿リストを追加。

STEP
投稿リストの編集
SWELL「フルワイドブロック」投稿リスト編集画面

右サイドメニューで投稿リストを編集します。

SWELL「フルワイドブロック」投稿リストの右サイドメニュー編集画面1
SWELL「フルワイドブロック」投稿リストの右サイドメニュー編集画面2

表示する投稿数を「1」、レイアウトを「サムネイル型」に。

STEP
再度、投稿リストを追加
SWELL「フルワイドブロック」リッチカラム投稿リスト追加画面

一つ目の投稿リストの下に、再度投稿リストを追加します。

STEP
投稿リストの編集
SWELL「フルワイドブロック」投稿リストデザイン編集画面

右サイドメニュー【Settings】で投稿リストの見た目を編集します。

SWELL「フルワイドブロック」投稿リストの右サイドメニュー編集画面1
SWELL「フルワイドブロック」投稿リストの右サイドメニュー編集画面2

表示する投稿数を「3」、レイアウトを「テキスト型」に。

MOREリンクのURLには「カテゴリー」「タブ」など、表示させたいページのURLを入力してください。

【pickup】では表示する記事を指定できます。

SWELL「フルワイドブロック」投稿リストの右サイドメニュー編集画面1
特定の記事を表示させたいとき
SWELL「フルワイドブロック」投稿リストの右サイドメニュー編集画面2
カテゴリーやタグを表示させたいとき

特定の記事を表示させたいときは「投稿IDを直接指定」に投稿IDを入力。

カテゴリーやタグの記事を表示させたいときは「投稿IDを直接指定」は空白にし、「タクソノミーの条件設定」をご利用ください。

エイタ

当サイトは記事を指定してる

あとは同じ手順で真ん中、右カラムにコンテンツを設置すれば完了!

完成したカラムをコピペ、編集したほうが早く終わりますよ。

二段目のカラムを追加するには、親ブロックを選択すると表示される「+」をクリックすればOK

SWELLのカラム追加画面

プロフィールエリア

SWELL「フルワイドブロック」プロフィール画面

プロフィールエリアの作り方は以下のようになります。

STEP
フルワイドブロックの追加
SWELL「フルワイドブロック」追加画面

「カテゴリーエリア」の下にフルワイドブロックを挿入。

STEP
フルワイドブロックの設定
SWELL「フルワイドブロック」の設定画面

「背景画像の設定」で好きな画像を背景にできます。

さらに背景効果で「固定背景」をオン。(お好みでどうぞ)

STEP
見出しの入力
SWELL「フルワイドブロック」の見出し入力画面

「About」「運営者情報」など、わかりやすいキーワードを入力。

STEP
リッチカラムの追加
SWELL「リッチカラム」追加画面
STEP
プロフィール画像の追加
SWELL「リッチカラム」に画像を追加する画面

あらかじめ用意したプロフィール画像をアップロード。

正方形だとキレイにトリミングできます。

エイタ

当サイトは709×709

STEP
プロフィール画像の編集
SWELLリッチカラムの画像編集画面

スタイルは「角丸」、画像サイズは「169」に設定。(お好みで調整)

STEP
名前、ソーシャルアイコンの追加
SWELLリッチカラムのソーシャルアイコン追加画面

プロフィール画像で改行し、名前を入力したらさらに改行。

ソーシャルアイコンブロックを追加します。

SWELLリッチカラムのソーシャルアイコン追加画面2

あとはあなたの保有するSNSを追加するのみ。

アイコンを追加したらアカウントアドレスを入力すれば完成です。

STEP
右カラムにプロフィール文を追加
SWELLリッチカラムのプロフィール追加画面

プロフィール文は、詰め込みすぎると読みにくいのでご注意ください。

【完成】固定ページをトップページに設定

作成した固定ページをトップページに設定すれば完成です。

STEP
WordPress設定
SWELLのカスタマイザー「WordPress設定」画面

「外観」>「カスタマイズ」>「WordPress設定」>「ホームページ設定」

STEP
ホームページ設定
SWELLのカスタマイザー「ホームページ設定」画面
  • ホームページの表示…固定ページ
  • ホームページ…メインページ(作り込んだページ)
  • 投稿ページ…新着記事(空ページ)

最後に「公開」をタップすれば完成です。

SWELL「コイン部ログ」のフッターエリア画面

最後のステップ4では「フッター周辺」をカスタマイズします。

  • フッターウィジェットの設定
  • フッターメニューの設定
  • SNSアイコンリストの表示設定
  • コピーライトの設定

フッターウィジェットの設定

SWELL「コイン部ログ」のフッターエリア【ウィジェット】画面

フッターウィジェットの設定は以下のようになります。

STEP
ウィジェット設定
SWELLのカスタマイザー「ウィジェット」画面

「外観」>「カスタマイズ」>「ウィジェット」>「フッター」

STEP
フッターにウィジェットを追加
SWELLのカスタマイザー「フッターウィジェット」追加画面

フッター(PC)1から「ウィジェットを追加」をクリックし、お好きなウィジェットを追加してください。

フッター(PC)2、3と最大3列まで設置可能。

設置したら最後に「公開」をクリックすれば完了です。

エイタ

当サイトは1に「タグ」「検索」、2に「カテゴリー」

フッターメニューの設定

SWELLのフッター

フッターメニューにはお好きなリンク先を設定できます。

当サイトでは固定ページで作成した「プロフィールページ」などを配置しています。

STEP
新しいメニューを作成
SWELLのメニュー追加画面

「外観」>「メニュー」

「新しいメニューを作成しましょう。」をクリック。

STEP
メニュー名を入力
SWELLの新規メニュー追加画面

メニュー名を追加し「メニューを作成」をクリックすれば完成。

【フッターメニュー】などわかりやすい名前を付けましょう。

STEP
メニュー項目の追加
SWELLのフッターメニュー作成画面

画面左【メニュー項目を追加】から、作成したメニューにコンテンツを追加。

次に【フッター】【固定フッター(SP)】にチェックを入れ、「メニューを保存」をクリックすれば完成です。

エイタ

スマホにも追加しておこう

SNSアイコンリストの表示設定

SWELLのフッター「アイコンリスト」選択画面

「外観」>「カスタマイズ」>「フッター」>「その他の設定」

SWELLのカスタマイザー「フッターウィジェット」SNSアイコンリスト追加画面

「フッターにSNSアイコンリストを表示する」にチェックを入れると、SNSアイコンが表示されます。

コピーライトの設定

SWELLのフッター「コピーライト」選択画面

「外観」>「カスタマイズ」>「フッター」>「コピーライト設定」

SWELLのカスタマイザー「フッターウィジェット」コピーライト追加画面

「コピーライトのテキスト」にブログ名を入力すれば完了。

エイタ

お疲れさまでした

その他サイト型トップページのカスタマイズ

最後に、その他サイト型トップページのカスタマイズ方法を紹介します。

  • タブブロックでカテゴリーを作成
  • 見出しを画像にする
  • ピックアップバナー
  • 記事スライダー

タブブロックでカテゴリーを作成

タブブロックでカテゴリーを作成する方法は以下のとおり。

STEP
タブブロックの追加
SWELL「タブブロック」を追加する画面

ブロックメニューで「タブ」を呼び出し挿入します。

STEP
タブブロックの編集
SWELL「タブブロック」画面

「タブ1」「タブ2」の名称は自由に変更できます。

タブを増やす場合は【+】をクリックしてください。

STEP
タブブロックのデザインを編集
SWELL「タブブロック」スタイル編集画面
SWELL「タブブロック」スタイル編集画面2

【タブサイズ設定】は「固定幅」か「端まで並べる(均等幅で)」がキレイに表示されるのでおすすめ。

「テキストに合わせる」だと、タブの長さがバラバラに表示されてしまいます。

STEP
タブ内に投稿リストを追加
SWELL「投稿リストブロック」を追加する画面

タブ内に投稿リストを追加し、各カテゴリーを表示させれば完成です。

SWELLのタブ内「投稿リストブロック」画面

見出しを画像にする

見出し

見出しに画像を設定することもできます。

おしゃれかつオリジナリティを出せるのでおすすめです。

STEP
Canvaで見出し作成
Canvaの見出し作成画面

サイズは1600×360で作成しています。(ロゴと同じ)

この際、背景色をフルワイドブロックの色とあわせる必要があります。

Canva Pro(有料版)をお使いの方は、ダウンロード時に「背景透過」にチェックを入れればOK

STEP
見出し画像を挿入
SWELLの見出し画像挿入画面

見出しブロックに作成した見出しを「インライン画像」で挿入します。

インライン画像」は文章や表に画像を差し込む機能。

STEP
見出し画像のサイズを調整
SWELLのインライン画像編集画面

見出し画像のサイズを調整すれば完成です。

SWELLの見出し画像設置画面

ピックアップバナー

SWELLのピックアップバナー設置画面

ピックアップバナーの設置方法は次のとおりです。

STEP
新しいメニューを作成
SWELLのウィジェット「新規メニューを作成」画面

「外観」>「メニュー」

「新しいメニューを作成しましょう。」をクリック。

STEP
メニュー名を入力
SWELLの新規メニュー追加画面

メニュー名を追加。(ピックアップバナーなどわかりやすい名前推奨)

記入したら「メニューを作成」をクリックします。

STEP
メニュー項目の追加
SWELLのピックアップメニュー作成画面

画面左【メニュー項目を追加】から、作成したピックアップメニューにコンテンツを追加。

最後に【ピックアップバナー】にチェックを入れ、「メニューを保存」をクリックすれば完成です。

記事スライダー

SWELLのスライダー設置画面

記事スライダーの設置方法は以下になります。

STEP
記事スライダーの設置
SWELLのカスタマイザー「記事スライダー」編集画面

「外観」>「カスタマイズ」>「トップページ」>「記事スライダー」

「設置する」を選択し、【公開】をクリックすれば記事スライダーが表示されます。

STEP
記事スライダーの詳細設定
SWELLのカスタマイザー「記事スライダー」デザイン編集画面1
SWELLのカスタマイザー「記事スライダー」デザイン編集画面2

お好みでスライダーに表示させる記事のカテゴリー、並び順、数などを調整してください。

まとめ|SWELLのトップページをサイト型にカスタマイズする方法

今回は、SWELLのトップページをサイト型にカスタマイズする方法をまとめました。

おさらい

本記事で紹介したのはシンプルなサイト型トップページ。

ここからお好みでアレンジしてくださいね。

それでは、良いブログライフを!

\国内人気No.1/

あわせて読みたい

【マネするだけ】SWELLのトップページをサイト型にカスタマイズする方法

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

よかったらシェア!
  • URLをコピーしました!
目次