少人数で初心者の方向けのホームページ制作教室、ワードプレスセミナーを開いています。 制作会社のノウハウを生かた個別レッスンです。東京・世田谷教室

simpler 画像・表の編集

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」

表の出来上がり 表示例

2015年9月スケジュール
9月
第1週 フリー アルバイト 家事 フリー 勉強
第2週 アルバイト 実家に墓参り アルバイト フリー 家事 アルバイト
第3週 美容室 フリー ピアノ教室 家事 フリー 勉強
第4週 アルバイト フリー アルバイト 資格試験ー 家事 アルバイト
第5週 美容室 デート アルバイト

お気軽にお問い合わせください

  • Facebook
  • Hatena
  • twitter
  • Google+

講習予約について

現在、講師の都合により臨時休講しています。ご迷惑をおかけしますがよろしくお願いします。
新規受講は現在受付けてません。

講習を始めるに当たり「事前アンケート」の記入をお願いします。
ご記入は、こちらから どうぞ。

ホームページ作成はこちらまで

独自ドメイン取得のご案内


自分専用のホームページアドレスを使う場合は独自ドメインを事前に取得しておくと効率的です。
※ムームードメインがお勧め!

レンタルサーバーのご案内


事前にご自分でレンタルサーバーの契約をしておくと、サイト制作がスムーズです。
※ロリポップがおすすめです。

お勧めパソコンは MOUSE

私も十数年使っています。日本製で安いし使いやすい。乃木坂46のテレビCMを最近よく見ますね!

高性能レンタルサーバー

PAGETOP
Copyright © ビジネスサイト制作教室 All Rights Reserved.
Powered by WordPress & BizVektor Theme by Vektor,Inc. technology.