MENU
  1. ホーム
  2. 障害者の副業
  3. 副業ブログ
  4. ブログの始め方
  5. SWELL
  6. SWELLカスタマイズ！トップページをサイト型に【簡単画像解説】

SWELLカスタマイズ！トップページをサイト型に【簡単画像解説】

SWELL
2020.12.17
悩む人

SWELLってサイト型もできるんだ。

おしゃれで良いよね。あんなトップページを作りたい...

どうカスタマイズすれば良いんだろう？？

ため

サイト型のトップページって、おしゃれですよね。

僕は憧れて、3ヵ月間試行錯誤しました。

今回は、そんな悩みを解消しましょう！130枚の画像を使って説明しますね。

この記事で分かること
  • SWELLのサイト型カスタマイズ法
  • 作ったトップページを公開する方法

この記事を書いている人

今回は、SWELLのサイト型のトップページの作り方をご紹介します。

最初は思い通りのカスタマイズができませんよね。まして、サイト型なんて難しそうで、作りたくても作れない...

  • みんなどうやってるんだろう？
  • 検索してもこれと言った情報が出てこない...

僕もそうでした。

そこで、この記事では

SWELLカスタマイズ！トップページをサイト型に【簡単画像解説】

についてお伝えします。

ため

本記事の手順に沿うだけで、サイト型のトップページが作れますよ。

ちなみに、まだSWELLを導入していなければ、以下をご覧ください。完全図解で導入手順を解説しています。

関連記事

＞＞【感想レビュー】SWELLを6ヵ月使ったリアルな本音｜真実を暴露

あわせて読みたい
【真実と本音】SWELLのリアルな感想レビュー｜微妙な点も暴露
【真実と本音】SWELLのリアルな感想レビュー｜微妙な点も暴露2021年2月7日現在の情報です。SWELLの評判が気になってた。使ってどうだった？テーマ選びで失敗したくないから、リアルな感想を教えて。SWELLの評判を聞くと気になりま...
目次

SWELLサイト型カスタマイズで作るトップページ

お店をイメージ。入口付近に目玉商品があって、奥に人気商品がある感じです。

今回は、上記のトップページを作成していきます。

一見難しそうに思えますが、実は「ブロックを選ぶ⇒左クリック」だけです。HTMLやCSSの操作は、一切必要ありません。

ため

とはいえ、一気にやると大変です。

なので、以下の9つに分けて説明していきますね。

※SWELLサイト型カスタマイズ一覧（ジャンプ先）

SWELLサイト型カスタマイズ
  1. メインビジュアル
  2. 記事スライダー
  3. PICK UPコンテンツ
  4. トップページ上部サイト内検索
  5. NEWSコンテンツ（新着記事）
  6. カテゴリーコンテンツ
  7. トップページ中部サイト内検索
  8. Popularコンテンツ（人気記事）
  9. トップページ下ピックアップ記事

クリックするとページが移動します

多いように思えますが、実際は30～40分程度で終わりますよ。

事前準備

事前準備として、「新規投稿ページ」を追加します。

ため

後でやると手間なので、先にやっちゃいましょう。

手順

  1. 『外観』→『カスタマイズ』
  2. 『WordPress設定』
  3. 『ホームページ設定』
  4. 新規投稿ページの作成
  5. 公開をクリック

①：『外観』→『カスタマイズ』

『外観』→『カスタマイズ』

②：『WordPress設定』

『WordPress設定』をクリック

③：『ホームページ設定』

『ホームページ設定』をクリック

④：新規投稿ページの作成

『投稿ページ名を入力』→『追加』

⑤：『公開』をクリック

『公開』をクリック
ため

これで完了です。

では、具体的なカスタマイズ法について紹介しますね。

SWELLサイト型トップページのカスタマイズ①：
メインビジュアル

まずは、メインビジュアル。お店で言うと、入口の部分ですね。

ため

デザイン性を高めるために、動画を使います。

ワンランク上のブログになって、周りと差をつけらますよ。

メインビジュアルの設置の仕方
  1. メインビジュアルの設定
  2. ボタンリンクを設定

リンクをクリックするとスキップします

ため

カスタマイザーを操作するので、

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

を開いてからご覧ください。

メインビジュアルの設定

まずは、メインビジュアルの設定をします。手順は以下のとおり。

手順

  1. 「動画」を選択する
  2. 「Scrollボタンを表示する」にチェックを入れる
  3. 「ウィンドウサイズにフィットさせる」を選ぶ
  4. 動画ファイルをアップロードする

