EditGuide/Images
をテンプレートにして作成
HOME
ABOUT
最新の更新
2021
MEMBER 2021
青木暁光
石坂大翔
出光美心
岩崎貴生
岩下雄真
内尾颯太
江川珠貴
大中啓旦
亀田日向
川村洸太
木村円香
久保絢菜
倉員優実
桑原歩未
鴻上早紀
崔昊
佐光美憂
柴田一輝
竹谷匠冬
田籠祐貴
田代爽乃
内藤彩乃
西山実伶
濱有希子
濱田侑里
藤本唯人
松岡佑樹
松藤陽
村山陽菜
山田宗周
渡邊来美
渡辺侑貴
中西華子
原田朋奈
水田修太朗
宮副咲葉
猪須大翔
川面翔太
隈翔太
柴田葉月
角祐菜
豊岡壮大朗
吉井麻吏菜
2022
MEMBER 2022
棈松智也
梅木悠民
江頭奏
大井このか
大石颯
太田糸音
太田姫奈
越智楓
鎌田真幸
楠田佑月
興梠媛愛
後藤太成
坂井彩華
指方依緒
徐泰陽
杉野市之助
堤晴司
角田雄一
中井千尋
原朋恵
平嶋明日花
増田里奈
深町彩海
藤島早希
宮路咲希
梁井英翔
山口愛麗
山本彩花
松田葉奈
松本龍太郎
熊谷涼花
近藤ひかる
善結穂
待永萌衣
三浦遥
石松匡広
上田莉帆
宇田川春稀
宇美希美
佐野美和
竹之内咲希
土斐崎種定
野村優亜
福田千紗
山川彩香
山田侑加子
重松優花
甲斐陸斗
2023
MEMBER 2023
秋月靖雅
浅田真優花
阿南慶子
荒谷唯斗
安藤貴仁
池邉成
井上大河
岩本愛結
梅﨑美和
浦朱里
江村梨里香
大場こころ
勝田喜一
亀崎瑞穂
神田舞
白井くるみ
髙市遥
竹松莉羽
寺田圭志
中村心香
原晴紀
菱谷実来
日山晃良
平崎千夏
福井涼
堀玲二
早稲田加奈恵
渡邊優希
十時明日香
石井彩晶
大神槙之介
大熊玄樹
大山花音
岡萌絵子
荻野美咲
鐘ヶ江雅
金田桜子
北村美優香
清野梨果
高庄玲衣
津覇稜也
福屋早希乃
脇山千寛
2024
MEMBER 2024
芦谷心渚
安部詩織
池田隆之介
伊藤早紀
越智花凛
金ヶ江光千瑠
佐藤澪
川村玲太
菊池真桜
後藤未羽
齊場由布
佐々木陽菜
佐藤美月
猿本大翔
竹之内優希
田尻有沙
谷口和歌子
千々岩聡真
手島凜
鳥越友菜
中尾桃瀬
野口朗央
福岡比菜
松崎菜々実
松永紗和
真子大輝
南妃香莉
宮園晴日
森山海莉
劉沢寧
渡辺颯香
足立実優
池田阜弥
井上朋美
宇野日菜
上瀧桃子
茂山和寛
髙嶋莉彩
橘彩以
田中さゆり
田村宥奈
徳永歩乃佳
轟はなの
庭瀬美来
橋本音花
若狭映那
STAFF
専任教員一覧
伊藤敬生
井上貢一
井上友子
岩田敦之
桜井祐
永嶋さゆり
北島己佐吉
OBOG
2023年度卒業生
2022年度卒業生
2021年度卒業生
2020年度卒業生
2019年度卒業生
SESSION
専門科目一覧
ソーシャルデザイン応用演習
情報デザイン演習I
地域ブランド企画演習I
情報デザイン演習IIIA
情報デザイン演習IIIB
地域ブランド企画演習IIIA
地域ブランド企画演習IIIB
情報デザイン研究II
地域ブランド企画研究II
通信ネットワーク演習
データサイエンス
3DCG演習
卒業研究
教務ガイダンス
RecommendedVideo
BasicKnowledge
PROJECT
LINKS
SEARCH
開始行:
*編集ガイド|画像掲載
当サイトへの画像の掲載について
~
***はじめに
デジタルカメラで撮影したものは、幅が数千ピクセル、ファイ...
&color(red){当サイトでは、データダイエットのため 512KB以...
&small(Instagram, Twitter などはアップした時点でサービス...
Webに掲載する画像の一般的なサイズは、ヘッダー画像で 1280p...
//&small(参考:このページの記事は「画像」すなわち、ラスタ...
~
//#qrcode(,right,)
***CONTENTS
#contents2_1
~
**画像データの準備
***スマホ>パソコン
効率的・本格的な作業を行うには、パソコンが必要です。そこ...
-スマホ>パソコン
GoogleフォトやGoogleドライブなどのクラウドサービスを介し...
-デジカメ>パソコン
デジカメからSDカードを取り出して、SDカードリーダー等でパ...
~
***画像のリサイズ
画像のリサイズを行うにはオンラインツールやスマホ、PCにイ...
-''Webサービスの利用''
手元の画像をドラッグ&ドロップでアップして、サイズを指定す...
--''Google Squoosh'':https://squoosh.app/
[[参考:Google Squooshの使い方>https://blog.marswee.com/e...
--''Bulk Resize Photos'':https://bulkresizephotos.com/
[[参考:Bulk Resize Photosの使い方>https://freesoft-100.c...
-Adobe Photoshop (Web用に書き出し)を使う。
-Photoshop同等の作業ができる [[The GIMP>https://www.gimp....
~
***変更するのは「画素数」です
-画像解像度、画像サイズ、画像の拡大・縮小・・・といった操...
-ダイアログには、現在の画素数と、変更後の画素数が表示され...
-印刷サイズ(㎜)や解像度(dpi)をではなく''画素数(pixel)''を...
~
***画像はRGBモードになっていますか?
-画像には、RGBモード(ディスプレイ用)とCMYKモード(印刷用)...
-デジタルカメラの画像であれば、そのままで問題ありませんが...
~
***Webに適した形式で保存します
JPEG形式( .jpg)、PNG形式( .png) 、WebP(.webp)、GIF形式( ....
-JPEG:細かな色の変化の多い「写真(自然物)」向きです
-PNG:スクリーンショットなどの「画像(人工的なもの)」向...
-WebP:Googleによる次世代画像フォーマットで、軽くて高速。...
-GIF:フラットな塗りの多いイラスト等で、効率よく圧縮がか...
//-SVG:上記の4種と異なり、ベクター形式のデータです。拡...
Photoshop形式( .psd )やIllustrator形式( .ai)ような特定の...
~
***保存の際のクオリティーについて
-JPEG形式では、保存の際に質を落とせば、ファイルサイズを小...
-ただし、JPEGは「不可逆圧縮」といって、圧縮の際に捨てた情...
~
***保存の際のファイル名について
-原則として文字は、半角英数と _ (アンダースコア) - (ハイ...
-/ * + ~ . , # % & () などは特殊な意味を持つので使わない...
-また、スペースの利用もおすすめできません。単語を区切りた...
photoImage01.jpg photo_image_01.jpg といった形式にして下...
-日本語は非推奨です。また、➀(まる1)や、ローマ数字とい...
~
~
**当サイト(PukiWiki)への掲載について
***掲載手順
-1 ) ''画像を掲載したいページで'' 画像をアップする
--ページフッターの UPLOAD をクリック
--参照>手元の画像を選択
--管理者PWに、いつものPWを入力してアップ
-2 ) ページを編集する
--ページフッターの EDIT をクリック > 編集画面に入りま...
--画像を掲載したい箇所に imageプラグイン(以下)を置いて...
~
***imageプラグインの書式
#image(画像ファイル名, [ left / right / center ] , 初期...
-画像ファイル名には、添付ファイルとURL(直リンク)が利用で...
-left あるいは right を記述すると回りこみます。
-初期表示サイズ(%)は、コンテンツ領域に対する割合を意味し...
従来の単位はピクセルでしたが、このプラグインの単位は%です。
-何も記載しない場合は100%(コンテンツ幅いっぱい)で表示さ...
ただし、もともと小さな画像が拡大されることはありません。
~
***他のページにある画像を流用掲載するには
以下のように、画像のファイル名の前に、それが添付されてい...
#image(画像が添付されたページの名称/画像ファイル名,・・...
ページ名と画像ファイル名の区切りは''「/」半角スラッシュ''...
例えば、JohnSmith さんの 情報デザイン演習IIA のページにあ...
#image(JohnSmith/情報デザイン演習IIA/MainVisual.jpg,,30%)
#image(JohnSmith/情報デザイン演習IIA/MainVisual.jpg,,30%)
~
~
**配置サンプル
***通常配置
#image(sample.jpg)
#image(sample.jpg)
~
***中央に縮小配置
#image(sample.jpg,center,40%)
#image(sample.jpg,center,40%)
~
***左右に回り込み配置
#image( ファイル名, left / right, ・・・)
2つ目のパラメータに left または right と記載
#image(sample.jpg,right,30%,"これはサンプル画像です。")
この文章は回りこみ動作確認用のダミーです。この文章は回り...
#clear
以下のように記載しています。
#image(sample.jpg,right,30%,"これはサンプル画像です。")
この文章は回りこみ動作確認用のダミーです。・・・
#clear
左に寄せるだけで、回り込みさせたくない場合は、以下のよう...
~
***インライン配置
&image(sample.jpg,,20%); &image(sample.jpg,,20%); &image...
&image(sample.jpg,,20%); &image(sample.jpg,,20%); &image...
画像をインライン要素(プラグイン記号 ''&'' )として表示す...
~
***表組
当サイトでは、編集画面内で [ | ](縦ストローク)を使って...
|49|2|49|c ← 合計が 100(%)になるように
|#image(sample.jpg)| |#image(sample.jpg)|
|49|2|49|c
|#image(sample.jpg)| |#image(sample.jpg)|
表の罫線を消したい場合は、編集画面に以下のコードを貼り付...
#settableborder(none)
~
***画像をリンクボタンにする方法
[[&image(・・略・・);>リンク先]]
画像にハイパーリンクを設定するには、画像をインライン要素...
[[&image(sample.jpg,,20%);>健康スポーツ科学科]]
[[&image(isample.jpg,,20%);>http://www.example.com]]
~
CENTER:
[[&image(sample.jpg,,25%);>EditGuide]]
↑ ボタンです。
~
~
**付記
***要注意! Exif情報について
スマートフォン等で撮影した写真には、位置情報が含まれる場...
-基本的な方法:PNG、GIF形式に変換して保存
PNG形式やGIF形式の画像には Exif情報はありません。したがっ...
-Macの場合
--画像をプレビューで開いて変換書き出し
ファイル>書き出す>フォーマットにPNG形式を指定して書き出...
&small(ツール>インスペクタを表示>Exifタブ で情報の確認...
--[[ImgeOptim>https://imageoptim.com/mac]]というソフト(...
-Windowsの場合
--画像ファイルを右クリック>プロパティ>「詳細」タブ
最下部の「プロパティや個人情報を削除」から削除できます。
--[[All About のサイトに記事があります。>https://allabout...
-iPhone / Androidの場合:アプリが必要です(無料のものがあ...
[[Google:iPhone Exif 削除]] / [[Google:Android exif 削...
-尚、Facebook、Instagram、Twitter、LINEなど、SNSの最近の...
&small(参考:このページの記事は「画像」すなわち、ラスター...
~
~
終了行:
*編集ガイド|画像掲載
当サイトへの画像の掲載について
~
***はじめに
デジタルカメラで撮影したものは、幅が数千ピクセル、ファイ...
&color(red){当サイトでは、データダイエットのため 512KB以...
&small(Instagram, Twitter などはアップした時点でサービス...
Webに掲載する画像の一般的なサイズは、ヘッダー画像で 1280p...
//&small(参考:このページの記事は「画像」すなわち、ラスタ...
~
//#qrcode(,right,)
***CONTENTS
#contents2_1
~
**画像データの準備
***スマホ>パソコン
効率的・本格的な作業を行うには、パソコンが必要です。そこ...
-スマホ>パソコン
GoogleフォトやGoogleドライブなどのクラウドサービスを介し...
-デジカメ>パソコン
デジカメからSDカードを取り出して、SDカードリーダー等でパ...
~
***画像のリサイズ
画像のリサイズを行うにはオンラインツールやスマホ、PCにイ...
-''Webサービスの利用''
手元の画像をドラッグ&ドロップでアップして、サイズを指定す...
--''Google Squoosh'':https://squoosh.app/
[[参考:Google Squooshの使い方>https://blog.marswee.com/e...
--''Bulk Resize Photos'':https://bulkresizephotos.com/
[[参考:Bulk Resize Photosの使い方>https://freesoft-100.c...
-Adobe Photoshop (Web用に書き出し)を使う。
-Photoshop同等の作業ができる [[The GIMP>https://www.gimp....
~
***変更するのは「画素数」です
-画像解像度、画像サイズ、画像の拡大・縮小・・・といった操...
-ダイアログには、現在の画素数と、変更後の画素数が表示され...
-印刷サイズ(㎜)や解像度(dpi)をではなく''画素数(pixel)''を...
~
***画像はRGBモードになっていますか?
-画像には、RGBモード(ディスプレイ用)とCMYKモード(印刷用)...
-デジタルカメラの画像であれば、そのままで問題ありませんが...
~
***Webに適した形式で保存します
JPEG形式( .jpg)、PNG形式( .png) 、WebP(.webp)、GIF形式( ....
-JPEG:細かな色の変化の多い「写真(自然物)」向きです
-PNG:スクリーンショットなどの「画像(人工的なもの)」向...
-WebP:Googleによる次世代画像フォーマットで、軽くて高速。...
-GIF:フラットな塗りの多いイラスト等で、効率よく圧縮がか...
//-SVG:上記の4種と異なり、ベクター形式のデータです。拡...
Photoshop形式( .psd )やIllustrator形式( .ai)ような特定の...
~
***保存の際のクオリティーについて
-JPEG形式では、保存の際に質を落とせば、ファイルサイズを小...
-ただし、JPEGは「不可逆圧縮」といって、圧縮の際に捨てた情...
~
***保存の際のファイル名について
-原則として文字は、半角英数と _ (アンダースコア) - (ハイ...
-/ * + ~ . , # % & () などは特殊な意味を持つので使わない...
-また、スペースの利用もおすすめできません。単語を区切りた...
photoImage01.jpg photo_image_01.jpg といった形式にして下...
-日本語は非推奨です。また、➀(まる1)や、ローマ数字とい...
~
~
**当サイト(PukiWiki)への掲載について
***掲載手順
-1 ) ''画像を掲載したいページで'' 画像をアップする
--ページフッターの UPLOAD をクリック
--参照>手元の画像を選択
--管理者PWに、いつものPWを入力してアップ
-2 ) ページを編集する
--ページフッターの EDIT をクリック > 編集画面に入りま...
--画像を掲載したい箇所に imageプラグイン(以下)を置いて...
~
***imageプラグインの書式
#image(画像ファイル名, [ left / right / center ] , 初期...
-画像ファイル名には、添付ファイルとURL(直リンク)が利用で...
-left あるいは right を記述すると回りこみます。
-初期表示サイズ(%)は、コンテンツ領域に対する割合を意味し...
従来の単位はピクセルでしたが、このプラグインの単位は%です。
-何も記載しない場合は100%(コンテンツ幅いっぱい)で表示さ...
ただし、もともと小さな画像が拡大されることはありません。
~
***他のページにある画像を流用掲載するには
以下のように、画像のファイル名の前に、それが添付されてい...
#image(画像が添付されたページの名称/画像ファイル名,・・...
ページ名と画像ファイル名の区切りは''「/」半角スラッシュ''...
例えば、JohnSmith さんの 情報デザイン演習IIA のページにあ...
#image(JohnSmith/情報デザイン演習IIA/MainVisual.jpg,,30%)
#image(JohnSmith/情報デザイン演習IIA/MainVisual.jpg,,30%)
~
~
**配置サンプル
***通常配置
#image(sample.jpg)
#image(sample.jpg)
~
***中央に縮小配置
#image(sample.jpg,center,40%)
#image(sample.jpg,center,40%)
~
***左右に回り込み配置
#image( ファイル名, left / right, ・・・)
2つ目のパラメータに left または right と記載
#image(sample.jpg,right,30%,"これはサンプル画像です。")
この文章は回りこみ動作確認用のダミーです。この文章は回り...
#clear
以下のように記載しています。
#image(sample.jpg,right,30%,"これはサンプル画像です。")
この文章は回りこみ動作確認用のダミーです。・・・
#clear
左に寄せるだけで、回り込みさせたくない場合は、以下のよう...
~
***インライン配置
&image(sample.jpg,,20%); &image(sample.jpg,,20%); &image...
&image(sample.jpg,,20%); &image(sample.jpg,,20%); &image...
画像をインライン要素(プラグイン記号 ''&'' )として表示す...
~
***表組
当サイトでは、編集画面内で [ | ](縦ストローク)を使って...
|49|2|49|c ← 合計が 100(%)になるように
|#image(sample.jpg)| |#image(sample.jpg)|
|49|2|49|c
|#image(sample.jpg)| |#image(sample.jpg)|
表の罫線を消したい場合は、編集画面に以下のコードを貼り付...
#settableborder(none)
~
***画像をリンクボタンにする方法
[[&image(・・略・・);>リンク先]]
画像にハイパーリンクを設定するには、画像をインライン要素...
[[&image(sample.jpg,,20%);>健康スポーツ科学科]]
[[&image(isample.jpg,,20%);>http://www.example.com]]
~
CENTER:
[[&image(sample.jpg,,25%);>EditGuide]]
↑ ボタンです。
~
~
**付記
***要注意! Exif情報について
スマートフォン等で撮影した写真には、位置情報が含まれる場...
-基本的な方法:PNG、GIF形式に変換して保存
PNG形式やGIF形式の画像には Exif情報はありません。したがっ...
-Macの場合
--画像をプレビューで開いて変換書き出し
ファイル>書き出す>フォーマットにPNG形式を指定して書き出...
&small(ツール>インスペクタを表示>Exifタブ で情報の確認...
--[[ImgeOptim>https://imageoptim.com/mac]]というソフト(...
-Windowsの場合
--画像ファイルを右クリック>プロパティ>「詳細」タブ
最下部の「プロパティや個人情報を削除」から削除できます。
--[[All About のサイトに記事があります。>https://allabout...
-iPhone / Androidの場合:アプリが必要です(無料のものがあ...
[[Google:iPhone Exif 削除]] / [[Google:Android exif 削...
-尚、Facebook、Instagram、Twitter、LINEなど、SNSの最近の...
&small(参考:このページの記事は「画像」すなわち、ラスター...
~
~
ページ名: