![](https://coin-blog.net/wp-content/uploads/2022/03/img13-150x150.png)
SWELLのトップページをサイト型にしたいけどやり方がわからない
このような疑問にお答えします。
SWELLのトップページをサイト型にするのは、むずかしそうに見えて実はかんたんです。
サイト型とは
サイト型とは、トップページにコンテンツを見やすく配置したデザインのこと。
ブログ内容、コンテンツの位置がひと目でわかるため、回遊率やクリック率の向上が見込めます。
手順
手順どおりに進めると、以下のようなサイト型トップページになります。
![コイン部ログのサイト型トップページ](https://coin-blog.net/wp-content/uploads/2023/12/img6769.png)
![コイン部ログのサイト型トップページ](https://coin-blog.net/wp-content/uploads/2023/12/img6769.png)
今回は当ブログを例に、サイト型トップページの作り方を解説。
サイト型のデザインは無数にありますが、基本構造は同じです。
もちろん、そのまま真似していただいてもOK
この記事を読めば、SWELLのトップページをサイト型にカスタマイズできますよ!
SWELLの購入方法はこちら
![プロフィールカード](https://coin-blog.net/wp-content/uploads/2023/01/img4324.png)
![プロフィールカード](https://coin-blog.net/wp-content/uploads/2023/01/img4324.png)
\国内人気No.1/
SWELLのトップページをサイト型にする前の準備
SWELLのトップページをサイト型にする前に、準備が2つあります。
見本となるブログを探す
自分のブログをどのようなデザインにしたいか、見本となるブログを探しましょう。
見本はなくても構いませんが、ある方がカスタマイズしやすいです。
サイト型トップページのSWELLブログを探すには、SWELL公式サイトの「ピックアップショーケース」からどうぞ。
おしゃれなブログばかりで参考になりますよ。
![SWELL公式サイトの「ピックアップショーケース」](https://coin-blog.net/wp-content/uploads/2023/12/img6770.png)
![SWELL公式サイトの「ピックアップショーケース」](https://coin-blog.net/wp-content/uploads/2023/12/img6770.png)
もしくはブロガー、さとしんさん作成の「SWELLサイト集」をご覧ください。
ちなみに、私は「misclogさん」を参考にしました。(シンプルで見やすい!)
最低20記事は必要
最低20記事は公開しておきましょう。
記事が少ないとカテゴリーの配置もままならないため、サイト型にする意味がありません。
サイト型トップページのメリットは、膨大な数の記事からお目当ての記事やカテゴリーが見つけやすいこと。
記事数が少なければ「ブログ型」でもすぐ見つけられるので。
![](https://coin-blog.net/wp-content/uploads/2022/03/img11-150x150.png)
![](https://coin-blog.net/wp-content/uploads/2022/03/img11-150x150.png)
![](https://coin-blog.net/wp-content/uploads/2022/03/img11-150x150.png)
20記事以下ではサイト型トップページする意味がない
SWELLの使い方はこちら
SWELLのサイト型トップページの作り方
![SWELLのサイト型トップページの作り方](https://coin-blog.net/wp-content/uploads/2023/12/img6771.png)
![SWELLのサイト型トップページの作り方](https://coin-blog.net/wp-content/uploads/2023/12/img6771.png)
SWELLのサイト型トップページの作り方は4ステップです。
![コイン部ログのサイト型トップページ](https://coin-blog.net/wp-content/uploads/2023/12/img6772-scaled.jpg)
![コイン部ログのサイト型トップページ](https://coin-blog.net/wp-content/uploads/2023/12/img6772-scaled.jpg)
作り方はかんたんで、固定ページでお好きなブロックを組み合わせるだけ。
HTMLやCSSの知識は必要ありません。
SWELLのヘッダー周辺をカスタマイズ
![SWELLのヘッダー解説](https://coin-blog.net/wp-content/uploads/2023/12/img6773.png)
![SWELLのヘッダー解説](https://coin-blog.net/wp-content/uploads/2023/12/img6773.png)
ステップ1では、サイトの顔にあたる「ヘッダー周辺」をカスタマイズします。
メインビジュアルの設定
![ノマドワーカーのイメージ画像](https://coin-blog.net/wp-content/uploads/2023/12/img6786.png)
![ノマドワーカーのイメージ画像](https://coin-blog.net/wp-content/uploads/2023/12/img6786.png)
メインビジュアルはウェブサイトを開いたとき最初に目にするエリア。
SWELLでは写真、もしくは動画を設置できます。
![カスタマイザーのメインビジュアル項目](https://coin-blog.net/wp-content/uploads/2023/12/img6774.png)
![カスタマイザーのメインビジュアル項目](https://coin-blog.net/wp-content/uploads/2023/12/img6774.png)
「外観」>「カスタマイズ」>「トップページ」>「メインビジュアル」
![メインビジュアルの表示内容選択画面](https://coin-blog.net/wp-content/uploads/2023/12/img6775.png)
![メインビジュアルの表示内容選択画面](https://coin-blog.net/wp-content/uploads/2023/12/img6775.png)
![SWELLのメインビジュアル表示設定画面](https://coin-blog.net/wp-content/uploads/2023/12/img6776.png)
![SWELLのメインビジュアル表示設定画面](https://coin-blog.net/wp-content/uploads/2023/12/img6776.png)
表示設定ではメインビジュアルのデザインを調整できます。
こだわりがなければそのままでOK
「フィルター処理」で画像のテクスチャ(表面の質感)を変えると、雰囲気がガラリと変わります。
例
![SWELLメインビジュアル「ブラー効果」適用例](https://coin-blog.net/wp-content/uploads/2023/12/img6778.png)
![SWELLメインビジュアル「ブラー効果」適用例](https://coin-blog.net/wp-content/uploads/2023/12/img6778.png)
![SWELLメインビジュアル「グレースケール効果」適用例](https://coin-blog.net/wp-content/uploads/2023/12/img6779.png)
![SWELLメインビジュアル「グレースケール効果」適用例](https://coin-blog.net/wp-content/uploads/2023/12/img6779.png)
![SWELLメインビジュアル「ドット効果」適用例](https://coin-blog.net/wp-content/uploads/2023/12/img6780.png)
![SWELLメインビジュアル「ドット効果」適用例](https://coin-blog.net/wp-content/uploads/2023/12/img6780.png)
![SWELLメインビジュアル「ブラシ効果」適用例](https://coin-blog.net/wp-content/uploads/2023/12/img6781.png)
![SWELLメインビジュアル「ブラシ効果」適用例](https://coin-blog.net/wp-content/uploads/2023/12/img6781.png)
「オーバーレイカラー」は色と不透明度を調整し、メインビジュアルに重ねられます。
例
![SWELLメインビジュアル「オーバーレイカラー効果」適用例2](https://coin-blog.net/wp-content/uploads/2023/12/img6784.png)
![SWELLメインビジュアル「オーバーレイカラー効果」適用例2](https://coin-blog.net/wp-content/uploads/2023/12/img6784.png)
![SWELLメインビジュアル「オーバーレイカラー効果」適用例1](https://coin-blog.net/wp-content/uploads/2023/12/img6783.png)
![SWELLメインビジュアル「オーバーレイカラー効果」適用例1](https://coin-blog.net/wp-content/uploads/2023/12/img6783.png)
![](https://coin-blog.net/wp-content/uploads/2022/03/img11-150x150.png)
![](https://coin-blog.net/wp-content/uploads/2022/03/img11-150x150.png)
![](https://coin-blog.net/wp-content/uploads/2022/03/img11-150x150.png)
当サイトはデフォルト設定のまま
![SWELLのメインビジュアル表示設定画面2](https://coin-blog.net/wp-content/uploads/2023/12/img6782.png)
![SWELLのメインビジュアル表示設定画面2](https://coin-blog.net/wp-content/uploads/2023/12/img6782.png)
![SWELLのメインビジュアル表示設定画面3](https://coin-blog.net/wp-content/uploads/2023/12/imh6783.png)
![SWELLのメインビジュアル表示設定画面3](https://coin-blog.net/wp-content/uploads/2023/12/imh6783.png)
「画像を選択」から画像をアップロード。
メインテキスト、サブテキストに文字を入れない場合は削除してください。
「メインテキスト」「サブテキスト」を加えると以下のようになります。
![SWELLメインビジュアルテキスト、ボタン適用例](https://coin-blog.net/wp-content/uploads/2023/12/img6785.png)
![SWELLメインビジュアルテキスト、ボタン適用例](https://coin-blog.net/wp-content/uploads/2023/12/img6785.png)
作成したブログパーツ、リンクボタンも挿入可能。
ヘッダーロゴの設定
![コイン部ログのヘッダーロゴ画像](https://coin-blog.net/wp-content/uploads/2023/12/img6788.png)
![コイン部ログのヘッダーロゴ画像](https://coin-blog.net/wp-content/uploads/2023/12/img6788.png)
ヘッダーロゴを使うと、ブログ名を画像で表示できます。
テキストよりオリジナリティを出しやすいのが特徴。
![Canvaの編集画面](https://coin-blog.net/wp-content/uploads/2023/12/img6789.png)
![Canvaの編集画面](https://coin-blog.net/wp-content/uploads/2023/12/img6789.png)
無料デザインツール「Canva」でロゴを作成します。
「自分でロゴなんて作れない…」という人でも大丈夫。
Canvaの検索窓に「ロゴ」と入力するとテンプレートが表示されるので、気に入ったロゴをアレンジすればOK
![](https://coin-blog.net/wp-content/uploads/2022/03/img11-150x150.png)
![](https://coin-blog.net/wp-content/uploads/2022/03/img11-150x150.png)
![](https://coin-blog.net/wp-content/uploads/2022/03/img11-150x150.png)
「ブログ名+フォント変更」だけでも立派なロゴになる
![カスタマイザーのヘッダー選択画面](https://coin-blog.net/wp-content/uploads/2023/12/img6790.png)
![カスタマイザーのヘッダー選択画面](https://coin-blog.net/wp-content/uploads/2023/12/img6790.png)
「外観」>「カスタマイズ」>「ヘッダー」
![SWELLのヘッダーロゴ設定画面](https://coin-blog.net/wp-content/uploads/2023/12/img6791.png)
![SWELLのヘッダーロゴ設定画面](https://coin-blog.net/wp-content/uploads/2023/12/img6791.png)
「画像を選択」をクリックし、作成したヘッダーロゴ画像をアップロード。
画像サイズは適宜調整してください。
![SWELL「トップページでの特別設定」画面](https://coin-blog.net/wp-content/uploads/2023/12/img6793.png)
![SWELL「トップページでの特別設定」画面](https://coin-blog.net/wp-content/uploads/2023/12/img6793.png)
ヘッダーの背景を透明にする場合、「する(白or黒)」を選択。
透過時のロゴ画像をアップロードしましょう。
![](https://coin-blog.net/wp-content/uploads/2022/03/img11-150x150.png)
![](https://coin-blog.net/wp-content/uploads/2022/03/img11-150x150.png)
![](https://coin-blog.net/wp-content/uploads/2022/03/img11-150x150.png)
当ブログは背景を透明(文字色は白)にしてる
例
![SWELL「トップページでの特別設定」透過しないバージョン](https://coin-blog.net/wp-content/uploads/2023/12/img6797.png)
![SWELL「トップページでの特別設定」透過しないバージョン](https://coin-blog.net/wp-content/uploads/2023/12/img6797.png)
![SWELL「トップページでの特別設定」透過白バージョン](https://coin-blog.net/wp-content/uploads/2023/12/img6798.png)
![SWELL「トップページでの特別設定」透過白バージョン](https://coin-blog.net/wp-content/uploads/2023/12/img6798.png)
![SWELL「トップページでの特別設定」透過黒バージョン](https://coin-blog.net/wp-content/uploads/2023/12/img6799.png)
![SWELL「トップページでの特別設定」透過黒バージョン](https://coin-blog.net/wp-content/uploads/2023/12/img6799.png)
![SWELL「ヘッダーの追従設定」](https://coin-blog.net/wp-content/uploads/2023/12/img6800.png)
![SWELL「ヘッダーの追従設定」](https://coin-blog.net/wp-content/uploads/2023/12/img6800.png)
ヘッダーの追従設定にチェックを入れると、画面をスクロールしてもヘッダーが固定表示されます。
![](https://coin-blog.net/wp-content/uploads/2022/03/kaji-150x150.png)
![](https://coin-blog.net/wp-content/uploads/2022/03/kaji-150x150.png)
![](https://coin-blog.net/wp-content/uploads/2022/03/kaji-150x150.png)
当ブログは両方チェックを入れてる
- レイアウト・デザイン
- ヘッダーバー
- キャッチフレーズ
- ヘッダーメニュー(グローバルナビ)
- ヘッダーメニュー(SP)
- 検索ボタン
- メニューボタン
- カスタムボタン
ヘッダー内の設定項目は豊富です。
必要に応じて使ってくださいね。
グローバルナビの設定
![SWELLのグローバルナビ](https://coin-blog.net/wp-content/uploads/2023/12/img6801.png)
![SWELLのグローバルナビ](https://coin-blog.net/wp-content/uploads/2023/12/img6801.png)
グローバルナビには好きなリンク先を配置できます。
最も目立つ場所なので、最初に読んでほしい記事やカテゴリーを設置すると効果的です。
![SWELLの「グローバルナビ」メニュー作成画面](https://coin-blog.net/wp-content/uploads/2023/12/img6802.png)
![SWELLの「グローバルナビ」メニュー作成画面](https://coin-blog.net/wp-content/uploads/2023/12/img6802.png)
「外観」>「メニュー」
「新しいメニューを作成しましょう。」をクリック。
![SWELLの「グローバルナビ」メニュー作成画面3](https://coin-blog.net/wp-content/uploads/2023/12/img6804.png)
![SWELLの「グローバルナビ」メニュー作成画面3](https://coin-blog.net/wp-content/uploads/2023/12/img6804.png)
メニュー名を入力したら「メニューを作成」をクリック。
(グローバルナビなどわかりやすい名称を付けましょう)
![SWELLの「グローバルナビ」メニュー作成画面2](https://coin-blog.net/wp-content/uploads/2023/12/img6803.png)
![SWELLの「グローバルナビ」メニュー作成画面2](https://coin-blog.net/wp-content/uploads/2023/12/img6803.png)
画面左【メニュー項目を追加】から、作成したメニューにコンテンツを追加します。
最後に【グローバルナビ】にチェックを入れ、「メニューを保存」をクリックすれば完成。
ドロップダウンメニューの作り方
サイト型トップページのメインコンテンツを作成
![コイン部ログのサイト型トップページ「メインコンテンツエリア」](https://coin-blog.net/wp-content/uploads/2023/12/img6805.png)
![コイン部ログのサイト型トップページ「メインコンテンツエリア」](https://coin-blog.net/wp-content/uploads/2023/12/img6805.png)
サイト型トップページのメインコンテンツは「固定ページ」で作成します。
固定ページとは
固定ページとは、カテゴリーやタグに属さない独立したページのこと。
「お問い合わせ」や「プロフィール」ページに使われます。
サイドバー表示をオフ
はじめに、サイドバーの表示をオフにします。
「フルワイドブロック」を使うため、サイドバーがあるとキレイに表示できないからです。
「外観」>「カスタマイズ」>「サイドバー」
![SWELLのサイドバー設定画面](https://coin-blog.net/wp-content/uploads/2023/12/img6806.png)
![SWELLのサイドバー設定画面](https://coin-blog.net/wp-content/uploads/2023/12/img6806.png)
「トップページにサイドバーを表示する」のチェックを外してください。
チェックを外したら【公開】をクリックすれば完了。
固定ページを2つ作成
固定ページで「投稿ページ」「フロントページ」を作りましょう。
- 投稿ページ…新着記事を表示するページ
- フロントページ…トップに表示されるメインページ
固定ページを2つに分ける理由は、サイト型にするとデフォルトの新着記事ページが非表示になるから。
サイト型トップページ用に「新着記事」を表示するページが必要なのです。
![](https://coin-blog.net/wp-content/uploads/2022/03/img11-150x150.png)
![](https://coin-blog.net/wp-content/uploads/2022/03/img11-150x150.png)
![](https://coin-blog.net/wp-content/uploads/2022/03/img11-150x150.png)
あまり気にせず「2つ必要なんだな」くらいの認識でOK
投稿ページの作成
投稿ページ(新着記事を表示するページ)の作り方は2ステップ。
![SWELLの「新規固定ページを追加」画面](https://coin-blog.net/wp-content/uploads/2023/12/img6807.png)
![SWELLの「新規固定ページを追加」画面](https://coin-blog.net/wp-content/uploads/2023/12/img6807.png)
「固定ページ」>「新規固定ページを追加」
![SWELLの固定ページ「新着記事」編集画面](https://coin-blog.net/wp-content/uploads/2023/12/img6808.png)
![SWELLの固定ページ「新着記事」編集画面](https://coin-blog.net/wp-content/uploads/2023/12/img6808.png)
タイトルに「新着記事」、パーマリンクには「new post」と入力し【公開】をクリック。
「タイトル」や「パーマリンク」はわかりやすければ何でもOK
ただし、パーマリンクは英数字がおすすめ。日本語だと文字化けする可能性があります。
フロントページ
フロントページ(メインページ)の作り方は2ステップ。
![SWELLの「新規固定ページを追加」画面](https://coin-blog.net/wp-content/uploads/2023/12/img6807.png)
![SWELLの「新規固定ページを追加」画面](https://coin-blog.net/wp-content/uploads/2023/12/img6807.png)
「固定ページ」>「新規固定ページを追加」
![SWELLの固定ページ「メインページ」編集画面](https://coin-blog.net/wp-content/uploads/2023/12/img6809.png)
![SWELLの固定ページ「メインページ」編集画面](https://coin-blog.net/wp-content/uploads/2023/12/img6809.png)
タイトルに「メインページ」、パーマリンクには「main」と入力し【公開】をクリック。
文字化け防止のためにも、パーマリンクは英数字がおすすめです。
![](https://coin-blog.net/wp-content/uploads/2022/03/img11-150x150.png)
![](https://coin-blog.net/wp-content/uploads/2022/03/img11-150x150.png)
![](https://coin-blog.net/wp-content/uploads/2022/03/img11-150x150.png)
コンテンツは「フロントページ」に追加するよ
フロントページでメインコンテンツを作成
この項目がサイト型トップページのメインです。
「フロントページ」にコンテンツを追加していきましょう。
新着記事エリア
![SWELL「コイン部ログ」の新着記事エリア画面](https://coin-blog.net/wp-content/uploads/2023/12/img6810.png)
![SWELL「コイン部ログ」の新着記事エリア画面](https://coin-blog.net/wp-content/uploads/2023/12/img6810.png)
新着記事エリアの作り方は以下のようになります。
![SWELL「フルワイドブロック」追加画面](https://coin-blog.net/wp-content/uploads/2023/12/img6811.png)
![SWELL「フルワイドブロック」追加画面](https://coin-blog.net/wp-content/uploads/2023/12/img6811.png)
ブロックメニューに「フルワイド」と入力し、フルワイドブロックを呼び出します。
フルワイドブロックを追加すると、コンテンツを画面いっぱいに表示可能。
![SWELL「フルワイドブロック」の設定画面1](https://coin-blog.net/wp-content/uploads/2023/12/img6814.png)
![SWELL「フルワイドブロック」の設定画面1](https://coin-blog.net/wp-content/uploads/2023/12/img6814.png)
![SWELL「フルワイドブロック」の設定画面2](https://coin-blog.net/wp-content/uploads/2023/12/img6815.png)
![SWELL「フルワイドブロック」の設定画面2](https://coin-blog.net/wp-content/uploads/2023/12/img6815.png)
右サイドメニューでフルワイドブロックのデザインを設定できます。
上記画像は当サイトの設定です。
![SWELL「フルワイドブロック」新着記事エリアのタイトル入力画面](https://coin-blog.net/wp-content/uploads/2023/12/img6816.png)
![SWELL「フルワイドブロック」新着記事エリアのタイトル入力画面](https://coin-blog.net/wp-content/uploads/2023/12/img6816.png)
「新着記事」「New Post」など、短くわかりやすいキーワードを入力。
![SWELL「フルワイドブロック」新着記事エリアのカラム入力画面](https://coin-blog.net/wp-content/uploads/2023/12/img6817.png)
![SWELL「フルワイドブロック」新着記事エリアのカラム入力画面](https://coin-blog.net/wp-content/uploads/2023/12/img6817.png)
カラムブロックを呼び出し、「33/66」サイズのカラムを追加。
![SWELL「フルワイドブロック」新着記事エリアのカラム選択画面](https://coin-blog.net/wp-content/uploads/2023/12/img6818.png)
![SWELL「フルワイドブロック」新着記事エリアのカラム選択画面](https://coin-blog.net/wp-content/uploads/2023/12/img6818.png)
![SWELL「フルワイドブロック」投稿リスト追加画面](https://coin-blog.net/wp-content/uploads/2023/12/img6819.png)
![SWELL「フルワイドブロック」投稿リスト追加画面](https://coin-blog.net/wp-content/uploads/2023/12/img6819.png)
左カラムの「+」をクリックし、投稿リストを追加します。
![SWELL「フルワイドブロック」左側投稿リスト編集画面](https://coin-blog.net/wp-content/uploads/2023/12/img6820.png)
![SWELL「フルワイドブロック」左側投稿リスト編集画面](https://coin-blog.net/wp-content/uploads/2023/12/img6820.png)
右サイドメニューで投稿リストが編集できます。
![SWELL「フルワイドブロック」左側投稿リストの右サイドメニュー編集画面](https://coin-blog.net/wp-content/uploads/2023/12/img6821.png)
![SWELL「フルワイドブロック」左側投稿リストの右サイドメニュー編集画面](https://coin-blog.net/wp-content/uploads/2023/12/img6821.png)
![SWELL「フルワイドブロック」左側投稿リストの右サイドメニュー編集画面2](https://coin-blog.net/wp-content/uploads/2023/12/img6822.png)
![SWELL「フルワイドブロック」左側投稿リストの右サイドメニュー編集画面2](https://coin-blog.net/wp-content/uploads/2023/12/img6822.png)
![SWELL「フルワイドブロック」投稿リスト追加画面](https://coin-blog.net/wp-content/uploads/2023/12/img6823.png)
![SWELL「フルワイドブロック」投稿リスト追加画面](https://coin-blog.net/wp-content/uploads/2023/12/img6823.png)
右カラムの「+」をクリックし、投稿リストを追加します。
![SWELL「フルワイドブロック」右側投稿リスト編集画面](https://coin-blog.net/wp-content/uploads/2023/12/img6824.png)
![SWELL「フルワイドブロック」右側投稿リスト編集画面](https://coin-blog.net/wp-content/uploads/2023/12/img6824.png)
右サイドメニューで投稿リストを編集します。
![SWELL「フルワイドブロック」右側投稿リストの右サイドメニュー編集画面](https://coin-blog.net/wp-content/uploads/2023/12/img6825.png)
![SWELL「フルワイドブロック」右側投稿リストの右サイドメニュー編集画面](https://coin-blog.net/wp-content/uploads/2023/12/img6825.png)
![SWELL「フルワイドブロック」右側投稿リストの右サイドメニュー編集画面2](https://coin-blog.net/wp-content/uploads/2023/12/img6826.png)
![SWELL「フルワイドブロック」右側投稿リストの右サイドメニュー編集画面2](https://coin-blog.net/wp-content/uploads/2023/12/img6826.png)
このままでは左右のカラムの最新記事が被ってしまうので、CSSを追加し右カラムには最新記事を表示させないよう設定します。
右カラムを選択し、右サイドメニューの高度な設定内にある【追加CSSクラス】に「li-first-none」を追記。
![SWELL「フルワイドブロック」右側投稿リストの追加CSS編集画面](https://coin-blog.net/wp-content/uploads/2023/12/img6827.png)
![SWELL「フルワイドブロック」右側投稿リストの追加CSS編集画面](https://coin-blog.net/wp-content/uploads/2023/12/img6827.png)
CSSコードをコピー。
.li-first-none > ul >li:first-child {
display: none;
}
ページ下部にある【カスタムCSS&JS】を開き「CSS用コード」に貼り付けて完了。
![SWELL投稿画面の「CSS用コード」入力画面](https://coin-blog.net/wp-content/uploads/2023/12/img6828.png)
![SWELL投稿画面の「CSS用コード」入力画面](https://coin-blog.net/wp-content/uploads/2023/12/img6828.png)
これで、最新記事が左カラムにのみ表示されます。
人気・おすすめ記事エリア
![SWELL「コイン部ログ」の人気・おすすめ記事エリア画面](https://coin-blog.net/wp-content/uploads/2023/12/img6829.png)
![SWELL「コイン部ログ」の人気・おすすめ記事エリア画面](https://coin-blog.net/wp-content/uploads/2023/12/img6829.png)
人気・おすすめ記事エリアの作り方は以下のとおりです。
![SWELL「フルワイドブロック」人気・おすすめ記事エリアのカラム入力画面](https://coin-blog.net/wp-content/uploads/2023/12/img6830.png)
![SWELL「フルワイドブロック」人気・おすすめ記事エリアのカラム入力画面](https://coin-blog.net/wp-content/uploads/2023/12/img6830.png)
「新着記事エリア」の下にフルワイドブロックを挿入します。
![SWELL「フルワイドブロック」の設定画面上段](https://coin-blog.net/wp-content/uploads/2023/12/img6831.png)
![SWELL「フルワイドブロック」の設定画面上段](https://coin-blog.net/wp-content/uploads/2023/12/img6831.png)
![SWELL「フルワイドブロック」の設定画面下段](https://coin-blog.net/wp-content/uploads/2023/12/img6832.png)
![SWELL「フルワイドブロック」の設定画面下段](https://coin-blog.net/wp-content/uploads/2023/12/img6832.png)
右サイドメニューでフルワイドブロックのデザインを設定。
背景色は「白(#FFFFFF)」
「上下のPADDING量(PC)」を60にしています。
![SWELL「フルワイドブロック」の見出し削除画面](https://coin-blog.net/wp-content/uploads/2023/12/img6833.png)
![SWELL「フルワイドブロック」の見出し削除画面](https://coin-blog.net/wp-content/uploads/2023/12/img6833.png)
デフォルト表示される見出しを削除。
![SWELL「フルワイドブロック」カラムブロック追加画面](https://coin-blog.net/wp-content/uploads/2023/12/img6834.png)
![SWELL「フルワイドブロック」カラムブロック追加画面](https://coin-blog.net/wp-content/uploads/2023/12/img6834.png)
「50/50」のカラムを追加します。
![SWELL「フルワイドブロック」カラムブロック選択画面](https://coin-blog.net/wp-content/uploads/2023/12/img6835.png)
![SWELL「フルワイドブロック」カラムブロック選択画面](https://coin-blog.net/wp-content/uploads/2023/12/img6835.png)
![SWELL「フルワイドブロック」見出し追加画面](https://coin-blog.net/wp-content/uploads/2023/12/img6836.png)
![SWELL「フルワイドブロック」見出し追加画面](https://coin-blog.net/wp-content/uploads/2023/12/img6836.png)
左カラムの「+」をクリックし、見出しを追加。
![SWELL「フルワイドブロック」見出し設定画面](https://coin-blog.net/wp-content/uploads/2023/12/img5837.png)
![SWELL「フルワイドブロック」見出し設定画面](https://coin-blog.net/wp-content/uploads/2023/12/img5837.png)
右サイドメニューの【スタイル】で見出しを「セクション用」に変更。
![SWELL「フルワイドブロック」見出し入力画面](https://coin-blog.net/wp-content/uploads/2023/12/img6837.png)
![SWELL「フルワイドブロック」見出し入力画面](https://coin-blog.net/wp-content/uploads/2023/12/img6837.png)
「人気記事」と入力。(お好みでどうぞ)
![SWELL「フルワイドブロック」投稿リスト追加画面](https://coin-blog.net/wp-content/uploads/2023/12/img6838.png)
![SWELL「フルワイドブロック」投稿リスト追加画面](https://coin-blog.net/wp-content/uploads/2023/12/img6838.png)
左カラムに投稿リストを追加します。
![SWELL「フルワイドブロック」投稿リスト編集画面](https://coin-blog.net/wp-content/uploads/2023/12/img6839.png)
![SWELL「フルワイドブロック」投稿リスト編集画面](https://coin-blog.net/wp-content/uploads/2023/12/img6839.png)
右サイドメニューで投稿リストを編集します。
![SWELL「フルワイドブロック」左側投稿リストの右サイドメニュー編集画面1](https://coin-blog.net/wp-content/uploads/2023/12/img6840.png)
![SWELL「フルワイドブロック」左側投稿リストの右サイドメニュー編集画面1](https://coin-blog.net/wp-content/uploads/2023/12/img6840.png)
![SWELL「フルワイドブロック」左側投稿リストの右サイドメニュー編集画面2](https://coin-blog.net/wp-content/uploads/2023/12/img6841.png)
![SWELL「フルワイドブロック」左側投稿リストの右サイドメニュー編集画面2](https://coin-blog.net/wp-content/uploads/2023/12/img6841.png)
レイアウトを「リスト型」、投稿の表示順序を「人気順」にするのを忘れずに。
![SWELL「フルワイドブロック」右カラムへの投稿リスト追加画面](https://coin-blog.net/wp-content/uploads/2023/12/img6842.png)
![SWELL「フルワイドブロック」右カラムへの投稿リスト追加画面](https://coin-blog.net/wp-content/uploads/2023/12/img6842.png)
ステップ5〜9と同じように、右カラムに投稿リストを追加します。
![SWELL「フルワイドブロック」右カラム追加画面](https://coin-blog.net/wp-content/uploads/2023/12/img6844.png)
![SWELL「フルワイドブロック」右カラム追加画面](https://coin-blog.net/wp-content/uploads/2023/12/img6844.png)
右サイドメニューで投稿リストを編集。
【pickup】に切り替え、「投稿ID」を直接入力するなど任意の記事を配置しましょう。
![SWELL「フルワイドブロック」右側投稿リストの右サイドメニュー編集画面](https://coin-blog.net/wp-content/uploads/2023/12/img6843.png)
![SWELL「フルワイドブロック」右側投稿リストの右サイドメニュー編集画面](https://coin-blog.net/wp-content/uploads/2023/12/img6843.png)
カテゴリーエリア
![SWELL「コイン部ログ」のカテゴリーエリア画面](https://coin-blog.net/wp-content/uploads/2023/12/img6844-1.png)
![SWELL「コイン部ログ」のカテゴリーエリア画面](https://coin-blog.net/wp-content/uploads/2023/12/img6844-1.png)
カテゴリーエリアの作り方は以下のとおりです。
![SWELL「フルワイドブロック」追加画面](https://coin-blog.net/wp-content/uploads/2023/12/img6845.png)
![SWELL「フルワイドブロック」追加画面](https://coin-blog.net/wp-content/uploads/2023/12/img6845.png)
「人気・おすすめエリア」の下にフルワイドブロックを挿入します。
![SWELL「フルワイドブロック」の設定画面上段](https://coin-blog.net/wp-content/uploads/2023/12/img6846.png)
![SWELL「フルワイドブロック」の設定画面上段](https://coin-blog.net/wp-content/uploads/2023/12/img6846.png)
![SWELL「フルワイドブロック」の設定画面下段](https://coin-blog.net/wp-content/uploads/2023/12/img6847.png)
![SWELL「フルワイドブロック」の設定画面下段](https://coin-blog.net/wp-content/uploads/2023/12/img6847.png)
右サイドメニューでフルワイドブロックのデザインを設定。
コンテンツサイズ「サイト幅」、「上下のPADDING量(PC)」を60に。
![SWELL「フルワイドブロック」の見出し削除画面](https://coin-blog.net/wp-content/uploads/2023/12/img6848.png)
![SWELL「フルワイドブロック」の見出し削除画面](https://coin-blog.net/wp-content/uploads/2023/12/img6848.png)
デフォルト表示される見出しを削除。
![SWELL「フルワイドブロック」リッチカラム追加画面](https://coin-blog.net/wp-content/uploads/2023/12/img6849.png)
![SWELL「フルワイドブロック」リッチカラム追加画面](https://coin-blog.net/wp-content/uploads/2023/12/img6849.png)
右サイドメニューでPC、タブレットの列数を「3」に変更。
![SWELL「フルワイドブロック」リッチカラム編集画面](https://coin-blog.net/wp-content/uploads/2023/12/img6850.png)
![SWELL「フルワイドブロック」リッチカラム編集画面](https://coin-blog.net/wp-content/uploads/2023/12/img6850.png)
![SWELL「フルワイドブロック」見出し追加画面](https://coin-blog.net/wp-content/uploads/2023/12/img6851.png)
![SWELL「フルワイドブロック」見出し追加画面](https://coin-blog.net/wp-content/uploads/2023/12/img6851.png)
カラムの「+」をクリックし、見出しを追加。
![SWELL「フルワイドブロック」見出しスタイル編集画面](https://coin-blog.net/wp-content/uploads/2023/12/img6852.png)
![SWELL「フルワイドブロック」見出しスタイル編集画面](https://coin-blog.net/wp-content/uploads/2023/12/img6852.png)
右サイドメニューの【スタイル】で見出しを「セクション用」に変更。
![SWELL「フルワイドブロック」リッチカラム見出し入力画面](https://coin-blog.net/wp-content/uploads/2023/12/img6853.png)
![SWELL「フルワイドブロック」リッチカラム見出し入力画面](https://coin-blog.net/wp-content/uploads/2023/12/img6853.png)
見出しはお好みでどうぞ。
当サイトはカテゴリー名を入力しています。
![SWELL「フルワイドブロック」リッチカラム投稿リスト追加画面](https://coin-blog.net/wp-content/uploads/2023/12/img6854.png)
![SWELL「フルワイドブロック」リッチカラム投稿リスト追加画面](https://coin-blog.net/wp-content/uploads/2023/12/img6854.png)
見出しで改行し、投稿リストを追加。
![SWELL「フルワイドブロック」投稿リスト編集画面](https://coin-blog.net/wp-content/uploads/2023/12/img6855.png)
![SWELL「フルワイドブロック」投稿リスト編集画面](https://coin-blog.net/wp-content/uploads/2023/12/img6855.png)
右サイドメニューで投稿リストを編集します。
![SWELL「フルワイドブロック」投稿リストの右サイドメニュー編集画面1](https://coin-blog.net/wp-content/uploads/2023/12/img6856.png)
![SWELL「フルワイドブロック」投稿リストの右サイドメニュー編集画面1](https://coin-blog.net/wp-content/uploads/2023/12/img6856.png)
![SWELL「フルワイドブロック」投稿リストの右サイドメニュー編集画面2](https://coin-blog.net/wp-content/uploads/2023/12/img6857.png)
![SWELL「フルワイドブロック」投稿リストの右サイドメニュー編集画面2](https://coin-blog.net/wp-content/uploads/2023/12/img6857.png)
表示する投稿数を「1」、レイアウトを「サムネイル型」に。
![SWELL「フルワイドブロック」リッチカラム投稿リスト追加画面](https://coin-blog.net/wp-content/uploads/2023/12/img6856-1.png)
![SWELL「フルワイドブロック」リッチカラム投稿リスト追加画面](https://coin-blog.net/wp-content/uploads/2023/12/img6856-1.png)
一つ目の投稿リストの下に、再度投稿リストを追加します。
![SWELL「フルワイドブロック」投稿リストデザイン編集画面](https://coin-blog.net/wp-content/uploads/2023/12/img6858.png)
![SWELL「フルワイドブロック」投稿リストデザイン編集画面](https://coin-blog.net/wp-content/uploads/2023/12/img6858.png)
右サイドメニュー【Settings】で投稿リストの見た目を編集します。
![SWELL「フルワイドブロック」投稿リストの右サイドメニュー編集画面1](https://coin-blog.net/wp-content/uploads/2023/12/img6859.png)
![SWELL「フルワイドブロック」投稿リストの右サイドメニュー編集画面1](https://coin-blog.net/wp-content/uploads/2023/12/img6859.png)
![SWELL「フルワイドブロック」投稿リストの右サイドメニュー編集画面2](https://coin-blog.net/wp-content/uploads/2023/12/img6860.png)
![SWELL「フルワイドブロック」投稿リストの右サイドメニュー編集画面2](https://coin-blog.net/wp-content/uploads/2023/12/img6860.png)
表示する投稿数を「3」、レイアウトを「テキスト型」に。
MOREリンクのURLには「カテゴリー」「タブ」など、表示させたいページのURLを入力してください。
【pickup】では表示する記事を指定できます。
![SWELL「フルワイドブロック」投稿リストの右サイドメニュー編集画面1](https://coin-blog.net/wp-content/uploads/2023/12/img6861.png)
![SWELL「フルワイドブロック」投稿リストの右サイドメニュー編集画面1](https://coin-blog.net/wp-content/uploads/2023/12/img6861.png)
![SWELL「フルワイドブロック」投稿リストの右サイドメニュー編集画面2](https://coin-blog.net/wp-content/uploads/2023/12/img6862.png)
![SWELL「フルワイドブロック」投稿リストの右サイドメニュー編集画面2](https://coin-blog.net/wp-content/uploads/2023/12/img6862.png)
特定の記事を表示させたいときは「投稿IDを直接指定」に投稿IDを入力。
カテゴリーやタグの記事を表示させたいときは「投稿IDを直接指定」は空白にし、「タクソノミーの条件設定」をご利用ください。
![](https://coin-blog.net/wp-content/uploads/2022/03/img11-150x150.png)
![](https://coin-blog.net/wp-content/uploads/2022/03/img11-150x150.png)
![](https://coin-blog.net/wp-content/uploads/2022/03/img11-150x150.png)
当サイトは記事を指定してる
あとは同じ手順で真ん中、右カラムにコンテンツを設置すれば完了!
完成したカラムをコピペ、編集したほうが早く終わりますよ。
二段目のカラムを追加するには、親ブロックを選択すると表示される「+」をクリックすればOK
![SWELLのカラム追加画面](https://coin-blog.net/wp-content/uploads/2023/12/img6864.png)
![SWELLのカラム追加画面](https://coin-blog.net/wp-content/uploads/2023/12/img6864.png)
プロフィールエリア
![SWELL「フルワイドブロック」プロフィール画面](https://coin-blog.net/wp-content/uploads/2023/12/img6865.png)
![SWELL「フルワイドブロック」プロフィール画面](https://coin-blog.net/wp-content/uploads/2023/12/img6865.png)
プロフィールエリアの作り方は以下のようになります。
![SWELL「フルワイドブロック」追加画面](https://coin-blog.net/wp-content/uploads/2023/12/img6866.png)
![SWELL「フルワイドブロック」追加画面](https://coin-blog.net/wp-content/uploads/2023/12/img6866.png)
「カテゴリーエリア」の下にフルワイドブロックを挿入。
![SWELL「フルワイドブロック」の設定画面](https://coin-blog.net/wp-content/uploads/2023/12/img6867.png)
![SWELL「フルワイドブロック」の設定画面](https://coin-blog.net/wp-content/uploads/2023/12/img6867.png)
「背景画像の設定」で好きな画像を背景にできます。
さらに背景効果で「固定背景」をオン。(お好みでどうぞ)
![SWELL「フルワイドブロック」の見出し入力画面](https://coin-blog.net/wp-content/uploads/2023/12/img6868.png)
![SWELL「フルワイドブロック」の見出し入力画面](https://coin-blog.net/wp-content/uploads/2023/12/img6868.png)
「About」「運営者情報」など、わかりやすいキーワードを入力。
![SWELL「リッチカラム」追加画面](https://coin-blog.net/wp-content/uploads/2023/12/img6869.png)
![SWELL「リッチカラム」追加画面](https://coin-blog.net/wp-content/uploads/2023/12/img6869.png)
![SWELL「リッチカラム」に画像を追加する画面](https://coin-blog.net/wp-content/uploads/2023/12/img6870.png)
![SWELL「リッチカラム」に画像を追加する画面](https://coin-blog.net/wp-content/uploads/2023/12/img6870.png)
あらかじめ用意したプロフィール画像をアップロード。
正方形だとキレイにトリミングできます。
![](https://coin-blog.net/wp-content/uploads/2022/03/img11-150x150.png)
![](https://coin-blog.net/wp-content/uploads/2022/03/img11-150x150.png)
![](https://coin-blog.net/wp-content/uploads/2022/03/img11-150x150.png)
当サイトは709×709
![SWELLリッチカラムの画像編集画面](https://coin-blog.net/wp-content/uploads/2023/12/img6871.png)
![SWELLリッチカラムの画像編集画面](https://coin-blog.net/wp-content/uploads/2023/12/img6871.png)
スタイルは「角丸」、画像サイズは「169」に設定。(お好みで調整)
![SWELLリッチカラムのソーシャルアイコン追加画面](https://coin-blog.net/wp-content/uploads/2023/12/img6872.png)
![SWELLリッチカラムのソーシャルアイコン追加画面](https://coin-blog.net/wp-content/uploads/2023/12/img6872.png)
プロフィール画像で改行し、名前を入力したらさらに改行。
ソーシャルアイコンブロックを追加します。
![SWELLリッチカラムのソーシャルアイコン追加画面2](https://coin-blog.net/wp-content/uploads/2023/12/img6873.png)
![SWELLリッチカラムのソーシャルアイコン追加画面2](https://coin-blog.net/wp-content/uploads/2023/12/img6873.png)
あとはあなたの保有するSNSを追加するのみ。
アイコンを追加したらアカウントアドレスを入力すれば完成です。
![SWELLリッチカラムのプロフィール追加画面](https://coin-blog.net/wp-content/uploads/2023/12/img6874.png)
![SWELLリッチカラムのプロフィール追加画面](https://coin-blog.net/wp-content/uploads/2023/12/img6874.png)
プロフィール文は、詰め込みすぎると読みにくいのでご注意ください。
【完成】固定ページをトップページに設定
作成した固定ページをトップページに設定すれば完成です。
![SWELLのカスタマイザー「WordPress設定」画面](https://coin-blog.net/wp-content/uploads/2023/12/img6875.png)
![SWELLのカスタマイザー「WordPress設定」画面](https://coin-blog.net/wp-content/uploads/2023/12/img6875.png)
「外観」>「カスタマイズ」>「WordPress設定」>「ホームページ設定」
![SWELLのカスタマイザー「ホームページ設定」画面](https://coin-blog.net/wp-content/uploads/2023/12/img6877.png)
![SWELLのカスタマイザー「ホームページ設定」画面](https://coin-blog.net/wp-content/uploads/2023/12/img6877.png)
- ホームページの表示…固定ページ
- ホームページ…メインページ(作り込んだページ)
- 投稿ページ…新着記事(空ページ)
最後に「公開」をタップすれば完成です。
SWELLのフッター周辺をカスタマイズ
![SWELL「コイン部ログ」のフッターエリア画面](https://coin-blog.net/wp-content/uploads/2023/12/img6879.png)
![SWELL「コイン部ログ」のフッターエリア画面](https://coin-blog.net/wp-content/uploads/2023/12/img6879.png)
最後のステップ4では「フッター周辺」をカスタマイズします。
フッターウィジェットの設定
![SWELL「コイン部ログ」のフッターエリア【ウィジェット】画面](https://coin-blog.net/wp-content/uploads/2023/12/img6880.png)
![SWELL「コイン部ログ」のフッターエリア【ウィジェット】画面](https://coin-blog.net/wp-content/uploads/2023/12/img6880.png)
フッターウィジェットの設定は以下のようになります。
![SWELLのカスタマイザー「ウィジェット」画面](https://coin-blog.net/wp-content/uploads/2023/12/img6882.png)
![SWELLのカスタマイザー「ウィジェット」画面](https://coin-blog.net/wp-content/uploads/2023/12/img6882.png)
「外観」>「カスタマイズ」>「ウィジェット」>「フッター」
![SWELLのカスタマイザー「フッターウィジェット」追加画面](https://coin-blog.net/wp-content/uploads/2023/12/img6883.png)
![SWELLのカスタマイザー「フッターウィジェット」追加画面](https://coin-blog.net/wp-content/uploads/2023/12/img6883.png)
フッター(PC)1から「ウィジェットを追加」をクリックし、お好きなウィジェットを追加してください。
フッター(PC)2、3と最大3列まで設置可能。
設置したら最後に「公開」をクリックすれば完了です。
![](https://coin-blog.net/wp-content/uploads/2022/03/img11-150x150.png)
![](https://coin-blog.net/wp-content/uploads/2022/03/img11-150x150.png)
![](https://coin-blog.net/wp-content/uploads/2022/03/img11-150x150.png)
当サイトは1に「タグ」「検索」、2に「カテゴリー」
フッターメニューの設定
![SWELLのフッター](https://coin-blog.net/wp-content/uploads/2023/12/img6886.png)
![SWELLのフッター](https://coin-blog.net/wp-content/uploads/2023/12/img6886.png)
フッターメニューにはお好きなリンク先を設定できます。
当サイトでは固定ページで作成した「プロフィールページ」などを配置しています。
![SWELLのメニュー追加画面](https://coin-blog.net/wp-content/uploads/2023/12/img6887.png)
![SWELLのメニュー追加画面](https://coin-blog.net/wp-content/uploads/2023/12/img6887.png)
「外観」>「メニュー」
「新しいメニューを作成しましょう。」をクリック。
![SWELLの新規メニュー追加画面](https://coin-blog.net/wp-content/uploads/2023/12/img6888.png)
![SWELLの新規メニュー追加画面](https://coin-blog.net/wp-content/uploads/2023/12/img6888.png)
メニュー名を追加し「メニューを作成」をクリックすれば完成。
【フッターメニュー】などわかりやすい名前を付けましょう。
![SWELLのフッターメニュー作成画面](https://coin-blog.net/wp-content/uploads/2023/12/img6889.png)
![SWELLのフッターメニュー作成画面](https://coin-blog.net/wp-content/uploads/2023/12/img6889.png)
画面左【メニュー項目を追加】から、作成したメニューにコンテンツを追加。
次に【フッター】【固定フッター(SP)】にチェックを入れ、「メニューを保存」をクリックすれば完成です。
![](https://coin-blog.net/wp-content/uploads/2022/03/img11-150x150.png)
![](https://coin-blog.net/wp-content/uploads/2022/03/img11-150x150.png)
![](https://coin-blog.net/wp-content/uploads/2022/03/img11-150x150.png)
スマホにも追加しておこう
SNSアイコンリストの表示設定
![SWELLのフッター「アイコンリスト」選択画面](https://coin-blog.net/wp-content/uploads/2023/12/img6890.png)
![SWELLのフッター「アイコンリスト」選択画面](https://coin-blog.net/wp-content/uploads/2023/12/img6890.png)
「外観」>「カスタマイズ」>「フッター」>「その他の設定」
![SWELLのカスタマイザー「フッターウィジェット」SNSアイコンリスト追加画面](https://coin-blog.net/wp-content/uploads/2023/12/img6884.png)
![SWELLのカスタマイザー「フッターウィジェット」SNSアイコンリスト追加画面](https://coin-blog.net/wp-content/uploads/2023/12/img6884.png)
「フッターにSNSアイコンリストを表示する」にチェックを入れると、SNSアイコンが表示されます。
コピーライトの設定
![SWELLのフッター「コピーライト」選択画面](https://coin-blog.net/wp-content/uploads/2023/12/img6891.png)
![SWELLのフッター「コピーライト」選択画面](https://coin-blog.net/wp-content/uploads/2023/12/img6891.png)
「外観」>「カスタマイズ」>「フッター」>「コピーライト設定」
![SWELLのカスタマイザー「フッターウィジェット」コピーライト追加画面](https://coin-blog.net/wp-content/uploads/2023/12/img6885.png)
![SWELLのカスタマイザー「フッターウィジェット」コピーライト追加画面](https://coin-blog.net/wp-content/uploads/2023/12/img6885.png)
「コピーライトのテキスト」にブログ名を入力すれば完了。
![](https://coin-blog.net/wp-content/uploads/2022/03/kaji-150x150.png)
![](https://coin-blog.net/wp-content/uploads/2022/03/kaji-150x150.png)
![](https://coin-blog.net/wp-content/uploads/2022/03/kaji-150x150.png)
お疲れさまでした
その他サイト型トップページのカスタマイズ
最後に、その他サイト型トップページのカスタマイズ方法を紹介します。
タブブロックでカテゴリーを作成
タブブロックでカテゴリーを作成する方法は以下のとおり。
![SWELL「タブブロック」を追加する画面](https://coin-blog.net/wp-content/uploads/2023/12/img6893.png)
![SWELL「タブブロック」を追加する画面](https://coin-blog.net/wp-content/uploads/2023/12/img6893.png)
ブロックメニューで「タブ」を呼び出し挿入します。
![SWELL「タブブロック」画面](https://coin-blog.net/wp-content/uploads/2023/12/img6894.png)
![SWELL「タブブロック」画面](https://coin-blog.net/wp-content/uploads/2023/12/img6894.png)
「タブ1」「タブ2」の名称は自由に変更できます。
タブを増やす場合は【+】をクリックしてください。
![SWELL「タブブロック」スタイル編集画面](https://coin-blog.net/wp-content/uploads/2023/12/img6897.png)
![SWELL「タブブロック」スタイル編集画面](https://coin-blog.net/wp-content/uploads/2023/12/img6897.png)
![SWELL「タブブロック」スタイル編集画面2](https://coin-blog.net/wp-content/uploads/2023/12/img6896.png)
![SWELL「タブブロック」スタイル編集画面2](https://coin-blog.net/wp-content/uploads/2023/12/img6896.png)
【タブサイズ設定】は「固定幅」か「端まで並べる(均等幅で)」がキレイに表示されるのでおすすめ。
「テキストに合わせる」だと、タブの長さがバラバラに表示されてしまいます。
![SWELL「投稿リストブロック」を追加する画面](https://coin-blog.net/wp-content/uploads/2023/12/img6898.png)
![SWELL「投稿リストブロック」を追加する画面](https://coin-blog.net/wp-content/uploads/2023/12/img6898.png)
タブ内に投稿リストを追加し、各カテゴリーを表示させれば完成です。
![SWELLのタブ内「投稿リストブロック」画面](https://coin-blog.net/wp-content/uploads/2023/12/img6899.png)
![SWELLのタブ内「投稿リストブロック」画面](https://coin-blog.net/wp-content/uploads/2023/12/img6899.png)
見出しを画像にする
![見出し](https://coin-blog.net/wp-content/uploads/2023/12/img6901.png)
![見出し](https://coin-blog.net/wp-content/uploads/2023/12/img6901.png)
見出しに画像を設定することもできます。
おしゃれかつオリジナリティを出せるのでおすすめです。
![Canvaの見出し作成画面](https://coin-blog.net/wp-content/uploads/2023/12/img6903.png)
![Canvaの見出し作成画面](https://coin-blog.net/wp-content/uploads/2023/12/img6903.png)
サイズは1600×360で作成しています。(ロゴと同じ)
この際、背景色をフルワイドブロックの色とあわせる必要があります。
Canva Pro(有料版)をお使いの方は、ダウンロード時に「背景透過」にチェックを入れればOK
![SWELLのインライン画像編集画面](https://coin-blog.net/wp-content/uploads/2023/12/img6905.png)
![SWELLのインライン画像編集画面](https://coin-blog.net/wp-content/uploads/2023/12/img6905.png)
見出し画像のサイズを調整すれば完成です。
![SWELLの見出し画像設置画面](https://coin-blog.net/wp-content/uploads/2023/12/img6907.png)
![SWELLの見出し画像設置画面](https://coin-blog.net/wp-content/uploads/2023/12/img6907.png)
ピックアップバナー
![SWELLのピックアップバナー設置画面](https://coin-blog.net/wp-content/uploads/2023/12/img6908.png)
![SWELLのピックアップバナー設置画面](https://coin-blog.net/wp-content/uploads/2023/12/img6908.png)
ピックアップバナーの設置方法は次のとおりです。
![SWELLのウィジェット「新規メニューを作成」画面](https://coin-blog.net/wp-content/uploads/2023/12/img6909.png)
![SWELLのウィジェット「新規メニューを作成」画面](https://coin-blog.net/wp-content/uploads/2023/12/img6909.png)
「外観」>「メニュー」
「新しいメニューを作成しましょう。」をクリック。
![SWELLの新規メニュー追加画面](https://coin-blog.net/wp-content/uploads/2023/12/img6910.png)
![SWELLの新規メニュー追加画面](https://coin-blog.net/wp-content/uploads/2023/12/img6910.png)
メニュー名を追加。(ピックアップバナーなどわかりやすい名前推奨)
記入したら「メニューを作成」をクリックします。
![SWELLのピックアップメニュー作成画面](https://coin-blog.net/wp-content/uploads/2023/12/img6911.png)
![SWELLのピックアップメニュー作成画面](https://coin-blog.net/wp-content/uploads/2023/12/img6911.png)
画面左【メニュー項目を追加】から、作成したピックアップメニューにコンテンツを追加。
最後に【ピックアップバナー】にチェックを入れ、「メニューを保存」をクリックすれば完成です。
記事スライダー
![SWELLのスライダー設置画面](https://coin-blog.net/wp-content/uploads/2023/12/img6912.png)
![SWELLのスライダー設置画面](https://coin-blog.net/wp-content/uploads/2023/12/img6912.png)
記事スライダーの設置方法は以下になります。
![SWELLのカスタマイザー「記事スライダー」編集画面](https://coin-blog.net/wp-content/uploads/2023/12/img6913.png)
![SWELLのカスタマイザー「記事スライダー」編集画面](https://coin-blog.net/wp-content/uploads/2023/12/img6913.png)
「外観」>「カスタマイズ」>「トップページ」>「記事スライダー」
「設置する」を選択し、【公開】をクリックすれば記事スライダーが表示されます。
![SWELLのカスタマイザー「記事スライダー」デザイン編集画面1](https://coin-blog.net/wp-content/uploads/2023/12/img6914.png)
![SWELLのカスタマイザー「記事スライダー」デザイン編集画面1](https://coin-blog.net/wp-content/uploads/2023/12/img6914.png)
![SWELLのカスタマイザー「記事スライダー」デザイン編集画面2](https://coin-blog.net/wp-content/uploads/2023/12/img6916.png)
![SWELLのカスタマイザー「記事スライダー」デザイン編集画面2](https://coin-blog.net/wp-content/uploads/2023/12/img6916.png)
お好みでスライダーに表示させる記事のカテゴリー、並び順、数などを調整してください。
まとめ|SWELLのトップページをサイト型にカスタマイズする方法
今回は、SWELLのトップページをサイト型にカスタマイズする方法をまとめました。
おさらい
本記事で紹介したのはシンプルなサイト型トップページ。
ここからお好みでアレンジしてくださいね。
それでは、良いブログライフを!
\国内人気No.1/
あわせて読みたい