WordPressテーマ”SWELL”でWebサイトを作る方法【初級編】〜ノーコードWEB制作〜

WordPressの基本設定

表示とタイムゾーンの設定

WordPress管理画面に入ると英語で表示されているので、日本語に変更します。
一緒に時間も日本時間に合わせましょう。

「Settings」→「Site Language」のセレクトボックスから「日本語」を選択。
「Timezone」のセレクトボックスから「UTC＋9」を選択して日本時間に合わせます。

noindex設定

noindex設定とは、検索エンジンに検索されないようにするための設定です。
作りかけのWebサイトや、非公開のデモサイトなどに設定しておくと、
検索エンジンに表示されないようになります。

左側メニューの「設定」「表示設定」を開きます。
検索エンジンでの表示のチェックボックスにチェックを入れて、
変更を保存します。

サイト基本情報

サイトのタイトルを設定

管理画面の左側メニューから、
「外観」「カスタマイズ」「WordPress設定」「サイト基本情報」
の順番で進んでいきます。

サイトのタイトルを「Graceful」にします。

キャッチフレーズの設定

キャッチフレーズに「心地よい空間で美を追求する」を入れ、
公開をクリックして保存しましょう。

ファビコンの設定

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

メディアライブラリから画像を選択します。

アイコンを設定できました。

基本カラーの変更

「外観」「カスタマイズ」「サイト全体設定」「基本カラー」
の順番にクリックして進んでいきます。

メインカラーの「色を選択」をクリックして、
右側のカラーコード入力欄に「#816d51」を入力します。

カラーはカラーパレットから選ぶこともできます。

ヘッダーバーを非表示にする

管理画面の左側メニューから、
「外観」「カスタマイズ」「ヘッダー」をクリックします。

左側メニューを下にスクロールしていくと、
「ヘッダーバー設定」が出てくるので「SNSアイコンリストを表示する」
をクリックしてチェックを外します。

「キャッチフレーズ設定」の「キャッチフレーズの表示位置」を表示しないにします。

「公開」をクリックして保存します。

サイドバーを非表示

今回のデザインではトップページにサイドバーは必要ないので非表示にします。

管理画面の左側メニューから、
「外観」「カスタマイズ」「サイドバー」をクリックします。

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

「公開」をクリックして保存します。

記事スライダーを非表示

この記事スライダーも非表示にしていきます。

管理画面の左側メニューから、
「外観」「カスタマイズ」「トップページ」をクリックします。

「記事スライダー」をクリックし、
「記事スライダーを設置するかどうか」の「設置しない」にチェックを入れます。

「公開」をクリックして保存します。

必要なページを固定ページで作成する

この記事で制作するページは、
「トップページ」「メニュー（料金）」「ギャラリー」「ブログ」の4ページです。
それぞれの固定ページを作成していきます。
まずはトップページから作りましょう。

左側メニューから「固定ページ」を選び「新規固定ページを追加」を選択します。

「タイトルを追加」に「トップページ」と入力します。

右側メニューの「URL」をクリックし、「パーマリンク」を「home」に書き換えます。

右側メニューにURLが表示されていない時は「概要」をクリックで表示されます。

右上の「公開」をクリックして保存します。

左上にあるWordPressのアイコンを選択して固定ページの一覧に戻ると、
トップページが追加されています。

以上の流れで、他の固定ページも作成します。

メニュー ＝ menu
ギャラリー ＝ gallery
ブログ ＝ blog

上記を参考に「メニュー」「ギャラリー」「ブログ」の固定ページを作ってみましょう。

不要な固定ページは消しておきましょう。
マウスを合わせるとタイトル下に「ゴミ箱へ移動」が表示されるので、
クリックで一覧から消すことができます。

ホームページ設定

作成した固定ページ「トップページ」が、
トップに表示されるように設定していきます。

管理画面の左側メニューから「外観」、「カスタマイズ」をクリックします。

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

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

「固定ページ」にチェックをして、
ホームページと投稿ページのセレクトボックスからそれぞれ
「トップページ」、「ブログ」を選択します。