①：メインビジュアルの表示内容

『動画』を選択

②：Scrollボタンを表示する

『Scrollボタンを表示する』にチェックを入れる

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

『ウィンドウサイズにフィットさせる』を選択

④：動画ファイルをアップロード

動画ファイルは、PC/Tab・SPともに同じものを使用します。長すぎず短すぎない、「2分50秒程度の動画」を使ってください。

STEP
「動画を選択」をクリック
『動画を選択』をクリック
STEP
「ファイルをアップロード」→「ファイルを選択」→「動画を選択」
『ファイルをアップロード』→『ファイルを選択』→『動画を選択』

当ブログで使っている動画ファイルです。

この章のトップ

ボタンリンクを設定

次は、ボタンリンクを設定します。手順は以下のとおり。

手順

  1. メインテキストを入力する
  2. ボタンリンクのURLを入力する
  3. ボタンテキストを入力する
  4. テキストの位置を「中央」にする
  5. ボタンタイプを「ボーダー」にする

①：メインテキストを入力する

『メインテキスト』にキャッチコピーを入力

②：ボタンリンクのURLを入力する

読んでもらいたい記事のURLを入力

③：ボタンテキストを入力する

ボタンに表示させるテキストを入力

④：テキストの位置を「中央」にする

『中央』を選択

⑤：ボタンタイプを「ボーダー」にする

『ボーダー』を選択
ため

設定画面上部の「公開」を押して完了です。

SWELLサイト型カスタマイズ一覧に戻る

SWELLサイト型トップページのカスタマイズ②：
記事スライダー

次は、記事スライダーを設置します。お店で言うと、入ってすぐ目にする特売品広告ですね。

ため

公開している記事が、流れるように表示されます。

なので、読者の注意を引きつけることができますよ。

記事スライダーの設置の仕方
  1. 記事スライダーの設定
  2. 記事スライダーのタイトルを設定

クリックするとスキップします

ため

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

を開いてからご覧ください。

記事スライダーの設定

まずは、記事スライダーの設定をします。手順は以下のとおり。

手順

  1. 「設置する」にチェックを入れる
  2. スライドの設定をする

①：「設置する」にチェックを入れる

『設置する』にチェック

②：スライドの設定をする

設定項目設定数
スライダーの枚数設定（PC）5
スライダーの枚数設定（SP）2
スライドのアニメーション速度1500
スライドが切り替わる間隔1300

この章のトップに戻る

記事スライダーのタイトルを設定

次は、記事スライダーのタイトルを設定します。

以下のコードを、「記事スライダーのタイトルエリア」に入力してください。

<i class ="fa fa-tag" aria-hidden="true"></i> おすすめコンテンツ

このようになればOK

公開をクリック

そして、画面左上の『公開』を押して完了です。

『公開』をクリック

SWELLサイト型カスタマイズ一覧に戻る

SWELLサイト型トップページのカスタマイズ③：
PICK UPコンテンツ

次は、PICK UPコンテンツです。お店で言うと、特売品コーナーですね。

ため

クリックされやすいよう、インパクトを持たせました。

PICK UPコンテンツの作り方
  1. フルワイドブロックの設置
  2. カラム（70 / 30）の設置
  3. 左カラムにピックアップ記事を出力
  4. 右カラムにピックアップ記事を出力

クリックするとスキップします

ため

ここからは固定ページで作るので、

『固定ページ』→『新規追加』

と進んでください。

フルワイドブロックの設置

まずは、フルワイドブロックを設置します。手順は以下のとおり。

手順

  1. ブロック検索 →『フルワイド』
  2. コンテンツ幅などの設定
  3. セクション見出しの作成

①：ブロック検索 → 『フルワイド』

フルワイドブロックを呼び出します。

STEP
画面左上の『＋』をクリック
画面左上の『＋』をクリック
STEP
『フルワイド』と入力 →『フルワイド』をクリック
『フルワイド』と入力 →『フルワイド』をクリック

②：コンテンツサイズの設定

下記の画面が表示されたら、コンテンツサイズを設定します。設定値は下記のとおり。

設定項目設定値
コンテンツの横幅をどこに揃えるかサイト幅
上下のpadding量（PC）40
上下のpadding量（SP）40
背景色#ffffff

③：セクション見出しの設定

最後に、セクション見出しを作ります。

STEP
タイトルを入力
タイトルを入力
STEP
『注釈』→ サブタイトルの設定
『注釈』→ サブタイトルの入力

