【初心者】【WordPressテーマSWELL】ホームページ(企業 コーポレート)を自分で低コストで作成する方法をデモサイトと図解で徹底解説

Macに表示されている企業サイト

自分でホームページをゼロから作りたい人に届いて欲しいな〜

ホームページを作りたいけど、費用が。。。
と思いますよね。
Web制作会社に依頼すると、20万は下りません。

自分で作るとしても、そもそも作り方がわからない。。。

一から勉強する時間もない。

でも大丈夫です!

で全くの初心者の方でも制作できるように、デモサイトを用意し画像付きの解説で超わかりやすくブログにしてみました。

一歩踏み出して一緒に作っていきましょう!

時間はかかりますが、根気さえあればできます!

目次

WordPressテーマSWELLで作成する企業サイトのデモサイト

今回はこのような架空の企業サイトを作成していきます。

画像をクリックすると、デモサイトがご覧になれます。

デモサイトUltraのファーストビュー

同様に他のサイトを制作したい方はこちらをご覧ください。

デモサイトSatenn de Recoのファーストビュー
カフェサイト
Patisserie Tyonoroのデモサイトファーストビュー
ケーキ屋さんのサイト

どなたでもご自由に制作してサイトとしてご利用いただいて結構なのですが、このデモサイトをそのままご自身のポートフォリオとして掲載されるのはお控えください。(画像やテキストを変更してくださいね。)

FAQ

Web制作(ホームページ制作)の知識が全くありませんが制作できますか?

全く初心者の方でも制作できるように詳細に図解入りで解説していますので、その通りに進めていただくと制作できます。

テンプレですか?

テンプレートではありません。

デモサイトと同じデザインしか作れませんか?

いいえ。
制作過程で徐々にWordPressやテーマのSWELLの仕様に慣れてくると思いますので、「ここのこの部分は別のデモサイトに載っているデザインで作る」や「これと同じ項目をもう一つ増やそう」「これは必要ないので削除しよう」「ここの色や大きさをを変更しよう」などなどご自由にレイアウトやデザインしていただけます。

一度制作したサイトのデザインを変更できますか?

何度でも変更可能です。
ローカル環境でもサーバーアップロード環境でも可能です。

短期間で作れますか?

初めての方はかなり時間がかかると思いますので、時間に余裕を持って始められることをお勧めします。

WordPressでのホームページ作成の工程

2パターン紹介しますので、適した方で作成してください。

パターン1リモート環境
XserverのWordPress簡単インストールで、サーバー上に直接サイトやブログを構築する方法です。
ご自身のサイトやブログを構築するのにおすすめです。

パターン2ローカル環境
ローカル環境(Local)でサイトやブログを作成し、出来上がってからAll-in-one WP Migrationを使ってXserverのWordPress簡単インストールで立ち上げたWordPressに引越しさせアップロードする方法です。
クライアントワークににはこちらがおすすめです。

【パターン1リモート環境】ホームページ作成の工程

STEP
WordPressテーマSWELLを購入 17,600円(税込)
WordPressテーマSWELLをダウンロードします。
SWELLとSWELL CHILD
STEP
Xserverでレンタルサーバーとドメインを取得し( 約1,000円/月)、Xserver WordPress簡単インストールでWordPressをインストールし、SSL化します。
SWELLの親テーマ子テーマをインストールします。
XserverのWordPressに SWELLとSWELL CHILDをインストール
STEP
SWELL子テーマを有効化し、サイトやブログを作成していきます。
SWELLとSWELL CHILDが入ったXserverのWordPress

【パターン2ローカル環境】ホームページ作成の工程

STEP
WordPressテーマSWELLを購入 17,600円(税込)

SWELLをダウンロードします。

子テーマもダウンロードします。

SWELLとSWELL CHILD
STEP
LOCAL(無料)を使用してローカル環境でWordPressを構築します。

LOCALをダウンロードし、SWELLとSWELLの子テーマもインストールし、ローカル環境(サーバー上にアップロードされていない環境)でWordPressのホームページを作成していきます。

LOCALのWordPressにSWELLとSWELL CHILDをインストール
STEP
ホームページ作成後、WordPressのプラグインAll-in-one WP Migrationをインストールします。

All-in-one WP Migrationをインストールし、バックアップファイルとエクスポートファイルを作成します。

SWELLとSWELL CHILDをインストールしたLOCALのWordPressにAll-in-one WP Migrationをインストールしバックアップとエクスポートファイルを作成
STEP
Xserverでレンタルサーバー契約した後( 約1,000円/月)、WordPress簡単インストールでWordPressを立ち上げ、All-in-one WP Migrationをインストールします。

All-in-one WP Migrationをインストールし、先ほどのエクスポートファイルをインポートします。

XserverのWordPressにAll-in-one WP Migrationをインストールしエクスポートファイルをインポート

実質かかる費用はたったこれだけ!
17,600円(税込)買い切りWordPressテーマSWELL価格
約1,000円/月 Xserverでのサーバーとドメイン代