公開をクリックして保存します。

グローバルナビゲーションの設定

左側メニューの「外観」からメニューをクリックします。

メニュー名は「ヘッダーメニュー」とし
「グローバルナビ」にチェックを入れ「メニューを作成」をクリックします。

「メニュー項目を追加」の固定ページのタブを開き、
「すべて表示」をクリック。
「ブログ」「ギャラリー」「メニュー」をチェックし、
「メニューに追加」をクリックします。

「メニュー構造」に追加した固定ページを「メニュー」「ギャラリー」「ブログ」
の順番に並び替えます。

入れ替えたい固定ページをドラッグしたまま移動で順番の入れ替えができます。

つづいて、「アクセス」「コンタクト」セクションへの
ページ内リンクを作成します。

管理画面から「外観」「メニュー」を開きます。
「メニュー項目を追加」の「カスタムリンク」のタブを開きましょう。

URLには、WebサイトのURLの末尾に「#access」を付けて
記入します。
リンク文字列にはグローバルナビゲーションに表示される
名前を記入します。
「メニューに追加」をクリックします。

アクセスが追加されました。

contactセクションの内部リンクを作ります。
URLには、WebサイトのURLの末尾に「#contact」を付けて
記入します。
「メニューに追加」をクリックします。

アクセス、コンタクトが追加されました。
「メニューを保存」をクリックしましょう。

ヘッダーにナビゲーションが表示されています。
グローバルナビゲーションの設定は完了です。

カテゴリーを追加

「投稿」「カテゴリー」をクリックします。

「名前」「スラッグ」にnewsと入力します。

「新規カテゴリーを追加」をクリックします。

続いてcolumnと入力し「新規カテゴリーを追加」をクリックします。

newsとcolumnが追加されました。

新規投稿の追加

ブログページ用に記事をいくつか作成しておきましょう。

「投稿」「新規投稿を追加」をクリックします。

タイトルは「ホームページをリニューアルしました」。
記事の内容にテキストを入力します。

テキストはこちらから流用してください。

右側メニューから「カテゴリー」を開くと、
さっき作成したカテゴリーが追加されています。
「news」をクリックしてチェックを入れます。

「アイキャッチ画像を設定」をクリックします。

ファイルをドロップするかファイルを選択して、
アイキャッチにする画像をアップロードします。

画像が選択されていることを確認して右下の「アイキャッチ画像を設定」をクリックします。

右上の「公開」をクリックして記事を公開します。

「新規投稿を追加」からあと2、3記事作成しておきましょう。

もともと入っていた記事は不要なので「ゴミ箱へ移動」します。

不要テーマの削除

サイトのセキュリティ向上のため、不要なテーマは削除しておきましょう。
「SWELL」「SWELL CHILD」とデフォルトテーマの最新のもの（ここではTwenty Twenty-Four）以外のテーマは削除しておきます。

削除したいテーマをクリックします。

ページ下部の「削除」をクリックします。

このような形になっていれば、最小の構成になります。

プラグインのインストールと削除

アップロードした画像の圧縮をしてくれるプラグインと、
日本語の文字化けを防いでくれたりなど、
日本語環境の強化をしてくれるプラグインを入れていきます。

管理画面の左側メニューから「プラグイン」を開きます。

デフォルトで入っている３つのプラグインは、
今回は不要なので「削除」で消しましょう。

「新規プラグインを追加」を開きます。
検索窓に「WP Multibyte Patch」を入力します。

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

つぎに検索窓に「Image Optimizer」を入力して、
有効化までしましょう。

プラグインの一覧に追加されました。

EWWW Image Optimizerの設定

EWWW Image Optimizerはアップロードした画像を圧縮して、
画像データの容量を軽くしてくれます。
Webページの表示速度に関わるところなので、
初期設定をしておきます。

「設定」の「EWWW Image Optimize」を開き、
「サイトの高速化」と「今は無料モードのままにする」にチェックを入れ、
「次へ」をクリックします。

