WordPress
WordPress｜9章：WordPress制作課題②
INDEX
目次
前の章に戻る 次の章に進む

9章 WordPress制作課題②

【9-1】課題について

①この課題では架空のコーポレートサイトを作成していきます

課題②コーポレートサイト
↑のサイトを見本にサイトを制作していきます！
Figmaでワイヤーフレームを作成していますので、ご自身のデザインに変更したい場合はフレームを変更し作成してみてください。

【使用素材】
※（9-2にはプラグインファイルが入っています。必ずダウンロードしましょう。）

WordPress 9-1（Figma学習済みの方向け）

WordPress 9-1（Figma学習済みの方向け）

WordPress 9-2（全員ダウンロード必須）

WordPress 9-2（全員ダウンロード必須）
(31850)

ポイント
  • Figmaが使用できる方はFigmaのデータを取り込んで画像をダウンロードしてください。
  • Figmaを学習前の方は課題②素材の画像を使用しましょう！

    • 【9-2】サブドメインの取得とWordPressのインストール

    サブドメインの作成方法

    これからロリポップを使って作業していきます。

    【サーバーの管理・設定】→【サブドメイン設定】
    (31855)

    【新規作成】をクリック
    (31858)

    ①http://のあとのボックスにportfolio2と入力
    ②後ろのボックスからドメインを選択
    ③公開アップロードフォルダにportfolio2と入力
    (31861)

    ポイント
    URLやフォルダは上書きすると前に作成した物が消えてしまうので気をつけてください！
    これでサブドメインの取得が完了です！
    ※ サブドメインのDNSに反映されるまでおよそ1時間ほど時間がかかります。

    次はサブドメインで新しくWordPressを作成していきましょう！

    WordPressのインストール

    (31865)

    WordPressのインストール方法が分からない場合は、教材をもう一度見返してみましょう。
    WordPressをインストールする際は先ほど作成したportfolio2がついているドメインを選択して作成していきましょう！

    【9-3】テーマとプラグインのダウンロード

    テーマのダウンロード

    【外観】→【テーマ】→【新しいテーマを追加】→【テーマを検索】Arkheと入力

    Arkhe​が出てきたら【インストール】→有効化を押してください

    WordPress 9-1

    WordPress 9-1
    この動画はデモンストレーション動画になります。 音声は入っておりません。

    プラグインをインストール

    下記のプラグインをインストール＆有効化していきましょう！
    Arkhe Blocksが現在オンラインダウンロードが出来ないので、動画を見ながら、【9-1】でダウンロードした添付ファイルをアップロードしていきましょう！
    その他のプラグインはWordpressからダウンロードしていきましょう！

    【ブロックエディタカスタマ】
    ・Arkhe Blocks
    【arkhe-blocks.zip】　
    ※冒頭でダウンロードしたzipファイルのうち、「arkhe-blocks」と命名されたファイルのみを再びzip化して使用。
    ・VK Blocks
    【CSSをカスタマイズするプラグイン】
    ・Simple Custom CSS and JS
    【フォームを作成するプラグイン】
    ・Contact Form 7

    【うまくいかない方向け】arkhe-blocks.zip

    【うまくいかない方向け】arkhe-blocks.zip
    arkhe-blocks.zipがうまくアップロードできない方は、こちらから再度zipファイルをダウンロードしてアップロードしてみましょう！

    WordPress 9-2

    WordPress 9-2
    この動画はデモンストレーション動画になります。 音声は入っておりません。
    ポイント
    有効化ができていないと反映されないため、必ず有効化が出来ているか確認しましょう！

    【9-4】サイトの基本設定

    トップページに設定する固定ページを作成していきましょう

    固定ページ新規作成から
    ・トップページ
    ・お知らせページ
    を作成してください！お知らせページは必ずスラッグを英語に変更しましょう！

    WordPress 9-3

    WordPress 9-3
    この動画はデモンストレーション動画になります。 音声は入っておりません。

    サイトの基本設定の修正をしていきましょう！

    【外観】→【テーマ】→【カスタマイズ】から各種設定をしていきます！
    下の画像を参考に設定していきましょう！
    【サイト基本設定】をクリックしてください。
    ①ロゴ画像の挿入
    ②サイトのタイトル　CreativePartner Inc.　を入力
    ③サイトアイコンの挿入
    (31882)

    全体設定
    ①メインカラー　#346191
    ②テキスト色　#333333
    ③リンク色　#346191
    に変更しましょう！
    (31885)

    ④NO-IMAGE 設定
    ロゴ画像を挿入しましょう！
    (31888)

    ヘッダー
    ヘッダーロゴ設定 PC版を90に変更しましょう！
    (31891)

    フッター
    ①背景色　#346191
    ②文字色　#ffffff
    に変更しましょう！
    (31894)

    サイドバー
    サイドバーのチェックボックスを全て外してください。
    (31897)

    ホームページ
    ①【固定ページ】にチェック
    ②【ホームページ】をトップページに修正
    ③【投稿ページ】をお知らせに修正
    (31900)

    【9-5】トップページの作成

    【固定ページ】→【トップページ】からトップページ作成をしていきます！

    ファーストビューの作成

    ファーストビュー背景画像設定
    ①【セクション】を追加
    ②【背景メディア設定】に背景画像をいれてください
    ③【高さ設定】→数値で指定する→100％に設定
    【②参考写真】
    (31907)

    【③参考写真】
    (31909)

    ファーストビューテキスト設定
    ④【見出し2】を挿入→フォントの太さを【B】に設定→テキストを挿入
    ⑤【ブロック】→【タイポグラフィ】→【サイズ】を巨大に設定
    ⑥【段落】を追加→テキストを挿入
    ⑦【ブロック】→【タイポグラフィ】→【サイズ】を大に設定
    ⑧見出しと段落をグループ化し、上下にXXLの余白を設けましょう。
    【⑤参考写真】
    (31913)

    WordPress 9-4

    WordPress 9-4
    この動画はデモンストレーション動画になります。 音声は入っておりません。

    スマホビューの設定

    ファーストビュー用のテキストを作成しましょう
    ①【レイヤーパネル】→先ほど作成した【グループ】を複写
    ②【見出し2】を複写→中央揃えに設定
    ③【ブロック】→【タイポグラフィ】→【サイズ】を特大に設定
    ④【段落】を中央揃えに設定

    WordPress 9-5

    WordPress 9-5
    この動画はデモンストレーション動画になります。 音声は入っておりません。

    表示切替の設定

    スマホとパソコンでの表示の切り替え設定をしていきましょう！

    パソコンバージョンの表示設定
    ①【グループ】を選択→【ブロック】→【表示非表示設定】→【xs/sm/md】の非表示をオンにする。
    (31919)

    スマホバージョンの表示設定
    ①【グループ】を選択→【ブロック】→【表示非表示設定】→【lg/xl/xxl】の非表示をオンにする。
    (31922)

    ABOUTのセクションを作成

    タイトルと背景の設定
    ①ファーストビューの下にセクションを追加してください。
    ②【ブロック】→【カラー設定】→【背景色】#346191に変更
    ③【ブロック】→【カラー設定】→【文字色】#ffffffに変更
    ④【見出し2】→ABOUTと入力
    ⑤【ブロック】→【カラー設定】→【線の色】#ffffffに変更

    WordPress 9-6

    WordPress 9-6
    この動画はデモンストレーション動画になります。 音声は入っておりません。
    コンテンツの作成
    ①カラムを追加（50/50）
    ②左側のカラムに写真を追加
    ③右側のカラムに【見出し3】を追加→想いを、デザインする。を入力
    ④右側のカラムに【段落】を追加→私たちの仕事は…を入力
    (31927)

    SERVICEのセクションを作成

    ①ABOUTで作成した時と同じ方法でセクションを追加
    【背景色】#ffffffに変更
    【文字色】#346191に変更
    ②カラムを追加（50/50）
    ③画像をドラック＆ドロップで追加
    ④画像の下に段落を追加しタイトルを入力
    ⑤作成したカラムを複写し他のコンテンツも作成
    ⑥画像やタイトルを差し替えましょう。

    WordPress 9-7

    WordPress 9-7
    この動画はデモンストレーション動画になります。 音声は入っておりません。

    WORKSのセクションを作成

    ①ABOUTで作成した時と同じ方法でセクションを追加
    【背景色】#346191に変更
    【文字色】#ffffffに変更
    ②【スライダー】を追加
    ③【スライダーアイテム】の中に画像を追加
    ④作成したスライダーアイテムを複写し画像を置換していく

    WordPress9-8

    WordPress9-8
    この動画はデモンストレーション動画になります。 音声は入っておりません。
    ⑤【スライダーアイテム】を選択
    ⑥【ブロック】→【背景】→【透過設定】を0にする
    (31935)

    ⑦【スライダー】を選択
    ⑧【ブロック】→【ページネーションの種類】【ナビゲーションの位置】を非表示に設定
    (31937)

    CONTACTのセクションを作成

    フォームの作成方法は課題①を参考に行って下さい。
    ①ABOUTで作成した時と同じ方法でセクションを追加
    【背景色】#ffffffに変更
    【文字色】#346191に変更
    ②Contact Form 7を追加
    右の写真の様になっているか確認してください。
    (31940)

    CONTACTのレイアウトを変更

    ①以下のコードをコピーしてください
    /* フォーム */

