Webでの画像の取り扱い
教室では画像の取り扱いに関する質問が多くあったので、ここにまとめてみました。
画像ファイルの内容
まず、画像ファイルの内容を把握すること!
1.画像の大きさ 単位px(ピクセル)
アイフォン写真の元サイズは縦2448px横3264px、ハイビジョンは横1920px縦1080px
自分の使っているディスプレイの大きさも知っておくと便利。
iPhone5,5s,5c 640×1136、iPhone6,6s 750×1334、iPhone6 Plus,6s Plus 1242×2208
2.画像ファイルサイズ 単位KB
アイフォン写真の元サイズは約3000KB、WordPressのアップロード上限は2000KB
メールで送るときなどは写真の容量を減らすため、3種のリサイズが選択できます。
小 240*320px 約50KB
中 480*640px 約160KB
大 1224*1632px 約1000KB
3.画像の種類 BMP、JPG、PNG、PSD、PXD(Pixlr独自のファイル形式)
圧縮しやすいJPG、背景を透明にできるPNGが便利
4.縦横比 3:4、16:9、1:1など
アイフォン写真は4:3(スクエアで撮れば1:1)、ハイビジョンは、16:9
※Windowsではエクスプローラで上記項目を表示できるように設定しておくと便利
例:ピクチャフォルダの「表示」「詳細表示の設定」に「大きさ」を追加(一覧のかなり下の方)
画像の操作方法
よく使う操作を挙げてみると
1.画像のリサイズ
2.画像のトリミング
3.ファイルサイズの圧縮
simplerでは画像の横幅を、
ヘッダー用2000px、トップページ用1000px、ページ用500px、サムネール用150pxを勧めています。
※上記の操作が可能な、使い慣れたソフトを用意する
例:フォトショップ、ACDsee、ピクセラエディタ
画像のレイアウト
ワードプレスでページのレイアウトをするとき利用できるエディタを挙げてみると
1.テキストエディター(HTMLで入力する場合に使う)
2.ビジュアルエディタ(ワープロのような感覚で使える。TinyMCE Advanced)使い方はこちら
3.ページビルダー(パワポのような感覚で使える。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" 」 9月,月,火,水,木,金,土 第1週,,フリー,アルバイト,家事,フリー,勉強 第2週,アルバイト,実家に墓参り,アルバイト,フリー,家事,アルバイト 第3週,美容室,フリー,ピアノ教室,家事,フリー,勉強 第4週,アルバイト,フリー,アルバイト,資格試験ー,<a href="/">家事</a>,アルバイト 第5週,美容室,デート,アルバイト,,, 「/table」
表の出来上がり 表示例
9月 | 月 | 火 | 水 | 木 | 金 | 土 |
---|---|---|---|---|---|---|
第1週 | フリー | アルバイト | 家事 | フリー | 勉強 | |
第2週 | アルバイト | 実家に墓参り | アルバイト | フリー | 家事 | アルバイト |
第3週 | 美容室 | フリー | ピアノ教室 | 家事 | フリー | 勉強 |
第4週 | アルバイト | フリー | アルバイト | 資格試験ー | 家事 | アルバイト |
第5週 | 美容室 | デート | アルバイト |