開始行: *編集ガイド｜画像掲載 当サイトへの画像の掲載について ~ ***はじめに デジタルカメラで撮影したものは、幅が数千ピクセル、ファイ... Webに掲載する画像の一般的なサイズは、ヘッダー画像で 1920p... //&small(参考：このページの記事は「画像」すなわち、ラスタ... ~ ***CONTENTS #contents2_1 ~ **画像データの準備 ***画像のリサイズ 画像のリサイズを行うにはオンラインツールやスマホ、PCにイ... -Webサービスの利用 手元の画像をドラッグ&ドロップでアップして、サイズを指定す... --Google Squoosh：https://squoosh.app/ --Bulk Resize Photos：https://bulkresizephotos.com/ -Adobe Photoshop で「Web用に書き出し」を使う。 -[[The GIMP>https://www.gimp.org/]]などのオープンソースフ... ~ ***変更するのは「画素数」です -画像解像度、画像サイズ、画像の拡大・縮小・・・といった操... -ダイアログには、現在の画素数と、変更後の画素数が表示され... -印刷サイズ(㎜)や解像度(dpi)をではなく''画素数(pixel)''を... ~ ***画像はRGBモードになっていますか？ -画像には、RGBモード(ディスプレイ用)とCMYKモード(印刷用)... -デジタルカメラの画像であれば、そのままで問題ありませんが... ~ ***Webに適した形式で保存します JPEG形式( .jpg)、PNG形式( .png) 、WebP(.webp)、GIF形式( .... -JPEG：細かな色の変化の多い「写真（自然物）」向きです -PNG：スクリーンショットなどの「画像（人工的なもの）」向... -WebP：Googleによる次世代画像フォーマットで、軽くて高速。... -GIF：フラットな塗りの多いイラスト等で、効率よく圧縮がか... //-SVG：上記の４種と異なり、ベクター形式のデータです。拡... ~ ***保存の際のクオリティーについて -JPEG形式では、保存の際に質を落とせば、ファイルサイズを小... -ただし、JPEGは「不可逆圧縮」といって、圧縮の際に捨てた情... ~ ***保存の際のファイル名について -原則として文字は、半角英数と _ (アンダースコア) - (ハイ... -/ * + ~ . , # % & () などは特殊な意味を持つので使わない... -また、スペースの利用もおすすめできません。単語を区切りた... photoImage01.jpg photo_image_01.jpg といった形式にして下... -日本語は非推奨です。また、➀（まる１）や、ローマ数字とい... ~ ~ **当サイト（PukiWiki）への掲載について ***掲載手順 -1 ) ''画像を掲載したいページで'' 画像をアップする --ページフッターの UPLOAD をクリック --参照＞手元の画像を選択 --管理者PWに、いつものPWを入力してアップ -2 ) ページを編集する --ページフッターの EDIT をクリック ＞ 編集画面に入りま... --画像を掲載したい箇所に imageプラグイン（以下）を置いて... ~ ***imageプラグインの書式 #image(画像ファイル名, [ left / right / center ] , 初期... -画像ファイル名には、添付ファイルとURL(直リンク)が利用で... -left あるいは right を記述すると回りこみます。 -初期表示サイズ(%)は、コンテンツ領域に対する割合を意味し... 従来の単位はピクセルでしたが、このプラグインの単位は%です。 -何も記載しない場合は100%（コンテンツ幅いっぱい）で表示さ... ただし、もともと小さな画像が拡大されることはありません。 ~ ***通常配置 #image(sample.jpg) #image(dummy.jpg) ~ #image(sample.jpg,,40%) #image(dummy.jpg,,40%) ~ ***インライン配置 &image(sample.jpg,,20%); &image(sample.jpg,,20%); &image... &image(dummy.jpg,,20%); &image(dummy.jpg,,20%); &image(d... ~ ***表組 |#image(sample.jpg)|#image(sample.jpg)|#image(sample.jpg)| |#image(dummy.jpg)|#image(dummy.jpg)|#image(dummy.jpg)| ~ ***回り込み配置 #image(dummy.jpg,right,30%,"これはサンプル画像です。") この文章は回りこみ動作確認用のダミーです。この文章は回り... #clear ~ 以下のように記載しています。 #image(sample.jpg,right,30%,"これはサンプル画像です。") この文章は回りこみ動作確認用のダミーです。・・・ #clear ~ ***画像をリンクボタンにする方法 画像にハイパーリンクを設定するには、画像をインライン要素... [[&image(sample.jpg,,20%);>生命科学部]] [[&image(isample.jpg,,20%);>http://www.example.com]] ~ CENTER: [[&image(dummy.jpg,,25%);>生命科学部]] ↑ ボタンです。 ~ ~ **付記 ***要注意! 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(参考：このページの記事は「画像」すなわち、ラスター... ~ ~ 終了行: *編集ガイド｜画像掲載 当サイトへの画像の掲載について ~ ***はじめに デジタルカメラで撮影したものは、幅が数千ピクセル、ファイ... Webに掲載する画像の一般的なサイズは、ヘッダー画像で 1920p... //&small(参考：このページの記事は「画像」すなわち、ラスタ... ~ ***CONTENTS #contents2_1 ~ **画像データの準備 ***画像のリサイズ 画像のリサイズを行うにはオンラインツールやスマホ、PCにイ... -Webサービスの利用 手元の画像をドラッグ&ドロップでアップして、サイズを指定す... --Google Squoosh：https://squoosh.app/ --Bulk Resize Photos：https://bulkresizephotos.com/ -Adobe Photoshop で「Web用に書き出し」を使う。 -[[The GIMP>https://www.gimp.org/]]などのオープンソースフ... ~ ***変更するのは「画素数」です -画像解像度、画像サイズ、画像の拡大・縮小・・・といった操... -ダイアログには、現在の画素数と、変更後の画素数が表示され... -印刷サイズ(㎜)や解像度(dpi)をではなく''画素数(pixel)''を... ~ ***画像はRGBモードになっていますか？ -画像には、RGBモード(ディスプレイ用)とCMYKモード(印刷用)... -デジタルカメラの画像であれば、そのままで問題ありませんが... ~ ***Webに適した形式で保存します JPEG形式( .jpg)、PNG形式( .png) 、WebP(.webp)、GIF形式( .... -JPEG：細かな色の変化の多い「写真（自然物）」向きです -PNG：スクリーンショットなどの「画像（人工的なもの）」向... -WebP：Googleによる次世代画像フォーマットで、軽くて高速。... -GIF：フラットな塗りの多いイラスト等で、効率よく圧縮がか... //-SVG：上記の４種と異なり、ベクター形式のデータです。拡... ~ ***保存の際のクオリティーについて -JPEG形式では、保存の際に質を落とせば、ファイルサイズを小... -ただし、JPEGは「不可逆圧縮」といって、圧縮の際に捨てた情... ~ ***保存の際のファイル名について -原則として文字は、半角英数と _ (アンダースコア) - (ハイ... -/ * + ~ . , # % & () などは特殊な意味を持つので使わない... -また、スペースの利用もおすすめできません。単語を区切りた... photoImage01.jpg photo_image_01.jpg といった形式にして下... -日本語は非推奨です。また、➀（まる１）や、ローマ数字とい... ~ ~ **当サイト（PukiWiki）への掲載について ***掲載手順 -1 ) ''画像を掲載したいページで'' 画像をアップする --ページフッターの UPLOAD をクリック --参照＞手元の画像を選択 --管理者PWに、いつものPWを入力してアップ -2 ) ページを編集する --ページフッターの EDIT をクリック ＞ 編集画面に入りま... --画像を掲載したい箇所に imageプラグイン（以下）を置いて... ~ ***imageプラグインの書式 #image(画像ファイル名, [ left / right / center ] , 初期... -画像ファイル名には、添付ファイルとURL(直リンク)が利用で... -left あるいは right を記述すると回りこみます。 -初期表示サイズ(%)は、コンテンツ領域に対する割合を意味し... 従来の単位はピクセルでしたが、このプラグインの単位は%です。 -何も記載しない場合は100%（コンテンツ幅いっぱい）で表示さ... ただし、もともと小さな画像が拡大されることはありません。 ~ ***通常配置 #image(sample.jpg) #image(dummy.jpg) ~ #image(sample.jpg,,40%) #image(dummy.jpg,,40%) ~ ***インライン配置 &image(sample.jpg,,20%); &image(sample.jpg,,20%); &image... &image(dummy.jpg,,20%); &image(dummy.jpg,,20%); &image(d... ~ ***表組 |#image(sample.jpg)|#image(sample.jpg)|#image(sample.jpg)| |#image(dummy.jpg)|#image(dummy.jpg)|#image(dummy.jpg)| ~ ***回り込み配置 #image(dummy.jpg,right,30%,"これはサンプル画像です。") この文章は回りこみ動作確認用のダミーです。この文章は回り... #clear ~ 以下のように記載しています。 #image(sample.jpg,right,30%,"これはサンプル画像です。") この文章は回りこみ動作確認用のダミーです。・・・ #clear ~ ***画像をリンクボタンにする方法 画像にハイパーリンクを設定するには、画像をインライン要素... [[&image(sample.jpg,,20%);>生命科学部]] [[&image(isample.jpg,,20%);>http://www.example.com]] ~ CENTER: [[&image(dummy.jpg,,25%);>生命科学部]] ↑ ボタンです。 ~ ~ **付記 ***要注意! 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(参考：このページの記事は「画像」すなわち、ラスター... ~ ~ ページ名:
