【SWELL】サイト型トップページの作り方を画像で解説～おしゃれなブログサイトを作ろう～

管理画面の「固定ページ」または「新規固定ページを追加」をクリック

管理画面の「固定ページ」をクリックすると、固定ページの一覧に移動します。

そこで、上部にある「新規固定ページを追加」をクリックしても同じページ作成画面に変わります。

固定ページのタイトル入力～公開

まず、トップページを作成しましょう。

①のタイトルは、トップページの場合、実際のページには表示されないため、自分がわかるものでOK！

今回は「トップページ」と入力。

②のURL変更は、トップペ－ジに関しては、次の”STEP2”でホームのURLになるため、飛ばしてもOK！

タイトル入力が済んだら、③の「公開」をクリックしてページを公開しましょう！

次に、記事一覧ページを作成しましょう。

①のタイトルは、トップページ以外はデフォルトだと実際のページに表示されます。

誰が見てもわかるものにしましょう。

タイトルは公開後の変更も可能です。

②のURL変更は、記事一覧ページに関しては、パーマリンクを設定しましょう。

このパーマリンクは、実際のURLになるため、サイト自体を公開した後の変更は極力避けたいところ。

D-AMUS

記事一覧ページ自体の公開は、ひとまず仮のパーマリンクでも問題ないです！
しかし、サイトを公開する前に再度チェックしましょう！
サイト公開・運用後にパーマリンクを変更するなら、リダイレクト設定をすべきなので、極力変更しなくて良いものを公開前までに入力しましょう。

お知らせ一覧なら「news」や「info」、ブログ一覧なら「blog」など、サイトのジャンルや投稿内容に合うものを考えて入力しましょう。

トップページ同様、タイトル入力とURL変更が済んだら、③の「公開」をクリックしてページを公開しましょう！

ちなみに、ページ構成としては、下記のような感じになります。

仮でドメインを「blogsite.com」で設定し、その他固定ページも記載しています。

トップページはホームURLになり、その下に記事一覧ページやその他固定ページがきます。

管理画面の「設定」から「表示設定」をクリック

ホームページの表示を「固定ページ」に変更し、ページ選択

まず、ホームページの表示を「固定ページ」へ変更します。

固定ページのチェックを入れると、公開されている固定ペ－ジ一覧が表示されます。

「ホームページ」は、先程作成した「トップページ」を選択。

「投稿ページ」は、先程作成した「記事一覧ページ」を選択。

これで、サイトのトップページが固定ページの「トップページ」からカスタマイズできます。

また、記事一覧のページも準備ができました！

ページ設定の反映を確認する

念のため、プレビューページや固定ページの一覧から確認をしてみましょう。

固定ページ一覧で、「フロントページ」「投稿ページ」というページの表示が追加されていれば、うまく設定できています。

ページの表示については、画像内のページタイトルが違いますが、画像赤文字を参考にしてください。

赤文字をページタイトルとした時に、トップページは「フロントページ」、記事一覧ページは「投稿ページ」となっているので設定できています！

管理画面の「外観」から「カスタマイズ」をクリック

【重要】最初にサイト全体に関わる基本設定を行う

SWELLはカスタマイズの幅が広く、定期的なアップデートがある反面、機能が多く慣れるまでは大変かもしれません。

まずは、下記の4箇所を確認して、サイトのデザインや構成に必要な部分を設定します。

もちろん後から変更もできますが、サイトの基礎となる部分なので、最初に設定するようにしましょう。

※下記手順のSWELL機能については、2024年4月時点での機能で解説しています。

• サイト全体設定
  （全体のカラー・フォント・コンテンツ幅・タイトルデザイン・スマホでのメニュー表示や固定ボタンの設定）
• ヘッダー
  （ヘッダーの色・レイアウト・ロゴ追加・ヘッダー追従設定）
• フッター
  （フッターの色・コピーライトテキスト・SNSアイコン設定）
