EditGuide/Images
をテンプレートにして作成
ITEM01
ITEM01_1
ITEM01_2
ITEM01_3
ITEM02
ITEM02_1
ITEM02_2
ITEM02_3
ITEM03
ITEM03_1
ITEM03_2
ITEM03_3
ITEM04
ITEM04_1
ITEM04_2
ITEM04_3
ITEM05
ITEM05_1
ITEM05_2
ITEM05_3
SEARCH
開始行:
*編集ガイド|画像掲載
当サイトへの画像の掲載について
~
***はじめに
デジタルカメラで撮影したものは、幅が数千ピクセル、ファイ...
&small(Instagram, Twitter などはアップした時点でサービス...
Webに掲載する画像の一般的なサイズは、ヘッダー画像で 1920p...
//&small(参考:このページの記事は「画像」すなわち、ラスタ...
~
***CONTENTS
#contents2_1
~
**画像データの準備
***画像のサイズを確認するには
-Macの場合:画像ファイルを右クリック>情報を見る
-Windowsの場合:画像ファイルを右クリック>プロパティー
~
***画像のリサイズを行うには
画像のリサイズを行うにはオンラインツールやスマホ、PCにイ...
-方法1. 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...
-方法2. AdobePhotoshop で「Web用に書き出し」を使う
-方法3. [[The GIMP>https://www.gimp.org/]]などのオープン...
~
***変更するのは「画素数」です
-サイズ変更における単位は、''pixel(画素数)''です。mm(...
-Photoshopのダイアログの場合、現在の画素数と、変更後の画...
~
***画像はRGBモードになっていますか?
-画像には、RGBモード(ディスプレイ用)とCMYKモード(印刷用)...
-デジタルカメラの画像であれば、そのままで問題ありませんが...
~
***Webに適した形式で保存します
JPEG形式( .jpg)、PNG形式( .png) 、WebP(.webp)、GIF形式( ....
-JPEG:細かな色の変化の多い「写真(自然物)」向きです
-PNG:スクリーンショットなどの「画像(人工的なもの)」向...
-WebP:Googleによる次世代画像フォーマットで、軽くて高速。...
-GIF:フラットな塗りの多いイラスト等で、効率よく圧縮がか...
//-SVG:上記の4種と異なり、ベクター形式のデータです。拡...
~
***保存の際のクオリティーについて
-JPEG形式では、保存の際に質を落とせば、ファイルサイズを小...
-ただし、JPEGは「不可逆圧縮」といって、圧縮の際に捨てた情...
~
***保存の際のファイル名について
-原則として文字は、半角英数と _ (アンダースコア) - (ハイ...
-/ * + ~ . , # % & () などは特殊な意味を持つので使わない...
-また、スペースの利用もおすすめできません。単語を区切りた...
photoImage01.jpg photo_image_01.jpg といった形式にして下...
-日本語は非推奨です。また、➀(まる1)や、ローマ数字とい...
~
~
**当サイト(PukiWiki)への掲載について
***一般的な掲載手順
-1 ) ''画像を掲載したいページで'' 画像をアップする
--ページフッターの UPLOAD をクリック
--参照>手元の画像を選択
--管理者PWに、いつものPWを入力してアップ
-2 ) ページを編集する
--ページフッターの EDIT をクリック > 編集画面に入りま...
--画像を掲載したい箇所に imageプラグイン(以下)を置いて...
~
***他のページにある画像を流用掲載
他のページに添付された画像を、当該ページに流用掲載するこ...
-1) 画像を利用する主たるページ、あるいは画像添付専用のペ...
-2) 以下のように「画像のファイル名」の部分を「ページ名/画...
#image(images/sample.jpg, center, 50%)
#image(images/sample.jpg, center, 50%)
~
***imageプラグインの書式
#image(画像ファイル名, [ left / right / center ] , 初期...
-画像ファイル名には、添付ファイルとURL(直リンク)が利用で...
-left あるいは right を記述すると回りこみます。
-初期表示サイズ(%)は、コンテンツ領域に対する割合を意味し...
従来の単位はピクセルでしたが、このプラグインの単位は%です。
-何も記載しない場合は100%(コンテンツ幅いっぱい)で表示さ...
ただし、もともと小さな画像が拡大されることはありません。
~
***通常配置
#image(sample.jpg)
#image(sample.jpg)
~
#image(sample.jpg,,40%)
#image(sample.jpg,,40%)
~
***インライン配置
&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(sample.jpg,right,30%,"これはサンプル画像です。")
この文章は回りこみ動作確認用のダミーです。この文章は回り...
#clear
~
以下のように記載しています。
#image(sample.jpg,right,30%,"これはサンプル画像です。")
この文章は回りこみ動作確認用のダミーです。・・・
#clear
~
***画像をリンクボタンにする方法
画像にハイパーリンクを設定するには、画像をインライン要素...
[[&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(参考:このページの記事は「画像」すなわち、ラスター...
~
~
終了行:
*編集ガイド|画像掲載
当サイトへの画像の掲載について
~
***はじめに
デジタルカメラで撮影したものは、幅が数千ピクセル、ファイ...
&small(Instagram, Twitter などはアップした時点でサービス...
Webに掲載する画像の一般的なサイズは、ヘッダー画像で 1920p...
//&small(参考:このページの記事は「画像」すなわち、ラスタ...
~
***CONTENTS
#contents2_1
~
**画像データの準備
***画像のサイズを確認するには
-Macの場合:画像ファイルを右クリック>情報を見る
-Windowsの場合:画像ファイルを右クリック>プロパティー
~
***画像のリサイズを行うには
画像のリサイズを行うにはオンラインツールやスマホ、PCにイ...
-方法1. 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...
-方法2. AdobePhotoshop で「Web用に書き出し」を使う
-方法3. [[The GIMP>https://www.gimp.org/]]などのオープン...
~
***変更するのは「画素数」です
-サイズ変更における単位は、''pixel(画素数)''です。mm(...
-Photoshopのダイアログの場合、現在の画素数と、変更後の画...
~
***画像はRGBモードになっていますか?
-画像には、RGBモード(ディスプレイ用)とCMYKモード(印刷用)...
-デジタルカメラの画像であれば、そのままで問題ありませんが...
~
***Webに適した形式で保存します
JPEG形式( .jpg)、PNG形式( .png) 、WebP(.webp)、GIF形式( ....
-JPEG:細かな色の変化の多い「写真(自然物)」向きです
-PNG:スクリーンショットなどの「画像(人工的なもの)」向...
-WebP:Googleによる次世代画像フォーマットで、軽くて高速。...
-GIF:フラットな塗りの多いイラスト等で、効率よく圧縮がか...
//-SVG:上記の4種と異なり、ベクター形式のデータです。拡...
~
***保存の際のクオリティーについて
-JPEG形式では、保存の際に質を落とせば、ファイルサイズを小...
-ただし、JPEGは「不可逆圧縮」といって、圧縮の際に捨てた情...
~
***保存の際のファイル名について
-原則として文字は、半角英数と _ (アンダースコア) - (ハイ...
-/ * + ~ . , # % & () などは特殊な意味を持つので使わない...
-また、スペースの利用もおすすめできません。単語を区切りた...
photoImage01.jpg photo_image_01.jpg といった形式にして下...
-日本語は非推奨です。また、➀(まる1)や、ローマ数字とい...
~
~
**当サイト(PukiWiki)への掲載について
***一般的な掲載手順
-1 ) ''画像を掲載したいページで'' 画像をアップする
--ページフッターの UPLOAD をクリック
--参照>手元の画像を選択
--管理者PWに、いつものPWを入力してアップ
-2 ) ページを編集する
--ページフッターの EDIT をクリック > 編集画面に入りま...
--画像を掲載したい箇所に imageプラグイン(以下)を置いて...
~
***他のページにある画像を流用掲載
他のページに添付された画像を、当該ページに流用掲載するこ...
-1) 画像を利用する主たるページ、あるいは画像添付専用のペ...
-2) 以下のように「画像のファイル名」の部分を「ページ名/画...
#image(images/sample.jpg, center, 50%)
#image(images/sample.jpg, center, 50%)
~
***imageプラグインの書式
#image(画像ファイル名, [ left / right / center ] , 初期...
-画像ファイル名には、添付ファイルとURL(直リンク)が利用で...
-left あるいは right を記述すると回りこみます。
-初期表示サイズ(%)は、コンテンツ領域に対する割合を意味し...
従来の単位はピクセルでしたが、このプラグインの単位は%です。
-何も記載しない場合は100%(コンテンツ幅いっぱい)で表示さ...
ただし、もともと小さな画像が拡大されることはありません。
~
***通常配置
#image(sample.jpg)
#image(sample.jpg)
~
#image(sample.jpg,,40%)
#image(sample.jpg,,40%)
~
***インライン配置
&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(sample.jpg,right,30%,"これはサンプル画像です。")
この文章は回りこみ動作確認用のダミーです。この文章は回り...
#clear
~
以下のように記載しています。
#image(sample.jpg,right,30%,"これはサンプル画像です。")
この文章は回りこみ動作確認用のダミーです。・・・
#clear
~
***画像をリンクボタンにする方法
画像にハイパーリンクを設定するには、画像をインライン要素...
[[&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(参考:このページの記事は「画像」すなわち、ラスター...
~
~
ページ名: