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

授業特設サイト☆

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

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

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

これまでのおさらい、補足、まとめ

  • WordPress上での画像の管理
    • アップロードした画像/動画/音声/PDFなどは「メディア」に保管される
      • 管理画面の「メディア」を覗いてみよう
        • 過去にアップロードしたすべての画像を横断的に管理できる
        • 新規に画像を追加、または不要な画像の削除もできる
      • 画像を1つクリック
        • 「アップロード先」という項目がある画像は使用されている画像
          • 削除すると画像のリンク切れがおこる
        • 「画像を編集」から、トリミングや90度回転など基本的な編集ができる
    • 投稿画面から画像を設定するときに開く「メディアライブラリ」はメディアに保管された画像をブラウズしたり追加でアップロードする機能
    • 画像、動画、音声…これらをメディアと呼ぶ(辞書:手段、方法、媒体、記憶媒体…)
  • Webでよく使われる画像のフォーマット
    • JPEG(ジェイペグ)
      • 写真など階調が多い画像(滑らかに色が変化する画像)、色数の多い画像に最適
      • 圧縮率を調整することで画質を保ったまま容量を減らせる
        • ページの表示時間を短縮できる、データ転送量を減らせる
        • 100→90%に落とすだけで一気に容量を減らせる
        • 背景がボケた写真など、輪郭がハッキリしない写真は圧縮しやすい
      • 圧縮しすぎると、ロゴやベタ塗り画像はモスキートノイズが出る(汚い画像になる)
      • フルカラー (24ビット=2の24乗=16777216色)
      • 拡張子=jpg、jpeg
オリジナル写真 106KB
圧縮率 60% 37KB いちごの表面がボロボロに荒れていて鮮やかさも若干落ちています(しかし単体で見るとそれほど気にならないギリギリのライン)。周辺部は元々ボケているので劣化がわかりません。
  • PNG8(ピング、ピーエヌジー)
      • 8ビット=2の8乗=256色まで表現可能
      • 写真よりもロゴやイラスト、グラフなど、色数が多くない画像に最適(横方向に同じ色が続く画像は圧縮効率が良く、画像の大きさの割りに容量が増えない)
      • 背景を透過できる(ロゴ部分が色付きで背景が透明、など)
        • しかし切り抜いたフチが階調が足りずギザギザになる…
      • 拡張子=png
    • PNG24
      • 24ビット=2の24乗=16777216色
      • 背景を透過できる(実際はPNG24+透過8ビット=PNG32)
        • 階調が十分にあるので切り抜いてもフチがきれい!
      • 拡張子=png
    • GIF(ギフ、ジフ)
      • 8ビット=2の8乗=256色まで表現可能
      • 拡張子=gif
      • ループアニメーションを作成できる
        • 矢印のアニメーションなどシンプルなループアニメetc.
        • 近年Twitterなどで流行る
    • どのフォーマットを使うのが正解・不正解ということはないので、画像の内容に応じて容量と画質の組み合わせで最適なものを選ぶ
    • 参考:
      【PNG32 PNG24 PNG8 違い】WEB向け画像拡張子の種類と特徴 – デジマースブログ
      https://blog.digimerce.jp/2019/11/05/8793/
  • ブロックは追加(拡張)できる
    • WordPress標準のブロック
    • 各種プラグインが用意するブロック
    • その他、ブロックを拡張するプラグインもある
      • 「CoBlocks」プラグインをインストールしてみよう
      • 紹介記事:
        ブロックエディタ拡張プラグイン「CoBlocks」全30ブロック解説、表示例付き
        https://kumaweb-d.com/wordpress/coblocks_30/
      • 「Masonry」ブロックを使ってみよう
        • 「+」マークをクリックして「Masonry」と検索
        • クリックしてブロックを挿入
        • メディアライブラリ をクリックして、すでにアップロード済みの画像を5〜10点ほど選択して「ギャラリーを作成」→「ギャラリーを挿入」
        • 右パネルの Gutter で画像と画像の間のスペースを調整(例:25)
        • Rounded corners で写真の角を丸く加工できる(例:12)
        • Lightbox も有効化できる
        • プレビューで確認
      • 「Highlight」ブロックを使ってみよう
        • 「+」マークをクリックして「Highlight」と検索
        • クリックしてブロックを挿入
        • 文章を2〜3行入力してみよう
          • 行単位で背景色が付きます
        • 右パネルの Color settingsBackground Colorカスタムカラー をクリックして、16進数での色指定#ffff77 と指定(蛍光ペンのような表現)
        • プレビューで確認
      • 「Accordion」ブロックを使ってみよう
        • 「+」マークをクリックして「Accordion」と検索
        • クリックしてブロックを挿入
        • Write accordion item title… に以下のように入力
          「Q. 飯田コアカレッジにはどんな学科がありますか?」
        • Add content… に以下のように入力
          「ITビジネス学科、ITスペシャリスト学科、IT医療事務学科があります。」
        • プレビューで確認
      • その他「Shape Divider」「gif」など…便利なブロックが沢山あるので試してみてください
  • 長い文章には、適度に見出しを付ける(参考書 P120)
    • 「見出しとは、文章の内容が一目で分かるように付ける表題や要約」
    • 長い文章を見出しで区切ることで読みやすくなる
    • 見出しは、それに続く段落の内容を表すものにする
    • 見出しを適切に設定することでSEOのスコアも上がりやすくなる
    • 見出しにはレベルがあり、タイトル(h1)に続いて、大見出し(h2)、中見出し(h3)、小見出し(h4)、その他…となる。
  • 箇条書き(リスト)の適切な利用(参考書 P124)
    • イベントの開催日時、お問合せ先、商品のスペックなど、項目名と値が繰り返す内容はリストブロックを使うことで見やすくなる。黒丸などを手打ちして改行で表現せず、極力リストを使う。見た目で判断するのではなく、きちんと “意味付け” をする(セマンティック・ウェブ)。
    • 先頭の黒丸や数字は手入力しなくても自動で割り振られる
    • 記号や数字が不要な場合はCSSで隠すこともできる
  • 行の折り返し部分での改行は不要
    • 閲覧する端末によって折返し位置が異なるため、かえって読みにくくなる。
  • 記事の自動保存について
    • Word/Excelなどと違い、WordPressは記事が(下書きとして)自動保存される
    • タイトルor本文を入力して別のブロックにカーソルを移動したタイミングで初めて自動保存が有効化される
  • 予約投稿について(参考書 P109)
    • 記事の公開は通常は「公開ボタン」を押したタイミングで即座に公開される。未来の日時を指定することで、そのタイミングで自動公開になる(=予約投稿)
  • 記事を分類する「カテゴリー」「タグ」について(参考書 P132)
    • 詳しくは後期に取り上げます。
    • カテゴリーを作成し、記事作成時にチェックを入れておくと記事を分類できる。
      • カテゴリーごとに記事を一覧表示できる
      • 「お知らせ」と「スタッフブログ」など

時間が余ったら、(素材は手元にあるはずなので)第5章〜第6章…と進めてもらっても構いません。

来週、前期のまとめテストクイズ、アンケート

以上

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