授業特設サイト☆
https://icc.firstelement.co.jp/
配布資料のPDFダウンロード、授業のフォローアップなど。
わからないことはコメント欄から質問も歓迎!
架空の古民家風カフェのサイト制作の補足
- スマホでも表示を確認しよう
- 使用したテーマ「TwentySeventeen」も当然ながらレスポンシブウェブデザインに対応しているので、PC/スマホそれぞれに最適な表示がされます。
- グローバルメニューが、横並びのテキストリンク(PCの場合)から、ハンバーガーメニューをクリックすると開閉するアコーディオン形式(スマホの場合)に変わっていることなどを確認。
- メニューと本文がPCでは横並びなのがスマホだと縦表示に切り替わっていることなどを確認
- パララックス(視差効果)を設定しよう
- このテーマの魅力の一つ、トップページのパララックス(視差効果)を設定するには、外観 > カスタマイズ > テーマ設定 > フロントページ第1〜第4セクションのコンテンツ に設定した各固定ページのアイキャッチ画像を設定する。
- パララックスの魅力と注意点について
参考記事:
10のサイト事例に見るパララックスの効果的な使い方のヒント | アドビUX道場 #UXDojo
https://blog.adobe.com/jp/publish/2020/02/25/cc-web-best-practices-for-parallax-websites.html#gs.4i7qge - パララックスの事例
http://www.firewatchgame.com/
http://everylastdrop.co.uk/
- このテーマの魅力の一つ、トップページのパララックス(視差効果)を設定するには、外観 > カスタマイズ > テーマ設定 > フロントページ第1〜第4セクションのコンテンツ に設定した各固定ページのアイキャッチ画像を設定する。
参考書付録「dekiru」テーマのダウンロード
できるポケット WordPressホームページ入門 基本&活用マスターブック WordPress Ver.5.x対応
出版社の公式サイトから、本の中で使用されるテーマを無料でダウンロードできます(ロゴや写真も含まれます)
https://book.impress.co.jp/books/1119101053
ダウンロードしたzipファイルを解凍する。
参考書の説明に沿って、サイトを制作してみよう!
サイトの内容)
ローカルニュースを日々発信する架空の会社のコーポレートサイト
はじめに、前回のカフェサイト制作時に設定した、ホームページに割り当てた固定ページを解除します:
- 設定 > 表示設定をひらく
- ホームページの表示を「固定ページ」から「最新の投稿」に戻す
- 変更を保存をクリック
→ホームページが、これまで設定していた”ウェルカムメッセージ”が解除され、最新の投稿一覧に切り替わる。
次に、テーマのインストールからロゴ画像の設定までをやります:
- テーマの説明 – レッスン17(参考書P76)に目を通す
- テーマのインストール – レッスン18(P78)
- テーマのカスタマイズ – レッスン19(P82)
- テーマのアンインストールはしない(P86)
次に、第4章の冒頭、レッスン20、21(P88〜91)を説明します。
第4章(P92〜114)を参考書を見ながら、なるべく自力でページを作り込んでください。説明と画面が違うときや、わからなかったときは質問してください。
以上