【真似するだけ】SWELLでトップページのカスタマイズ方法を徹底解説！

トップページの設定って、使いやすいと言われている有料テーマのSWELLでも少しめんどうなんですよね……

そこで今回は、真似するだけで完了するトップページのカスタマイズ方法を紹介します。

実際の画像を使いながら解説しているので、誰でも簡単にカスタマイズができますよ。

それでは早速見ていきましょう。

今回の記事は、SWELL導入後の初期設定ができている前提で解説しているので、まだの人は下記の記事を確認しておきましょう。

初期設定の記事で紹介している1,3,7の項目が完了していれば、設定可能です

SWELLのトップページ完成図

今回のゴールからまずは見ていきます。

パートとしては大きく5つあります。

今回は上記5つのパートに分けて、画像付きで紹介します。

色など自由に変更できるので、自分好みのサイトを作成していきましょう。

1.メインコンテンツ

まずはメインコンテンツから。

新着記事やおすすめしたい記事を自由に設定できますよ。

1.固定ページの作成

まずは固定ページの作成からしていきましょう。

固定ページは2つ作ります。

「ダッシュボード」>「固定ページ」>「新規固定ページを追加」を選択。

タイトルはなんでもいいですが、記事一覧ページを作成するので、わかりやすい名前にしておきましょう。

こちらのページはタイトルのみで、中身はなにもいじりません

タイトルを日本語にしている場合は「リンク」を英単語に変更しておきましょう

最後に「公開」をクリック。

同じように2つ目の固定ページを作成していきます。

2つ目に作ったページにコンテンツを挿入していきます

こちらのタイトルもなんでもOK。

こちらも最後「公開」のクリックを忘れないようにしましょう。

表示設定

次にトップページの表示設定を変更していきます。

「ダッシュボード」>「設定」>「表示設定」を選択。

「ホームページの表示」を「最新の投稿」から「固定ページ」に変更します。

次に「ホームページ」と「投稿ページ」の2つを、先ほど作成した固定ページに変更していきます。

最後に「変更を保存」をクリックして完了です。

タブ切り替え投稿リストの作成

それでは次に、先ほど固定ページで「HOME」とタイトルにしたページにコンテンツを作成していきます。

「ダッシュボード」>「固定ページ」>「固定ページ一覧」を選択。

先ほど表示設定で「ホームページ」に設定したページ（僕の場合は「HOME」）を選択しましょう。

「ホームページ」に設定されるとタイトルの横に「フロントページ」と記載されます
「投稿ページ」に設定するとタイトルの横に「投稿ページ」と記載されます

プラスボタンをクリックして「タブ」と検索すると、タブ機能が出てくるので選択します。

好きな名前に設定できますが、僕の場合は「おすすめ記事」と「新着記事」に設定しました。

またタブのスタイルを変更できるので、自分好みのものを選択してくださいね。

またデバイスごとにタブサイズ設定ができるので、こちらも自由に決めてください。

各タブに掲載する記事は自由に設定できます。

僕の場合は、

• おすすめ順：読者に特に読んでほしい記事
• 新着順：作成日の新しい記事

に設定しています。

「おすすめ記事」のタブを選択してからプラスボタンを押してください。

「投稿リスト」と検索して、投稿リスト機能を選択。

右側の「Pickup」を選択すると「投稿IDを直接指定」という箇所があるので、掲載したい記事IDを入力していきます。

掲載したい記事のIDを記入したら「Settings」を選択し各種設定をしていきます。

細かい表示設定ができるので、僕の設定を参考にしながらアレンジしてくださいね。

「新着記事」のタブも同様に作成していきましょう。

カテゴリーごとの投稿リストの作成

次は「タブ切り替え投稿リスト」の下にカテゴリーごとの投稿リストを作成していきます。

新しいブロックにしてプラスボタンをクリック。

「見出し」を選択します。

テキストを中央寄せしたい場合は、三本線のマークをクリックして「テキスト中央寄せ」を選択すればOK。