• サイドバー
  （サイドバーの表示・非表示をページ単位で選択）

サイドバーに関しては、サイト型トップページのブログサイトやコーポレートサイトなどのホームページの場合、下記画像のように「トップページにサイトバーを表示する」のチェックを外しましょう！

今回は、「トップページ」「固定ページ」のチェックを外しています。

ご自分のサイト設計に合わせて固定ページにサイドバーが必要であればチェックしましょう。

ちなみに、サイドバーは固定ページ・投稿ページの各ページごとに表示・非表示を切り替えることもできます。

設定を個別に変更させたい固定ページ・投稿ページを開きます。

下記は、固定ページでの例ですが、右側の「表示の上書き設定」部分から、そのページだけでの表示変更が可能です。

各ページ・記事一覧表示のデザイン設定をする

サイト全体のおおまかな設定が済んだら、各ページのデザイン設定をしましょう。

後から変更もできるため、ひとまず初期設定のままで進めてもOKです！

• 投稿・固定ページ / アーカイブページ
  （タイトル位置・記事公開日/カテゴリー表示の有無・見出しのデザイン・アイキャッチ画像の有無・PR表記設定・SNSシェアボタン設定）
• 記事一覧リスト
  （記事一覧ページでの記事表示方法/デザイン・サムネイル設定・カテゴリー設定）

SNSを連携させるのであれば、「SNS情報」にアカウントのリンクを入力しておくと、フッターメニューのアイコンなどのリンク設定を自動でしてくれます。

管理画面の「外観」から「カスタマイズ」をクリック

トップページをクリック

SWELLのメインビジュアルは、カスタマイズの「トップページ」から設定できます。

メインビジュアルをクリック

トップページの中にある「メインビジュアル」をクリック。

メインビジュアルでは、トップ部分の画像追加や細かい設定ができます。

下記にメインビジュアルでできることを簡単にまとめました。

• 画像・動画の追加
• 画像上にテキストやボタンなどの追加
• 画像のフィルター処理
• 画像の複数枚設定（パソコン・スマホ共に最大5枚）
• 画像を複数枚設定した時に自動で画像スライダー設定に切り替わる

さらに、具体的な変更箇所をまとめました。

• メインビジュアルの表示内容
  （画像・動画から選択できます。）
• メインビジュアルの高さ設定
  （メインビジュアルの高さを調整する項目です。）
• フィルター処理 / オーバーレイカラー
  （メインビジュアルにフィルター処理や単色をのせる加工をしたい場合、変更します。）
• 画像スライダー設定
  （メインビジュアルで画像を複数枚設定した場合のみ、スライドアニメーションの選択・切り替えや間隔の速度設定・ページネーションの有無・テキストの固定表示設定ができます。）
• 各スライドの設定
  （画像を追加する部分です。画像上に載せるキャッチフレーズなどのテキスト・ブログパーツ・ボタンの追加ができます。）

設定後は、メインビジュアルがどの媒体でも綺麗に表示されているかの確認をします。

SWELLのメインビジュアルサイズに規定はありませんが、推奨されているサイズは下記の通りです。

パソコン版：1600×900px
タブレット・スマホ版：960px×1200px

あくまで目安なので、どちらも横幅・高さをデザインや好みに合わせて調整してください。

メインビジュアルが写真なのか、文字が見切れては困る画像なのかでもサイズや高さの調整が変わるため、まずは推奨サイズで作成し、高さの調整で試してみると良いでしょう。

メインビジュアルの細かい設定方法はこちらの記事で解説しています！

広島市 | web・SNS運用 | DesignA…

【SWELL】ホームページの作り方①～サンプルサイトでメインビジュアル・ナビメニュー解説～|広島市 | web・S… 【私のSWELLライフ】SWELLでのホームページ制作手順を画像付きで解説・第1弾！サンプルサイトを元にメインビジュアル・ヘッダー・フッター部分の手順解説をします！SWELLで…