当サイトへの画像の掲載について
デジタルカメラで撮影したものは、幅が数千ピクセル、ファイルサイズにして数MBもあります。これをそのままリンク配置すると大きな通信負荷をかけるので、リサイズ・圧縮を行なってファイルを軽くする必要があります。
当サイトでは、データダイエットのため 512KB以上のファイルはアップロードできないように制限をかけています(アップロード画面に明記されています)。
Instagram, Twitter などはアップした時点でサービス側でリサイズ・圧縮が行われています。
Webに掲載する画像の一般的なサイズは、ヘッダー画像で 1280px〜1920px、記事内の画像で 360px〜960px程度、サムネイルで 160px〜240px 程度です。
画像のリサイズを行うにはオンラインツールやスマホ、PCにインストールされた画像処理ツールを使います。以下のような方法があります。
JPEG形式( .jpg)、PNG形式( .png) 、WebP(.webp)、GIF形式( .gif)、SVG(.svg)など、Webブラウザが対応する形式を選択して下さい。
Photoshop形式( .psd )やIllustrator形式( .ai)ような特定のソフトに依存する形式は使えません。また、WORDやPDFなどのドキュメントファイルは、ページ内に直接表示することはできません。
#image(画像ファイル名, [ left / right / center ] , 初期表示(%) , "一行コメント")
以下のように、画像のファイル名の前に、それが添付されているページ名を加えることで、他のページからの画像の流用掲載が可能です。
#image(画像が添付されたページの名称/画像ファイル名,・・以下同様)
ページ名と画像ファイル名の区切りは「/」半角スラッシュです。
例えば、JohnSmith さんの 情報デザイン演習IIA のページにある MainVisual.jpg をこのページに掲載するには、以下のように記載します。
#image(JohnSmith/情報デザイン演習IIA/MainVisual.jpg,,30%)
#image(sample.jpg)
#image(sample.jpg,center,40%)
#image( ファイル名, left / right, ・・・) 2つ目のパラメータに left または right と記載
この文章は回りこみ動作確認用のダミーです。この文章は回りこみ動作確認用のダミーです。この文章は回りこみ動作確認用のダミーです。この文章は回りこみ動作確認用のダミーです。この文章は回りこみ動作確認用のダミーです。この文章は回りこみ動作確認用のダミーです。この文章は回りこみ動作確認用のダミーです。この文章は回りこみ動作確認用のダミーです。この文章は回りこみ動作確認用のダミーです。この文章は回りこみ動作確認用のダミーです。
以下のように記載しています。
#image(sample.jpg,right,30%,"これはサンプル画像です。") この文章は回りこみ動作確認用のダミーです。・・・ #clear
左に寄せるだけで、回り込みさせたくない場合は、以下のように2番目のパラメータを空欄(カンマを連打 [ ,, ] )にして下さい。
&image(sample.jpg,,20%); &image(sample.jpg,,20%); &image(sample.jpg,,20%);
画像をインライン要素(プラグイン記号 & )として表示することで、文字並びと同様に、羅列させて表示することができます。この場合、2番目のパラメータは空欄(カンマを連打 [ ,, ] )にして下さい。
当サイトでは、編集画面内で [ | ](縦ストローク)を使って以下のように記述すると、各要素が表の形で出力されます。
|49|2|49|c ← 合計が 100(%)になるように |#image(sample.jpg)| |#image(sample.jpg)|
表の罫線を消したい場合は、編集画面に以下のコードを貼り付けて下さい。
#settableborder(none)
[[&image(・・略・・);>リンク先]]
画像にハイパーリンクを設定するには、画像をインライン要素( #プラグイン( ) ではなく &プラグイン( ); )として表示した上で、ページ名 または URL にリダイレクトします。以下書き方です。
[[&image(sample.jpg,,20%);>健康スポーツ科学科]] [[&image(isample.jpg,,20%);>http://www.example.com]]
スマートフォン等で撮影した写真には、位置情報が含まれる場合があります。自宅の位置情報などプライベートな情報が流出しないよう、画像等をアップする場合は、それを削除することをお勧めします。
参考:このページの記事は「画像」すなわち、ラスターデータを前提として内容ですが、HTML5 からは「図形」すなわち、ベクターデータ(具体的には SVG 形式のデータ)も直接使えるようになりました。ロゴのように Illustratorで作成できるものについては、今後はSVGの活用も検討して下さい。