WordPressテーマSWELLをダウンロード

日本人の了さんが直感的に簡単に楽しく素早く操作でき、細部までこだわって作られた、
WordPressテーマです。

外国の方が作られたテーマと違って、日本人に適したデザインにカスタマイズしやすく、
会員サイトへのフォーラムへの参加ももちろん日本語ですので、検索や質問もしやすいです。

ユーザーのことを考えて頻繁にアップグレードされています。

ブログでもとても人気のテーマですので、
サイト制作した後にブログを始めてみるのもいいですね!
もちろんこのブログに使用しているテーマもSWELLです。
おしゃれで使いやすい機能もたくさんで、控えめに言って最高です!

買い切り価格ですので、追加料金は発生しません。

今回は完全ノーコードでの企業サイト(コーポレートサイト)制作ですが、追加CSSでより機能性やデザイン性の高いものが作れます。

商品名WordPressテーマ SWELL
販売価格¥17,600(税込み)
※買い切り価格です。月額や年額ではありません。
販売元株式会社LOOS
動作必須環境PHP7.3以上

WordPress5.5以上 (推奨 : 5.6 ~)

※必須環境をみたしてない場合は、エラーが発生します。推奨バージョン未満では、ブロック機能が一部使えません。
※WordPress.comでは利用できません。SWELLはインストール型WordPress.org向け商品です。
対応ブラウザEdge / Chrome / Firefox / Safari (各最新版)
決済方法クレジットカード ( VISA / Master / AMEX / JCB )
※銀行振込での購入は対応できません。
ライセンスSWELLはGPL100%テーマです。
ライセンス制限はなく、複数サイトでご自由にご利用頂けます
SWELL公式サイトより引用

わからないことがあれば、会員サイトのフォーラムで検索や質問ができます。
(フォーラムへは、ガイドラインをよく読んで参加しましょう。)

サブスクではありませんので、一度の購入で複数のブログやサイトが作れます。

  • SWELLをダウンロードしたら、子テーマもダウンロードしましょう。
    (子テーマはSWELL会員サイト SWELLERS’ のマイページにあります。)
  • 親テーマも子テーマもダウンロードした後、zipファイルのままで大丈夫です。

Xserverでサーバーとドメインを取得

Xserver

Xserverでサーバーとドメインを取得します。

頻繁にとてもお得なキャンペーンをされていますので、チェックしてみてください。

お名前.com

コチラは特にドメインが1円〜という破格で人気ですね!

もちろんレンタルサーバーもありますが、
サーバーとドメインを別会社にしたい方は、ドメインだけはお名前.comって方法もあります。
手間はかかっちゃいますが。

■□━━ 急げ、ドメインは早い者勝ち! ━━□■

     ■お名前.com

Xserver WordPress簡単インストールとSSL設定の解説になります。
申し込みが終わればここまで設定しておいてくださいね。

【パターン2ローカル環境】の方のみ Local設定

LocalでWordPressをローカル環境構築していきますので、こちらをご覧になって設定してくださいね。↓

WordPressにSWELLをインストール

では!頑張って作っていきましょう!
とても時間がかかりますので、無理をしない様に途中休憩を適度に取りながら、水分も忘れず補給しながら進めていってくださいね!

WordPressにログインします。

【パターン1リモート環境】の方は、Xserver簡単インストールしたWordPress
【パターン2ローカル環境】の方は、Local環境で構築したWordPressです。

WordPressテーマアップロード

外観→テーマアップロードをクリックします。


WordPressテーマアップロードにswellのzipファイルをドラッグ&ドロップ

swellのファイルをzipファイルのままドラッグ&ドロップします。
(ファイルを選択してもいいです)


WordPressテーマアップロードを今すぐインストール

今すぐインストールをクリックします。


WordPressテーマアップロードにswell_childのzipファイルをドラッグ&ドロップ

今度はswell_childのファイルをzipファイルのままドラッグ&ドロップします。
(ファイルを選択してもいいです)


WordPressテーマアップロードの今すぐインストール

今すぐインストールをクリックします。


WordPressテーマ有効化

今度は有効化をクリックします。


SWELL CHILDが有効化されているか確認

親テーマSWELLがインストールされていて、子テーマSWEL CHILDが有効になっていればOKです。

基本的に今有効になっている子テーマを使って制作していきます。

企業サイト用の画像をWordPressのメディアに入れる

今回使用する画像です。
ダウンロードしてください。

WordPressメディアの新規追加

メディアから新規追加をクリックします。


WordPressメディアライブラリに画像をアップロード

ダウンロードして解凍した画像全てを、ファイルをドロップしてアップロードにドラッグ&ドロップします。
これで画像が入りました。

画像や動画について

画像や動画はご自身で用意、またはweb上で見つけたものを使用される場合の参考になさってください。

画像・動画フリーダウンロードサイト

デザインツール

