EditGuide/Images
をテンプレートにして作成
LECTURE
担当科目一覧
コンピュータ概論/2024
データサイエンス/2024
3DCG演習/2024
情報デザイン研究/2024
卒業研究/2024
KEYWORDS
WEB DESIGN
SOCIAL DESIGN
SQUARES
LINKS
九州産業大学
芸術学部
芸術研究科
九産大美術館
九産大図書館
年間スケジュール
動画ニュース他
交通情報
気象・環境情報
危機に備えて
K'sLife
Office365Mail
Tools
SEARCH
開始行:
*編集ガイド|画像掲載
当サイトへの画像の掲載について
~
***はじめに
デジタルカメラで撮影したものは、幅が数千ピクセル、ファイ...
Webに掲載する画像の一般的なサイズは、ヘッダー画像で 1920p...
//&small(参考:このページの記事は「画像」すなわち、ラスタ...
~
***CONTENTS
#contents2_1
~
**画像データの準備
***画像のリサイズを行うには
画像のリサイズを行うにはオンラインツールやスマホ、PCにイ...
-方法1. Web上の画像リサイズサービスを使う(簡単・手軽)
--Google Squoosh:https://squoosh.app/
--Bulk Resize Photos:https://bulkresizephotos.com/
-方法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プラグイン(以下)を置いて...
~
***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)|
~
***回り込み配置
#image(sample.jpg,right,30%,"これはサンプル画像です。")
この文章は回りこみ動作確認用のダミーです。この文章は回り...
#clear
~
以下のように記載しています。
#image(sample.jpg,right,30%,"これはサンプル画像です。")
この文章は回りこみ動作確認用のダミーです。・・・
#clear
~
***画像をリンクボタンにする方法
画像にハイパーリンクを設定するには、画像をインライン要素...
[[&image(sample.jpg,,20%);>information]]
[[&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(参考:このページの記事は「画像」すなわち、ラスター...
~
~
終了行:
*編集ガイド|画像掲載
当サイトへの画像の掲載について
~
***はじめに
デジタルカメラで撮影したものは、幅が数千ピクセル、ファイ...
Webに掲載する画像の一般的なサイズは、ヘッダー画像で 1920p...
//&small(参考:このページの記事は「画像」すなわち、ラスタ...
~
***CONTENTS
#contents2_1
~
**画像データの準備
***画像のリサイズを行うには
画像のリサイズを行うにはオンラインツールやスマホ、PCにイ...
-方法1. Web上の画像リサイズサービスを使う(簡単・手軽)
--Google Squoosh:https://squoosh.app/
--Bulk Resize Photos:https://bulkresizephotos.com/
-方法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プラグイン(以下)を置いて...
~
***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)|
~
***回り込み配置
#image(sample.jpg,right,30%,"これはサンプル画像です。")
この文章は回りこみ動作確認用のダミーです。この文章は回り...
#clear
~
以下のように記載しています。
#image(sample.jpg,right,30%,"これはサンプル画像です。")
この文章は回りこみ動作確認用のダミーです。・・・
#clear
~
***画像をリンクボタンにする方法
画像にハイパーリンクを設定するには、画像をインライン要素...
[[&image(sample.jpg,,20%);>information]]
[[&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(参考:このページの記事は「画像」すなわち、ラスター...
~
~
ページ名: