LogoMark.png

情報デザイン演習IIIA/2021/1005 のバックアップ差分(No.2)


#author("2021-09-16T13:36:12+09:00","default:inoue.ko","inoue.ko")
#author("2021-09-16T15:00:19+09:00","default:inoue.ko","inoue.ko")
*第4回|WordPress の活用
[[情報デザイン演習IIIA/2021]] 2021.10.05
[[学科サイト|受講生一覧>https://design.kyusan-u.ac.jp/socialdesign/?%E6%83%85%E5%A0%B1%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E6%BC%94%E7%BF%92IIIA]]
~

***AGENDA
-以下名簿が表示されます。出欠確認をお願いします。
&fontawesome(far fa-hand-point-right); [[出欠確認・座席記録>https://docs.google.com/spreadsheets/d/1lqpK0yahLjyKiQ1j_nVmRSFUojMUstJB8Uln6PtZs_M/edit?usp=sharing]]
-講義はこのページの内容を解説するかたちで遠隔 LIVE 配信します。
-本日の内容に従って、学科サイトの個人ページに情報を記載して下さい。
&fontawesome(far fa-hand-point-right); [[受講生一覧>https://design.kyusan-u.ac.jp/socialdesign/?%E6%83%85%E5%A0%B1%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E6%BC%94%E7%BF%92IIIA]]
~

#hr
'''''以下、LIVE動画をご覧下さい。記事に沿って解説します。'''''
記録動画の公開は10月8日(金)までとします。早めの確認をお願いします。
#hr
~

#youtube(ABC)
埋め込み無効状態です。授業開始直前にページをリロードして下さい。
~

-配信開始:2021.10.05 13:40 -
-動画は授業直前に有効になります(準備段階では黒い画面)。授業開始時にページを再読み込みしていただくと、視聴が有効になります。
~


***CONTENTS
#contents2_1

~
~

**はじめに
***今後の進行計画
-%%第1回 09.15 ガイダンス|AnotherSky:「場所」の選定%%
-%%第2回 09.21 WordPressサイト開設|AnotherSky:ネタの洗い出し%%
-%%第3回 09.28 WordPress の基本操作|AnotherSky:サンプル記事の投稿%%
-''第4回 10.05'' WordPress の活用|AnotherSky:サイトマップ
-第5回 10.12 WordPress のカスタマイズ(スタイルシートの編集)
-第6回 10.19 個別記事のプロトタイピング|AnotherSky:ワイヤーフレーム
-第7回 10.26 中間報告 > 記事の書き方等を確認
 :
 以後、各自のスケジュールに沿ってサイト制作を行っていただきます。
 :
-第14回 12.21 成果報告(プレゼンテーション)
~
~

**メニューとウイジェット

***メニュー
#image(WordPress/Basics/SetUpMenu.jpg,right,30%)
固定ページやカテゴリーワードをメニューバーに並べることで、一般的なサイトと同様のナビゲーション環境を構築することができます。メニューのカスタマイズには、「メニューの編集」と「位置の管理」の2つの設定作業が必要です。

-メニューに使える項目
--固定ページ:常設的なページの利用(最も一般的な項目)
--投稿:単体の投稿もメニューに登録できます。
--カスタムリンク:外部リンクをメニューに登録することができます。
--カテゴリー:カテゴリーに属する投稿記事が自動回収されます。

-メニューの編集
ダッシュボードから「外観>メニュー」で設定画面になります。
--固定ページ、リンク、カテゴリー等から項目を選択して、メニュー構造の設定部分へドラッグします
--メニューの階層構造は要素を移動するだけで簡単に設定できます
--ラベル(実際に表示される文字列)は自由に変更できます
--最後に「メニューの保存」をクリック


-位置の管理
メインメニュー以外にも複数のメニューを追加することができる設定になっています。したがって、テーマ(外観)上のどの位置に、どのメニューを表示するかを明示的に指定することが必要です。
~

***ウィジェット
WordPressには、ウィジェット(ブログパーツ)が多数用意されています。

-ウィジェットが表示できる場所は
メインサイドバー、フッターエリア、ショーケースエリアなど

-ウィジェットの種類
--カスタムメニュー(メニューを複数持たせることができます)
--カテゴリー、タグクラウド(投稿記事を分類・検索表示できます)
--テキスト(自由なテキスト、HTMLの埋め込みコードも使えます)
--メタ情報(ログインボタン等が表示されます)
--その他、カレンダー、アーカイブなど多数あります。

テーマによっては、複数のページテンプレートを持っている場合があります。
サイドバーが表示されるタイプのテンプレートを使用して下さい。
~
~


**[[カテゴリーとタグ>InformationDesign#CategoryTag]]
WordPressでは、投稿記事(情報要素)にカテゴリーとタグ(フォルダとインデックス)を付けることができるようになっていて、カテゴリーはメニュー項目として、タグは、タグクラウドなどを用いることで、記事の抽出に役立てることができます。

&image(InformationDesign/CategoriesAndTags.png,,30%); &image(InformationDesign/CategoriesAndTags_WP.png,,28%);
~

***Category(Folder):
-一定の観点から一挙に仕分けられるもので、階層構造を持つ
-要素の集合を分類する観点(視点)は無限にある*1
-観点(視点)を定めて要素を分類する際、(原則としては)ひとつの要素が2つ以上のカテゴリーに重複して存在することはない
~

***TAG(Index):
-要素に関連する「目印」で、系統的に整理されるものではない
-タグは、分類上の「観点」とは無関係に存在する
-ひとつの要素には複数のタグをつけることができる

~

***カテゴリー・タグの命名
カテゴリーやタグは「投稿>カテゴリー / タグ」から一括して登録します。
 
-カテゴリーは記事対象がうまく分類できるよう、体系的に命名します。
--カテゴリー名は自由につけることができます。
--親カテゴリーを指定して、その下にサブカテゴリーを作ることも可能です。
&image(WordPress/Basics/CategoryName.jpg,,25%); &image(WordPress/Basics/CategoryMenu.jpg,,30%);

-タグは「検索キーワード」になるもので、体系的なものではありません。
--タグ名は自由につけることができます。
--タグには階層構造はありません。

~

***カテゴリー・タグの活用
#image(WordPress/Basics/SetCategory.jpg,right,15%)
-投稿記事のカテゴリーやタグは「投稿設定」パネルでチェックを入れる形で設定します。

-カテゴリーメニューを作るには、外観>メニューから・・
--カテゴリーから項目を選択してメニュー構造へドラッグ
--ラベル(実際に表示される文字列)は自由に変更可
#clear
~

***事例紹介
-https://jssd5th.wordpress.com/
-https://opensquarejp.wordpress.com/
~
~

**本日の演習
***サイトマップの作成
-メニュー構成をツリー状のサイトマップとしてまとめます。
> [[GoogleImage:Web サイトマップ]]

-第2回の演習で、洗い出しを行った「記事項目」をグループに整理して、サイトマップとして構成してください。

-一般に、ページのヘッダー部分に位置づけられるサイト全体のメニューを「サイトナビゲーター」と言い、複数の項目が、階層的に配置されます。
--主たる分類項目を4〜7項目(メインメニュー)
--それぞれの項目の下に数項目(サブメニュー)

//-事例:https://koichi-inoue.github.io/Navi-HoverDown/
~

***カテゴリの登録
カテゴリメニューに位置付けるキーワードをWordPress に登録してください。
 ダッシュボード>投稿>カテゴリ

~
~


**学科サイトの更新

***サイト名・概要部分
-サイトマップを完成させて画像で掲載して下さい。
~

***プロジェクト管理部分
-スケジュールを再確認し、変更点があれば修正・更新して下さい。
-ToDo の部分には、今後やるべきことをメモして下さい(随時更新)。
~

***進捗記録の部分
以下の形式を参考に、本日の作業報告を記載して下さい。
 **2020.10.05
 ***私のアナザースカイ|作業メモ
 -◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯。
 -◯◯◯◯◯◯、◯◯◯◯◯◯◯◯、◯◯◯◯。
 ~
 
 ***WordPress|技術メモ
 (本日の演習で学んだ WordPress の基本操作についてメモを残しましょう)
 ~
~
~