Webでの画像の取り扱い
教室では画像の取り扱いに関する質問が多くあったので、ここにまとめてみました。
画像ファイルの内容
まず、画像ファイルの内容を把握すること！
１．画像の大きさ 単位px（ピクセル）
アイフォン写真の元サイズは縦2448px横3264px、ハイビジョンは横1920px縦1080px
自分の使っているディスプレイの大きさも知っておくと便利。
iPhone5,5s,5c 640×1136、iPhone6,6s 750×1334、iPhone6 Plus,6s Plus 1242×2208
２．画像ファイルサイズ 単位KB
アイフォン写真の元サイズは約3000KB、WordPressのアップロード上限は2000KB
メールで送るときなどは写真の容量を減らすため、3種のリサイズが選択できます。
小 240*320px 約50KB
中 480*640px 約160KB
大 1224*1632px 約1000KB
３．画像の種類 BMP、JPG、PNG、PSD、PXD(Pixlr独自のファイル形式)
圧縮しやすいJPG、背景を透明にできるPNGが便利
４．縦横比 3：4、16：9、1：1など
アイフォン写真は4：3（スクエアで撮れば1:1）、ハイビジョンは、16：9
※Windowsではエクスプローラで上記項目を表示できるように設定しておくと便利
例:ピクチャフォルダの「表示」「詳細表示の設定」に「大きさ」を追加（一覧のかなり下の方）
画像の操作方法
よく使う操作を挙げてみると
１．画像のリサイズ
２．画像のトリミング
３．ファイルサイズの圧縮
simplerでは画像の横幅を、
ヘッダー用2000px、トップページ用1000px、ページ用500px、サムネール用150pxを勧めています。
※上記の操作が可能な、使い慣れたソフトを用意する
例：フォトショップ、ACDsee、ピクセラエディタ
画像のレイアウト
ワードプレスでページのレイアウトをするとき利用できるエディタを挙げてみると
１．テキストエディター（HTMLで入力する場合に使う）
２．ビジュアルエディタ（ワープロのような感覚で使える。TinyMCE Advanced）使い方はこちら
３．ページビルダー（パワポのような感覚で使える。Page Builder by SiteOrigin）使い方はこちら
画像の編集
画像の大きさ
画僧の大きさの単位は、px（ピクセル）で表します。
このサイトの最大の横幅は、1000pxで設計されています。
従って、横幅が1000px以上の画像は必要ありません。むしろ、デジカメで撮影した写真場像などは3000pxとか5000pxあるのでそのまま使用するには大きすぎます。
大きすぎると、サイトの読み込みに時間がかかるので、Webではリサイズの画像処理して使用します。
また、サイドバーの横幅は240pxです。サイドバーに置くバナーなどの画像作成の参考にしてください。
使用する画像の大きさの例
①ロゴ画像：横100px、縦100px 程度。（1：1）
②タイトル画像：横500px、縦100px 程度。 （5：1）
③スライダー画像：横1000px、縦500px 程度。（2：1）
④顔写真：横400px、縦400px 程度。（1：1）
⑤サイドバー画像：横幅240px
表の編集
表のもとになるデータをご用意ください。table設定後、データ間をカンマで区切れば自動的に表が作成されます。
※表を編集するには、HTMLの知識を必要とする場合があります。
表の作成
①管理画面の「固定ページ」から編集したいページを開きます。
②ウィジェットは「テキスト」を選択します。
③表作成のルールに従ってコードを記述します。下の例を参考にしてください。
コードの作成
「table caption="2015年9月スケジュール" colalign="center|center|center|center|center|center|center" 」 ９月,月,火,水,木,金,土 第１週,,フリー,アルバイト,家事,フリー,勉強 第２週,アルバイト,実家に墓参り,アルバイト,フリー,家事,アルバイト 第３週,美容室,フリー,ピアノ教室,家事,フリー,勉強 第４週,アルバイト,フリー,アルバイト,資格試験ー,<a href="/">家事</a>,アルバイト 第５週,美容室,デート,アルバイト,,, 「/table」
表の出来上がり 表示例
| ９月 | 月 | 火 | 水 | 木 | 金 | 土 |
|---|---|---|---|---|---|---|
| 第１週 | フリー | アルバイト | 家事 | フリー | 勉強 | |
| 第２週 | アルバイト | 実家に墓参り | アルバイト | フリー | 家事 | アルバイト |
| 第３週 | 美容室 | フリー | ピアノ教室 | 家事 | フリー | 勉強 |
| 第４週 | アルバイト | フリー | アルバイト | 資格試験ー | 家事 | アルバイト |
| 第５週 | 美容室 | デート | アルバイト |
