INDEX
目次
前の章に戻る8章 WordPress制作課題①
【8-1】課題について
この課題ではポートフォリオサイトを作成していきます
上記のサイトを見本にサイトを制作していきます！
Figmaでワイヤーフレームを作成していますので、ご自身のデザインに変更したい場合はワイヤーフレームを変更することを推奨します！
Figmaでワイヤーフレームを作成していますので、ご自身のデザインに変更したい場合はワイヤーフレームを変更することを推奨します！
【使用素材】
※（8-1と8-2でダウンロードする素材は同じです。どちらか１つをダウンロードしましょう。）
※（8-1と8-2でダウンロードする素材は同じです。どちらか１つをダウンロードしましょう。）
注意：素材ダウンロードの際は、画像のように画面右上のダウンロードボタンからダウンロードしてください。
「このファイル形式を読み込むことができません」という表示は気にしなくてOKです！
「このファイル形式を読み込むことができません」という表示は気にしなくてOKです！
ポイント
Figmaが使用できる方はFigmaのデータを取り込んで画像をダウンロードしてください。
ダウンロード方法がわからない方は、Figmaの【8-4】書き出ししてみよう（エクスポート）を復習しましょう！
Figmaを学習前の方は課題①素材の画像を使用しましょう！
ダウンロード方法がわからない方は、Figmaの【8-4】書き出ししてみよう（エクスポート）を復習しましょう！
Figmaを学習前の方は課題①素材の画像を使用しましょう！
【8-2】サブドメインの取得とWordPressのインストール
サブドメインの作成方法
これからロリポップを使って作業していきます。
【サーバーの管理・設定】→【サブドメイン設定】
【サーバーの管理・設定】→【サブドメイン設定】
【新規作成】をクリック
①http://のあとのボックスにportfolioと入力
②後ろのボックスからドメインを選択
③公開アップロードフォルダにportfolioと入力
これでサブドメインの取得が完了です！
※ サブドメインがDNSに反映されるまで、およそ1時間ほど時間がかかります。
次はサブドメインで新しくWordPressを作成していきましょう！
②後ろのボックスからドメインを選択
③公開アップロードフォルダにportfolioと入力
これでサブドメインの取得が完了です！
※ サブドメインがDNSに反映されるまで、およそ1時間ほど時間がかかります。
次はサブドメインで新しくWordPressを作成していきましょう！
こちらの作業が終わったら、作成したサブドメインにも独自SSLを導入していきましょう。
操作方法を忘れてしまった方は、「4章：初期設定」を復習しましょう！
操作方法を忘れてしまった方は、「4章：初期設定」を復習しましょう！
WordPressのインストール
WordPressのインストール方法が分からない場合は、教材をもう一度見返してみましょう。
WordPressをインストールする際は先ほど作成したportfolioがついているドメインを選択して作成していきましょう！
WordPressをインストールする際は先ほど作成したportfolioがついているドメインを選択して作成していきましょう！
【8-3】テーマのダウンロードとテーマの編集
テーマのダウンロード
【外観】→【テーマ】→【新しいテーマを追加】→【テーマを検索】Lightningと入力
Lightningが出てきたら【インストール】→有効化を押してください
Lightningが出てきたら【インストール】→有効化を押してください
WordPress 8-1
この動画はデモンストレーション動画になります。
音声は入っておりません。
基本設定とカラー、背景を設定していきましょう
テーマから【カスタマイズ】→【サイトの基本情報】をクリックし、タイトル・キャッチフレーズ・アイコンを設定しましょう。
ここの設定は、【4-3】で学んだ設定です。
次は【色】を選択していきましょう！
【背景色】と【キーカラー】を好きな色に設定し、どこに反映されるか確認していきましょう。
次に【背景画像】から好きな画像を設定していきましょう。
今回の設定はデフォルトですが、設定の方法を変えることでパララックスの設定が可能です。
ここの設定は、【4-3】で学んだ設定です。
次は【色】を選択していきましょう！
【背景色】と【キーカラー】を好きな色に設定し、どこに反映されるか確認していきましょう。
次に【背景画像】から好きな画像を設定していきましょう。
今回の設定はデフォルトですが、設定の方法を変えることでパララックスの設定が可能です。
WordPress 8-2
この動画はデモンストレーション動画になります。
音声は入っておりません。
【8-4】トップページの編集
ファーストビューの変更
WordPressの管理画面「外観」＞「カスタマイズ」を選択し、動画の手順を確認しましょう
【Lightningトップページスライドショー】
①スライド2・3の情報を削除します。
②【[1] スライド画像】【[1] モバイル用スライド画像(任意) 】にFigmaで作成した画像を設定してください。
③スライド1の【スライドタイトル (任意)】【スライドテキスト (任意)】【 ボタンのテキスト (任意)】【スライド画像リンク先 URL】のサンプルテキストを削除します。
【Lightningトップページスライドショー】
①スライド2・3の情報を削除します。
②【[1] スライド画像】【[1] モバイル用スライド画像(任意) 】にFigmaで作成した画像を設定してください。
③スライド1の【スライドタイトル (任意)】【スライドテキスト (任意)】【 ボタンのテキスト (任意)】【スライド画像リンク先 URL】のサンプルテキストを削除します。
WordPress 8-3
この動画はデモンストレーション動画になります。
音声は入っておりません。
ポイント
今回はスライダーの設定ではないので上記の設定にしましたが、スライダーの設定を行う場合はスライド2・3を設定してください
フッターのウィジェットエリアの修正
【✎マーク】→不要なブロックを削除してください。
WordPress 8-4
この動画はデモンストレーション動画になります。
音声は入っておりません。
ヘッダーのロゴ設定
【Lightningデザイン設定】→【ヘッダーロゴ画像】→Figmaで作成した画像を設定してください。
WordPress 8-5
この動画はデモンストレーション動画になります。
音声は入っておりません。
【8-5】トップページの編集②
作品紹介コンテンツを作成
【固定ページ】→【編集】→【HOME】
①タイトルの下に見出し2を追加→「Works」と入力
②画像アイコンをクリック→【置換】→Figma で作成した画像を設定
③タイトルテキスト→作品のタイトルを入力→文字を中央揃えにする
④タイトルの下に説明文を入力→文字を中央揃えにする
⑤ボタンのテキストを変更→デザインを塗りつぶしに変更→配置を中央揃えにする
4つ全てを変更して以下のようなレイアウトにしていきましょう！
①タイトルの下に見出し2を追加→「Works」と入力
②画像アイコンをクリック→【置換】→Figma で作成した画像を設定
③タイトルテキスト→作品のタイトルを入力→文字を中央揃えにする
④タイトルの下に説明文を入力→文字を中央揃えにする
⑤ボタンのテキストを変更→デザインを塗りつぶしに変更→配置を中央揃えにする
4つ全てを変更して以下のようなレイアウトにしていきましょう！
WordPress 8-6
この動画はデモンストレーション動画になります。
音声は入っておりません。
自己紹介コンテンツを作成
①画像をクリック→【置換】→Figma で作成した画像を設定
②背景をクリック→右側のマークをクリック→オーバーレイの色を変更
③タイトルの文字を変更→右側のマークをクリック→【背景】【テキスト】の色を変更
④タイトルの下に自己紹介の文章を入力していきましょう
⑤ボタンを追加し、リストビューからボタンの位置を調整しましょう。
⑥ボタンの配置を整え、色やデザインも変更していきましょう。
②背景をクリック→右側のマークをクリック→オーバーレイの色を変更
③タイトルの文字を変更→右側のマークをクリック→【背景】【テキスト】の色を変更
④タイトルの下に自己紹介の文章を入力していきましょう
⑤ボタンを追加し、リストビューからボタンの位置を調整しましょう。
⑥ボタンの配置を整え、色やデザインも変更していきましょう。
WordPress 8-7
この動画はデモンストレーション動画になります。
音声は入っておりません。
ポイント
上手く上揃えができない場合、レイヤーを確認してカバーの下のカラムに対して上揃えができているか確認しましょう！
WordPressではレイヤーがとても重要なのでこまめに確認しながら進めていきましょう！
WordPressではレイヤーがとても重要なのでこまめに確認しながら進めていきましょう！
【8-6】ドメインメールの作成
お問い合わせフォームを設置する為にはドメインメールの設定が必要です。ドメインメールアドレスの取得をしていきましょう。
ドメインメールとは
ドメインメールとは取得したドメインで作成するメールアドレスのことを指します。
メールアドレスの種類は以下を参考にしてください。
メールアドレスの種類は以下を参考にしてください。
|
項目
|
内容
|
|---|---|
|
フリーメールアドレス
|
＠gmail.com や@outlook.comなど登録することで誰でも使えるフリーメールアドレス
|
|
キャリアメールアドレス
|
＠docomo.ne.jpなど携帯のキャリアなどとの契約により提供されるメールアドレス
|
|
独自ドメインメールアドレス
|
@webcoach.comなど取得したドメインで作成するメールアドレス
|
ドメインメールの取得
①アドレスの前の部分（info や自分の名前がおすすめです）
②ドメインを選択
③パスワードを設定
入力できたら【作成】を押します。
②ドメインを選択
③パスワードを設定
入力できたら【作成】を押します。
ポイント
- サブドメインはドメインと親子関係にあります。
- 例えば、WordPressのサイトURLがhttps://portfolio.webcoach.blogの場合親ドメインwebcoach.blogのアドレスを取得しましょう！
メールの送受信
ログインできたら【メール】→【メール設定】→【ロリポップ！新メーラーログイン】をクリックし、設定したアドレスとパスワードを入力することで、メーラーへのログインが可能です！
ここからメールの送受信をしていきます。
ここからメールの送受信をしていきます。
ポイント
GmailやiPhoneに接続して送受信設定を行うことも可能ですが、今回は説明を省きます。
設定したい場合【ロリポップ Gmail メール設定】等で検索してみてください。
設定したい場合【ロリポップ Gmail メール設定】等で検索してみてください。
【8-7】お問い合わせフォームの作成
Contact Form 7をインストールしよう
①【プラグイン】→【新規プラグインを追加】→【プラグインの検索】Contact Form 7
②Contact Form 7が出てきたら→【インストール】→【有効化】
②Contact Form 7が出てきたら→【インストール】→【有効化】
WordPress 8-8
この動画はデモンストレーション動画になります。
音声は入っておりません。
Contact Form 7の設定
Contact Form 7が有効化されると、ダッシュボードのメニューに【お問い合わせ】が追加されます。
すでに【コンタクトフォーム1】が作成されているのでカーソルを合わせ、【編集】を選択します。
すでに【コンタクトフォーム1】が作成されているのでカーソルを合わせ、【編集】を選択します。
フォームの編集はタブを切り替えて行います。
①フォーム
お問い合わせフォームの内容を設定
②メール
お問い合わせがあった際の通知や自動返信メールの設定
③メッセージ
お問い合わせフォームで表示するメッセージの設定
①フォーム
お問い合わせフォームの内容を設定
②メール
お問い合わせがあった際の通知や自動返信メールの設定
③メッセージ
お問い合わせフォームで表示するメッセージの設定
フォームの設定
初期設定で一般的な使用は設定されていますが、追加したい項目がある場合は追加を行ってください。
メールの設定
メールの設定では2種類のメールの設定が可能です
●メール→お問い合わせがあったことを自分に通知するメール設定
●メール→お問い合わせがあったことを自分に通知するメール設定
|
項目
|
内容
|
|---|---|
|
送信先
|
お問い合わせ通知を受け取るアドレス
|
|
送信元
|
通知メールの送信元アドレス
|
|
題名
|
通知メールの件名
|
|
追加ヘッダー
|
メールの返信先
|
|
メッセージ本文
|
メール本文
|
|
添付ファイル
|
添付するファイル（任意）
|
●メール2→お問い合わせした人に受付したことを知らせるメール設定（セキュリティの観点から今回は設定しません）
|
項目
|
内容
|
|---|---|
|
送信先
|
お問い合わせユーザーのメールアドレス
|
|
送信元
|
お問い合わせメールの送信元メールアドレス
|
|
題名
|
メールの件名
|
|
追加ヘッダー
|
メールの返信先
|
|
メッセージ本文
|
メール本文
|
|
添付ファイル
|
添付するファイル（任意)
|
ではこちらを踏まえて修正していきます。
送信先→先ほど取得したドメインメールアドレスを入力
送信元→先ほど取得したドメインメールアドレスを入力
題名→メールの件名（お問い合わせがありました）等設定しておくと分かりやすいです。
ここまで設定できたら【保存】を押してください。
送信元→先ほど取得したドメインメールアドレスを入力
題名→メールの件名（お問い合わせがありました）等設定しておくと分かりやすいです。
ここまで設定できたら【保存】を押してください。
【8-8】トップページの編集③
トップページにお問い合わせフォームを実装
①トップページに【見出し2】を追加しContactと入力
②見出しと上のセクションの間にスペーサーを挿入し間隔を調整
③Contact Form 7を挿入し先ほど作成したフォームを選択
【保存】を押してプレビューを確認してください
②見出しと上のセクションの間にスペーサーを挿入し間隔を調整
③Contact Form 7を挿入し先ほど作成したフォームを選択
【保存】を押してプレビューを確認してください
WordPress 8-9
この動画はデモンストレーション動画になります。
音声は入っておりません。
News＆informationの削除
今回はブログ機能（投稿機能）を制作実績の紹介に使用するため、こちらの項目は削除してください。
お疲れ様でした。これでトップページが完成しました。
次は固定ページを作成していきましょう！
次は固定ページを作成していきましょう！
【8-9】プラグインVK Blocksをインストール
新規プラグイン追加からVK Blocksを追加しましょう
ここまで何度かプラグインの追加を行ってきたと思うので今回は自分の力でインストール＆有効化してみましょう！
確認してみましょう
【8-10】プロフィールページの作成
ここからは説明を少し簡略化していきます！
今まで学んだことをしっかり確認しながら作業しましょう！
今まで学んだことをしっかり確認しながら作業しましょう！
プロフィールページの作成
①【新規固定ページを追加】からプロフィールページを作成してください
②【タイトルを追加】にプロフィールと入力
③【リンク】にprofileと入力
②【タイトルを追加】にプロフィールと入力
③【リンク】にprofileと入力
WordPress 8-10
この動画はデモンストレーション動画になります。
音声は入っておりません。
④カラムを追加していきます
⑤左のカラムに画像、右のカラムに見出し3と段落を追加して説明を入れていきます
⑥【固定ページ】→【レイアウト設定】を【1カラム】に変更
⑤左のカラムに画像、右のカラムに見出し3と段落を追加して説明を入れていきます
⑥【固定ページ】→【レイアウト設定】を【1カラム】に変更
WordPress 8-11
この動画はデモンストレーション動画になります。
音声は入っておりません。
⑦50/50のカラムを追加していきます。
⑧それぞれのカラムにH3と段落を入れていきます
⑨H3の文字をMサイズに変更していきます
⑩今回追加したカラム全体に対して上部にXlの余白を付けていきます
⑧それぞれのカラムにH3と段落を入れていきます
⑨H3の文字をMサイズに変更していきます
⑩今回追加したカラム全体に対して上部にXlの余白を付けていきます
WordPress 8-12
この動画はデモンストレーション動画になります。
音声は入っておりません。
ポイント
今回上部の余白はスペーサーではなくVK Blocksで追加していきます！
そちらで設定しても大丈夫ですが是非VK Blocksを使用してみてください！
そちらで設定しても大丈夫ですが是非VK Blocksを使用してみてください！
同じ要領でスキルを追加していきましょう
ここまでできたらプロフィールページの完成です！
見本ページと同じレイアウトにできているか確認してみましょう！
http://test2.webcoach-wordpress.com/profile/
ここまでできたらプロフィールページの完成です！
見本ページと同じレイアウトにできているか確認してみましょう！
http://test2.webcoach-wordpress.com/profile/
【8-11】お問い合わせページの作成
不要な固定ページの削除
作成を行った【HOME】と【プロフィール】以外の固定ページを削除しましょう！
お問い合わせページの作成
①ブロックに【Contact Form 7】を追加
②リンクを修正
③レイアウトを【1カラム】に変更
何度か行った工程なので思い出しながらやってみましょう！
②リンクを修正
③レイアウトを【1カラム】に変更
何度か行った工程なので思い出しながらやってみましょう！
【8-12】投稿ページで制作実績ページの作成
カテゴリの作成
まずはカテゴリーの作成をしていきましょう！
【投稿】→【カテゴリー】→【名前】：ウェブクリエイティブ→【スラッグ】
のように下記のカテゴリを作成していってください。
・ウェブクリエイティブ
・ランディングページ制作
・ホームページデザイン
・グラフィックデザイン
【投稿】→【カテゴリー】→【名前】：ウェブクリエイティブ→【スラッグ】
のように下記のカテゴリを作成していってください。
・ウェブクリエイティブ
・ランディングページ制作
・ホームページデザイン
・グラフィックデザイン
WordPress 8-13
この動画はデモンストレーション動画になります。
音声は入っておりません。
ポイント
【名前】はタイトルの役割です
【スラッグ】はURLになります
【スラッグ】はURLになります
制作実績の作成
WordPress 8-14
この動画はデモンストレーション動画になります。
音声は入っておりません。
ポイント
見本ではシンプルに作成していますがポートフォリオとしてアピールしたい事やお好みのレイアウトで作成してみてください！
カテゴリーの設定
①投稿タブから【カテゴリー】→【カテゴリーの追加】→グラフィックデザインを作成
②【未分類】のチェックを外し【グラフィックデザイン】にチェックをいれましょう！
③レイアウトが見本と異なる場合は【レイアウト設定】を【1カラム】に変更してください！
②【未分類】のチェックを外し【グラフィックデザイン】にチェックをいれましょう！
③レイアウトが見本と異なる場合は【レイアウト設定】を【1カラム】に変更してください！
WordPress 8-15
この動画はデモンストレーション動画になります。
音声は入っておりません。
ポイント
初期設定で作成されていた投稿は削除しましょう！
【8-13】トップページにリンクを挿入
カテゴリーURLの確認
カテゴリーを作成することで一覧ページのURLを取得することができます！
カテゴリーURLを確認＆コピーしていきましょう！
①作成した記事を表示
②左上のパンくずリストからカテゴリー名をクリック
③表示されたページのURLをコピーしておきましょう！
【例】
http://test2.webcoach-wordpress.com/category/hp/
http://test2.webcoach-wordpress.com/category/lp/
http://test2.webcoach-wordpress.com/category/webcr/
http://test2.webcoach-wordpress.com/category/graphic/
カテゴリーURLを確認＆コピーしていきましょう！
①作成した記事を表示
②左上のパンくずリストからカテゴリー名をクリック
③表示されたページのURLをコピーしておきましょう！
【例】
http://test2.webcoach-wordpress.com/category/hp/
http://test2.webcoach-wordpress.com/category/lp/
http://test2.webcoach-wordpress.com/category/webcr/
http://test2.webcoach-wordpress.com/category/graphic/
WordPress 8-16
この動画はデモンストレーション動画になります。
音声は入っておりません。
トップページにカテゴリーをリンク
①固定ページ【編集】をクリック
②Worksの下のボタンに先ほどコピーしたカテゴリーページのURLを挿入していきます。
③リンクが挿入できたら一度リンクが正しく機能するか確認していきましょう
②Worksの下のボタンに先ほどコピーしたカテゴリーページのURLを挿入していきます。
③リンクが挿入できたら一度リンクが正しく機能するか確認していきましょう
WordPress 8-17
この動画はデモンストレーション動画になります。
音声は入っておりません。
トップページにプロフィールをリンク
①プロフィールページを表示しリンクをコピーしておきましょう！
②固定ページのHOME【編集】をクリック
③プロフィールを詳しく見るのボタンにコピーしたリンクを挿入しましょう！
④リンクが挿入できたら一度リンク遷移するか確認していきましょう
②固定ページのHOME【編集】をクリック
③プロフィールを詳しく見るのボタンにコピーしたリンクを挿入しましょう！
④リンクが挿入できたら一度リンク遷移するか確認していきましょう
【8-14】制作実績ページを作成
新規固定ページを追加
投稿一覧ページに紐づけるために新規固定ページを作成しましょう！
①【新規ページを追加】
②【タイトル】を制作実績にする
③【カラム】を1カラムに
④【リンク】をportfolioに変更
①【新規ページを追加】
②【タイトル】を制作実績にする
③【カラム】を1カラムに
④【リンク】をportfolioに変更
WordPress 8-18
この動画はデモンストレーション動画になります。
音声は入っておりません。
※動画内は『製作実績』と表示されていますが、正しくは『制作実績』です。
投稿一覧ページとリンク付け
①【外観】→【テーマ】→【カスタマイズ】
②【ホームページ設定】→【投稿ページ】を先ほど作成した制作実績ページに設定
②【ホームページ設定】→【投稿ページ】を先ほど作成した制作実績ページに設定
WordPress 8-19
この動画はデモンストレーション動画になります。
音声は入っておりません。
※動画内は『製作実績』と表示されていますが、正しくは『制作実績』です。
【8-15】ヘッダーメニューの作成
ヘッダーメニューの設定をしていきます
①【外観】→【メニュー】をクリック
②メニュー名を「ヘッダーナビ」にして、メニューの位置の「Header Navigation」と 「Footer Navigation」にチェック
③ 「メニューを作成」をクリックし、４つの固定ページを全て追加
④カテゴリーを全て挿入し、「制作実績」のサブアイテムとしてドラッグ＆ドロップで配置
②メニュー名を「ヘッダーナビ」にして、メニューの位置の「Header Navigation」と 「Footer Navigation」にチェック
③ 「メニューを作成」をクリックし、４つの固定ページを全て追加
④カテゴリーを全て挿入し、「制作実績」のサブアイテムとしてドラッグ＆ドロップで配置
WordPress 8-20
この動画はデモンストレーション動画になります。
音声は入っておりません。
※動画内は『製作実績』と表示されていますが、正しくは『制作実績』です。
こちらのようなメニューが追加されていれば完成です！
お疲れ様です！これで課題①は終了です。
課題②にも取り組んでみましょう。
課題②にも取り組んでみましょう。