この章のトップに戻る

カラム（70 / 30）の設置

フルワイドブロックの中に、カラムを設置します。手順は以下のとおり。

手順

  1. エディタ画面中央の『＋』をクリック
  2. 検索窓に『カラム』と入力 → 『カラム』を選択
  3. 『70 / 30』を選択

①：エディタ画面中央の『＋』をクリック

『＋』をクリック

②：検索窓に『カラム』と入力 → 『カラム』を選択

検索窓に『カラム』と入力 → 『カラム』を選択

③：『70 / 30』を選択

『70 / 30』を選択

この章のトップに戻る

左カラムにピックアップ記事を出力

左カラムにピックアップ記事を出力します。手順は以下のとおり。

手順

  1. 左枠の『＋』 をクリック
  2. 検索窓に『投稿リスト』と入力 →『投稿リスト』を選択
  3. 投稿数の設定

①：左枠の『＋』をクリック

左枠の『＋』をクリック

②：検索窓に『投稿リスト』と入力 →『投稿リスト』を選択

検索窓に『投稿リスト』と入力 →『投稿リスト』を選択

③：表示設定の変更

下記の画面が表示されたら、右側の「表示設定」を変更してください。設定値は下記のとおり。

設定項目ー
Pickup（投稿IDを直接指定）記事IDを入力
投稿数1
レイアウトサムネイル型
各種表示設定公開日を表示する
タイトルを表示する
カテゴリーの表示位置表示しない
最大カラム数（PC)1列

この章のトップに戻る

右カラムにピックアップ記事を出力

左カラムが終わったら、右カラムにピックアップ記事を出力します。手順は以下のとおり。

手順

  1. 枠内の『＋』 をクリック
  2. 検索窓に『投稿リスト』と入力 →『投稿リスト』をクリック
  3. 投稿数などの設定

①：右枠の『＋』をクリック → 『投稿リスト』を選択

右枠の『＋』をクリック → 『投稿リスト』を選択

②：検索窓に『投稿リスト』と入力 →『投稿リスト』をクリック

検索窓に『投稿リスト』と入力 →『投稿リスト』をクリック

③：表示設定の変更

投稿リストが表示されたら、右側の「表示設定」を変更します。設定値は以下のとおり。

設定項目設定値
Pickup（投稿IDを直接指定）記事IDを入力
投稿数2
レイアウトサムネイル型
各種表示設定公開日を表示する
タイトルを表示する
カテゴリーの表示位置表示しない
最大カラム数（PC)1列

表示確認

以下のように表示されればOKです。

SWELLサイト型カスタマイズ一覧に戻る

SWELLサイト型トップページのカスタマイズ④：
トップページ上部サイト内検索

次は、サイト内検索を作ります。お店で言うと、店内の案内板ですね。

ため

サイドバーが無くても検索できるので、利便性が高まります。

なので、回遊率や滞在時間が伸びますよ。

サイト内検索の作り方
  1. フルワイドブロックの設置
  2. カラム（50 / 50）の設置
  3. 左カラムにキーワード検索を追加
  4. 右カラムにカテゴリー検索を追加

クリックするとスキップします

ため

PICK UPの下に作るので、そのまま進めてください。

フルワイドブロックの設置

まずは、フルワイドブロックを設置します。手順は以下のとおり。

手順

  1. 2つめの『＋』をクリック
  2. 検索窓に『フルワイド』と入力 →『フルワイド』を選択
  3. セクション見出しの削除
  4. コンテンツサイズの変更

①：2つめの『＋』をクリック

2つめの『＋』をクリック

②：検索窓に『フルワイド』と入力 →『フルワイド』を選択

検索窓に『フルワイド』と入力 →『フルワイド』を選択

③：セクション見出しの削除

テキストツールバーの『︙』→『ブロックを削除』。

テキストツールバーの『︙』→『ブロックを削除』

④：コンテンツサイズの変更

画面右に表示されている、コンテンツサイズを変更します。設定値は以下のとおり。

設定項目設定値
コンテンツの横幅をどこに揃えるかサイト幅
上下のpadding量（PC）20
上下のpadding量（SP）20
背景色#f7f7f7

この章のトップに戻る

カラム（50 / 50）の設置

次に、カラム（50 /50）を設置します。手順は以下のとおり。

手順

  1. フルワイドブロック内の『＋』をクリック
  2. 検索窓に『カラム』と入力 →『カラム』を選択
  3. 『50 / 50』を選ぶ

