SWELLでサイト型のトップページを作る方法について、画像を用いながら手順を分かりやすく解説していきます。
![](http://hina-blog1.com/wp-content/uploads/2023/10/FQdWT8qaAAAsOCn-1-150x150.jpeg)
サイト型のメリットは、分かりやすい動線設計が可能となり、ユーザーにとって見やすいブログになることです。
本ブログもサイト型で設計しており、ユーザーが迷うことなく目的の記事に辿り着けるように日々改善をしています。
本記事では、本サイトのトップページをもとにカスタマイズ方法を説明してきます。
また、お洒落サイトを参考にしたカスタマイズ方法も解説しています。
お好きなところから読み進めて、ぜひお洒落なサイトにアレンジしてくださいね!
※お好きなところから読めます
SWELLサイト型トップページの作り方【基本構成と全体概要】
SWELLでトップページをカスタマイズしていく前に、サイトの基本構成について簡単に説明します。
サイトの構成は、大きく以下のように分類できます。
![サイト構成](https://hina-blog1.com/wp-content/uploads/2023/09/IMG_7809.jpg)
さらに、本ブログを参考にすると以下のように分けられます。
![ヘッダー](https://hina-blog1.com/wp-content/uploads/2023/09/02DBAE48-202A-4C19-892F-80EAB4CB9CF6.jpg)
![メインとサイドバー](https://hina-blog1.com/wp-content/uploads/2023/09/C13C916C-7F0B-4CD9-8B39-CEB853B5FE17.jpg)
![フッター](https://hina-blog1.com/wp-content/uploads/2023/09/B41A3B02-1D77-4EC9-804C-A0D21ACA1A07.jpg)
以下には、ヘッダーやメイン部分に分けて、必要なカスタマイズ機能をそれぞれ解説していきます。
参考になるものがあれば、ぜひ自分のサイトに取り入れてくださいね!
SWELLサイト型トップページの作り方①ヘッダー
ヘッダーの作り方について説明します。
本サイトを参考にヘッダーを細分化すると、以下のようになります。
![SWELLヘッダー構成](https://hina-blog1.com/wp-content/uploads/2023/09/E96C234B-5CEA-4422-915A-C50075CF8130.jpg)
・ブログ名(ロゴ)
・グローバルナビゲーション
・お知らせバー
・メインビジュアル
それぞれの作り方を以下に説明します。
ブログ名(ロゴ画像)
ブログ名(ロゴ画像)の設定について手順を解説します。
![ロゴ設定](https://hina-blog1.com/wp-content/uploads/2023/09/879111eb7fbd0e3783c9e3f8015eeb64.png)
![ヘッダー設定からロゴ設定](https://hina-blog1.com/wp-content/uploads/2023/09/e0ec12ee9f6bc2c30e366705ce4b4ce0.jpg)
あらかじめCnavaなどでロゴ画像を作成しておき、「画像を選択」からロゴ画像を挿入します。
カラーや配置なども設定できます(下記画像では見切れてしまっていますが、下へスクロールすると設定画面が表示されます)。
![ロゴ画像の設定やカラー変更など](https://hina-blog1.com/wp-content/uploads/2023/09/08ea170ef39a2b2ccff9d82f02e850c6.jpg)
![](http://hina-blog1.com/wp-content/uploads/2023/10/FQdWT8qaAAAsOCn-1-150x150.jpeg)
本サイトはロゴ画像を挿入していないので、ブログ名が反映されています。
グローバルナビゲーション
グローバルナビゲーションは、フッターに表示されるメニューで、トップページに限らず全ページに反映されます。
![グローバルナビ](https://hina-blog1.com/wp-content/uploads/2023/09/361386B9-29DA-4569-B9E6-A519D0A927CB.jpg)
設定方法は、下記の記事にて解説しているので参考にしてください。
![](https://hina-blog1.com/wp-content/uploads/2023/09/4FB356A8-3A71-45A8-A222-DA2DA2A64AEC-300x157.jpg)
お知らせバー
お知らせバーは、設定するかどうかお好みにはなりますが、セール情報を流したい場合には非常に重宝します。
以下に設定方法を説明します。
![お知らせバーの設定](https://hina-blog1.com/wp-content/uploads/2023/09/5CF9F96B-DF2B-4985-BA07-62D7886528B8.jpg)
表示位置、文字の大きさ、表示タイプ(静止か動画か)など、詳細設定が可能です。
![お知らせバーの詳細設定](https://hina-blog1.com/wp-content/uploads/2023/09/F0A519C8-148E-40CC-A532-031B906E0FD0.jpg)
メインビジュアル
メインビジュアルの設定について説明します。
メインビジュアルは、画像だけでなく動画も可能です。
また、複数画像を挿入して、自動的に画像が切り替わるように設定することもできます。
![トップページをクリック](https://hina-blog1.com/wp-content/uploads/2023/09/5FFB4DFF-FA30-444B-94A7-E1D607703166.jpg)
![メインビジュアルをクリック](https://hina-blog1.com/wp-content/uploads/2023/09/6588FDA2-52B7-4A32-8745-63BDFDF5C43F.jpg)
選択したメインビジュアルの詳細設定を行う
![メインビジュアルの設定](https://hina-blog1.com/wp-content/uploads/2023/09/04CE66AD-B548-4FBC-93CD-009EB21677F6.jpg)
画像(動画)の上にテキストを表示させる場合は入力。
![メインビジュアルの画像を挿入](https://hina-blog1.com/wp-content/uploads/2023/09/23D1E3BD-FA18-4761-AA8D-C5E1B07AAE05.jpg)
![](http://hina-blog1.com/wp-content/uploads/2023/10/FQdWT8qaAAAsOCn-1-150x150.jpeg)
ヘッダーの基本的な設定は以上です!
SWELLサイト型トップページの作り方②ピックアップバナー
ピックアップバナーは、トップページに表示できる画像式のナビゲーションメニューで、ヘッダーとメインの間に表示させます。
![ピックアップバナー](https://hina-blog1.com/wp-content/uploads/2023/09/54B79739-C9B8-4215-AB4B-F8A4AEEA1538.jpg)
もちろんサイトに載せなくてもいいのですが、特に見てほしい記事やカテゴリーなどがあれば、注目を集められるので設定しておくといいでしょう。
設定方法は以下の記事で紹介しているので、参考にしてください。
![](https://hina-blog1.com/wp-content/uploads/2023/09/626600A4-498A-4697-879D-8888B1C88857-300x157.jpg)
SWELLサイト型トップページの作り方③メイン
メイン部分のカスタマイズ方法はたくさんあるのですが、本サイトをもとによく使われる機能に絞って説明します。
![](http://hina-blog1.com/wp-content/uploads/2023/10/FQdWT8qaAAAsOCn-1-150x150.jpeg)
今回説明する4つの機能を組み合わせるだけでお洒落なトップページを作れます!
メインは固定ページで作成していきます。
トップページに反映させる方法に関しては、後ほど解説します。
フルワイドブロック
本サイトでも使用していますが、フルワイドブロックを活用することで、画面いっぱいにエリアを表示させられます。
フルワイドブロック
本サイトではサイドバーエリアを設けているため、横幅いっぱいにはできませんが、サイドバーなしだと下記画像のように、画面の端から端までエリア表示が可能となります。
![フルワイドブロックの使用例](https://hina-blog1.com/wp-content/uploads/2023/09/542b2ad29fa303193372510bd676c29b-scaled.jpg)
「+」ボタンからフルワイドブロックを追加して、サイドメニューから詳細設定を行えます。
詳しい使い方は、下記記事にて説明しています。
![](https://hina-blog1.com/wp-content/uploads/2023/09/210F1D24-72FE-4160-901E-92B3A93F5E60-300x157.jpg)
投稿リスト
投稿リストは、人気記事や新着記事を表示するときに使えます。
以下の記事は、「カテゴリーブログ+人気順」で指定しているため、サイト内のブログカテゴリー1〜3位の記事が自動的に表示されています。
「+」ボタンから投稿リストを追加し、サイドメニューから以下のような詳細を設定できます。
![投稿リストの設定方法](https://hina-blog1.com/wp-content/uploads/2023/09/4A4E6531-F4E5-491D-9A04-E9F945A35604.jpg)
![投稿リストの設定方法②](https://hina-blog1.com/wp-content/uploads/2023/09/8E102D9F-82FA-49D5-B1C3-643749631ED7.jpg)
リッチカラム
リッチカラムは、記事を横並びで表示させたい場合に使えます。
スマホでも最大8列まで横並びで表示させることが可能です。
以下のように記事を横並びで配置させられます。
他にも、以下のようにアイコンを表示させてメニューのようにすることもできます。
![リッチカラム①](https://hina-blog1.com/wp-content/uploads/2023/09/B4B48A3B-355D-4826-811C-3C378B25DDE7.jpg)
ショッピング
![リッチカラム②](https://hina-blog1.com/wp-content/uploads/2023/09/ABAD6E7A-03EC-4626-92B8-C843B0E561EC-1024x576.jpg)
お知らせ
![リッチカラム③](https://hina-blog1.com/wp-content/uploads/2023/09/5405075C-EDBA-4FD3-82CF-DD1849740088-1024x576.jpg)
お問い合わせ
![リッチカラム例④](https://hina-blog1.com/wp-content/uploads/2023/09/7DE450D2-14D5-4F3C-8E14-0DFB76A4D198.jpg)
設定
![リッチカラム例⑤](https://hina-blog1.com/wp-content/uploads/2023/09/8FC42A11-9BEE-495C-B989-2446CCF1E855.jpg)
SNS
「+」ボタンからブロックを追加して、サイドバーやブロックから自由に設定ができます。
ステップ
ステップは、本記事でも活用してますが、トップページで何か手順解説をしたい場合には重宝します。
ステップで順番をわかりやすくすることで動線ができあがり、ユーザーも行動を取りやすくなります。
「+」ボタンからブロック追加をして、詳細設定はサイドメニューから行えます。
![](http://hina-blog1.com/wp-content/uploads/2023/10/FQdWT8qaAAAsOCn-1-150x150.jpeg)
メインの説明は以上です。
今回の4つの機能をうまく組み合わせることで、素敵なサイト作りにチャレンジしてみてくださいね!
SWELLサイト型トップページの作り方④サイドバー
次にサイドバーの作り方を解説します。
サイドバーに載せたいものは人それぞれだと思いますが、今回説明する機能を使いこなせれば、大抵なんでも自由にアレンジできるので、ぜひ参考にしてください!
SWELLバナー設置
まずよく使われているSWELLのバナー設置の方法です。
![](http://image.moshimo.com/af-img/3130/000000053838.jpg)
本サイトでも目立つトップの位置にSWELLのバナーを置いています。
広告バナーを設置するためには、SWELLの広告リンクを取得する必要があります。
取得するには、SWELLのマイページでアフィリエイト登録に進み、「もしもアフィリエイト」でSWELLと提携する必要があります。
詳しくは、SWELLの使い方で解説しています。
広告リンクを取得したら、以下の手順でサイドバーに設置していきます。
![SWELLの広告バナー設定](https://hina-blog1.com/wp-content/uploads/2023/09/3D1899CF-41D4-4279-809E-A286A5D7CAEF.jpg)
![SWELLのバナー設置設定](https://hina-blog1.com/wp-content/uploads/2023/09/B7B669BF-8D22-4894-9037-23EE32872AE5.jpg)
![](http://hina-blog1.com/wp-content/uploads/2023/10/FQdWT8qaAAAsOCn-1-150x150.jpeg)
以上でサイドバーにSWELLの広告バナーが表示されます!
ちなみに、検索やプロフィールの設置も同様の方法でできます。
記事やメニューの設置
特に読んでほしい記事やメニューをサイドバーに設置したい場合(下記画像参照)は、「ブログパーツ」という機能を使います。
![サイドバーにブログパーツを設定](https://hina-blog1.com/wp-content/uploads/2023/09/2A195CCB-9F7E-4E67-A620-D3EE2DBDBF47.jpg)
ブログパーツは、あらかじめメニューやサムネイルを作っておくことで、どこにでも挿入できる機能です。
ブログパーツの作り方とサイドバーへの挿入方法は、下記記事にて解説しています。
![](https://hina-blog1.com/wp-content/uploads/2023/09/EA7717C6-5806-4205-A155-70E4DDB2D502-300x157.jpg)
SWELLサイト型トップページの作り方⑤フッター
フッターの作り方を解説します。
好きな部分を取り入れてくださいね!
![フッターの設定方法](https://hina-blog1.com/wp-content/uploads/2023/09/B8762030-AA17-4BB7-BE00-FCE40F5ABD4B.jpg)
・コピーライト・SNSアイコンの設置
・フッターメニューの設置
・フッターのウェジェット
コピーライトの設置・SNSアイコンの設置
コピーライトは、著作権を有することを表す表記で、以下のようにサイトの下部に表記されるものです。
以下に設定方法を解説します。
![コピーライトの設定方法](https://hina-blog1.com/wp-content/uploads/2023/09/7CCBC425-42F5-4259-AF5D-9D4D7C115D0B-2.jpg)
![フッター設定](https://hina-blog1.com/wp-content/uploads/2023/09/28BAAAB0-761C-4BE6-BB63-C48F81D1A789.jpg)
![コピーライトを入力](https://hina-blog1.com/wp-content/uploads/2023/09/46408776-F871-4A70-B6B8-652442122D36.jpg)
また、上記の「その他の設定」の「フッターにSNSアイコンリストを表示する」にチェックを入れると、フッター部分にSNSを表示できます。
表示させるSNSは、下記手順で設定します。
![SNS情報](https://hina-blog1.com/wp-content/uploads/2023/09/94C94908-F73C-4613-AE3D-514B46D26633-1.jpg)
![SNSのURLを入力](https://hina-blog1.com/wp-content/uploads/2023/09/11B8C7D2-0ED3-4797-9ABD-9C642DB07462.jpg)
![](http://hina-blog1.com/wp-content/uploads/2023/10/FQdWT8qaAAAsOCn-1-150x150.jpeg)
以上で、フッター部分にSNSアイコンが反映されます。
フッターメニューの設置
フッターメニューは、フッター部分に表示するメニューで、主にプライバシーポリシーやプロフィール、お問い合わせなどを表示させることが多いです。
以下に設定手順を解説します。
![フッターメニューの設定](https://hina-blog1.com/wp-content/uploads/2023/09/D73CB992-8984-418D-8B36-6BC2B66611A3.jpg)
フッターにチェックを入れる
![フッターメニューの詳細設定](https://hina-blog1.com/wp-content/uploads/2023/09/7B5EA0C4-02B4-45C4-91D0-AE1D80689397.jpg)
![フッターメニューに表示させる項目を選ぶ](https://hina-blog1.com/wp-content/uploads/2023/09/D5C250FF-FB80-4524-A9DF-B6029D9BD8D6.jpg)
![](http://hina-blog1.com/wp-content/uploads/2023/10/FQdWT8qaAAAsOCn-1-150x150.jpeg)
フッターメニューの設定は以上です!
フッターのウェジェット
フッター部分には、以下のように、新着記事や広告、カテゴリーなどを表示させることもできます。
方法を以下に説明します。
外観→ウィジェットと開き以下の画面を表示させます。
![フッターのウィジェットの設定](https://hina-blog1.com/wp-content/uploads/2023/09/E9F0F4A9-CC3D-4143-B63E-9B7354C1EB90.jpg)
赤枠で囲った部分に、それぞれ表示させたいウィジェットを左側から選択しドラッグさせます(下記画像参照)。
![フッターウィジェットの選択](https://hina-blog1.com/wp-content/uploads/2023/09/7AC9DD8A-093E-4FF6-A16F-39A11A0EBDEB.jpg)
![](http://hina-blog1.com/wp-content/uploads/2023/10/FQdWT8qaAAAsOCn-1-150x150.jpeg)
以上でフッター周りのウィジェットを設定できます。
SWELLサイト型トップページの作り方【おまけ:お洒落カスタマイズ2選】
上記では本サイトで使用しており、よく使われている機能をメインに解説してきました。
最後に追加で、さらに2つほどカスタマイズ方法を紹介します。
よかったら参考にしてください。
①メインビジュアルの切り替え
メインビジュアルをスライドショーのように切り替えるためには、複数の画像を設定する必要があります。
設定方法は簡単です。
外観→カスタマイズ→トップページ→メインビジュアルと設定に進み、「スライド[2]」で2枚目の画像を設置します。
![複数画像を設定する](https://hina-blog1.com/wp-content/uploads/2023/09/42CEF120-7B37-439B-8A8A-277967C3D43E.jpg)
3枚目を表示させたい場合は、2枚目の設定が終わると3枚目の設定画面が表示されます。
![](http://hina-blog1.com/wp-content/uploads/2023/10/FQdWT8qaAAAsOCn-1-150x150.jpeg)
以上で画像のスライド設定は完了です!
記事スライダー
記事スライダーは、メインビジュアルの下に、記事をスライドショーのように表示させる機能です。
記事スライダーの設定も簡単です。
外観→カスタマイズ→トップページ→記事スライダーと設定に進み、「設置する」にチェックを入れます。
あとは詳細設定で、記事の並び順やスライドショーの速さを設定できます。
![記事スライダーの設定](https://hina-blog1.com/wp-content/uploads/2023/09/38BF9A02-622A-4252-85B5-D70DA10A10B2.jpg)
![](http://hina-blog1.com/wp-content/uploads/2023/10/FQdWT8qaAAAsOCn-1-150x150.jpeg)
以上で記事スライダーの設定は完了です!
SWELLサイト型トップページの公開方法
SWELLのトップページの公開方法について解説します。
固定ページで作成したメイン部分をトップページとして公開していきます。
![トップページの公開方法](https://hina-blog1.com/wp-content/uploads/2023/09/42E2CF8B-5B0E-4E98-97D2-3355020DA5AF.jpg)
![](http://hina-blog1.com/wp-content/uploads/2023/10/FQdWT8qaAAAsOCn-1-150x150.jpeg)
以上でトップページの公開は完了です!
SWELLでサイト型トップページにするメリットとは?ブログ型との違いも解説
そもそもサイト型とブログ型とは何か、どちらでサイトを作った方がいいのかと迷っている方向けに、簡単にそれぞれの特徴を解説します。
サイト運営の目的によって、おすすめできる型が変わるので、参考にしてください。
サイト型・ブログ型とは?特徴も解説
そもそもサイト型とブログ型とは何かということですが、簡単に説明すると以下の通りです。
サイト型 | ブログ型 |
---|---|
・一般的にはメニューバーがあり、ユーザーがサイト内の各ページにアクセスするためにナビゲーションが提供される。 ・トップページには会社のロゴやキャッチコピー、重要な情報などが掲載される。 | ・会社や組織の公式サイトでよく見かける。・個人ブログやニュースサイトでよく見かける。 ・最新の投稿が一覧表示されることが特徴。 ・新記事が上に表示され、過去の記事は下に移動していく。 ・読者が最新の情報を簡単にチェックできるようになっている。 |
さらに、サイト型のトップページとブログ型のトップページには、それぞれ異なるメリットや特徴があります。
サイト型 | ブログ型 |
---|---|
②ユーザーが目的の記事を見つけやすい ③サイトイメージやブランドをアピールできる | ①情報の整理がしやすい①新着記事が即座に表示される ②ユーザーはいつでも最新情報を確認できる ③記事の更新頻度が高いとユーザーが何度も訪問する動機付けになる |
サイト型の方がSEOに有利と言われることもありますが、ブログ型でも結果を出している方はたくさんいますし、そこまで大きな差はないでしょう。
サイト型・ブログ型それぞれ向いている人は?
個人ブログの運営なら、最近の主流はサイト型です。
また、SNSにリンクを貼る場合などは、トップページを見られることが多いので、その場合はサイト型の方が好印象を持たれることが多いです!
しかし、トレンドブログなどは最新情報など旬な情報が求められるので、ブログ型の方がユーザーに求められる型になります。
![](http://hina-blog1.com/wp-content/uploads/2023/10/FQdWT8qaAAAsOCn-1-150x150.jpeg)
ユーザーにとってもらいたい行動に応じて、最適なサイトの型を選んでみてください!
SWELLサイト型トップページの作り方に関するよくある質問
最後に、よくある質問をまとめたので、参考にしてください。
- SWELLのサイト型の例はありますか?
-
SWELL公式サイトにデモサイトが公開されています。
- SWELLのブログの作り方は?
-
ブログの始め方は「SWELLの購入方法〜始め方を初心者向けに分かりやすく徹底解説!」、ブログの使い方は「SWELL使い方マニュアル【画像を用いながら機能も含めて解説】」で解説しているので参考にしてください。
誰でも簡単に使いこなせるので、参考にしながらブログをカスタマイズしてくださいね。
SWELLサイト型トップページの作り方のまとめ
SWELLでサイト型のトップページを作る方法について説明しました。
SWELLを使えば、誰でも簡単にお洒落なサイトが作れます。
さらに、今回説明したトップページの他にも、記事自体も見やすく作ることができます。
ぜひSWELLを使いこなして素敵なサイト作りをしていきましょう!
![](https://hina-blog1.com/wp-content/uploads/2023/09/FD1DD442-7076-4C8B-97FB-57B33D6FCF0C-300x157.jpg)
コメント
コメント一覧 (2件)
「SWELLサイト型トップページの作り方」使いたっぷりで良く分かりました。ありがとうございました。
よかったです!嬉しいコメントありがとうございます!!