第11回 サイト制作実習 Stage 2 参考書付録「dekiru」 テーマでサイトを制作しよう!その2

授業特設サイト☆

https://icc.firstelement.co.jp/

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

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

この実習のねらい

  1. 参考書を読みながら(言葉の意味を理解して)自力でWordPressのサイトを作成できるようになる
  2. WordPressの機能(テーマ・プラグイン・メニュー・ウィジェットなど)を使いこなすとと、カフェサイトもメディアサイトに変えることができる。CMS=コンテンツ・マネジメント・システムの意味を肌感覚で理解する

参考書付録「dekiru」テーマのダウンロード

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

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

https://book.impress.co.jp/books/1119101053

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

前回のおさらい

  • コーポレートサイト=企業サイト
  • ホームページに割り当てた固定ページを解除
    • WordPressをインストールした初期状態は、トップページは最新の投稿記事を10件表示するブログ形式だが、固定ページを割り当てることでいわゆるホームページ的な見せ方ができる(固定ページを編集してホームページのコンテンツを作り込む)。
  • テーマのインストール(参考書 P79)
    • 外観 > テーマ > 新規追加 > 右上の検索窓からテーマ名を入力 > インストール > 有効化
  • 「『Dekiruテーマ』は更新頻度が高いテーマにぴったり」(参考書 P76)
    • 更新頻度が高いサイト
      • ニュースサイト、Webメディア、Webマガジン、ブログetc.
    • 更新頻度が低いサイト
      • 会社・団体サイトetc.
      • 飲食店など小規模なサイトは更新はSNSに任せてしまう、など
  • レスポンシブウェブデザイン
    • PC/スマホ/タブレットなど複数の端末向けのサイトを1つでつくり、端末の画面サイズに応じて最適なレイアウトに切り替えるしくみ(CSSのメディアクエリーという技術で実現)。現在の主流。以前は別々に作成していた。
  • テーマのカスタマイザーについて(参考書 P82)
    • 外観 > カスタマイズ(=カスタマイザー)の最大の特徴は、テーマの設定をリアルタイムにプレビューできること
  • ロゴのアップロード > 画像の切り抜き(参考書 P95)
    • 環境によっては(ブラウザによっては)、切り抜きができないことが発生
      • 別の会議ではMicrosoft Surfaceでも発生…原因はまた探っておきます
  • 改行と改段落(参考書 P95)
    • 文章を入力してenterキーを押すと段落
    • 同上 shift+enterだと改行
  • 画像のリンク設定(参考書 P105)
    • 画像ブロックで本文内に小さめの写真を設置したら、その画像のより大きなサイズにリンクを設定して、クリックで拡大表示できるようにする
    • 設置した画像を選択して左上に並んでいるボタンの4つ目(鎖のようなマーク)をクリックして「メディアファイル」を選択する
      • 画像を画面中央にふわっと表示する「Lightbox」形式のプラグインにもリンク設定が必要

引き続き、第5章をすすめる

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

以上

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x