①：フルワイドブロック内の『＋』をクリック

フルワイドブロック内の『＋』をクリック

②： 検索窓に『カラム』と入力 →『カラム』を選択

検索窓に『カラム』と入力 →『カラム』を選択

③：50 / 50を選ぶ

50 / 50を選択

この章のトップに戻る

左カラムにキーワード検索を追加

その次は、左カラムにキーワード検索を追加します。手順は以下のとおり。

手順

  1. 左枠の『＋』をクリック
  2. 検索窓に『検索』と入力 →『検索』を選択
  3. 検索の設定をする

①：左枠の『＋』をクリック

左枠の『＋』をクリック

②：検索窓に『検索』と入力 →『検索』を選択

検索窓に『検索』と入力 →『検索』を選択

③：検索の設定をする

下記の画面が表示されたら、検索の設定をします。設定値は、下記のとおり。

設定項目設定値
表示ラベルの切り替えラベル無
ボタンの位置ボタン内側
アイコン付きボタン使用
任意のプレースホルダーキーワード検索

この章のトップに戻る

右カラムにカテゴリー検索を追加

最後は、右カラムにカテゴリー検索を追加します。手順は以下のとおり。

手順

  1. 右枠の『＋』をクリック
  2. 検索窓に『カテゴリー』と入力 →『カテゴリー』
  3. カテゴリーの表示設定をする

①：右枠の『＋』をクリック

右枠の『＋』をクリック

②：検索窓に『カテゴリー』と入力 →『カテゴリー』を選択

検索窓に『カテゴリー』と入力 →『カテゴリー』を選択

③：カテゴリーの設定

下記の画面が表示されたら、画面右のカテゴリー設定を変更します。設定値は以下のとおり。

設定項目設定値
ドロップダウンで表示ON
階層で表示ON
投稿数を表示OFF

SWELLサイト型カスタマイズ一覧に戻る

SWELLサイト型トップページのカスタマイズ⑤：
NEWSコンテンツ（新着記事）

次は、新着記事を作ります。お店で言うと、新商品売り場ですね。

ため

新商品が目に留まるのと同じで、新着記事は注意を引きつけます。

なので、PVや滞在時間を増やせますよ。

新着記事の作り方
  1. フルワイドブロックの設置
  2. カラム（30 / 70）の設置
  3. 左カラムにセクション見出しを設置
  4. セクション見出し下にボタンを設置
  5. 右カラムに新着記事を出力

クリックするとスキップします

ため

サイト内検索下に作るので、そのまま進めてください。

フルワイドブロックの設置

まずは、フルワイドブロックを設置します。手順は以下のとおり。

手順

  1. サイト内検索直下の『＋』をクリック
  2. 検索窓に『フルワイド』と入力 →『フルワイド』を選択
  3. フルワイドブロックのコンテンツサイズを変更
  4. セクション見出しを削除

①：サイト内検索直下の『＋』をクリック

サイト内検索直下の『＋』をクリック

②：検索窓に『フルワイド』と入力→『フルワイド』を選択

検索窓に『フルワイド』と入力→『フルワイド』を選択

③：コンテンツサイズを変更

画面右のコンテンツサイズを設定します。設定値は以下のとおり。

設定項目設定値
コンテンツの横幅をどこに揃えるかサイト幅
上下のpadding量（PC）40
上下のpadding量（SP）40
背景色#ffffff

④：セクション見出しを削除

テキストツールバーの『︙』→『ブロックを削除』。

テキストツールバーの『︙』→『ブロックを削除』

この章のトップに戻る

カラム（30 / 70）の設置

次は、カラム（30 / 70）を設置します。手順は以下のとおり。

手順

  1. フルワイドブロック内の『＋』をクリック
  2. 検索窓に『カラム』と入力 →『カラム』を選択
  3. カラム（30 / 70）を選択

①：フルワイドブロック内の『＋』をクリック

フルワイドブロック内の『＋』をクリック

②：検索窓に『カラム』と入力 →『カラム』を選択

検索窓に『カラム』と入力 →『カラム』を選択

③：カラム（30 / 70）を選択

『30 /70』を選択

この章のトップに戻る

左カラムにセクション見出しを設置

次は、左カラムにセクション見出しを設置します。手順は以下のとおり。

手順

  1. 左カラム内の『＋』をクリック
  2. 検索窓に『 見出し』と入力 →『見出し』を選択
  3. セクション見出しを選択
  4. タイトルを入力
  5. サブタイトルを入力

