#PR
今回は、WordPressテーマ「SWELL」を使って、サイト型のトップページを作ります。
WordPressでサイトを作る際、
- ブログ型のサイト
- ホームページ型のサイト
この2つに分けることができます。
ブログ型のサイトは、トップページにブログ記事がずらっと表示されているサイト形式です。
一方ホームページ型は、ブログ記事がメインというよりは、プロフィールややっていることを紹介し、その中にブログ記事を挟み込むようなイメージです。
今回は、WordPressテーマ「SWELL」を使って、ホームページ型のサイトを作っていきます。
SWELLは今、とても人気があるテーマです。
シンプルでデザインがしやすくカスタマイズ性が高いので、一つのテーマでいろんな形のサイトを作ることができます。
![](https://mikimiki1021.com/wp-content/uploads/2021/10/No.3アップ_mikimiki様_イラスト_2022.3.10..png)
この記事をみればサーバー・ドメイン契約から解説していきますので、知識0でもサイトが作れるようになります。
新しい働き方を目指すための人のオンラインクリエイティブスクールRirian School.では、
・フリーランスとしてお仕事を始めたいけど何から始めていいか分からない方
・SNSを使った集客方法を学びたい方
・Web集客の方法がわからない方
・ブログをしているけどアクセスが上がらない方
こんなお悩みを持っている方向けにオンライン個人レッスンをご用意しています。
mikimikiがマンツーマンでレッスンをさせていただきます。
▶︎オンラインクリエイティブスクールRirian School.の詳細はこちら!
ドメイン・サーバー登録
ドメインとサーバーはConoHaWINGで契約をしていきます。
![](https://mikimiki1021.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-27-9.57.54-1024x684.png)
\ 10/18 16:00まで 50%offキャンペーン中!/
契約するのはWINGパックです!
まず、契約期間を決めます。
契約期間が長くなると1ヶ月の料金も安くなるにで、1年契約で初めて見るのが良いかと思います。
ベーシックを「申し込み」
メールアドレス、パスワードを入力
![](https://mikimiki1021.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-27-10.11.00-1024x490.png)
料金タイプ | WINGパック |
契約期間 | 任意 |
プラン | ベーシック |
初期ドメイン | 本番のドメインではないので仮のドメインとして好きなものでで大丈夫です。 |
サーバー名 | 入力されているものを変えずに進みます。 |
WordPressかんたんセットアップ
![](https://mikimiki1021.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-27-10.19.43-1024x574.png)
「利用する」を選択
これを設定することで面倒なWordPressのインストールをConoHaWINGが行ってくれます!
セットアップ方法 | 新規インストール |
独自ドメイン設定 | 考えたドメイン名を入力。サイトのURLになるので慎重に決めていきましょう |
「検索」をして左下に「成功しました。」という表示が出ると、ドメインの取得が可能です。
取得できない場合は他の人はそのドメインを使っているので、他のドメインを考えましょう。
ドメインの料金は含まれています。
作成サイト名、WordPressユーザー名、WordPressパスワードを入力
WordPressユーザー名とWordPressパスワードは WordPressにログインするときに毎回必要になるので、推測されやすいものにならないように注意してください。
![](https://mikimiki1021.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-27-10.34.28-1024x578.png)
ConoHaWINGは、SANGO、JIN、THE SONICの有料テーマが通常で購入するよりも少し安く購入することができます。
使いたいテーマがあるときはチェック
今回はSWELLのテーマを使うのでチェックをせずに「次へ」
![](https://mikimiki1021.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-28-16.11.18-1024x509.png)
お客様情報とSMS認証、クレジットカード情報の入力をします。
![](https://mikimiki1021.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-28-16.13.46-1024x583.png)
これで設定が完了です。
ConoHaWINGログイン画面
![](https://mikimiki1021.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-28-16.40.34-1024x552.png)
サイトの情報が出てきました。
サイトのURLがhttps〜と表示されているので既にSSL化されている状態です。
もしもされていなかったら、「かんたんSSL化」から「SSL有効化」をクリック
SSL化できていたら「管理画面URL」を選択
設定した後はまだ操作できないので、1〜2時間経ってから作業しましょう
\ 10/18 16:00まで 50%offキャンペーン中!/
WordPress初期設定
![](https://mikimiki1021.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-28-16.43.12-1024x544.png)
先ほど決めた、ユーザー名またはメールアドレスとパスワードを入力してログインしましょう。
![](https://mikimiki1021.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-28-16.46.04-1024x479.png)
左上「mikimiki web スクール」を右クリック
↓
「新しいタブで開く」を選択
タブを分けてどう表示されているか確認しながら作業ができます。
![](https://mikimiki1021.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-28-17.06.02-1024x439.png)
サイト名、キャッチフレーズを変更するときは設定の「一般」から。
検索エンジンで表示されるサイトの簡単な紹介文です!
![](https://mikimiki1021.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-28-17.12.11-1024x473.png)
テーマをアップロードしていきます。
ダッシュボードメニュー「外観」
↓
「テーマ」
↓
「新規追加」
↓
「テーマのアップロード」
![](https://mikimiki1021.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-28-17.24.06-1024x470.png)
ダウンロードしておいた「SWELL」をファイルから選択
↓
「今すぐインストール」
![](https://mikimiki1021.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-28-17.25.49-1024x510.png)
「有効化」
次にSWELLの子テーマもインストールします。
SWELLの公式サイトにログインして子テーマをダウンロードしましょう
先ほどと同じようにインストールして有効化まで行います。
![](https://mikimiki1021.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-28-17.36.13-1024x463.png)
続いてパーマリンクの設定をします。
左側メニュー「設定」
↓
「パーマリンク設定」
↓
「投稿名」を選択
↓
「変更を保存」
固定ページを作成
![](https://mikimiki1021.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-28-17.41.57-1024x414.png)
ダッシュボードメニュー「固定ページ」
↓
「新規追加」
![](https://mikimiki1021.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-28-17.43.22-1024x446.png)
タイトルに「HOME」と入力
↓
「公開」
![](https://mikimiki1021.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-28-17.51.31-1024x442.png)
もう一つ、「BLOG」というタイトルの固定ページも作成して公開します。
表示設定
![](https://mikimiki1021.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-28-17.56.22-1024x470.png)
ダッシュボードメニュー「設定」
↓
「表示設定」
↓
ホームページの表示を「固定ページ」
- ホームページ『HOME』
- 投稿ページ 『BLOG』
カテゴリー作成
![](https://mikimiki1021.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-28-18.40.37-1024x479.png)
ダッシュボードメニュー「投稿」
↓
「カテゴリー」
名前とスラッグを入力
スラッグはURLに適した名前を入力しましょう。基本的には英語です
↓
「新規カテゴリーを追加」
ブログ記事を作る
サイト型のトップページにしたときにわかりやすいように、ブログ記事もサンプルとして作っていきます。
![](https://mikimiki1021.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-28-18.56.54-1024x608.png)
ダッシュボードメニュー「投稿」
↓
「新規追加」
![](https://mikimiki1021.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-28-18.58.41-1024x502.png)
固定ページと同じようにタイトル等を入力
パーマリンクには、記事の関連する英語を入れましょう。
![](https://mikimiki1021.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-28-19.00.37-1024x503.png)
先ほど作ったカテゴリーも選択しておきましょう。
↓
「公開」
![](https://mikimiki1021.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-28-19.02.33-1024x627.png)
また、アイキャッチを入れておくとイメージが湧きやすいです。
「アイキャッチ画像を設定」
↓
ファイルをアップロード
![](https://mikimiki1021.com/wp-content/uploads/2022/03/mikimikiさん_ひらめき.png)
WordPressの初期設定に関してもっと詳しく知りたい方はこちらの記事をチェック
>>WordPressでブログを書き始める前の初期設定と覚えておきたい設定
SWELLカスタマイズ
![](https://mikimiki1021.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-28-19.06.52-1024x475.png)
トップページのヘッダーとメインビジュアルを設定していきます。
![](https://mikimiki1021.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-28-19.07.59-1024x464.png)
ダッシュボードメニュー「外観」
↓
「カスタマイズ」
↓
「サイト全体設定」
サイト全体設定
![](https://mikimiki1021.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-28-19.10.34-1024x491.png)
サイト全体設定
↓
「基本カラー」
サイトに合うカラーを選びましょう。
![](https://mikimiki1021.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-28-19.13.20-1024x493.png)
サイト全体設定
↓
基本デザイン
ここでは全体の質感やフォントの設定ができます。
ヘッダー
![](https://mikimiki1021.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-28-19.16.24-1024x482.png)
赤枠の部分がヘッダーです。
カラー設定では、背景色や文字色の変更をします。
また、今はテキストでロゴが入力されていますが、画像の設定もできます。
「ロゴ画像の設定」からファイルをアップロードしましょう。
![](https://mikimiki1021.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-28-19.21.00-1024x492.png)
ロゴやメニューの位置を変えたいときはそれぞれレイアウトを変更
![](https://mikimiki1021.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-28-19.22.46-1024x501.png)
ヘッダーを追従させるかどうかの設定もできます。
![](https://mikimiki1021.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-28-19.25.27-1024x498.png)
上のバーを消したいときは
ヘッダーバー設定
↓
「表示設定」
↓
「SNSアイコンリストを表示する」のチェックを外す
キャッチフレーズ設定
↓
キャッチフレーズに表示位置を「表示しない」に設定
設定が終わったら「公開」
>>ConoHaWingを使って10分でWordPressブログを作る
メインビジュアルの変更
![](https://mikimiki1021.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-28-19.32.57-1024x485.png)
トップページ
↓
「メインビジュアル」
メインビジュアルの表示内容は初期設定が「画像」になっています。
動画を入れたい場合は「動画」を選択
![](https://mikimiki1021.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-28-19.35.09-1024x471.png)
PC用とスマホ用サイズの画像を作成し、画像を選択
![](https://mikimiki1021.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-28-19.37.03-1024x510.png)
画像にはオーバーレイがかっています。
写真そのままのカラーで使いたいときは、オーバーレイカラーの透明度を0に
メインビジュアルの高さ設定で写真をサイズを設定しましょう。
![](https://mikimiki1021.com/wp-content/uploads/2021/11/mikimikiさん_お祝い.png)
ホームページを作るときは、おしゃれなイラストを使いましょう♪
>>本当は教えたくない!Webデザイナー愛用・オシャレな海外イラスト素材サイト3選
タブ切り替えの投稿リスト
![](https://mikimiki1021.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-28-19.41.21-1024x430.png)
新着記事と人気記事のようにタブを切り替えて表示する投稿リストを作成します。
![](https://mikimiki1021.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-28-19.44.16-1024x484.png)
先ほど作った固定ページ「HOME」を編集します。
![](https://mikimiki1021.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-28-19.45.40-1024x441.png)
ブロックをクリックして「+」を選択
↓
検索窓に「タブ」と入力
↓
「タブ」を選択
![](https://mikimiki1021.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-28-19.47.41-1024x362.png)
Tab1、Tab2のテキストを変更
今回は新着記事と人気記事と入力!
右側スタイルからデザインを変更します、
右側「ブロック」をスクロールしていくとタブサイズの設定ができるので、任意のサイズに変更しましょう。
![](https://mikimiki1021.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-28-20.01.42-1024x371.png)
タブの中のブロックをクリックして「+」を選択
↓
「投稿リスト」を選択
![](https://mikimiki1021.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-28-20.02.42-1024x487.png)
表示する投稿数やレイアウト・投稿の表示順序を設定。
設定できたらタブを切り替えて同じように設定。
人気記事の場合は投稿の表示順序を「人気順」に設定します。
表示順を詳しく設定したいときは「Pickup」から細かく設定していきましょう。
記事スライダー・サイドバーの削除
![](https://mikimiki1021.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-28-20.08.20-1024x453.png)
初期設定で表示されていたメインビジュアル下の記事スライダーは削除します。
「外観」
↓
「カスタマイズ」
↓
「トップページ」
↓
「記事スライダー」
↓
「設置しない」にチェック
↓
「公開」
![](https://mikimiki1021.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-28-20.11.11-1024x622.png)
サイドバーも削除します。
![](https://mikimiki1021.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-28-22.02.49-1024x650.png)
「外観」
↓
「カスタマイズ」
↓
「トップページ」
↓
「サイドバー」
↓
「トップページにサイドバーを表示する」のチェックを外す
固定ページもサイドバーの表示を外しておきます!
新しい働き方を目指すための人のオンラインクリエイティブスクールRirian School.では、
・フリーランスとしてお仕事を始めたいけど何から始めていいか分からない方
・SNSを使った集客方法を学びたい方
・Web集客の方法がわからない方
・ブログをしているけどアクセスが上がらない方
こんなお悩みを持っている方向けにオンライン個人レッスンをご用意しています。
mikimikiがマンツーマンでレッスンをさせていただきます。
▶︎オンラインクリエイティブスクールRirian School.の詳細はこちら!
ボタン作成
![](https://mikimiki1021.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-28-22.07.00-1024x434.png)
記事の下に「もっと見る」ボタンをつけます。
固定ページ「HOME」を編集
![](https://mikimiki1021.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-28-22.14.16-1024x562.png)
ブロックを選択
↓
「+」をクリック
↓
「SWELLボタン」を選択
![](https://mikimiki1021.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-28-22.15.56-1024x457.png)
ボタンの中に「もっと見る」と入力
↓
スタイルの変更
↓
ボタン下の部分にリンクURLをペースト
記事一覧ページに飛ばせたいので固定ページで作ったBLOGページのURLを貼ります
画面右側をスクロールすると、アイコン設定ができます。
任意のアイコンを選びましょう
プロフィールページ
![](https://mikimiki1021.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-28-22.25.30-1024x478.png)
次にプロフィールページを作ります。
固定ページ「HOME」を編集
![](https://mikimiki1021.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-28-22.28.24-1024x336.png)
ブロックを選択
↓
「+」ボタンをクリック
↓
「フルワイド」を選択
![](https://mikimiki1021.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-28-22.29.52-1024x597.png)
見出しの横にある「+」ボタンをクリック
↓
「カラム」を選択
↓
「50/50」の2分割を選択
![](https://mikimiki1021.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-28-22.32.44-1024x523.png)
このように2分割されました。
左側には写真、右側には文章を入れていきます。
カラム内の左側「+」をクリック
↓
「画像」を選択
↓
画像をアップロードして挿入
![](https://mikimiki1021.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-28-22.34.51-1024x469.png)
写真は右側スタイルから形を変えることができます。
![](https://mikimiki1021.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-28-22.36.25-1024x611.png)
カラム右側には「段落」を選択してテキストを入力していきましょう。
文字を選択して装飾も加えてみてください。
文章の下にボタンを入れても良いです。
![](https://mikimiki1021.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-28-22.40.31.png)
ボタンの配置も調整できるのでバランスの良い位置に設定してください。
セクションに背景を追加
![](https://mikimiki1021.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-28-22.50.07-1024x399.png)
フルワイドの部分を選択
↓
画面右側「メディアの選択」
↓
画像を選択
「Fixed Background」のチェックを外すと背景を固定した状態でスクロールすることができます!
![](https://mikimiki1021.com/wp-content/uploads/2021/10/No.3アップ_mikimiki様_イラスト_2022.3.10..png)
ブログ型のWordPressサイトの作り方を0から知りたい方はこちらの記事をチェック
>>WordPressスタート全手順を優しく解説(ConoHaWINGサーバー契約・インストール・初期設定)
カテゴリーごとにブログ記事を入れる
![](https://mikimiki1021.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-28-22.58.37-1024x485.png)
カテゴリーごとにブログ記事を分けて表示します
固定ページ「HOME」を編集
↓
「+」ボタン
↓
「フルワイド」
![](https://mikimiki1021.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-28-23.03.43-1024x348.png)
フルワイドの背景色は白
↓
見出しは「カテゴリー名」を入力
![](https://mikimiki1021.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-28-23.07.37-1024x435.png)
見出しの下は「投稿リスト」
↓
画面右側Pickupからカテゴリーを設定
下にはボタンを挿入して各カテゴリーの一覧ページに飛ぶように設定しましょう。
背景を波の形に変更
![](https://mikimiki1021.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-28-23.13.25-1024x349.png)
「フルワイド」を選択
↓
「上下の境界線の形状」を変更
今回は「波」を使いました!
↓
下のスライドで高さを調整
下線も同様に設定しましょう。
この記事を見ながらサイトが作れるようにサーバー・ドメイン契約から解説していきます。
新しい働き方を目指すための人のオンラインクリエイティブスクールRirian School.では、
・フリーランスとしてお仕事を始めたいけど何から始めていいか分からない方
・SNSを使った集客方法を学びたい方
・Web集客の方法がわからない方
・ブログをしているけどアクセスが上がらない方
こんなお悩みを持っている方向けにオンライン個人レッスンをご用意しています。
mikimikiがマンツーマンでレッスンをさせていただきます!
▶︎オンラインクリエイティブスクールRirian School.の詳細はこちら!
フッター作成
![](https://mikimiki1021.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-28-23.16.56-1024x465.png)
フッターには、
- プロフィール
- 人気記事
- カテゴリー
を追加します。
![](https://mikimiki1021.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-28-23.34.21-1024x477.png)
「外観」
↓
「カスタマイズ」
↓
「フッター」
フッターの背景や文字を変更できます。
SNSのアイコンに設定をするときは
「カスタマイズ」
↓
「SNS情報」
↓
各SNSのURLを入力
![](https://mikimiki1021.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-28-23.37.30-1024x468.png)
次に、ウィジェットを追加します。
「カスタマイズ」
↓
「ウィジェット」
![](https://mikimiki1021.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-28-23.40.30-1024x473.png)
フッター(PC1)には「[SWELL]プロフィール」を追加
必要項目を入力しましょう。
- 名前
- 役職
- プロフィール文
- アイコン画像
ボタンやSNSアイコンの挿入も可能です。
![](https://mikimiki1021.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-28-23.43.27-1024x398.png)
フッター(PC2)には「[SWELL]人気記事」を追加
- タイトル
- 投稿数等
を追加。
![](https://mikimiki1021.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-28-23.45.23-1024x455.png)
フッター(PC3)には「カテゴリー」を追加
ナビメニューを作成
![](https://mikimiki1021.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-28-23.47.09-1024x472.png)
最後にナビメニューを作ります。
![](https://mikimiki1021.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-28-23.54.48-1024x453.png)
ダッシュボードメニュー「外観」
↓
「メニュー」
↓
メニュー名を入力
↓
「メニューを作成」
![](https://mikimiki1021.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-28-23.56.34-1024x439.png)
メニューに入れたい項目にチェックを入れて「メニューに追加」
![](https://mikimiki1021.com/wp-content/uploads/2022/08/スクリーンショット-2022-08-29-0.01.01-1024x447.png)
フッターも同様に「新しいメニューを作成」からメニューを作りましょう。
メニュー設定は「フッター」にチェックを入れます。
![](https://mikimiki1021.com/wp-content/uploads/2021/10/横顔アップ_mikimiki様_イラスト_2022.3.10.png)
ホームページを作って運営するなら、SEOについても知っておきましょう♪
>>【超初心者向け】SEO対策講座〜これだけ抑えればSEO対策基礎はOK!!!〜
まとめ
今回はWordPressテーマ「SWELL」を使ってカスタマイズをしていきました。
この記事を見て、ホームページ型のサイト作成に挑戦してみましょう!
![](https://mikimiki1021.com/wp-content/uploads/2021/11/mikimikiさん_驚き.png)
ブログ型のWordPressサイトの作り方を0から知りたい方はこちらの記事をチェック!
>>WordPressスタート全手順を優しく解説(ConoHaWINGサーバー契約・インストール・初期設定)
![](https://mikimiki1021.com/wp-content/uploads/2022/03/mikimikiさん_先生風_上半身.png)
解説動画:【完全!有料級】WordPressテーマ「SWELL」を使ったサイト型トップページの作り方(ドメイン/サーバー契約/初期設定手順全て解説)