第10回サイト制作実習 Stage 2 参考書付録「dekiru」テーマでサイトを制作しよう！ - ICC｜Web基礎

Contents

授業特設サイト☆

配布資料のPDFダウンロード、授業のフォローアップなど。

わからないことはコメント欄から質問も歓迎！

スマホでも表示を確認しよう
1. 使用したテーマ「TwentySeventeen」も当然ながらレスポンシブウェブデザインに対応しているので、PC/スマホそれぞれに最適な表示がされます。
2. グローバルメニューが、横並びのテキストリンク（PCの場合）から、ハンバーガーメニューをクリックすると開閉するアコーディオン形式（スマホの場合）に変わっていることなどを確認。
3. メニューと本文がPCでは横並びなのがスマホだと縦表示に切り替わっていることなどを確認
パララックス（視差効果）を設定しよう
1. このテーマの魅力の一つ、トップページのパララックス（視差効果）を設定するには、外観 > カスタマイズ > テーマ設定 > フロントページ第1〜第4セクションのコンテンツ　に設定した各固定ページのアイキャッチ画像を設定する。
2. パララックスの魅力と注意点について
  参考記事：
  10のサイト事例に見るパララックスの効果的な使い方のヒント | アドビUX道場 #UXDojo
  https://blog.adobe.com/jp/publish/2020/02/25/cc-web-best-practices-for-parallax-websites.html#gs.4i7qge
3. パララックスの事例
  http://www.firewatchgame.com/
  http://everylastdrop.co.uk/

できるポケット WordPressホームページ入門基本＆活用マスターブック WordPress Ver.5.x対応

出版社の公式サイトから、本の中で使用されるテーマを無料でダウンロードできます（ロゴや写真も含まれます）

ダウンロードしたzipファイルを解凍する。

サイトの内容）

ローカルニュースを日々発信する架空の会社のコーポレートサイト

はじめに、前回のカフェサイト制作時に設定した、ホームページに割り当てた固定ページを解除します：

次に、テーマのインストールからロゴ画像の設定までをやります：

次に、第4章の冒頭、レッスン20、21（P88〜91）を説明します。

第4章（P92〜114）を参考書を見ながら、なるべく自力でページを作り込んでください。説明と画面が違うときや、わからなかったときは質問してください。

以上