①：左カラム内の『＋』をクリック

左カラム内の『＋』をクリック

②：検索窓に『見出し』と入力 →『見出し』を選択

検索窓に『見出し』と入力 →『見出し』を選択

③：セクション見出しを選択

セクション見出しを選択

④：タイトルを入力

タイトルを入力

⑤：サブタイトルを入力

サブタイトルを入力

この章のトップに戻る

セクション見出し下にボタンを設置

次は、セクション見出し下のにボタンを設置します。手順は以下のとおり。

手順

  1. セクション見出し下の『＋』をクリック
  2. 検索窓に『SWELLボタン』と入力 →『SWELLボタン』を選択
  3. MOREボタンに変更
  4. 『ボタンタイトル』→『記事URL』

①：セクション見出し下の『＋』をクリック

セクション見出し下の『＋』をクリック

②：検索窓に『SWELLボタン』と入力 →『SWELLボタン』を選択

検索窓に『SWELLボタン』と入力 →『SWELLボタン』を選択

③：MOREボタンに変更

『MOREボタン』を選択

④：ボタンタイトルと記事URLを入力

ため

記事URLには、「事前準備で作った新規投稿ページのURL」を設定してください。

設定手順

設定手順は以下のとおり。

『ダッシュボード』→『固定ページ』→『記事一覧』→『表示』→『コピペ』

『URL』をコピー → ボタン記事URLに貼り付け

この章のトップに戻る

右カラムに新着記事を出力

最後は、右カラムに新着記事を出力します。手順は以下のとおり。

手順

  1. 右カラムの『＋』をクリック
  2. 検索窓に『投稿リスト』と入力 →『投稿リスト』を選択
  3. 新着記事を出力

①：右カラムの『＋』をクリック

右カラムの『＋』をクリック

②：検索窓に『投稿リスト』と入力 →『投稿リスト』を選択

検索窓に『投稿リスト』と入力 →『投稿リスト』を選択

③：新着記事を出力

下記の画面が表示されたら、画面右の『表示設定』を変更してください。設定値は以下のとおり。

設定項目設定値
Settingー
投稿数4
レイアウトテキスト型
投稿の表示順序新着順
各種表示設定公開日を表示する
カテゴリーの表示位置表示しない
最大カラム数（PC)3列

SWELLサイト型カスタマイズ一覧に戻る

SWELLサイト型トップページのカスタマイズ⑥：
カテゴリーコンテンツ

次は、カテゴリーコンテンツを作ります。お店で言うと、○○コーナーみたいなものですね。

ため

これがあると、どんなコンテンツがあるのかが一目瞭然です。

なので、利便性が高くなって滞在時間が伸びますよ。

カテゴリーコンテンツの作り方
  1. フルワイドブロックの設置
  2. メディアと文章の設置
  3. セクション見出しの設置
  4. ボタンを設置

クリックするとスキップします

ため

新着記事下に作るので、そのまま進めてください。

フルワイドブロックの設置

まずは、フルワイドブロックを設置します。手順は以下のとおり。

手順

  1. 2つめの『＋』をクリック
  2. 検索窓に『フルワイド』と入力 →『フルワイド』を選択
  3. セクション見出しを削除
  4. コンテンツサイズと背景色を変更

①：2つめの『＋』をクリック

2つめの『＋』をクリック

②：検索窓に『フルワイド』と入力 →『フルワイド』を選択

検索窓に『フルワイド』と入力 →『フルワイド』を選択

③：セクション見出しを削除

テキストツールバーの『︙』→『ブロックを削除』

④：コンテンツサイズを変更

最後に、コンテンツサイズを変更します。設定値は以下のとおり。

設定項目設定値
コンテンツの横幅をどこに揃えるかサイト幅
上下のpadding量（PC）40
上下のpadding量（SP）40
背景色f9fffc

この章のトップに戻る

メディアと文章の設置

次は、メディアと文章の設置です。手順は以下のとおり。

手順

  1. フルワイドブロック内の『＋』をクリック
  2. 検索窓に『メディアと文章』と入力 → 『メディアと文章』を選択
  3. 画像をアップロード
  4. テキストを入力
  5. ボタンを設置

①：フルワイドブロック内の『＋』をクリック

フルワイドブロック内の『＋』をクリック

②：検索窓に『メディアと文章』と入力 →『メディアと文章』を選択

検索窓に『メディアと文章』と入力 →『メディアと文章』を選択

③：画像をアップロード

