WordPressの有料テーマの中でも人気の高いSWELL 。
サイト制作で使用している方も多いのではないでしょうか。
簡単に綺麗なサイトが制作できますが、
「いつも同じようなサイトになってしまう…」
という悩みを持っているのではないでしょうか？
この記事では、
少し凝ったデザインにしたい！CSSを使ってこだわりたい！
という方に向けて、サイトを作っていくところをロードマップ形式で解説します！
【初級編】の記事もあるので、
まだ読んでないという方は初級編から読んでみてください。
まだSWELL のインストール、購入が完了していない場合は、
下記の記事を参考に購入してください。
＼ SWELL公式サイト ／
制作するSWELLデモサイト(中級編)の確認
この記事を最後まで読み進めると
下記のようなWebサイトが完成します。
デモサイトはこちらから確認できます。
制作テキストの流用にも活用してください。
WEBサイトを制作するための事前準備
SWELLを使ってWebサイトを作るために必要なものは以下になります。
- サーバーの準備
- サブドメインの設定とWordPressのインストール
- SWELLテーマの準備
- プラグインのインストールと削除
- サイト内で使用する画像の準備
- 画像のアップロード
サーバーの準備
サイト制作をする前にレンタルサーバーが必要、という方は下記の記事を参考にしてください。
サブドメインの設定とWordPressのインストール
WordPressを構築する方法としては大きく2つあります。
レンタルサーバーを契約してサーバー上で構築する方法と、
ローカル環境（お持ちのPC内）で構築する方法です。
今回は、レンタルサーバーを契約してサーバー上で構築する方法でサイト制作を行っていきます。
レンタルサーバーを契約して制作を進めていくには、
サブドメインの設定とWordPressのインストールが必要になってきます。
サブドメインの設定とWordPressのインストールについては以下の記事を参考に準備を進めてください。
SWELLテーマの準備
SWELLを購入して使用するには、以下のステップを踏みます。
- 公式サイトで購入する
- 親テーマと子テーマをダウンロードする
- 使用するサイトにWordPressをインストール
- ログインしてサイトにSWELLをアップロード
＼ SWELL公式サイト ／
SWELLについて詳しく知りたい方は、下記の記事を参考にしてください。
SWELL公式サイトにアクセスして、
「DOWNLOAD」の文字をクリックすると購入ページに飛びます。
【「利用規約」に同意します。】にチェックを入れ【SWELLを購入する】ボタンを押したら、
支払い画面に移ります。
支払い方法はクレジットカード( VISA / Master / AMEX / JCB )に対応してます。
いずれかを選んで決済に進んでください。
購入を完了したら、SWELLダウンロードページに飛べるので
【SWELLをダウンロードする】をクリックしてください。
これで親テーマをダウンロード出来たので、続いて子テーマもダウンロードしましょう。
親テーマ・子テーマ共にzipファイルのままにしておいてください（解凍しない）。
子テーマがないと、テーマを更新した際に作ったデザインが全て消えてしまいます。
逆に子テーマがあると親テーマをいくら更新しても
子テーマにデザインが残っている状態なので、デザインが消えません。
必ず子テーマもダウンロードするようにしてください。
使用するサイトにWordPressをインストール
使用するサイトにWordPressをインストールしましょう。
インストールは契約したサーバーで、
WordPressをインストールする項目があるのでそちらを利用します。
わからない場合は、
「サーバー名 WordPress インストール」で検索すると方法がヒットする
ので調べてみましょう。
WordPressをインストール出来たら、
ログイン画面に入りIDとパスワードを入力してログインします。
WordPress管理画面に入ったら、
「外観」→「テーマ」の順番に押して、
「新規追加」→「テーマのアップロード」でダウンロードしたSWELLのテーマを親テーマ、
子テーマの順にサイトへインストールします。
子テーマを有効化したら、SWELLの購入～使用にかけては終了です。
ここからは上で紹介したSWELLの機能を参考に自由にカスタマイズしてください。
SWELL設定の「アクティベート」でユーザー認証をしておきましょう。
ユーザー認証をすると、SWELLテーマが更新された際に更新できるようになります。
逆にアクティベートを済ませておかないと更新されても更新できない状況になってしまいますので
ユーザー認証はできるだけ早めに済ませておくようにしましょう。
＼ SWELL公式サイト ／
プラグインのインストールと削除
それでは、WordPressに「機能を追加・拡張するプログラム（ツール）」である
プラグインをインストール・有効化をしていきます。
まずはWordPressサイト作成では必須となる、以下のプラグインを導入します。
- 日本語環境の強化・文字化け防止
- 画像圧縮・軽量化
管理画面の左側メニューから「プラグイン」を開きます。
デフォルトで入っているプラグイン（サーバー環境により変わります）は、
今回は不要なので「削除」で消しましょう。
【プラグインを導入するときの注意点】
・プラグインの導入は必要最低限にしておく
→ アップデートや管理が行き届かなかったり、表示速度にも影響
プラグイン同士の相性が悪くて、他のプラグインが動かなくなる場合も
・WordPressテーマとの相性を確認しておく
→ テーマによっては、プラグインの機能と重複している場合
テーマとの相性が悪くてうまく動作しない場合も
・機能が重複しているプラグイン同士は使用を控える
→ ログインセキュリティ系、画像最適化系、SEO系、フォーム系、キャッシュ系など
・長期間更新されていないプラグインは使用を控える
→ システム上のバグや、セキュリティ対策が十分に行われていない可能性がある
サーバーのPHPのverとの互換性がないためエラーが出る可能性がある
・不要なプラグインは無効化ではなく削除
→ 未使用のプラグインにセキュリティ上の問題があった場合、攻撃対象となる
・定期的にアップデートは行っておく
→ サイト表示やセキュリティ、プラグイン動作に影響が出る場合も
更新作業前には、バックアップを事前に行なってから作業を行ないましょう
WP Multibyte Patch を導入する
「プラグイン」→「プラグインを追加」をクリックする。
検索窓に「WP Multibyte Patch」と入力します。
今すぐインストールをクリックし、有効化します。
EWWW Image Optimizer を導入する
【EWWW Image Optimizer の機能】
・アップロードした画像を圧縮し、画像データの容量を軽くしてくれます。
・画像をリサイズし、適切なサイズの画像を準備できます。
・画像のファイル形式を、次世代フォーマットのWebP（.webp）に変換できます。
→ 画質を落とさずに、容量を削減することができる
・メインビューに表示されない画像を後から読み込み（遅延読み込み）できます。
→ スクロールしないと表示されない画像の読み込みを遅らせて、表示を速くする
つぎに検索窓に「Image Optimizer」と入力して、有効化までしましょう。
プラグインの一覧に追加されました。
それでは、EWWW Image Optimizer の設定を行なっていきます。
Webページの表示速度に関わるところなので、初期設定をしていきましょう。
「設定」→「EWWW Image Optimize」をクリックします。
「サイトの高速化」と「今は無料モードのままにする」にチェックを入れ、
「次へ」をクリックします。
- 「遅延読み込み」に入っているチェックを外す
- 「ローカル」を「無効」に変更する
・遅延読み込み機能は、SWELLテーマ自体に導入されているため不要です。
→ この機能については、他のテーマやプラグインについても
画像が表示されないなどの不具合が生じることがあります。
・画像のバックアップについては、有料版ではクラウドに保存することができます。
→ 無料版ではローカル保存できますが、サーバー内に保存されるだけのため不要です。
上記の設定ができたら、「設定を保存」をクリックします。
「完了」をクリックして、初期設定は終わりです。
管理画面が開くので引き続き、細かい設定を行なっていきます。
まず最初に「Max Image Dimensions（画像のリサイズ）」の設定をします。
こちらは、設定した値よりも大きい画像がアップロードされた場合に
自動でリサイズする機能ですが、サーバー負荷が増えるため
幅の上限と高さの上限を「０」に変更し、「変更を保存」をクリックします。
リサイズ設定は、WordPressの「設定→メディア」からも設定することができます。
次に、WebP変換の設定を行なっていきます。
「WebP Naming Mode」の設定は
画像をWebP形式に変換した際に、画像のファイル名をどのように変換するかの設定です。
ここでは、「Replace（.webp）」に変更しておきます。
先ほど初期設定を行なった際に「WebP設定」を有効にしましたが、
管理画面の「WebPの配信方法」を確認すると「赤いのPNG」のままになっているかと思います。
※「緑のWEBP」になっている方は設定不要です。
このままでは画像がWebP変換されず
軽量化されていない状態のままなので、設定を行なっていきます。
WebPの配信方法の設定は、「JS WebP リライト」にチェックを入れて
「変更を保存」をクリックしておきます。
【JS WebPリライトとは？】
この設定は、サーバーの設定がWebPに対応していない場合に
JavaScriptを使ってユーザーのブラウザ側で、WebPを表示させるための機能です。
通常は、サーバー側でWebP形式の画像が対応しているかを判断して
WebP画像か、元の形式の画像を表示するようにしていますが
JS WebPリライトを有効にすると、サーバーの設定に左右されずにWebP化対応をします。
なお、JavaScriptが無効になっている環境では
「Picture WebPリライト」を有効にします。
サイト内で使用する画像の準備
下記のリンクをクリックして画像をダウンロードしてください。
ダウンロードはこちらから
画像のアップロード
管理画面の左側メニューにある「メディア」、
「新しいメディアファイルを追加」を開きます。
「ファイルを選択」からダウンロードした画像を開く、
または、画像をドラッグ&ドロップで追加します。
メディアライブラリに追加した画像を選択して、
「代替テキスト」にテキストを入力します。
画像の「代替テキスト」は下記を参照してください。
top-about.jpg ＝ 会議をする５人の社員
top-service.jpg ＝ コミュニケーションを取る３人
company-1.png ＝ テクノロジーパートナーズ
company-2.png ＝ クリエイティブマインド
company-3.png ＝ テックエッジ
company-4.png ＝ ネクサステックス
company-5.png ＝ デジタルフューチャーズ
company-6.png ＝ イノベーションワン
service-1.png ＝ 言語の壁を乗り越えるための翻訳サービスを提供しています
service-2.png ＝ 会議やイベントなどでの通訳サービスを提供しています
service-3.png ＝ オンラインでのビデオ会議サービスを提供しています
support.jpg ＝ カスタマーセンターで働く３人
recruit.jpg ＝ 笑顔で並ぶ男性１人と女性２人
WEBサイトを制作するための初期設定
それでは早速、Webサイトを制作していくための設定をしていきましょう
基本設定
タイムゾーンの設定
WordPress管理画面に入ると英語で表示されているので、日本語に変更します。
一緒に時間も日本時間に合わせましょう。
「Settings」→「Site Language」のセレクトボックスから「日本語」を選択。
「Timezone」のセレクトボックスから「UTC＋9」を選択して日本時間に合わせます。
noindex設定
左側メニューの「設定」「表示設定」を開きます。
検索エンジンでの表示のチェックボックスにチェックを入れて、
変更を保存します。
サイト基本情報
サイトのタイトルを設定
管理画面の左側メニューから、
「外観」「カスタマイズ」「WordPress設定」「サイト基本情報」
の順番で進んでいきます。
サイトのタイトルを「Technect」にします。
キャッチフレーズの設定
キャッチフレーズに「Connect the World, Bridge the Cultures.」を入れ、
公開をクリックして保存しましょう。
ファビコンの設定
「サイトアイコンを選択」をクリックします。
メディアライブラリから画像を選択して、
「公開」をして変更を保存します。
基本カラーの変更
「外観」「カスタマイズ」「サイト全体設定」「基本カラー」
の順番にクリックして進んでいきます。
メインカラーの「色を選択」をクリックして、
右側のカラーコード入力欄に「#3b92df」を入力します。
ヘッダーバーを非表示にする
管理画面の左側メニューから、
「外観」「カスタマイズ」「ヘッダー」をクリックします。
左側メニューを下にスクロールしていくと、
「ヘッダーバー設定」が出てくるので「SNSアイコンリストを表示する」
をクリックしてチェックを外します。
「キャッチフレーズ設定」の「キャッチフレーズの表示位置」を表示しないにします。
「公開」をクリックして保存します。
サイドバーを非表示
管理画面の左側メニューから、
「外観」「カスタマイズ」「サイドバー」をクリックします。
「トップページにサイドバーを表示する」「固定ページにサイドバーを表示する」
のチェックを外します。
「公開」をクリックして保存します。
記事スライダーを非表示
この記事スライダーも非表示にしていきます。
管理画面の左側メニューから、
「外観」「カスタマイズ」「トップページ」をクリックします。
「記事スライダー」をクリックし、
「記事スライダーを設置するかどうか」の「設置しない」にチェックを入れます。
「公開」をクリックして保存します。
必要なページを固定ページで作成する
この記事で制作するページは、
「トップページ」「私たちについて」「事業紹介」「採用情報」「お知らせ」「お問い合わせ」の６ページです。
それぞれの固定ページを作成していきます。
まずはトップページから作りましょう。
左側メニューから「固定ページ」を選び「新規固定ページを追加」を選択します。
「タイトルを追加」に「トップページ」と入力します。
右側メニューの「URL」をクリックし、「パーマリンク」を「home」に書き換えます。
右上の「公開」をクリックして保存します。
以上の流れで、他の固定ページも作成します。
トップページ ＝ home
私たちについて ＝ about
事業紹介 ＝ service
採用情報 ＝ recruit
お知らせ ＝ news
お問い合わせ ＝ contact
不要な固定ページは消しておきましょう。
ホームページ設定
作成した固定ページ「トップページ」が、
トップに表示されるように設定していきます。
管理画面の左側メニューから「外観」、「カスタマイズ」をクリックします。
「WordPress設定」をクリックします。
「ホームページ設定」をクリックします。
「固定ページ」にチェックをして、
ホームページと投稿ページのセレクトボックスからそれぞれ
「トップページ」、「お知らせ」を選択します。
公開をクリックして保存します。
グローバルナビゲーションの設定
左側メニューの「外観」からメニューをクリックします。
メニュー名は「ヘッダーメニュー」とし
「グローバルナビ」にチェックを入れ「メニューを作成」をクリックします。
「メニュー項目を追加」の固定ページのタブを開き、
「すべて表示」をクリック。
トップページ以外にチェックを入れ、
「メニューに追加」をクリックします。
「メニュー構造」に追加した固定ページを、
画像と同じ順番に並び替えます。
「メニューを保存」をクリックして、
グローバルナビゲーションの設定は完了です。
カテゴリーを追加
「投稿」「カテゴリー」をクリックします。
「名前」にテクノロジー、
「スラッグ」にtechnologyと入力します。
「新規カテゴリーを追加」をクリックします。
上記を繰り返し、「ニュース」と「学び」の
カテゴリーも追加しましょう。
テクノロジー ＝ technology
ニュース ＝ news
学び ＝ learning
カテゴリーの初期設定を変更する
「設定」→「投稿設定」をクリックします。
先ほど「テクノロジー」「ニュース」「学び」の３つのカテゴリーを設定しました。
そのためWordPressが、デフォルトで設定している「未分類」カテゴリーが不要となります。
それでは、「未分類」カテゴリーを削除しておきましょう。
投稿用カテゴリーの初期設定を「ニュース」に変更して、「変更を保存」をクリックします。
「投稿」→「カテゴリー」をクリックし、「Uncategorized」の削除をクリックします。
アラートが表示されたら「OK」をクリックすると、「未分類」のカテゴリーが削除されます。
新規投稿の追加
お知らせページ用に、記事を作成していきます。
まず、最初から入っていた記事は不要なので「ゴミ箱へ移動」します。
「投稿」「新規投稿を追加」をクリックします。
タイトルは「ホームページをリニューアルしました」。
記事の内容にテキストを入力します。
テキストはこちらから流用してください。
右側メニューから「カテゴリー」を開くと、
さっき作成したカテゴリーが追加されています。
「ニュース」をクリックしてチェックを入れます。
「アイキャッチ画像を設定」をクリックします。
メディアライブラリからblog-1.jpgを選択して、
「アイキャッチ画像を設定」をクリックします。
右上の「公開」をクリックして記事を公開します。
「新規投稿を追加」からあと２つ記事を作成しておきましょう。
不要テーマの削除
サイトのセキュリティ向上のため、不要なテーマは削除しておきましょう。
「SWELL」「SWELL CHILD」とデフォルトテーマの最新のもの（ここではTwenty Twenty-Four）以外のテーマは削除しておきます。
削除したいテーマをクリックします。
ページ下部の「削除」をクリックします。
このような形になっていれば、最小の構成になります。
トップページの作成
準備ができたところで、さっそくトップページを作っていきましょう！
メインビジュアルの設定
まずはメインビジュアルの設定です。
左側メニューから、「外観」→「カスタマイズ」をクリックして
「トップページ」→「メインビジュアル」とクリックしていきます。
まずは、表示設定を行なっていきます。
メインビジュアルの高さ設定は「ウインドウサイズにフィットさせる」、
フィルター処理は「なし」、オーバーレイカラーの不透明度は「0」にします。
次に、各スライドの設定を行なっていきます。
スライド画像[1]（PC）の「画像を選択」をクリックして、画像（mv.jpg）を設定します。
スライド画像[1]（SP）には、同様の手順で
スマートフォン用の画像（mv-sp.jpg）も設定しておきます。
PC用の画像にはパソコン画面幅に合った、横長の画像を設定し
SP用の画像にはスマホ画面幅に合った、縦長の画像を設定すると
画像が見切れずに、必要な部分が表示されやすいです。
次に、メインビュー上で表示されるテキストを設定します。
メインテキスト[1] に
「グローバルなコミュニケーションの未来を創る。」と入力します。
テキストの位置 [1] を「左」にして
テキストカラー[1] は、色を選択をクリックして「#000000」に設定します。
これでメインビューの設定は終わりですが、SWELLでは複数の画像を設定するだけでスライダー表示させることができるので設定をしていきましょう。
先ほどと同様の手順でスライド画像[2]（PC）には、画像（support.jpg）を設定し
スライド画像[2]（SP）には、画像（mv2-sp.jpg）も設定しておきます。
スライド画像[3]（PC）には、画像（mv3-pc.jpg）を設定し
スライド画像[3]（SP）には、画像（mv3-sp.jpg）も設定しておきます。
最後に、画像スライダー設定を以下のように行なっていきます。
- スライドの切り替えアニメーション 「フェード」
- スライドの表示中アニメーション 「なし」
- スライドの切り替わり速度 「1500」
- スライドが切り替わる間隔 「5000」
- スライドの表示枚数、表示枚数（SP） 「1」
- ナビゲーションの表示設定 「ページネーションを表示する」にチェック
- テキストの固定表示設定 「スライド1枚目のテキストを常に表示する」にチェック
すべての設定が完了したら、「公開」をクリックして保存しましょう。
aboutセクションの作成
つづいて、トップページを編集してaboutセクションを作成していきましょう。
まず「フルワイド」を追加し「見出し（H2）」にAbout usを入力します。
その下に「メディアとテキスト」を追加しましょう。
メディアライブラリから画像（top-about.jpg）を選択します。
「見出し（H3）」、「段落」、「SWELL ボタン」を追加します。
テキストはこちらから流用してください。
「SWELL ボタン」のスタイルはMOREボタンに、
リンクは固定ページ「私たちについて」のURLに設定します。
「見出し（H3）」の文字色を変えます。
テキストを全て選択した状態で「SWELL アイコン」をクリック、
「テキスト色」でカラーコードに「#3B92DF」を入力します。
「メディアとテキスト」を選択し、「メディアを右に表示」をクリックして
画像とテキストの位置を入れ替えます。
「フルワイド」を選択した状態で右側メニュの「コンテンツサイズ」を開きます。
コンテンツの横幅を「サイト幅」、上下のPADDING量（PC）を「80」に設定します。
背景画像の設定は「メディアから選択」をクリックし、「top-about-bg.png」を設定して、
「パララックス効果をつける」にチェックを入れます。
デフォルトでオーバーレイの不透明度が50になっているので「0」にします。
「見出し」と「メディアとテキスト」の間に余白を入れたいので、
「ブロック下の余白量」アイコンをクリックし４emを選択します。
aboutセクションの完成です！
serviceセクションの作成
serviceセクションはaboutセクションを反対にした構成になっています。
一からブロックを追加するより複製して作成していきましょう。
aboutセクションの「フルワイド」を選択し「複製」をクリックすると、
下に複製されたブロックが表示されます。
背景画像の設定は、serviceセクション用の「top-service-bg.png」に変更します。
次に「メディアとテキスト」を選択し、「メディアを左に表示」をクリックして
画像とテキストの位置を入れ替えます。
「見出し」をServiceに変更し、画像（top-service.jpg）とテキストを変更します。
テキストはこちらから流用してください。
ボタンのリンク先は「事業紹介」の固定ページURLに設定しましょう。
recruitセクションの作成
つぎはrecruitセクションを作っていきます。
「フルワイド」を追加して「見出し」に「Recruit」を入力します。
背景画像（top-recruit.jpg）を設定し「オーバーレイの不透明度」を「０」、
「背景効果」の「パララックス効果をつける」にチェックを入れます。
「カラム」を追加し左のカラムには画像（top-contact-icon.png）、
右のカラムには「段落」、「SWELL ボタン」を追加します。
右カラムに追加した「段落」のテキストは、
「テキスト中央寄せ」をクリックして中央揃えにします。
「SWELL ボタン」のリンク先は、「採用情報」の固定ページURLに設定しましょう。
「カラム」の垂直配置を中央揃えにします。
recruitセクションも完成しました！
newsセクションの作成
まずは「フルワイド」を追加し「カラム（33/66）」を追加します。
左のカラムに「見出し」を追加し「News」と記入しましょう。
右のカラムには「最新の投稿」を追加します。
「投稿メタ」タブを開き「投稿日を表示」にチェック。
「並び替えと絞り込み」のタブから「項目数」を「３」に変更します。
「SWELL ボタン」のリンク先は、「お知らせ」の固定ページURLに設定しましょう。
contactセクションの作成
つぎはトップページ最後のセクションになります。
「フルワイド」を追加して背景画像（topp-contact-bg.jpg）を設定します。
オーバーレイの不透明度は「０」にしましょう。
「見出し」にContactと記入し「ブロック下の余白量」を４emにします。
「段落」を追加してテキストを入力し中央寄せにします。
「SWELL ボタン」を追加し、リンク先は「お問い合わせ」の固定ページURLを設定します。
メインビュー下の不要な余白を削除
これまでの設定でトップページの作成ができましたが、細かい調整を行なっていきます。
まずは、スライドショーを作成したメインビューの下に
不要な余白ができてしまっているため、こちらを削除していきましょう。
左側メニューから、「外観」「カスタマイズ」「トップページ」「その他」と進んで行きます。
「コンテンツ上の余白量」を「なし」に変更して、「公開」をクリックします。
不要な余白が、削除されました。
各セクションの見出しをカスタマイズ
次に、CSSを使って各セクションの見出しをカスタマイズしていきます。
CSSを使ったカスタマイズにはいろいろ方法がありますが、
今回は固定ページの下にあるCSS用コードに記述していきます。
ここに記述すると、記述した固定ページのみにCSSが反映されるため
他のページに影響を与えません。
各セクションの「見出し」にCSSクラスを追加します。
「見出し」を選択し右側メニューの「高度な設定」を開き
「追加CSSクラス」にクラス名を記入します。
クラス名は「my-section-title_〇〇」
最後の丸にはセクション名を入れて下さい。
aboutセクションなら「my-section-title_about」となります。
CSS用コードにCSSを書いていきます。
下記をコピペして使ってください。
.post_content .is-style-section_ttl:before {
font-size: 12px;
top:40px;
}
.post_content .my-section-title_about:before {
content: '- 私たちについて';
}
.post_content .my-section-title_service:before {
content: '- 事業紹介';
}
.post_content .my-section-title_recruit:before {
content: '- 採用情報';
}
.post_content .my-section-title_news:before {
content: '- お知らせ';
}
.post_content .my-section-title_contact:before {
content: '- お問い合わせ';
}
表示を確認するとサブタイトルが表示されています。
recruitセクションは視認性が良くないのでテキストの色を白くしましょう。
「見出し」と「段落」の追加CSSクラスに「text-color_white」と記述します。
CSS用コードに下記を記述します。
.text-color_white {
color:white!important;
}
文字色を白くして視認性が良くなりました！
画像に影をつける
aboutセクションとserviceセクションの画像に影をつけていきます。
「メディアとテキスト」ブロックを選択して
下記のクラス名を追加します。
my-style_shadow
CSS用コードに下記のCSSを記述します。
.my-style_shadow img {
box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.25);
}
画像に影をつけることができました！
ここまででトップページの編集は以上になります！
つぎからは下層ページを編集して作っていきます。
下層ページの作成
中級編では「私たちについて」「事業紹介」「採用情報」「お知らせ」「お問い合わせ」の
５ページの下層ページを作成していきます。
私たちについて（about）ページの作成
それでは、「私たちについて（ABOUTページ）」を作成していきます。
タイトルの背景画像を設定
中級編では各ページごとに別のヘッダー画像を表示させたいので、設定していきます。
左側メニューの「外観」「カスタマイズ」「投稿・固定ページ」「タイトル」と進んでいきます。
固定ページのタイトルの表示位置を「コンテンツ上」にします。
それでは固定ページを編集していきます、固定ページ一覧から「私たちについて」をクリックします。
固定ページを開いたら右側メニューの「SWELL設定」から、
タイトルの背景画像の「画像を選択」をクリックし、画像（header-about.jpg）を設定します。
私たちについてのヘッダー画像を設置することができました。
それでは、固定ページ一覧から「私たちについて」を編集していきましょう。
会社概要を作成
「見出し」ブロックを追加して、見出しレベルが「H2」になっているのを確認して
「会社概要」と入力し、テキストの配置は「テキスト左寄せ」に設定します。
「テーブル」を追加し、上記のようにテキストを入力しましょう。
右側の３つの「設定」はすべて無効にしておきます。
右側メニューの「スタイル」を「シンプル」にします
沿革を作成
「見出し」ブロックを追加して、見出しレベルが「H2」になっているのを確認して
「沿革」と入力し、テキストの配置は「テキスト左寄せ」に設定します。
次に、ブロック「ステップ」を追加します。
右側メニューのスタイルを「スモール」にします
「ステップ項目」を選択し右側メニューの「部分のテキスト」に2018年、
「番号部分のテキスト」に1月と入れます。
「ステップ項目」の中の「タイトル」「段落」にテキストを入れます。
「ステップ項目」を複製して追加し、テキストを記入したら沿革の完成です。
テキストはこちらから流用してください。
事業紹介（service）ページの作成
タイトルの背景画像を設定
固定ページを開いたら、ABOUTページと同様にタイトルの背景画像を設定します。
右側メニューの「SWELL設定」から、
タイトルの背景画像の「画像を選択」をクリックし、画像（header-service.jpg）を設定します。
COMPANYセクションの作成
次に、COMPANYセクションを作成していきます。
「フルワイド」を追加して、コンテンツサイズを「記事」、背景色を「#FFFFFF」に設定して
「見出し」に、COMPANYと入力します。
「見出し」に入力した、COMPANYの文字を全て選択し
上部の「フォントサイズ」をクリックし、サイズを「XL」を選択して
「SWELL装飾」のテキスト色をクリックし、カスタムを選択して「#E0E0E0」に変更しましょう。
それでは、３列２段になるように画像を入れていきます。
また、この画像はPC表示では横３列で表示して
スマホ表示では、横スクロールするように切り替える実装をしていきましょう。
PC表示の作成
まずは、PC表示の作成です。
「リッチカラム」ブロックを追加し、スタイルを「ボーダー」にして
PCの列数を「３」に設定します。
次に、「デバイス制限」の表示するデバイスサイズを「PC」に設定します。
それではカラム項目の設定をしていきます。
まずは６つの画像を入れれるように、カラム項目を増やします。
「リッチカラム」ブロックをクリックして、必要な数だけ「＋」をクリックします。
カラム項目の中をクリックして、「画像」ブロックを追加して
画像（company-1.png）を設定します。
設定ができたら、他のカラム項目にも画像を設定していきます。
スマホ表示の作成
それでは次に、スマホ表示の設定をします。
先ほど作成した「リッチカラム」ブロックを選択して、複製をクリックします。
複製した「リッチカラム」ブロックを選択し、
「垂直配置を変更」をクリックして「中央揃え」に変更して
「横スクロールで表示する」を有効にして、
デバイス制限の「表示するデバイスサイズ」を「SP」に変更します。
SERVICEセクションの作成
次に、SERVICEセクションを作成します。
「フルワイド」を追加して、コンテンツサイズを「記事」、背景画像を「service-bg.jpg」に設定して
オーバーレイカラーを「#91cde7」にして、不透明度を「２５」にします。
「見出し」に、SERVICEと入力します。
「見出し」に入力した、SERVICEの文字を全て選択し
上部の「フォントサイズ」をクリックし、サイズを「XL」を選択して
「SWELL装飾」のテキスト色をクリックし、カスタムを選択して「#FFFFFF」に変更しましょう。
「フルワイド」の中に「カラム（33/33/33）」を追加します。
それぞれの「カラム」の中に画像（service-1〜3.png）を配置します。
SUPPORTセクションの作成
最後に、SUPPORTセクションを作成します。
「フルワイド」を追加して、コンテンツサイズを「記事」、背景色を「#F7F7F7」に設定して
「見出し」に、SUPPORTと入力します。
「見出し」に入力した、SUPPORTの文字をすべて選択し
上部の「フォントサイズ」をクリックし、サイズを「XL」を選択して
「SWELL装飾」のテキスト色をクリックし、カスタムを選択して「#ABABAB」に変更しましょう。
「カラム」ブロックを追加し、レイアウトを「50/50」に選択します。
左のカラムには「画像（support.jpg）」、右のカラムには「段落」に４つのテキストを入れます。
テキストはこちらから流用してください。
右側のリストビューからテキストが入っている方の「カラム」を選択し、
スタイル設定から、背景を「白」に変更します。
次に、見出しの設定を行ないます。
「専門家によるサポート」の段落をクリックして、以下の操作を行なっていきます。
- 上部のメニューから「段落」ブロックを「見出し」ブロックに変更
- 「レベルを変更」をクリックし、「H3」に変更
- 「テキストの配置」をクリックし、「テキスト左寄せ」に変更
- 右側メニューの「スタイル」をクリックし、「セクション用」に変更
- 右側メニューの「設定」をクリックし、ブロック下の余白量を「1em」に変更
- 「専門家によるサポート」の文字をすべて選択し、上部メニューのフォントサイズを「xs」に変更
「カスタマイズされたサービス」も同様に、見出しブロックに変更しておきましょう。
「カスタマイズされたサービス」の見出しの、上部の余白が大きいため調整します。
「多言語に対応した・・・」で始まる段落ブロックを選択して
ブロック下の余白量を「1em」に設定して、保存をクリックしたら完成です。
採用情報（recruit）ページの作成
タイトルの背景画像を設定
固定ページを開いたら、ABOUTページと同様にタイトルの背景画像を設定します。
右側メニューの「SWELL設定」から、
タイトルの背景画像の「画像を選択」をクリックし、画像（header-recruit.jpg）を設定します。
MESSAGEを作成
「フルワイド」を追加し、背景画像に画像（recruit-bg.jpg）を設定します。
「見出し」には「MESSAGE」と入力し、スタイルを「セクション用」に変更、「中央寄せ」にします。
「段落」を２つ追加しテキストを入れフォントサイズを「XL」にします。
またテキストの「未来を創造」を選択し、「太字」にしてテキストの色を「青」に変更します。
テキストはこちらから流用してください。
フォントサイズをXLにしたことで、
スマホ表示の際にフォントサイズが大きすぎてしまいます。
下記コードをページ下部のCSS用コードに貼り付けてください。
@media screen and (max-width: 599px) {
.has-text-align-center .u-fz-xl {
font-size:1.2em!important;
}
「画像（recruit.jpg）」を追加して「中央揃え」にしましょう。
募集職種を作成
「見出し」を追加し、「募集職種」と入力します。レベルは「H2」テキストは「左寄せ」です。
「カラム」ブロックを「（50/50）」で追加します。
カラムの中に「段落」を追加し、テキストを入れます。
フォントサイズは「L」に変更し、「ボーダー設定」から「２本線」を選びます。
「段落」ではなく「カラム」を選択していると
「ボーダー設定」に「２本線」の枠は出てきません。
次に「SWELLボタン」を追加し、スタイルは「MOREボタン」に変更し
テキストを「応募はこちら」に設定して、リンク先を「CONTACTページ」に設定します。
よくある質問を作成
「見出し」を追加し「よくある質問」と入力します。レベルは「H2」テキストは「左寄せ」です。
次に「FAQ」を追加し「スタイル」を「線あり」にしましょう。
「項目」内の「段落」にテキストの入力をしていきます。
テキストはこちらから流用してください。
「アイコンの形」「アイコンの色」をクリックして変更して完成です。
お知らせ（news）ページの作成
初級編と同じようにこのページにはサイドバーを表示させておきましょう。
「表示の上書き設定」のサイドバーを「表示」にします。
お知らせページではタイトルの背景画像は設置しないので、
「表示の上書き設定」のタイトル位置を「コンテンツ内」にします。
お問い合わせ（contact）ページを作成
お問い合わせのフォームは「Snow Monkey Forms」というプラグインを使って作っていきます。
まずはプラグインのインストールから始めましょう。
「Snow Monkey Forms」はブロックエディタに対応した、初心者でも扱いやすいプラグインです。
このプラグインは、WordPressテーマ「Snow Monkey」の開発者であるキタジマタカシさん作成した日本製のプラグインです。名前に「Snow Monkey」と付いていますが、SWELLでも問題なく動作します。
Snow Monkey Formsの導入
管理画面の左側メニューから「プラグイン」の「プラグインを追加」をクリックし、
プラグインの検索に「snow」と入力します。
一覧に出てきた「Snow Monkey Forms」の「今すぐインストール」をクリックします。
「有効化」して、インストール完了です。
有効化をしたら、左側メニューの「Snow Monkey Forms」の「投稿を追加」をクリックします。
フォームの作成
それでは、SnowMonkeyFormsの編集画面を確認していきましょう。
リストビューを確認すると分かりますが、フォーム部品がブロックで作成されているのが特徴です。
赤枠で囲んだ部分は不要なため、削除しておきましょう。
まず「タイトルを追加」のところに、「お問い合わせフォーム」と入力します。
次に、「項目」ブロックを追加します。
ラベルに「お名前」と入力し、フォーム部品の「テキスト」ブロックを追加します。
次に、また「項目」ブロックを追加しますが
選択が「フォーム」の状態でないと、「項目」ブロックは表示されないので注意しましょう。
それでは「項目」ブロックを追加します。
ラベルには「お名前（フリガナ）」と入力し、「テキスト」ブロックを追加します。
引き続き「項目」ブロックを追加します。
ラベルには「貴社名」と入力し、「テキスト」ブロックを追加します。
引き続き「項目」ブロックを追加します。
ラベルには「メールアドレス」と入力し、「email」ブロックを追加します。
同様に「項目」ブロックを追加します。
ラベルには「電話番号」と入力し、「Tel」ブロックを追加します。
最後に「項目」ブロックを追加します。
ラベルには「お問い合わせ内容」と入力し、「テキストエリア」ブロックを追加します。
お問い合わせフォームの下地が完成しました、いったん保存をしておきます。
それでは実際に、固定ページに設置して表示を確認してみましょう。
右側メニューから、「固定ページ」→「固定ページ一覧」→「お問い合わせ」をクリックします。
お問い合わせページではタイトルの背景画像は設置しないので、
「表示の上書き設定」のタイトル位置を「コンテンツ内」にします。
まず「フルワイド」ブロックを追加します。
フォーム画面には見出しは不要なため、「見出し」をクリックして「段落」ブロックに変換します。
「段落」には、「下記フォームより、お気軽にお問い合わせください」と入力します。
背景画像の設定で、メディアから画像（contact-bg.jpg）を選択します。
次に、先ほど作成したフォームを設置します。
ブロックを追加をクリックして、「Snow Monkey Form」ブロックをクリックします。
フォームの選択が表示されるので、プルダウンをクリックして「お問い合わせフォーム」を選択します。
選択すると、固定ページ内にフォームが設置されます。
全体的に少し窮屈な感じになっているので、Snow Monkey Forms に戻って修正していきます。
フォームの見た目の設定
まずは、フォームの見た目の部分から調整を行なっていきます。
まず最初に、フォームスタイルを変更します。
「フォーム」ブロックをクリックし、
右側メニューから「フォームスタイル」を「Simple table」に変更します。
次に、入力欄の大きさを変更します。
お名前の項目の「テキスト」ブロックをクリックし、右側メニューの「SIZE」を「50」に変更します。
「お名前（フリガナ）」「貴社名」「電話番号」も同じ様に「50」に変更し、
「メールアドレス」は「100」に変更します。以下の様に変更されたかと思います。
最後に、各フォーム部品について必須で入力してもらいたいものについて設定していきます。
まずは、お名前の「テキスト」ブロックをクリックし、
右側メニューの「バリデーション」の必須を「有効」にします。
「お名前（フリガナ）」「メールアドレス」「電話番号」も同じ様に、「必須を有効」に変更します。
これで指定した項目は未入力だと、フォームを送信できなくすることができました。
ただフォーム上で、どの項目が「必須」なのか不明なためCSSで実装していきます。
固定ページの「お問い合わせ」を開きます。
編集画面の下部にある、「カスタムCSS＆JS」の「CSS用コード」に以下のコードを貼り付けます。
.smf-item__label__text {
position: relative;
}
.smf-item:has([data-validations~="required"]) .smf-item__label__text::after {
position: absolute;
top: 50%;
right: -50px;
transform: translateY(-50%);
display: grid;
place-items: center;
width: 40px;
height: 23px;
border-radius: 4px;
content: "必須";
font-size: 12px;
color: #fff;
background: #ff0000;
}コードを貼り付けたら、保存をクリックして「お問い合わせ」ページを表示してみましょう。
これでフォームの見た目は完成しました、次に自動返信メールの設定を行なっていきます。
自動返信メールの設定
それでは、メール設定を行なう前に
各フォーム部品のname属性（名前）を、わかりやすい名前に変更します。
「お名前」の「テキスト」ブロックを選択し、
右側メニューの「NAME」を「onamae」に変更します。
他のフォーム部品も、以下の様に変更します。
お名前（フリガナ） ・・・ kana
貴社名 ・・・ company
メールアドレス ・・・ email
電話番号 ・・・ phone
お問い合わせ内容 ・・・ inquiry
次に、メール設定を行なっていきます。
「入力画面」の上部にある、「フォーム設定を開く」をクリックします。
まずは、管理者宛メール設定を行ないます。
右側メニューの各項目に、以下の内容を入力していきます。
To（メールアドレス） ・・・ ご自身のメールアドレスを設定してください
件名 ・・・ お問い合わせがありました
FROM（メールアドレス） ・・・ 送信元メールアドレス（次のポイントで説明）を設定
送信者 ・・・ Technect
BODY ・・・ {all-fields} または、以下を参考に作成してください
ホームページから問い合わせがありました。
問い合わせ内容は以下のとおりです。
受信から○営業日以内にお客様へ連絡してください。
━━━ お問い合わせ内容 ━━━━━━━━━━━━━━━━━━━━━
【お名前】{onamae}
【フリガナ】{kana}
【貴社名】{company}
【メールアドレス 】{email}
【電話番号】{phone}
【お問い合わせ内容】
{inquiry}
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
このメールは問い合わせフォームから送信されました。
送信元メールアドレスは、そのお問い合わせフォームが設置されているホームページのドメイン（URLの＠から後の部分）と同じメールアドレスが推奨されます。
この部分が同じでないと「なりすまし」や「スパム」とみなされブロックされる可能性が高くなってしまうため、サーバーからメールアドレスを取得して送信元メールアドレスに設定しておきましょう。
メールアドレスの取得方法は、契約している各サーバーの公式サイトから確認してください。
次に、ユーザー宛ての自動返信メール設定を行ないます。
To（メールアドレス） ・・・ {email}
件名 ・・・ 【自動返信メール】お問い合わせありがとうございます
FROM（メールアドレス） ・・・ 送信元メールアドレスを設定
送信者 ・・・ Technect
BODY ・・・ {all-fields} または、以下を参考に作成してください
この度は 株式会社Technect へお問い合わせいただき誠にありがとうございます。
以下の内容のお問い合わせを受け付けました。
○営業日以内に担当者より折り返しご連絡させていただきます。
お問い合わせ内容によっては、ご返事までにお時間をいただく場合もございます。
あらかじめご了承ください。
━━━ ご入力内容 ━━━━━━━━━━━━━━━━━━━━━
【お名前】{onamae}
【フリガナ】{kana}
【貴社名】{company}
【メールアドレス 】{email}
【電話番号】{phone}
【お問い合わせ内容】
{inquiry}
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
このメールは 株式会社Technect のホームページからお問い合わせいただいた方へ自動送信しております。
お心当たりのない方は、恐れ入りますが下記へその旨をご連絡いただけますと幸いです。
株式会社Technect
東京都中央区000
TEL ：000-1111-2222
MAIL ：○○○@○○○○.com
URL ：https:/○○○○/
完了画面のメッセージを設定
次に、完了画面のメッセージに以下のテキストを設定します。
お問い合わせありがとうございます。
このたびは、株式会社Technect へお問い合わせ頂き誠にありがとうございます。
お送り頂きました内容を確認の上、○営業日以内に折り返しご連絡させて頂きます。
また、ご記入頂いたメールアドレスへ、自動返信の確認メールをお送りしております。
しばらく経ってもメールが届かない場合は、入力頂いたメールアドレスが間違っているか、迷惑メールフォルダに振り分けられている可能性がございます。
また、ドメイン指定をされている場合は、
「@XXXX.com」からのメールが受信できるようあらかじめ設定をお願いいたします。
以上の内容をご確認のうえ、お手数ですがもう一度フォームよりお問い合わせ頂きますようお願い申し上げます。
なお、お急ぎの場合は電話でもご相談を受け付けております。
000-1111-2222までご遠慮なくご相談ください。
最後に、お問い合わせフォームのセキュリティ（スパムメール対策）を行なっていきます。
お問い合わせフォームのセキュリティ設定
お問い合わせフォームは、外部の人があなたのサイト（サーバー）に情報を送り込める貴重な場所です。
逆に考えると、URLさえ知っていれば誰でもアクセスできるページのため対策をしていないと、悪意のあるプログラムを送り込まれサイトを操作されてしまうリスクがあります。
セキュリティ対策が不十分だと・・・
・1日に数百件もの迷惑メールが届くと、本当のお客さんからの大切な問い合わせが埋もれてしまう。
→ スパムメール（大量のゴミのようなメール）
・中身をチェックせずに受け取ってしまうと、中に爆弾（ウイルス）が入っているかもしれない。
→ 不正アクセス（サイトを操作されるリスク）
・サイトが壊されるだけでなく、自分のサイトが「ウイルスをばらまく踏み台」にされてしまう。
受け取った相手からすれば「このサイトから迷惑メールが来た！」となり、ブランドの信頼がゼロになる。
→ なりすましによる大量の自動送信（サーバーへの負荷大）
上記のような、トラブルに合わないためにもセキュリティ対策を行なっていきましょう。
Snow Monkey Forms ではセキュリティ対策として、「Google reCAPTCHA」と「Cloudflare Turnstile」を導入することができます。今回は、「Cloudflare Turnstile」を導入していきます。
Cloudflare Turnstile のアカウント作成
まずは、迷惑メールフィルター「Cloudflare Turnstile（クラウドフレア ターンスタイル）」の設定です。
すでにアカウント登録されている方は、先に進んでください。
以下の公式サイトにアクセスして、無料アカントを作成します。
公式サイトにアクセルできたら、「利用開始」をクリックします。
サインアップを要求されるので、お持ちのアカウントで登録をします。
ダッシュボードの設定（サイトキーとシークレットキーの作成）
ダッシュボードが表示されたら、言語設定を変更します。
右上のアイコンから「Language」→「日本語」を設定します。
「ウィジェットを追加」をクリックします。
表示されていない場合には、右側メニューの「Turnstile」から表示させましょう。
ウィジェット名の作成欄が表示されるので、
今回は「Technectサイト」と入力して、「ホスト名の追加」をクリックします。
ホスト情報の入力欄が表示されるので、
「カスタムホスト名を追加する」の箇所に、設定するサイトのドメイン名を入力し、追加をクリックします。
入力例：test09.ryu1go10-wp.com であれば、「ryu1go10-wp.com」を入力する
「選択されたホスト名」の箇所に、
先ほど設定したホスト名が表示されているので、チェックを入れて追加をクリックします。
ホスト名の登録が終わると管理画面に戻るので、
「ウィジェットモード」を「管理対象」に選択して、作成をクリックします。
※ホスト名の左側のチェックボックスは、入れずにそのままでOKです
ウィジェットの作成に成功すると、「サイトキー」と「シークレットキー」が作成されるので、
このキーを、Snow Monkey Forms に設定していきます。
Snow Monkey Forms に設定
WordPress管理画面に戻って、
左側メニューの「Snow Monkey Forms」の「Cloudflare Turnstile」をクリックします。
サイトキーとシークレットキーの入力画面が表示されるので、
先ほどの「Cloudflare Turnstile」のページから、コピーして貼り付けして、変更を保存をクリックします。
「ウィジェットの位置」は、変更せずにそのままで構いません。
お問い合わせページを確認すると、フォームの下部に設置されました。
これで、お問い合わせページの完成しました。
Snow Monkey Forms は、この他にも以下のような機能も用意されています。
・入力内容の確認画面
・プログレストラッカー（フォームの進行状況の確認）
・プレースホルダー（初期値の設定）
・オートコンプリート（フォームの入力支援）
お問い合わせフォームを作成したら、
必ず設定した機能（必須の設定など）や自動返信メールが正常に届くか確認を行ってください。
送信元メールアドレスの設定を正しく行なっても、
Gmailなどでは迷惑メールに振り分けられてしまう可能性があります。
このような場合の対応で使用されるプラグイン（WP Mail SMTP）もあります、
実案件ではフォーム実装とセットで実装することがあるので、覚えておきましょう。
ロゴの設定
最後にヘッダーのロゴを変更しましょう。
管理画面から「外観」「カスタマイズ」「ヘッダー」にいき、
「ヘッダーロゴの設定」で画像（logo.png）を選択します。
画像サイズも変更ができます。
ロゴの設定が完了しました！
サイト制作後のチェック
サイト制作が完了しましたので、制作後のチェックを行っていきましょう。
確認したい項目の代表的なものとしては、以下の項目が挙げられます。
確認したい項目
- 見出しブロックが正しく設定されているか
- Alt属性が正しく設定されているか
- OGP画像が設定されているか
- 表示が崩れている箇所はないか
- お問い合わせフォームが正しく機能しているか
- サイトのバックアップ対策は行われているか
- 管理画面へのセキュリティ対策は行われているか
見出しブロックが正しく設定されているか
トップページや下層ページの各セクションタイトル、
さらにその子要素のタイトルになる部分には「見出しブロック」を設定を実装しました。
見出し構造が正しく設定されていることで、以下のメリットがあると考えます。
・文章が読みやすくなる（視覚的に見出しとして強調される）
・SEO効果が期待できる（検索エンジンにも文章の構造を正しく伝えることができる）
見出しレベルにはH1～H6の６段階があり、
数字が小さくなるほど見出しのレベル（重要度）は大きくなります。
・H1は一般的に、ページの中で１回だけ使用（そのページのタイトルとなるものに設定）する
【見出しをつけるときの注意点】
・使用する順番に注意する（H2の次に、H4を使うのは間違った使い方）
・単なるデザイン目的で使わない
→見出しブロックは見出しレベルに応じてデザインが設定されていますが、
そのデザインを重視して設定するのではなく、構造を重視して設定しましょう。
見た目を変更したい場合は、追加CSSで変更できます。
それでは、実際にサイトの見出し構造が正しく設定されているか確認していきましょう。
Chromeの拡張機能「SEO META in 1 CLICK」を使用して、確認をしていきます。
まずは以下の公式サイトからChromeに追加しましょう。
拡張機能の画面が表示されたら、「Chromeに追加」をクリックします。
ポップアップが表示されるので、「拡張機能を追加」をクリックします。
拡張機能が追加されたら、「SEO META in 1 CLICK」をすぐに使えるようにしていきましょう。
右上のパズルのようなアイコンをクリックして「SEO META in 1 CLICK」のピンをクリックします。
それでは実際に「SEO META in 1 CLICK」を使って見出しのチェックをしていきましょう。
それではサイトのトップページを開いて、右上の「SEO META in 1 CLICK」のアイコンをクリックします。
「SEO META in 1 CLICK」が開いたら、「Headersタブ」をクリックします。
設定した見出しの詳細が表示されるので、正しく設定されているか確認しましょう。
SWELLでは「H1タグ」については自動で設定（画像圧縮プラグインにより内容は変わる）されるため、H2タグ以降の部分について見出し構造に崩れが無いか確認をします。
トップページの見出し構造が確認できたら、下層ページについても同様に確認を行ってください。
代替テキスト（Alt属性）が正しく設定されているか
次に、画像に設定した代替テキスト（Alt属性）が正しく設定されているか確認していきます。
代替テキスト（Alt属性）は、画像が表示できない場合やスクリーンリーダーを使用する視覚障害者に対して非常に重要で、画像の情報が失われることなく多くの人々に届ける役割を担っています。
設定するないようとしては、画像を見たときに取得できる情報をそのまま設定するイメージで良いですが以下のようなケースでは設定する際に注意が必要です。
・画像を本文の補完目的に設置している場合
・画像にURLリンクを設置している場合
・タイトル・見出しを画像としている場合
・表やグラフを画像で表現している場合
また、すべての画像に設定する必要はなく「装飾画像」や「背景画像」のようなデザイン要素の画像についてはコンテンツの理解に貢献するものではないため、代替テキストを空にすることで不必要な情報の読み上げを防ぐことができます。
それでは、実際に代替テキスト（Alt属性）が正しく設定されているか確認していきましょう。
Chromeの拡張機能「Alt＆Meta viewer」を使用して、確認をしていきます。
まずは以下の公式サイトからChromeに追加しましょう。
拡張機能の画面が表示されたら、「Chromeに追加」をクリックします。
ポップアップが表示されるので、「拡張機能を追加」をクリックします。
拡張機能が追加されたら、「Alt＆Meta viewer」をすぐに使えるようにしていきましょう。
右上のパズルのようなアイコンをクリックして「Alt＆Meta viewer」のピンをクリックします。
それでは実際に「Alt＆Meta viewer」を使って代替テキストのチェックをしていきましょう。
それではサイトのトップページを開いて、右上の「Alt＆Meta viewer」のアイコンをクリックします。
拡張機能が表示されたら、「画像のAlt表示」をクリックし画像の近くにカーソルを移動させます。
画像に代替テキストが正しく設定されていれば、ポップアップで表示されます。
同様の手順で、サイト内に設定したすべての画像に対して確認を行なっていきます。
画像ブロックを設置した後に、メディア上で画像に代替テキストを設定すると
サイト上では代替テキストが反映されません。
その場合は、固定ページなどに設置した画像ブロックを選択して、
編集画面の右側に表示される「代替テキスト」の入力欄に代替テキストを設定しておきましょう（変更・修正する場合も同様の手順で設定）。
OGP画像が設定されているか
OGPとは、SNSなどでシェアされたときに作られるリッチオブジェクト（見え方）を設定できるもの仕組みです。
OGPを設定するメリットとしては、以下のものがあげられます。
- SNSなどで目立つ・気づかれやすくなる
- 気づいた人による更なる拡散・シェアが期待できる
- シェアされたコンテンツや製品が魅力的に見える
SWELLでは、「SEO SIMPLE PACK」というプラグインを使ってOGPを簡単に設定することができるので実装しておきましょう。
SEO SIMPLE PACKのインストール
管理画面の「プラグイン」から「新規プラグインを追加」を選択して、プラグインの検索欄に「SEO SIMPLE PACK」と入力します。
SEO SIMPLE PACKが表示されたら、「今すぐインストール」をクリックして「有効化」します。
有効化できたら、管理画面の「SEO PACK」の「OGP設定」をクリックします。
OGP設定画面が開いたら、「画像を選択」をクリックします。
OGPの推奨画像サイズは、１２００×６３０ｐｘです。
調整できる方はPhotoshopなどで設定したい画像を調整しておきましょう。
今回はメディア内にある、「blog-1.jpg」の画像をOGP画像として選択します。
OGP画像が設定できたら、「設定を保存する」をクリックします。
これでOGP画像の設定が完了しました。
OGPが設定されているかは、「ラッコツールズ」「SEO META in 1 CLICK」などで確認できます。
※BASIC認証が設定されていると、うまく表示ができない事があります。
表示が崩れている箇所はないか
作成されたWebサイトは、PCやスマホなど様々なデバイスで閲覧されることが想定されます。
サイト公開前に以下のような環境で、サイトの表示を確認をしておきましょう。
・PC（1920px以上、1919px～1441px、1440px～1025px）
※Chromeの検証ツールなどを活用して確認、Mac・Windows双方で確認できるとGood！
・タブレット
・スマホ
※PCと同様にMac・Windows双方で確認できるとGood！
サイトのバックアップ対策は行われているか
WordPressでは、不測の事態に備えて定期的にバックアップを取っておくことが推奨されます。
- 制作段階での作業の区切りごとに
- プラグインなどの更新不具合、誤操作によるデータ消失
- サイバー攻撃、マルウェア感染、サーバー障害など、予期せぬトラブル
方法としては、サーバーのバックアップ機能やプラグインを活用した方法があります。
ここでは、バックアッププラグインの代表的なものをご紹介します。
- BackWPup （自動バックアップやクラウド保存にも対応）
- UpdraftPlus （自動バックアップやクラウド保存にも対応）
- All-in-One WP Migration （サイト移行がメイン、自動バックアップは有料版で対応）
それぞれに特徴がありますので、
実際に「自動バックアップ」できるプラグインを有効化して、自動バックアップ設定をしていきましょう
それでは実際に「BackWPup」プラグインでバックアップ設定を実装していきます。
「プラグイン」➔「新規プラグインを追加」を選択して、プラグインの検索…に「BackWPup」と入力しプラグインをインストール ➔ 有効化します。
まずは何をバックアップするか？ の確認画面が表示されます。
WordPressの復旧には、WordPressの構成ファイルとデータベースが必要なため「ファイル」「データベース」が有効になっているのを確認して「Save＆Continue」をクリックします。
次に、バックアップのスケジュールを選択する画面が表示されます。
WordPressサイトの更新頻度やサーバーの自動バックアップのサイクルなどを参考にして、バックアップを行なうスケジュールを設定していきます。
ここでは両方とも「Monthly（１か月ごと）」になっているのを確認して「Save＆Continue」をクリックします。
最後に、バックアップの保存先を指定します。
今回はサーバー上に保存していきますが、クラウドストレージ上に保存する事もできます。
「Website Server」をクリックし、バックアップの保存先と最大バックアップ数を確認します。
設定数に特に問題がなければ、「保存＆接続をテスト」をクリックします。
「Website Server」のアイコンが緑色になったらテスト完了です、「Save＆Continue」をクリックします。
設定が完了すると、初回バックアップが実行されます。
初回バックアップが完了したら「閉じる」をクリックします。
BackWPupの管理画面が表示されますので、「Backups History」にバックアップされていれば完了です。
管理画面へのセキュリティ対策は行われているか
WordPressサイトへの攻撃の多くは、ログイン画面に対して行なわれます。
そのためログイン画面のURLをデフォルトのものから変更していないと、一斉攻撃の対象になりやすいためサーバーにアップ後は対策を検討していきましょう。
ログイン画面のURL変更は、「SiteGurad WP Plugin」プラグインで設定できるため実装していきます。
「プラグイン」➔「新規プラグインを追加」を選択して、プラグインの検索…に「SiteGurad WP Plugin」と入力しプラグインをインストール ➔ 有効化します。
プラグインが有効化されると、管理画面にSiteGuardの項目が追加されるので選択し「ログインページ変更」をクリックします。
変更後のログインページ名のところに、「login_○○○○○」と設定がされているかと思います。
こちらはSiteGuardで自動設定されるもののため、パスワード生成ツールなどを使って複雑化をしておきましょう。
変更したログインページ名は、忘れずにログイン情報として記録しておきましょう。
また、この状態では「サイトURL」＋「wp_admin」と入力するとログイン画面に入れてしまうため
オプションの「管理者ページからログインページへリダイレクトしない」にチェックを入れることにより
先程の「サイトURL」＋「wp_admin」での侵入を防ぐことができるようになります。
最後に「設定を保存」をクリックして、ログイン画面へのセキュリティが効いているか確認しましょう。
機能が重複している不要なプラグインが無いか確認しましょう
WordPressで機能が重複するプラグインを複数有効化すると、処理の競合により画面が真っ白になる、機能が正常に動かない、サイトが低速化するといった不具合が発生する可能性が高くなります。
重複している場合は、機能制限または不要なものを削除をしておきましょう。
【よくあるケース】
・ログインセキュリティ系 （SiteGuard、XO Security、CloudSecure WP Securityなど）
・メールフォーム系 （Snow Monkey Forms、Contact Form7、WPFormsなど）
・SEO設定系 （SEO SIMPLE PACK、All in One SEO、Yoast SEOなど）
・このほかにも、画像最適化系やキャッシュ系のプラグインにも注意をしておきましょう。
まとめ
お疲れ様でした！以上で中級編も終わりとなります。
初級編、中級編とやってきてWordPressの使い方、
SWELL のカスタマイズに慣れてきたのではないでしょうか？
SWELL は同じようなサイトしか作れないという声も聞きますが、
ブロックの組み合わせとCSSを使用することで自由にカスタマイズすることができます。
ちなみに、CSSやJavascript（jQuery）を使うことで、動きのあるサイト制作も可能です。
興味のある方は、ぜひこちらも読んでみてください。
ここまで完了できたら、
アウトプットを兼ねてぜひX(旧Twitter)で とし @ToshiTraveler をメンションしてくださいね。
しっかりアウトプットしてくれた方は、僕のフォロワー数 1万人超えのアカウントで拡散します！
アウトプット事例
ぜひアウトプットしてみくてください！
無料登録でプレゼント
筆者としが運営するWEB制作支援コミュニティの公式LINEでは、無料登録でプレゼントを複数手に入れることができます。興味がある方は下記よりご登録ください。
＼ LINE登録はこちら ／
プレゼントの例はこちら。
・有益情報が満載の動画が多数のYouTube『とし Web制作フリーランス育成コーチ 』
・あなたの性格タイプがわかり営業に活かせる『ソーシャルスタイル診断』
・案件獲得ができるようになる『案件獲得ロードマップ』
・副業、フリーランスで成功した人たちの成功インタビューを集めた『講座生実績』
など様々なコンテンツを提供中です。
ご興味ある方は、ぜひ確認してみてください。
＼ LINE登録はこちら ／