「幅の上限」と「高さの上限」をそれぞれ「０」にして、
「設定を保存」します。

「完了」をクリックして、初期設定は終わりです。

Conceptセクションを作成

「＋」マークをクリックするとブロックが出てきます。

「すべて表示」をクリックすると左側にブロックの一覧が表示されます。
今回は「フルワイド」を選択します。

検索窓を使ってブロックを検索することもできるので、
慣れてきたら使ってみましょう。

「＋」をクリックし「メディアとテキスト」を選択します。

アップロードまたはメディアライブラリから画像を選択します。

表示させる画像を選択します。

左側半分に画像を配置することができました。

つぎに右側の「＋」をクリックし「見出し」を選択します。

「Concept」と入力します。
このままだとデモサイトのデザインと違うので変更していきます。

右側の一覧の「ブロック」をクリックし、
「円のアイコン（スタイル）」をクリックします。
スタイルの「セクション用」をクリックすると、
シンプルなデザインに変更できました。

「テキスト左寄せ」を選択しテキストを左揃えにします。

見出しの下にブロックの「段落」を追加しテキストを入れます。

見出し（concept）の下にブロックをうまく追加できないときは、
「3本線」をクリックすると階層が表示されるので、
見出し（concept）の「3点リーダー」をクリックし「後に追加」をクリックします。

背景色がグレーになっているので白に変更していきます。
「フルワイド」を選択した状態で右側メニューの「ブロック」をクリック、
下にスクロールしていくと「背景色」があるので
クリックするとカラーパレットが表示されます。
カラーコードにFFFFFFを入力すると、
背景色を白にすることができます。

ここで一度トップページがどのように表示されるか確認をしましょう。

「更新」をクリックした後に赤枠のアイコンをクリックすると、別タブでトップページを表示することができます。

お疲れ様です！
Conceptセクションはこれで完成です！

Hair Menuセクションの作成

つづいて次のセクションを作っていきます。
Conceptセクションと配置が逆にしてリズムを作ります。
複製して作成していきます。

3点リーダーをクリックし「複製」します。

「置換」をクリックして
メディアライブラリから画像を選択します。

「見出し」にHair Menuと入力します。
「段落」にテキストを入力します。

段落の下に新しいブロック「SWELL ボタン」を追加します。

ボタンのテキストに「MORE」と入力します。
右側メニューの「スタイル」で「MOREボタン」を選択します。
ボタンの外観はこれでOKです。

ボタンをクリックしたときのリンク先を設定します。
「リンク先」をクリックします。

URLを入力し決定キーを押してリンク先が設定されました。

リンク先のURLが分からないときは、
固定ページの編集画面から確認できます。
ここでは固定ページ「メニュー」のURLを知りたいので、
「固定ページ一覧」から「メニュー」の「編集」をクリックし、
URLをコピーしましょう。

「メディアを右に表示」で左右の表示を入れ替えます。

Hair Menuセクションの「フルワイド」ブロックを選択し
背景色を「#FAF9F8」に変更します。

Hair Menuセクションの完成です。

Galleryセクションの作成

ここでは新しいブロックを使っていきます。

前のセクションと同様に「フルワイド」を追加し「見出し」にGalleryと入力します。

「見出し」の下に「リッチカラム」を追加します。

右側メニューの設定からPC表示のときの列数を3に変更します。

タブレット、スマートフォンそれぞれの列数もここで変更できます。

各カラムの「＋」から「画像」を追加し配置していきます。

カラムを複製することで下段に追加することができます。

置換をクリックし画像を変更します。

「リッチカラム」の下に「SWELL ボタン」を追加します。
テキストは「MORE」と入力、スタイルは「MOREボタン」、リンク先は固定ページ「ギャラリー」のURLを設定します。

「フルワイド」を選択した状態で右側メニューの「背景画像の設定」を開きます。
「メディアから選択」をクリックし画像を設置します。