ポイントとしては、一目で分かる画像を使うこと。仕事なら仕事してる画像、勉強なら勉強してる画像ですね。

この章のトップに戻る

セクション見出しの設置

画像をアップロードしたら、セクション見出しを作ります。手順は以下のとおり。

手順

  1. テキストバーの左端 →『見出し』
  2. セクション用見出しを選択
  3. 見出しタイトルとカテゴリー説明を入力

①：テキストバーの左端 →『見出し』

テキストバーの左端 →『見出し』

②：セクション用見出しを選択

セクション用見出しを選択

③：タイトルとテキストを入力

『見出しタイトル』と『カテゴリー説明文』を入力

この章のトップに戻る

ボタンを設置

最後は、ボタンの設置です。手順は以下のとおり。

手順

  1. セクション用見出し直下の『＋』をクリック
  2. ブロックの検索窓に『SWELLボタン』と入力 → 『SWELLボタン』を選択
  3. ボタンテキストと記事URLを入力
  4. 見出しとボタンの間隔を4mm空ける

①：セクション用見出し直下の『＋』をクリック

セクション用見出し直下の『＋』をクリック

②：ブロックの検索窓に『SWELLボタン』と入力 → 『SWELLボタン』を選択

ブロックの検索窓に『SWELLボタン』と入力 → 『SWELLボタン』を選択

③：ボタンテキストと記事URLを入力

記事URLには、『カテゴリーURL』を使います。

④：見出しとボタンの間隔を空ける

テキストツールバーのブロック下の余白量を『L』にする

下段

下段は、画像の位置を右にします。

左右交互にする理由は単純で、見た目が良くなるから。

ため

カード型・タイル型レイアウトと呼ばれ、企業サイトが取り入れています。

フルワイドブロック内の『＋』→『メディアと文章』 → ツールバーの『メディアを右に表示。
後は、先と同じ。
ため

この部分は、くうかんシンプルライフさんを参考にしました。

くうか（@kuukahan）さん、ありがとうございますm(__)m

くうかんしんぷるライフ
SWELLカスタマイズ！トップページをサイト型でおしゃれに。 | くうかんしんぷるライフ
SWELLカスタマイズ！トップページをサイト型でおしゃれに。 | くうかんしんぷるライフSWELLはCSSの知識がなくても、ブロックの組み合わせ次第でおしゃれなページを作ることができます。記事が多く埋もれがちなブログをサイト型のトップページで作ってみました...

SWELLサイト型カスタマイズ一覧に戻る

SWELLサイト型トップページのカスタマイズ⑦：
トップページ中部サイト内検索

次は、サイト内検索を作ります。お店で言うと、店内にある伝言掲示板ですね。

ため

この部分にあると、上部サイト内検索まで戻らなくて済みます。

そうすると利便性が高くなるので、滞在時間が伸びますよ。

サイト内検索の作り方
  1. フルワイドブロックを設置
  2. カラム（50 / 50）を設置
  3. 左カラムにキーワード検索を追加
  4. 右カラムにカテゴリー検索を追加

こちらと全く同じ手順ですね。

SWELLサイト型カスタマイズ一覧に戻る

SWELLサイト型トップページのカスタマイズ⑧：
Popularコンテンツ（人気記事）

次は、人気記事を作ります。お店で言うと、人気商品売り場ですね。

ため

上部にあると、人気記事だけを見て帰る可能性が大。しかし、下部にあると、他のコンテンツも見られます。

人気記事の作り方
  1. フルワイドブロックの設置
  2. セクション見出しを設置
  3. 人気記事の出力
  4. 人気記事下にボタンを設置

クリックするとスキップします

画面中部のサイト内検索の下に作るので、そのまま進めてください。

フルワイドブロックの設置

まずは、フルワイドブロックを設置します。手順は以下のとおり。

手順

  1. サイト内検索直下の『＋』をクリック
  2. 検索窓に 『フルワイド』と入力 → 『フルワイド』を選択
  3. コンテンツサイズを変更

①：サイト内検索下の『＋』をクリック

サイト内検索下の『＋』をクリック

②：検索窓に『フルワイド』と入力 →『フルワイド』を選択

検索窓に『フルワイド』と入力 →『フルワイド』を選択

③：コンテンツサイズを変更

フルワイドブロックを設置したら、コンテンツサイズを変更します。設定値は以下のとおり。

設定項目設定値
コンテンツの横幅をどこに揃えるかサイト幅
上下のpadding量（PC）40
上下のpadding量（SP）40
背景色#ffffff

