【初心者】【SWELL】WordPressにインストールからホームページ（企業 コーポレート）を低コストで自作する方法をデモサイトと図解で徹底解説

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

画像をクリックします。

選択をクリックします。

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

公開をクリックします。

 をクリックします。

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

固定ページに●

ホームページはHome

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

公開をクリックします。

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

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

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

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

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

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

公開をクリックします。

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

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

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

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

公開をクリックします。

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

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

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

公開をクリックします。

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

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

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

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

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

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

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

ヘッダーのレイアウト（SP）はロゴ：左/メニュー：右を選びます。

ヘッダーの背景を透明にするかどうかはする（文字色：黒）を選びます。

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

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

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

公開をクリックします。

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

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

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

公開をクリックします。

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

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

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

公開をクリックします。

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

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

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

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

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

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

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

公開をクリックします。

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

再び をクリックします。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

公開をクリックします。

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

フッター（PC）1をクリックします。

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

画像をクリックします。

画像を選びます。

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

完了をクリックします。

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

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

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

公開をクリックします。

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

フッター（PC）２をクリックします。

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

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

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

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

共有をクリックします。

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

小を選択します。

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

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

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

公開をクリックします。

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

フッター（PC）３をクリックします。

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

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

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

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

公開をクリックします。

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

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

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

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

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

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

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

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

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

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

#ffffff に変更します。

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

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

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

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

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

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

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

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

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

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

#f7f7f7にします。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

今回６なので、３、２、１にしました。

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

 をクリックします。

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

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

段落をクリックします。

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

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

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

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

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

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

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

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

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

同様にtest２、test３の記事も作成します。

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

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

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

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

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

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

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

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

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

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

 をクリックします。

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

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

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

テキストを入力します。

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

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

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

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

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

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

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

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

をクリックします。

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

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

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

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

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

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

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

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

100pxです。

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

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

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

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

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

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

をクリックします。

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

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

右寄せにします。

をクリックします。

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

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

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

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

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

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

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

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

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

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

ご応募と入力します。

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

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

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

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

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

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

同様にstep５まで作成します。

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

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

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

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

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

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

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

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

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

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

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

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