無料の範囲でも素敵なデザインが作れます。
有料1,000円/月にすると、背景透過やたくさんの素材を使用することができかなり充実しています。

■Canva


画像加工サイト

私は頻繁に利用させていただいており、助かっています。

BANNER KOUBOU

画像サイズの変更

画像が大きいと重くなりサイト表示が遅くなります。
画像サイズの変更方法はこちらをご覧ください。↓

画像サイズの目安

大体の目安です。
このサイズじゃないといけないってことではありませんので、
その辺りは臨機応変にご使用ください。

メインビジュアル1600px
中サイズ1000px
小サイズ600px

画像を圧縮してくれる無料サイト

ドラッグ&ドロップで使用でき、
圧縮して、ファイルサイズを小さくしてくれます。

TinyPNG

動画を圧縮してくれる無料サイト

こちらもドラッグ&ドロップで使用できます。

VideoSmaller

背景削除してくれる無料サイト

画像の背景を削除してくれます。

ロゴなどによく使用します。

removebg

WordPress固定ページ作成(Home About News Recruit Contact

固定ページとは、カテゴリーやタグに属さない単体で独立したページです。

WordPress固定ページ新規追加

管理画面の固定ページから新規追加をクリックします。


ブロックエディターにようこそのポップアップ

ポップアップが出ますので、 をクリックして閉じます。


WordPress固定ページHome

Homeと打ち、公開をクリックします。
公開をクリックすることでセーブされます。その都度忘れずに!)

このページがHomeページ(トップページ)になります。


WordPress固定ページHome公開

再び公開をクリックします。


パーマリンク