この章のトップに戻る

セクション見出しを設置

次は、セクション見出しを設置します。手順は以下のとおり。

手順

  1. タイトルの入力
  2. サブタイトルの入力

①：タイトルの入力

見出しタイトルの入力

②：サブタイトルの入力

『注釈』→ サブタイトルの入力

この章のトップに戻る

人気記事の出力

次は、人気記事を出力します。手順は以下のとおり。

手順

  1. セクション見出し直下の『＋』をクリック
  2. 検索窓に『投稿リスト』と入力 →『投稿リスト』を選択
  3. 人気記事を出力
  4. ボタンの設置

①：セクション見出し下の『＋』をクリック

セクション見出し下の『＋』をクリック

②：検索窓に『投稿リスト』と入力 →『投稿リスト』を選択

検索窓に『投稿リスト』と入力 →『投稿リスト』を選択

③：人気記事を出力

下記の画面が表示されたら、画面右の『表示設定』を変更してください。設定値は以下のとおり。

設定項目設定値
Settingー
投稿数6
レイアウトカード型
投稿の表示順序人気順
各種表示設定公開日を表示する
カテゴリーの表示位置表示しない
最大カラム数（PC)3列

この章のトップに戻る

人気記事下にボタンを設置

最後に、人気記事の下にボタンを設置します。手順は以下のとおり。

手順

  1. セクション見出し直下の『＋』をクリック
  2. 検索窓に『SWELLボタン』と入力 →『SWELLボタン』を選択
  3. MOREボタンに変更
  4. ボタンタイトルと記事URLを入力

①：セクション見出し直下の『＋』をクリック

セクション見出し直下の『＋』をクリック

②：検索窓に『SWELLボタン』と入力 →『SWELLボタン』を選択

検索窓に『SWELLボタン』と入力 →『SWELLボタン』を選択

③：MOREボタンに変更

『MOREボタン』をクリック

④：ボタンタイトルと記事URLを入力

ため

記事URLには、「事前準備で作った新規投稿ページのURL」を設定してください。

設定手順

設定手順は以下のとおり。

「ダッシュボード」→「固定ページ」→「記事一覧」→「表示」→「コピペ」

ため

人気記事が完成しました。

SWELLサイト型カスタマイズ一覧に戻る

SWELLサイト型トップページのカスタマイズ⑨：
トップページ下ピックアップ記事

最後は、トップページ下ピックアップ記事を作ります。

ポイントは、【バナーリンク】を使って左右非対称にすること。

  • 左右非対称にすることでデザイン性が上がる
  • マウスを乗せれば画像がプリっと動くのでクリックされやすくなる

なので、このようなレイアウトにしました。

この章でやること
  1. フルワイドブロックの設置
  2. カラム（50 / 50）を設置
  3. 左カラムにバナーリンクを設置
  4. 右カラムにバナーリンクを設置

クリックするとスキップします

ため

人気記事の下に作るので、そのまま進めてください。

フルワイドブロックの設置

まずは、フルワイドブロックを設置します。手順は以下のとおり。

手順

  1. ボタン下の『＋』をクリック
  2. 検索窓に『フルワイド』と入力 →『フルワイド』を選択
  3. コンテンツサイズの変更
  4. セクション見出しを削除

①：ボタン下の『＋』をクリック

ボタン下の『＋』をクリック

②：検索窓に『フルワイド』と入力 →『フルワイド』をクリック

検索窓に『フルワイド』と入力 →『フルワイド』をクリック

③：コンテンツサイズの変更

フルワイドブロックを設置したら、コンテンツサイズを変更します。設定値は以下のとおり。

設定項目設定値
コンテンツの横幅をどこに揃えるかサイト幅
上下のpadding量（PC）40
上下のpadding量（SP）40
背景色#ffffff

③：セクション見出しを削除

テキストツールバーの『︙』→『ブロックを削除』。

テキストツールバーの『︙』→『ブロックを削除』

この章のトップに戻る

カラム（50 / 50）を設置

次は、カラム（50 / 50）設置を設置します。手順は以下のとおり。

手順

  1. ボタン下の『＋』をクリック
  2. 検索窓に『カラム』と入力 →『カラム』を選択
  3. カラム（50 / 50）を選択

①：ボタン下の『＋』をクリック

ボタン下の『＋』をクリック

②：検索窓に『カラム』と入力 →『カラム』を選択

検索窓に『カラム』と入力 →『カラム』を選択