input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required {
    width: 100%;
}

textarea.wpcf7-form-control.wpcf7-textarea {
    width: 100%;
}
input.wpcf7-form-control.wpcf7-submit.has-spinner {
    width: 200px;
    background-color: #FFA118;
    color: #ffffff;
}
    WordPress9-1
    ②【カスタムCSS＆JS】をクリック→【CSSコードの追加】→コピーしたコードを張り付け→【更新】

    これでトップページの完成です。見本と見比べてみてください。

    【見本ページ】http://test3.webcoach-wordpress.com/

    WordPress 9-9

    WordPress 9-9
    この動画はデモンストレーション動画になります。 音声は入っておりません。

    【9-6】企業情報ページの作成

    【固定ページ】→【新規作成】から企業情報ページを作成していきます！
    (31948)

    ここからは簡易な説明に変えていきます。今まで使った、【セクション】【見出し】【カラム】を使って見本を見ながら作成してみましょう！
    【見本ページ】http://test3.webcoach-wordpress.com/about/
    また、見出しの背景を設定するために、先ほどと同じ方法で以下のCSSコードを追加しましょう！
    /*タイトル */
.p-topArea.-noimg {
    background: #346191;
}

/*フッター */
.l-footer {
    background-color: #346191;
    color: #ffffff;
    position: relative;
    z-index: 0;
}
    WordPress 9-2

    【9-7】会社概要ページの作成

    【固定ページ】→【新規作成】から会社概要ページを作成していきます！
    ①【カラム（33/66）】を挿入→見本を見ながら内容を入力
    ②【区切り】を挿入
    必要情報を全て入力できたら完成です！
    【見本ページ】http://test3.webcoach-wordpress.com/company/
    (31953)

    【9-8】メニューを作成

    【外観】→【メニュー】からグローバルメニューを作成していきます！
    ①【新しいメニューを作成しましょう】をクリック
    ②【メニュー名】にヘッダーナビと入力
    ③【固定ページ】からホーム・会社概要・企業情報・お知らせ・お問い合わせを追加
    ④グローバルナビゲーションにチェックを入れ【メニューを保存】
    (31957)

    【9-9】コンタクトページの作成

    【固定ページ】→【新規作成】からお問い合わせページを作成していきます！
    ①【Contact Form 7】を追加、フォームを設定して保存
    【見本ページ】http://test3.webcoach-wordpress.com/contact/
    (31961)

    【9-10】フッターメニューを修正

    【外観】→【ウィジェット】からフッターのコンテンツを削除しましょう。
    ①【フッター1】をクリック
    ②中のコンテンツを全て削除（右の写真のような状態）し【更新】
    (31965)

    お疲れ様でした。これで課題②が完成です。作成されたサイトを確認してみましょう！
    前の章に戻る 次の章に進む
    WEBCOACH | キャリアチェンジまでの全てを学ぶマンツーマンWEBスクール
    © 2020 by WEBCOACH