ページを作成する時にタイトルが日本語だと、長〜〜い訳のわからないurlになったり(https://〇/%e7%a7%81%e3%81%9f%e3%81%a1%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/)

なので、わかりやすい英語表記(スラッグ)にしておきましょう!

固定ページパーマリンク設定

そのページの、画面右側→固定ページパーマリンクのurlスラッグを日本語ではなくわかりやすい英語表記に変えましょう!!


管理画面に戻る方法

左上の をクリックすると、管理画面に戻りますので覚えておいてくださいね。


WordPress固定ページHomeの確認

Homeの固定ページが出来ました。


固定ページのサンプルをゴミ箱へ移動

Sample Pageゴミ箱へ移動をクリックして削除します。


企業サイトによく利用される固定ページを作成

Homeを作成した時と同様に、固定ページに企業サイトでよく利用されるAbout News Recruit Contact それぞれのページを作成してください。

WordPress外観カスタマイズ・メニュー設定

WordPress管理画面の外観のカスタマイズ

管理画面から、外観 カスタマイズをクリックします。

WordPress設定

WordPressカスタマイズWordPress設定

右側が現在のサイトのトップページの状態です。
このまますぐにでも素敵なブログが書けるような、素晴らしいデザインですね!

しかし今回は、企業サイトを作っていきますので、
もったいないですがこれからガラッとデザインを変更します。

WordPress設定をクリックします。


WordPressカスタマイズWordPress設定のサイト基本情報

サイト基本情報をクリックします。


WordPressカスタマイズWordPress設定のサイト基本情報のサイトのタイトルとキャッチフレーズとサイトアイコン

サイトのタイトルを入力します。

キャッチフレーズを入力します。

サイトアイコンを選択をクリックします。


メディアのアイコン画像

画像をクリックします。

選択をクリックします。


アイコン画像切り抜かない

切り抜かないをクリックします。


WordPressカスタマイズWordPress設定のサイト基本情報公開

公開をクリックします。

をクリックします。


WordPressカスタマイズWordPress設定のホームページ設定

ホームページ設定をクリックします。


WordPressカスタマイズWordPress設定のホームページ設定のホームページの表示とホームページと投稿ページ

固定ページに●

ホームページHome

投稿ページNewsを選びます。

公開をクリックします。

をクリックして戻ります。


WordPressカスタマイズWordPress設定から戻る

再び をクリックして、もう一つ前に戻ります。


サイト全体設定【SWELL】

WordPressカスタマイズのサイト全体設定

サイト全体設定をクリックします。


WordPressカスタマイズのサイト全体設定の基本カラー

基本カラーをクリックします。


WordPressカスタマイズのサイト全体設定の基本カラーのメインカラー

色を選択をクリックします。

カラーナンバーを #0c4aad に変更します。

公開をクリックします。

をクリックして戻ります。


WordPressカスタマイズのサイト全体設定の基本デザイン

基本デザインをクリックします。


WordPressカスタマイズのサイト全体設定の基本デザインの全体の質感とフォント

全体をフラットにするをチェックします。

フォントは明朝体(Note Serif JP)を選びます。

公開をクリックします。

をクリックして戻ります。


WordPressカスタマイズのサイト全体設定のパンくずリスト

パンくずリストをクリックします。


WordPressカスタマイズのサイト全体設定のパンくずリストのホームの文字列

「ホーム」の文字例Homeにします。

公開をクリックします。

をクリックして戻ります。


WordPressカスタマイズのサイト全体設定に戻る

再び をクリックして戻ります。


ヘッダー設定【SWELL】

WordPressカスタマイズのヘッダー

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


WordPressカスタマイズのヘッダーのヘッダーロゴの設定

画像を選択をクリックします。


WordPressメディアで画像を選択

メディアライブラリをクリックします。

ロゴの画像を選んでクリックします。

画像を選択をクリックします。


WordPressカスタマイズのヘッダーのヘッダーのレイアウト(SP)とヘッダーの背景を透明にするかどうかの選択

ヘッダーのレイアウト(SP)ロゴ:左/メニュー:右を選びます。

ヘッダーの背景を透明にするかどうかする(文字色:黒)を選びます。


WordPressカスタマイズのヘッダーの表示設定とキャッチフレーズ設定の選択

表示設定のチェックを外します。

キャッチフレーズの表示位置ヘッダーロゴの近くに表示を選びます。


WordPressカスタマイズのヘッダーの検索ボタンの表示位置の選択

検索ボタンの表示位置(PC)ヘッダーメニューに表示を選びます。

公開をクリックします。


WordPressカスタマイズのヘッダーから戻る

上の方に戻って をクリックして戻ります。


フッター設定【SWELL】

SWELL公式サイト
WordPressカスタマイズのフッター

フッターをクリックします。


WordPressカスタマイズのフッターのフッター背景色の公開

フッター背景色#f7f7f7に変更します。

公開をクリックします。

をクリックして戻ります。


サイドバー設定【SWELL】

WordPressカスタマイズのサイドバー

サイドバーをクリックします。


WordPressカスタマイズのサイドバーのサイドバーを表示するかどうかのチェック

トップページにサイドバーを表示する
固定ページにサイドバーを表示する
のチェックを外します。

公開をクリックします。

をクリックして戻ります。


トップページ設定【SWELL】

WordPressカスタマイズのトップページ

トップページをクリックします。


WordPressカスタマイズのトップページのメインビジュアアル

メインビジュアルをクリックします。


WordPressカスタマイズのトップページのメインビジュアルの表示設定のチャックとメインビジュアルの高さ設定

Scrollボタンを表示するにチェックを入れます。

メインビジュアルの高さ設定ウィンドウサイズにフィットさせるを選ぶ。


WordPressカスタマイズのトップページのメインビジュアルの画像設定

画像を選ぶをクリックし、PC用SP用それぞれを選びます。


WordPressカスタマイズのトップページのメインビジュアルのメインテキスト

メインテキストを削除します。


WordPressカスタマイズのトップページのメインビジュアルから戻る

公開をクリックします。

をクリックして戻ります。


WordPressカスタマイズのトップページから戻る

再び をクリックします。


投稿・固定ページ【SWELL】

WordPressカスタマイズの投稿・固定ページ

投稿・固定ページをクリックします。


WordPressカスタマイズの投稿・固定ページのタイトル

タイトルをクリックします。


WordPressカスタマイズの投稿・固定ページのタイトルのコンテンツ内タイトルデザインを選択

コンテンツ内タイトルデザインで装飾なしを選びます。


メニュー設定

管理画面まで戻ります。

WordPress外観のメニューのグローバルメニュー

外観からメニューをクリックします。

メニュー名グローバルメニューと入力します。

グローバルナビにチェックを入れます。

メニューを保存をクリックします。


WordPress外観のメニューのグローバルメニューのメニュー項目を追加

左側のメニュー項目を追加すべての表示をクリックします。

すべて選択にチェックします。

メニューに追加をクリックします。


WordPress外観のメニューのグローバルメニューのメニュー構造

右側のメニュー構造に追加されたメニューの順番を整えます。

ドラッグ&ドロップで移動できます。

メニューを保存をクリックします。


WordPressカスタマイズのメニュー

管理画面に戻り、外観からカスタマイズメニューをクリックします。


WordPressカスタマイズのメニューのグローバルメニュー

先ほど作成したグローバルメニューをクリックします。


WordPressカスタマイズのメニューのグローバルメニューのメニューの位置

スマホ開閉メニュー内にチェックを入れます。

公開をクリックします。


ウィジェット(フッター)設定

WordPressカスタマイズのウィジェット

をクリックして2回戻りウィジェットをクリックします。


WordPressカスタマイズのウィジェットのフッター(PC)1

フッター(PC)1をクリックします。


WordPressカスタマイズのウィジェットのフッター(PC)1のウィジェットの追加と画像

ウィジェットを追加をクリックします。

画像をクリックします。


WordPressカスタマイズのウィジェットのフッター(PC)1の画像を選ぶ

画像を選びます。

リンク先にHome(トップページ)のURLを入力します。

完了をクリックします。

ウィジェットを追加をクリックします。


WordPressカスタマイズのウィジェットのフッター(PC)1のテキスト

テキストをクリックします。


WordPressカスタマイズのウィジェットのフッター(PC)1のテキストの公開

住所や電話番号などを入力します。

公開をクリックします。

をクリックして戻ります。


Google Mapの埋め込み

WordPressカスタマイズのウィジェットのフッター(PC)2

フッター(PC)2をクリックします。


WordPressカスタマイズのウィジェットのフッター(PC)2のウィジェットの追加とカスタムHTML

GoogleMapを埋め込んでいきます。

ウィジェットを追加をクリックします。

カスタムHTMLをクリックします。


Google Mapの共有

一旦WordPressから離れて、Google Mapで住所を調べます。

共有をクリックします。


Google Mapの共有の地図を埋め込む

地図を埋め込むをクリックします。

を選択します。

HTMLをコピーをクリックします。


WordPressカスタマイズのウィジェットのフッター(PC)2のカスタムHTMLの内容

WordPressに戻り管理画面から外観→カスタマイズ→ウィジェット→フッター(PC)2をクリックし、内容の場所に先ほどコピーしたHTMLを貼り付けます。

貼り付けたHTML中のwidth=”400″をwidth=”100%”に変更します。

公開をクリックします。

をクリックして戻ります。


ナビゲーションメニュー

WordPressカスタマイズのウィジェットのフッター(PC)3

フッター(PC)3をクリックします。


WordPressカスタマイズのウィジェットのフッター(PC)3のウィジェットを追加のタイトルとメニューを選択

ウィジェットを追加をクリックします。

ナビゲーションメニューをクリックします。


タイトルMENUと入力します。

メニューを選択は、グローバルメニューを選びます。

公開をクリックします。

をクリックし、管理画面に戻ります。


ひとまずお疲れ様でした!
これで、ヘッダーとフッターが出来上がりましたね!

サイトを表示 管理画面(ダッシュボード)

WordPressのサイト表示

サイトを表示するには、管理画面左上、サイトを表示をクリックします。


WordPressダッシュボード

ダッシュボードに戻るには、左上ダッシュボードをクリックします。


気をつけていただきたい事

これからブロックエディターで制作していきますが、こちらからはお知らせしませんので、ご自分のタイミングで頻繁にセーブしていってください。(でないと、せっかく作ったのが消えてしまいます。)

セーブは画面右上、公開を1回クリックもしくは2回クリックします。
(Localで作成されている方は、公開をクリックしてもサーバー上にはアップされません。セーブされるだけです。)

WordPress公開
WordPress公開

テキストの改行は、シフトを押しながらエンターキーで、普通に改行されます。

エンターキーだけで改行すると、1段落分のスペースが空きます

WordPressのどこの+か

どこの なのか注意してください。

わかリにくければ ↓

WordPressどこの部分か

画面左下で確認できます。

WordPressツールバー 上下

ブロックの位置を上下移動させたい時は、そのブロック場所をクリックして四角で囲われるように指定して をクリックして移動します。

WordPress固定ページ Home(トップページ)

Home(トップページ)を作っていきます。

WordPress固定ページのHomeの編集

管理画面から固定ページ一覧をクリックします。

Home編集をクリックします。

About

WordPress固定ページのHomeの編集About

をクリックして表示されたものがブロックと言います。すべて表示をクリックし全てのブロックを表示させます。


フルワイド【SWELLブロック】

WordPress固定ページのHomeの編集Aboutフルワイド

フルワイドをクリックします。


WordPress固定ページのHomeの編集タイトルAbout

タイトル部分にAboutと入力します。

画面右側の設定ブロックエリアが表示されていなければ、一番上の をクリックすると表示されます。

カラー設定の背景色をクリックします。

をクリックし、#ffffff に変更します。

をクリックして、すべて表示をクリックします。


ブロークン型のメディアと文章【SWELLブロック】

WordPress固定ページのHomeの編集Aboutブロークン型のメディアと文章

画面左側パターンをクリックし[SWELLページ用]を選択し、ブロークン型のメディアと文章をクリックします。


WordPress固定ページのHomeの編集Aboutブロークン型のメディアと文章のメディア

上左の画像をクリックします。

置換をクリックしメディアライブラリを開くをクリックします。


WordPress固定ページのHomeの編集Aboutブロークン型のメディアと文章の画像

画像を選びクリックし、選択をクリックします。


WordPress固定ページのHomeの編集Aboutブロークン型のメディアと文章のいらない部分指定

画像の右側のエリアをクリックして、テキストを入れます。

下の部分は要らないので、クリックし青い四角で表示されたら、 をクリックします。


WordPress固定ページのHomeの編集Aboutブロークン型のメディアと文章のいらない部分削除

ブロックを削除をクリックします。


WordPress固定ページのHomeの編集Aboutブロークン型のメディアと文章の文章指定

テキストを入れたエリアをクリックし、青い四角を表示させます。


WordPress固定ページのHomeの編集Aboutブロークン型のメディアと文章の背景色

画面右側ブロックのクリックし、背景をクリックします。


WordPress固定ページのHomeの編集Aboutブロークン型のメディアと文章の背景色指定

格子模様をクリックします。


WordPress固定ページのHomeの編集Aboutブロークン型のメディアと文章の背景色選ぶ

をクリックし、#f7f7f7にします。


WordPress固定ページのHomeの編集Aboutブロークン型のメディアと文章のスペーサー

をクリックし全てを表示をクリックします。

スペーサーをクリックします。


WordPress固定ページのHomeの編集Aboutブロークン型のメディアと文章のスペーサー50px

画面右側の設定のスペーサー設定50にします。


WordPress固定ページのHomeの編集Aboutのボタン

をクリックし、全て表示をクリックします。


SWELLボタン【SWELLブロック】

SWELL公式サイト
WordPress固定ページのHomeの編集AboutのSWELLボタン

SWELLボタンをクリックします。


WordPress固定ページのHomeの編集AboutのSWELLボタンリンク

画面右側設定でMOREボタンをクリックします。

ボタンの上にMoreと入力します。

その下の四角にhttps://○○○○○/about/と入力します。(ボタンのリンクになります)


WordPress固定ページのHomeの編集AboutのSWELLボタンの次のスペーサー

また先ほどと同様にスペーサーを入れます。

今回はスペーサー設定100のままです。


Member

フルワイド【SWELLブロック】

WordPress固定ページのHomeの編集Memberフルワイド

をクリックし、フルワイドをクリックします。

表示内になければ、すべて表示をクリックします。


WordPress固定ページのHomeの編集Member背景画像

Aboutと同じ様に、タイトル部分に Member と入力します。

画面右側の設定で、背景画像の設定メディアから選択をクリックします。


WordPress固定ページのHomeの編集Member背景画像選ぶ

画像を選んでクリックし、選択をクリックします。


スクロールしても背景画像を固定するFixed Background【SWELLブロック】

WordPress固定ページのHomeの編集Member背景画像Fixed Backgroound

画面右側の設定の背景効果を、Fixed Backgroundオンにします。


リッチカラム【SWELLブロック】

をクリックし、すべてを表示をクリックします。


WordPress固定ページのHomeの編集Memberリッチカラム

リッチカラムをクリックします。


WordPress固定ページのHomeの編集Memberリッチカラム列数PC3

画面右側の設定で、カラムの列数を決めます。

上から、PC、タブレット、スマホです。

今回6なので、3、2、1にしました。


WordPress固定ページのHomeの編集Memberリッチカラム追加

カラムを追加するには、 をクリックします。


WordPress固定ページのHomeの編集Memberリッチカラム画像

をクリックします。


WordPress固定ページのHomeの編集Memberリッチカラム画像選択

画像を選び選択をクリックします。


WordPress固定ページのHomeの編集Memberリッチカラム画像の次の+

画像を選んだ後、下の をクリックします。


WordPress固定ページのHomeの編集Memberリッチカラム画像の次の段落

段落をクリックします。


WordPress固定ページのHomeの編集Memberリッチカラム画像の次の段落中央寄せ

テキストを入力し、テキストを中央寄せをクリックし、Bをクリックして文字を太字にします。


WordPress固定ページのHomeの編集Memberリッチカラム画像の次の段落の最後にカーソルを置きエンターキー

テキストの最後にカーソルを置いてエンターキーを押します。


WordPress固定ページのHomeの編集Memberリッチカラム画像の名前の次のテキスト

こちらにテキストを入力します。

残り5回、同様に作成します。


News

一旦画面左上の をクリックして管理画面に戻ります。

WordPress投稿のサンプルをゴミ箱へ移動

投稿一覧をクリックします。

Hello world!の見本の記事は要らないので、ゴミ箱へ移動をクリックして削除します。


WordPress投稿の新規追加

新規追加をクリックします。


アイキャッチ画像

WordPress投稿の新規追加test1のタイトルとテキストとアイキャッチ画像

記事の題名テキストを入力して、画面右側の設定投稿をクリックし、アイキャッチ画像アイキャッチ画像を設定とクリックします。


WordPress投稿の新規追加test1のタイトルとテキストとアイキャッチ画像を選択

画像を選びクリックし、アイキャッチ画像を設定をクリックします。

同様にtest2、test3の記事も作成します。


WordPress固定ページHome編集

管理画面に戻り、固定ページ一覧Home編集をクリックします。


フルワイド【SWELLブロック】

WordPress固定ページHomeフルワイド

ブロックのフルワイドをクリックします。


投稿リスト【SWELLブロック】

WordPress固定ページHomeフルワイドNews投稿リスト

Newsと入力し、 をクリック、投稿リストをクリックします。


WordPress固定ページHomeフルワイドNews投稿リストのレイアウト選択はテキスト型

画面右側の設定で、テキスト型を選びます。


SWELLボタン【SWELLブロック】

WordPress固定ページHomeフルワイドNews投稿リストの次のSWELLボタン

をクリックし、SWELLボタンをクリックします。


WordPress固定ページHomeフルワイドNews投稿リストの次のSWELLボタンurl

画面右側の設定でMOREボタンをクリックします。

Moreと入力し、その下https://○○○○/news/と入力します。


Recruit and Contact

WordPress固定ページHomeのNewsのスペーサー

画面左側ブロックで、スペーサーをクリックします。


WordPress固定ページHomeのNewsのスペーサー30px

画面右側の設定のスペーサー設定30にします。


リッチカラム【SWELLブロック】

WordPress固定ページHomeのRecruit and Contactのリッチカラム

画面左ブロックで、リッチカラムをクリックします。


WordPress固定ページHomeのRecruit and Contactのリッチカラムの+

をクリックします。


バナーリンク【SWELLブロック】

WordPress固定ページHomeのRecruit and Contactのリッチカラムのバナーリンク

画面左ブロックで、バナーリンクをクリックします。


WordPress固定ページHomeのRecruit and Contactのリッチカラムのバナーリンクのメディア

メディアライブラリをクリックします。


WordPress固定ページHomeのRecruit and Contactのリッチカラムのバナーリンクの画像

画像を選び、選択をクリックします。


WordPress固定ページHomeのRecruit and Contactのリッチカラムのバナーリンクのテキストとurl

テキストを入力します。

下にhttps://○○○○/recruit/と入力します。


WordPress固定ページHomeのRecruit and Contactのリッチカラムのバナーリンク

右側も同様にバナーリンクをクリックします。


WordPress固定ページHomeのRecruit and Contactのリッチカラムのバナーリンクのテキストとurl

同様にテキストを入力します。

https://○○○○/contact/と入力します。


以上でHome(トップページ)が出来上がりました。

初めての方や慣れない方は時間がかかり大変だと思いますが、
慣れてくるともっと短時間で作成できる様になります。
諦めず、よろしければ引き続き下層ページも作ってみてくださいね!

お疲れ様でした。

WordPress固定ページ About (事業内容・代表挨拶・会社概要・沿革など)

Aboutページを作っていきます。
Home(トップページ)が済んでますので、あと半分ぐらいです!
頑張って作っていきましょう!!

WordPress固定ページのAboutの編集

管理画面から固定ページ一覧をクリックし、About編集をクリックします。


事業内容

WordPress固定ページのAboutの事業内容カバー

をクリックし、すべてを表示をクリックし、画面左のブロックからカバーをクリックします。


WordPress固定ページのAboutのカバーの画像

画像をクリックし、選択をクリックします。


WordPress固定ページのAboutのカバーの画像全幅

画像を幅を全幅にします。

WordPress固定ページのAboutの+

をクリックします。


WordPress固定ページのAboutのスペーサー

スペーサーをクリックします。


WordPress固定ページのAboutのスペーサー200px

画面右側の設定で、スペーサー設定ピクセル値での高さを200にします。


WordPress固定ページのAboutのスペーサーの次の段落

をクリックし、段落をクリックします。


WordPress固定ページのAboutのスペーサーの次の段落テキスト中央寄せ

テキストを入力し、ツールバーで、テキスト中央寄せにします。


WordPress固定ページのAboutの画像焦点ピッカー

画面右側の設定で、焦点ピッカー左90上15にします。

スマホでもこれで画像がいい感じになります。

サイズのカバー画像の最小の高さ650pxにします。


WordPress固定ページのAboutの事業内容のスペーサー

をクリックし、スペーサーをクリックします。

100pxです。


代表挨拶 (フルワイド【SWELLブロック】)

WordPress固定ページのAboutの代表挨拶フルワイド

をクリックし、全て表示をクリックし、フルワイドをクリックします。


WordPress固定ページのAboutの代表挨拶フルワイド背景色

画像右側ブロックで、背景色 をクリックして#ffffffにします。


WordPress固定ページのAboutの代表挨拶メディアとテキスト

タイトルにご挨拶と入力します。

をクリックしすべて表示をクリックし、メディアとテキストをクリックします。


WordPress固定ページのAboutの代表挨拶メディアとテキストの画像選択

画像を選び、選択をクリックします。


WordPress固定ページのAboutの代表挨拶のテキストの次の+

右側コンテンツと書いてあるところをクリックしてカーソルを表示し、テキストを入力します。

をクリックします。


WordPress固定ページのAboutの代表挨拶メディアとテキストのサイン画像選択

画像を選び選択をクリックします。


WordPress固定ページのAboutの代表挨拶メディアとテキストのサイン画像右寄せ

で大きさを調節できます。

右寄せにします。


WordPress固定ページのAboutの代表挨拶メディアとテキストの次の+

をクリックします。


会社概要(フルワイド【SWELLブロック】)

WordPress固定ページのAboutの会社概要フルワイド

画面左側ブロックのフルワイドをクリックします。


WordPress固定ページのAboutの会社概要フルワイド+

見出し部分に会社概要と入力し、 をクリックします。


WordPress固定ページのAboutの会社概要テーブル

画面左側ブロックのテーブルをクリックします。


WordPress固定ページのAboutの会社概要テーブルカラム2行数6

カラム2 行数6に変更して表を作成をクリックします。


WordPress固定ページのAboutの会社概要テーブル背景色

表の中のテキストを入力します。

画面左下のフルワイドをクリックします。

画面右側ブロックの背景色を#ffffffに変更します。


以上でAboutページは出来上がりました。
Home(トップページ)と比べると楽勝でしたねw

お疲れ様でした。

WordPress固定ページ Recruit(求人)

あともう少しです〜
頑張ってくださいね!
では、Recruitのページを作っていきます。

WordPress固定ページのRecruitの段落

段落をクリックしてテキストを入力します。


ボーダー設定【SWELLブロック】

WordPress固定ページのRecruitの段落のボーダー

画面右側の設定のボーダー設定で、02をクリックします。


ステップ【SWELLブロック】

WordPress固定ページのRecruitのステップ

をクリックし、全て表示をクリックし、ステップを選びます。


WordPress固定ページのRecruitのステップのテキスト中央寄せ

ご応募と入力します。

その下のテキストも入力し、ブロックのメニューバーでテキスト中央寄せをクリックします。


WordPress固定ページのRecruitのステップのテキストの最後にカーソル

最後にカーソルを置いた状態で、エンターキーを押します。


SWELLボタン【SWELLブロック】

WordPress固定ページのRecruitのステップのSWELLボタン

をクリック、すべてを表示をクリックして、SWELLボタンをクリックします。


WordPress固定ページのRecruitのステップのSWELLボタンurl

ボタンの上にテキストを入力し、
その下にhttps://○○○○/contact/と入力します。


WordPress固定ページのRecruitのステップのstep2

step2も同様にテキストを入力します。

下の をクリックすると、次のstepが増えます。


WordPress固定ページのRecruitのステップのstep3

同様にstep5まで作成します。


以上でRecruitページは出来ました!
お疲れ様でした。
適度な休憩や水分補給をとってくださいね!

WordPress固定ページ Contact(お問い合わせ)

Contactフォーム(お問い合わせフォーム)は、WordPressのプラグインのSnow Monkey Forms を使用しています。
詳しい作成方法はこちらで解説しています。↓

WordPress固定ページ Privacy Policy(個人情報保護方針)

Privacy Policyの雛形はこちらで提供されていますので、参考になさってください。

wordPress外観メニュー

管理画面外観メニューをクリックします。


wordPress外観メニューのフッターメニュー

新しいメニューを作成しましょうをクリックします。

フッターメニューと入力します。

フッターチェックを入れます。

メニューを作成をクリックします。


wordPress外観メニューのフッターメニューのPrivacy Policy

画面左側、固定ページすべて表示をクリックします。

Privacy Policyチェックを入れます。

メニューを追加をクリックします。

画面右側、Privacy Policyが追加されました。

メニュー設定フッターチェックを入れます。

メニューを保存をクリックします。

文面は自身のサイトにあったものにしてください。


以上で、Privacy Policyも出来ました。
。。。ということは

できた! できた! ついにできました〜!!!

最後まで頑張って作っていただいて、本当にありがとうございます!!

制作してみて驚かれたと思いますが、
SWELLならノーコードーでも、これほどのクオリティーのサイトなら作れちゃうんです!!
凄いですよね!!

このサイトでよろしければ、このまま画像やテキストを入れ替えて使うのもよし!
もっとCSSを使ったりしてアレンジしまくって使うのもよし!
ご自由に使っていただいて結構ですので、よければ活用してください。

【パターン2ローカル環境】で作成された方はLocalからXserverにアップロード

今の状態ではまだローカル環境ですので、

作ったサイトを、サーバー上に公開する方法です。

詳しくは、こちらをご覧ください。↓

その他のプラグイン

・Snow Monkey Forms

・All in one WP Migration(パターン2で作成された方)

以上の二つは既に入れていますが、その他セキュリティーの為のお勧めプラグインなどは、
SWELLの公式サイトをご覧になり参考になさってください。

私は他にWP Multibyte PatchとAll In One WP Security、SEO SIMPLE PACK、XML Sitemap & Google News等々を入れています。

これで制作したサイトをサーバーにアップロードまで出来ましたね!
初めての方だと結構な時間がかかったと思いますが、それと同時に達成感と自信にも繋がった事と思います。
ご自分で自由にアレンジして、素敵なサイトを作成してみてくださいね!

本当にお疲れ様でした。

~本日も最後まで読んでいただき、ありがとうございました。〜

SWELLを使用したカスタマイズを色々解説しています。ご参考になれば幸いです。

あわせて読みたい
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次