またテキストの最初にアイコンを設置したいときは、顔のマークをクリックします。

SWELLには豊富なアイコンが標準装備されているので、好きなアイコンを選択して「決定」をクリックしましょう。

次は見出しの下に投稿リスト機能を追加してください。

「Pickup」を選択し「タクソノミーの条件設定」のカテゴリーで掲載したい記事カテゴリーを選択します。

あとはこれまでと同様に「Setting」の部分で細かい表示設定をしていきましょう。

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

ヘッダー

次にヘッダーを作成していきます。

ヘッダー部分では、

こちらの3つに分解して紹介していきますね。

サイトタイトルorサイトロゴ

まずはサイトのタイトルを設定していきましょう。

文章タイトル以外にも、僕のようにロゴを設置できるのでお好みで設定してくださいね。

こちらのやり方は下記の記事「サイト全体設定」のパートで紹介しているので、ぜひ参考にしてください。

グローバルメニュー

次はロゴの下にあるメニューの設定です。

「ダッシュボード」>「外観」>「メニュー」を選択。

メニュー名を自由に設定し「グローバルナビ」にチェックを入れ「メニューを作成」をクリックしてください。

表示させたいものにチェックを入れて「メニューに追加」を選択すると右側のページに反映されます。

最後に「メニューを保存」をクリックすれば完了です。

固定ページだけではなく、記事単体やカテゴリー、指定したリンク先もヘッダーメニューに設定できます

各種位置の変更

最後に位置を変更しましょう。

「ダッシュボード」>「外観」>「カスタマイズ」を選択。

「ヘッダー」をクリックします。

少し下にスクロールすると「レイアウト・デザイン設定」があるので、PCとSPそれぞれの表示方法を設定しましょう。

トップページを下にスクロールしたときに、ヘッダーメニューを追従させたい場合は「ヘッダーの追従設定」でそれぞれにチェックを入れるだけ。

最後に「公開」をクリックすれば完了です。

メインビジュアル

次はメインビジュアルを設定していきましょう。

メインビジュアルはページ上部に設置する画像（動画）のこと。

メインビジュアルによってブログの雰囲気が変わってきますよ。

「ダッシュボード」>「カスタマイズ」を選択し「トップページ」をクリックします。

「メインビジュアル」を選択。

「画像」を選択して「メインビジュアルの高さ設定」は「画像・動画サイズのまま」でOK。

メインビジュアルがいらない人は「なし」を選択してください

下にスクロールして「スライド画像[1]（PC）」「スライド画像[1]（SP）」 にメインビジュアルにしたい画像を挿入しましょう。

最後に「公開」をクリックすれば完了です。

サイドバー

次にサイドバーを設定していきます。

サイドバーに設置できる種類はたくさんありますが、僕の場合は下記の3つを設置していますよ。

「ダッシュボード」>「外観」>「ウィジェット」を選択。

「利用できるウィジェット」から、

上記3つを「共通サイドバー」にドラッグ＆ドロップしてください。

次に「[SWELL]プロフィール」の設定していきましょう。

名前やプロフィール文などを記入したら、最後に「完了」をクリックすればOKです。

同様に「新着記事」の表示設定を進めていきましょう。

これで完了です。

フッター

最後はフッターの設定です。

「ダッシュボード」>「外観」>「カスタマイズ」を選択。

「フッター」を選択します。

背景色や文字色などを設定し「コピーライトのテキスト」などを記入して「公開」をクリック。

これで全ての設定が完了しました！

お疲れ様でした！

SWELLでトップページをカスタマイズしよう！

トップページのカスタマイズはやることが多くて大変ですが、SWELLであれば操作自体が簡単なのでそこまで時間はかかりません。

今回紹介した内容を参考にすれば、カスタマイズも自由にできるようになっています。

自分のスタイルに合ったトップページを作成してくださいね。

SWELLでトップページをカスタマイズして、読まれるブログを運営していきましょう。