②：カラム（50 /50）を選択

50 /50を選択

この章のトップに戻る

左カラムにバナーリンクを設置

次は、左カラムにバナーリンクを設置します。手順は以下のとおり。

手順

  1. 左枠の『＋』をクリック
  2. 検索窓に『バナーリンク』と入力 →『バナーリンク』を選択
  3. 画像をアップロード
  4. バナー設定の変更
  5. 『バナーテキスト』→『記事URL』

①：左枠の『＋』をクリック

左枠の『＋』をクリック

②：検索窓に『バナーリンク』と入力 →『バナーリンク』を選択

検索窓に『バナーリンク』と入力 →『バナーリンク』を選択

③：画像をアップロード

『アップロード』or『メディアライブラリ』

③：バナー設定を変更する

画面右のメニューから、バナーの設定を変更します。設定値は以下のとおり。

設定項目設定値
影をつけるON
テキストカラー#ffffff
オーバーレイカラー#000000
オーバーレイの不透明度50

④：バナーテキストと記事URLを入力

読んで欲しい記事のキャッチコピーと、記事URLを入力してください。

この章のトップに戻る

右カラムにバナーリンクを設置

最後に、右カラムにバナーリンクを設置します。手順は以下のとおり。

手順

  1. 右枠の『＋』をクリック
  2. 検索窓に『バナーリンク』と入力 →『バナーリンク』を選択
  3. 画像をアップロード
  4. バナー設定の変更
  5. 『バナーテキスト』→『記事URL』

①：右枠の『＋』をクリック

右枠の『＋』をクリック

②：検索窓に『バナーリンク』と入力 →『バナーリンク』を選択

検索窓に『バナーリンク』と入力 →『バナーリンク』を選択

③：画像をアップロード

③：バナー設定の変更

画面右のメニューから、バナーの設定を変更します。設定値は以下のとおり。

設定項目設定値
影をつけるON
テキストカラー#000000
オーバーレイカラー#ffffff
オーバーレイの不透明度20

④：『バナーテキスト』→『記事URL』

読んで欲しい記事のキャッチコピーと、記事URLを入力してください。

ため

トップページが作り終わりました。

お疲れ様です。

SWELLサイト型カスタマイズ一覧に戻る

トップページを公開する

カスタマイズが完了したら、トップページを公開します。

トップページ公開手順
  • 『パーマリンク』→『タイトル』
  • 作成したトップページを公開する
  • サイドバーの表示を変更する
  • トップページの表示を変更する

『タイトル』→『URLスラッグ』

タイトルとURLスラッグを設定します。

『タイトル』→『URLスラッグ』

作成したトップページを公開する

画面右上の『公開』をクリック。

『公開』をクリック

サイドバーの表示を変更する

次は、サイドバーの表示を変更します。手順は以下のとおり。

手順

  1. 『外観』→『カスタマイズ』
  2. 『サイドバー』をクリック
  3. 『トップページにサイドバーを表示する』のチェックを外す
  4. 『公開』をクリック

①：『外観』→『カスタマイズ』

『外観』→『カスタマイズ』

②：『サイドバー』をクリック

『サイドバー』をクリック

③：『トップページにサイドバーを表示する』のチェックを外す

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

④：『公開』をクリック

『公開』をクリック

トップページの表示を変更する

最後は、トップページの表示を変更します。手順は以下のとおり。

手順

  1. 『設定』→『表示設定』
  2. ホームページの表示を変更

①：『設定』→『表示設定』

『設定』→『表示設定』

②：ホームページの表示を変更

下記のように設定してください。

設定項目設定値
ホームページの表示固定ページ
ホームページHOME
投稿ページ記事一覧
ため

これで完成です！

お疲れ様でした！

SWELLカスタマイズ！トップページをサイト型に【簡単画像解説】：まとめ

今回は、【画像解説】SWELLカスタマイズ！トップページをサイト型にについてお伝えしました。

  1. メインビジュアルの設定
  2. ボタンリンクを設定

クリックすると見たいところに移動します

サイト型トップページは、マウス操作だけ作れます。

カスタマイズの幅が広いので、Webメディア型やポータルサイト型もOKです！

ため

「ブロックを選ぶ⇒左クリック」だけで、唯一無二のサイトができますよ！

ぜひこの世でたった一つしかないブログを作ってくださいね！

関連記事
SWELL
記事一覧

この記事が気に入ったら
いいね または フォローしてね！

よかったらシェアしてね！

コメント

コメントする

目次
閉じる