LogoMark.png

ソーシャルデザイン演習/2021/0415

ソーシャルデザインのための情報共有2

ソーシャルデザイン演習/2021|2021.04.15

AGENDA

CONTENTS


はじめに

前回に引き続き、学科サイトにおける個人ページの編集方法について説明します。本日のテーマは2つ。リンクの形成と画像の掲載です。リンクは簡単ですが、画像の掲載については、アップする前に自分自身で画像のサイズを「Web用に最適化する」という作業が必要になります。

前回の復習(基本の確認)

EditButton.png

リンクの掲載

リンクとは、あるページから別のページへと、クリックで誘導する要素のことです。通常リンクボタンとなっている要素の上にマウスを持っていくと、マウスがポインタに変わる、リンク文字の色が変わるなど、何らかの演出によって、そこがリンクであることがわかるようになっています。

リンクには、同一サイト内の別ページにジャンプする「内部リンク」と、他所のサーバー上にあるページへジャンプする「外部リンク」の2つがあります。

内部リンク

外部リンク


演習

あなたのページの下の方に、以下の部分をコピー&ペーストして、いくつかのリンクを張って下さい。

***リンク集
-内部リンク
--[[ソーシャルデザイン演習]]
--[[◯◯◯◯/IdeaNote]](◯の部分は自分の名前)
--[[◯◯◯◯/視覚デザイン演習]]
-外部リンク
--[[ソーシャルデザイン演習 授業のページ>https://design.kyusan-u.ac.jp/OpenSquareJP/?%E3%82%BD%E3%83%BC%E3%82%B7%E3%83%A3%E3%83%AB%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E6%BC%94%E7%BF%92/2021]]
--[[◯◯◯◯>https://xxx.xxxx.xxx]]
--[[◯◯◯◯>https://xxx.xxxx.xxx]]


付記:リンクに許諾は不要です

重要なことですが、リンクするのに相手の許諾は不要です。よく、「勝手にリンクしていいんですか?」という質問を受けることがありますが、リンクというのは、閲覧を誘導しているだけなので、著作権侵害にはあたりません。
 Webサイトというものは、あちこちからリンクされる(被リンク数が多い)方がサイトの価値が上がって、検索ランキングも上がるので、リンクされることは「うれしいこと」なのです。リンクを張っておくと有益・・と思われるサイトは、見つけたらすぐ、自分のページにリンクしてしまいましょう。



画像の掲載

画像つまり、写真やイラストの掲載には、いくつかの予備知識が必要です。はじめに、Web用の画像の最適化に関する知識を確認、下準備を行なった上で、画像の掲載を行って下さい。

画像の掲載に必要な予備知識

はじめに、画像データの取り扱いに関するあなたの現在の知識を確認します。画像の掲載には、少しだけ追加の学習が必要になります。以下、ご確認下さい。

注)SNSの場合、利用者がアップした画像は、サービス側で最適なサイズに自動調整されています。しかし、WikiやブログなどのCMSや、自分でWebサイトを作る場合は、制作者側で画像のサイズをWeb用に最適化する必要があります。


以上、ご自身の経験上、問題なければ、先へ進んでください。

画像の最適化について自信がない方は、以下のページをお読み下さい。
画像のサイズを変更するためのWebサービスも紹介しています。

いや、面倒な話は抜きで、とりあえず試したい・・という方へ

MonaLisa.jpg


画像のリサイズが簡単にできるオンラインツール

以下、2つ紹介します。Google Squooshがおすすめです。

Wikiへの画像の掲載手順

Upload.png
Attach.png

画像の「回り込み」とその解除

画像を左右に振った場合、その下の文章が空いたすき間にせりあがってきます(これを「回り込み」といいます)。これを回避するには、「回り込み解除」を意味する、以下のコードを記述して下さい。

#clear


具体例

#image(images/sample.jpg,right,30%)
Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
#clear
[ここから次のブロックの文章] Lorem Ipsum has been the industry's 
standard dummy text ever since the 1500s, when an unknown 
printer took a galley of type and scrambled it to
make a type specimen book.
sample.jpg

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

[ここから次のブロックの文章] Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.


演習

あなたのページ内に、以下のようにして写真を掲載して下さい。場所はどこでも構いません。
アップロードする前に、必ず画像データのファイルサイズを確認して下さい。1枚の写真が300KBを超えているときは、リサイズして下さい。数十KB〜 200KB 程度が適正とお考えください。


pct470020170217154233.jpg


付記1:写真は原則あなたのオリジナルに限ります。

インターネットからダウンロードした画像等をアップすることは、著作権法上問題です。あなた自身が撮影した写真、あるいは、あなたが描いたイラスト等、オリジナルのものをアップするようにして下さい。

付記2:PD(PublicDomain)の画像は自由に掲載可能です

PD(PublicDomain)というのは、著作権の有効期限が切れて、世界の共有財産となった著作物のことです。例えば、以下をご覧ください。
Hiroshige, Travellers surprised by sudden rain.jpg

ダビンチのモナリザや、北斎・広重の浮世絵といったものは、自由に利用することが可能です。Wikimedia Commons には、そうした画像が大量に掲載されています。「C(Copyright)」のマークに斜め線が入って public domain と表記があるものは、あなたのサイトに掲載したり、またその画像でT-シャツを作って売る・・なども可能です。


はい。お疲れ様でした。
第2回目は、以上の体験をもって終了とします。時間に余裕のある方は、個人ページのさらなる充実を図って下さい。



APPENDIX

第6回(次回)のソーシャルデザイン演習について

次回 4月22日は、キャリア支援センターガイダンス(対面)です。13:40 キャリア支援センターに直接集合して下さい。

第7回に向けて

第7回の授業では、YouTube を活用した動画共有について学びます。YouTube は Google のアカウントと連動するので、Googleのアカウントを事前に取得して、YouTubeのアカウント(チャンネル)を作成しておいて下さい。授業では、実習室のパソコンでログインするので、IDとパスワードをお忘れなく。



PAGES

GUIDE

DATA

Last-modified: 2021-04-15 (木) 12:59:57