デフォルトで「オーバレイの不透明度」が50に設定されているので「0」にします。
「背景効果」の「固定背景」にチェックを入れるとスクロールしたときに背景は固定された状態になります。

これでGalleryセクションの完成です。

Blogセクションの作成

次は投稿記事の一部を表示させていきます。
今回は新着記事と人気記事をタブの切り替えで表示できるようにしていきます。

「見出し」を追加しタイトルは「Blog」とします。

「タブ」ブロックを追加します。

タブ1には「new」、タブ2には「pickup」を入力します。

newのタブを選択した状態で「投稿リスト」のブロックを追加します。

右側メニューの「表示設定」を開き、「表示する投稿数」を「3」、「レイアウトを選択」は「カード型」、「投稿の表示順序」を新着順にします。

pickupのタブを選択し「投稿リスト」を追加します。
こちらは「人気順」にチェックを入れます。

記事が見つかりませんでした。と表示がありますが、投稿記事を作ったばかりで閲覧されていないためこのような表示になります。

タブのスタイルを変更したいので、「タブ」を選択し右側メニューの「スタイル」を「下線」にします。

「SWELL ボタン」ブロックを追加します。
テキストは「MORE」、スタイルは「MOREボタン」、リンク先は固定ページ「ブログ」のURLを設定します。

Blogセクションもこれで完成です。

Accessセクションの作成

「フルワイド」を追加し「背景色」をFAF9F8にします。
「見出し」にはAccessを入れましょう。

「見出し」を選択した状態で、高度な設定タブを開き
「HTMLアンカー」にaccessと入力します。

グローバルバビゲーションの設定で、
カスタムリンクのURLに「#access]を設定しています。
ページのどの場所を閲覧していても、
HTMLアンカーにaccessを設定した場所に飛ぶことができます。

「カラム（50/50）」を追加し、左のカラムにはgoogleマップを埋め込みます。

Googleマップを埋め込む方法を解説します。
まずは、埋め込みたい場所をGoogleマップで表示します。
「共有」をクリックします。

「地図を埋め込む」をクリックして、画像サイズを小、中、大、カスタムの中から選びます。
今回は「小」にしています。

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

左のカラムに「カスタムHTML」を追加します。

コピーしたHTMLを貼り付けます。

「プレビュー」をクリックすると、地図が表示されました。
これでGoogleマップの埋め込みができました。

つづいて右のカラムに「段落」でテキスト入れます。

テキストは「Bのアイコン」で太くできます。
「SWELL アイコン」から「テキスト色」でテキストの色を変更できます。

今回は「カラーコード」に「#816D51」を指定します。

「段落」内での改行は「shift＋return（決定キー）」でできます。
そのままreturn（決定キー）を押すと、新しく「段落」が追加されます。

Contactセクションの作成

トップページ最後のセクションになります。

「フルワイド」を追加して、「見出し」にContact、「段落」にテキストを入力します。
「背景色」は「#FAF9F8」です。

「上下のPADDING量」は「２０」にします。

「見出し」を選択した状態で、
「HTMLアンカー」にcontactを設定します。

「カラム（50/50）」を追加してそれぞれに「SWELL ボタン」を追加します。
ボタンのスタイルは「MOREボタン」です。

「左のカラム」のリンク先は電話番号にします。
リンク先を電話番号にするには番号の前に「tel:」をつけて入力します。

「右のカラム」のリンク先はメールアドレスにします。
リンク先をメールアドレスにするには番号の前に「mailto:」をつけて入力します。

まとめ

初級編はここで終了となります。

コードを書くこともなく、
ブロックエディタだけで美容室ヘアサロンのサイトを作ることができました！

ブロックの組み合わせと画像の入れ替えで
雰囲気の違うサイトを作ることもできるので、ぜひ挑戦してみてくださいね。

ここまで完了できたら、
アウトプットを兼ねてぜひX(旧Twitter)で とし @ToshiTraveler をメンションしてくださいね。

しっかりアウトプットしてくれた方は、僕のフォロワー数 1万人超えのアカウントで拡散します！

アウトプット事例