柏市の生涯学習を通してまちづくりを行っています

貝沢正行のページ_HPづくり04写真の掲載方法



戻る

写真(静止画)の掲載方法

昔から「百聞は一見に如かず」といいます。
ホームページでも写真で説明するのが最適です。一見するだけで分かる。時には大きな写真で、時には多くの写真で、時にはスライドショーで、など。
QHMによる写真の掲載方法については「藤心QHMクラブ」などで詳しく説明しています。
ここでは、私が体験したホームページづくりで次の観点からまとめて説明してみたいと思います。

  • 写真の載せ方としてはどんな方法があるのか?
  • 作業がうまく出来なかった時に検討して分かったこと


写真掲載作業時の要領

  • HP掲載(サーバーにアップロード)前の要点
    • 写真の大きさは特殊なケースを除き横幅640px以内で、ファイル容量は100kB以下にする 重要
    • 写真の横縦比は従来の標準4:3、あるいは近年の標準16:9に揃えると見やすい(いろいろなサイズが混在すると見にくい)。しかしながら、各種スライドショーでは使うおまじないにより写真サイズを変更する必要があり、厄介だ(下記の事例説明参照)。
    • その他、利用写真で気づいた点に手を入れる(明るさ補正、色補正、傾き補正、トリミング)
  • HP掲載後の要点
    • 使わなかった写真はサーバーに放置せずに即削除する(忘れないうちに削除すること)
    • サーバーにアップロードした写真はどのページでも掲載可能(同一ファイル名を使えばよい)


掲載例1:写真1枚を大きく掲載する

  1. 掲載方法はこちら

  2. 具体例(横幅640px,80kBを中央に置く)

    画像の説明

  3. 参考:画像はどのくらいのサイズが適切か?
    サイズを変えて載せてみました。結論としては横幅は640pxが最大であることを確認ました。


    ホームページに写真を載せる際に適切な横幅サイズ(ピクセル数)に決定することは煩わしいが不可欠事項だ。それで640x360pxの画像をアップして横幅サイズをいろいろ変てみて次の結論を得た。


    ◆結論1:アップする画像は横640px(写真の一標準値)以下にする 640px以上はNG(特殊用途は別)


    横640px(横640pxそのまま100%)➞写真の横に隙間が無い(横幅いっぱい)
    横640px


    横634px(横640pxの99%)➞写真の横に隙間が無い(横幅いっぱい)
    横640pxの99%=634px


    横627px(横640pxの98%)➞横に隙間が少し出た(良く見ないと分からない)
    横640pxの98%=627px

横634px(横621pxの97%)➞横の隙間が分かるが小さい 6p字1個 が入らずはみ出される
横640pxの97%=621px

横608px(横640pxの95%)➞横の隙間が広がった:14p字1ヶ程度
横640pxの95%=608px

横576px(横640pxの90%)➞横の隙間が更に広がった:14p字3ヶ程度
横640pxの90%=576pxあいう


◆結論2:画像2枚を横に並べた例➞横307px(横640pxの48%)がMAX

横640pxの48%=307px 横640pxの48%=307px


◆結論3:画像3枚を横に並べべた例➞横205px(横640pxの32%)がMAX

横640pxの32%=205px 横640pxの32%=205px 横640pxの32%=205px


◆結論4:画像4枚を横に並べべた例➞横147px(横640pxの23%)がMAX

横640pxの23%=147px 横640pxの23%=147px 横640pxの23%=147px 横640pxの23%=147px








掲載例2:写真の周り(写真の右、左)に文章を書く(周りこみ画像)

  1. 掲載方法(画像の廻りにテキスト文章を入れる)はこちら

  2. 具体例(横幅640px,80kB写真の30%サイズを左端or右端に置く)
画像の説明

ああああああああああああああああああああああああああああああああああああああああああああああああああああああ。
いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい。
うううううううううううううう。


画像の説明

えええええええええええええええええええええええええええええええええええええええええええええええええ。
おおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおお。




◆結論:回り込み画像を使う際に写真縮小率の記入場所はどこでも良いわけではない

横640pxの20%=128px

横128px(横640pxの20%)の写真の回り込み例です。
注1:写真縮小率(20%)の挿入位置を「aroundl」の後に挿入したらOK
注2:「#show」の最後に「;」が有っても無くてもOKだった。なぜ?



aroundl,横640pxの20%=128px

注:写真縮小率(20%)の挿入位置を「aroundl」の前にたまたま置いたところ、回り込み機能が効かず文字は写真位置の後に置かれた。なぜ?
➞前後に「#clear」を入れてみたけどNG


掲載例3:文章説明後、改行して(文章行と切り離して)写真を数枚掲載する

  1. 掲載方法は、文章書き込み後改行して写真を掲載例1と同じ方法で載せる。単に複数枚続けて並べるだけ(写真間を開けたい時はスペースを追加)。必要に応じてポップアップ併用する。

  2. 具体例(横幅640pxの30%を3枚並べて中央に置く)
    ああああああああああああああああああああああああああああああ。
    いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい。
    ううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううう。

画像の説明 画像の説明 画像の説明


掲載例4:複数写真(サムネール)を並べて拡大写真(ポップアップ)を連続して見せる

  1. 掲載方法はこちら

  2. 具体例(横幅640pxの23%(2列以降)を横4枚、4列並べてみる)

開催案内チラシ 利用したおおるりバス バスに乗り込む 途中のドライブイン

ホテルに到着、幹事から予定説明 ホテルチェックイン待ち ホテルの近隣を散歩 散歩中に何かを見つけた

土産物店内 塩原祭りで特別イベントの踊り 踊りを見る 踊り方の説明を受ける

夕食 私の近況説明 平井さん手品 夕食後ホテルの1室でお喋り


掲載例5:複数枚写真を加工し1枚写真として載せる

多数の写真を1枚1枚ホームページにアップせずに、予め画像ソフトで複数枚の写真を並べて1枚の写真に作ってからアップするとホームページ上での取り扱いは簡単である。

この場合、特定の写真を拡大して見たい時でも全体を拡大して見ることになる。全体で画素数が制限されていることから写真は掲載例4のように個々を鮮明に見ることはできない。

掲載例4の16枚の写真を画像ソフトで一枚の写真にしてアップしてみます。
画像の説明


掲載例6:写真を含めた説明をWordで作成して載せる

Wordを使っている人は多い。Wordに写真を載せて文章で説明することもよく行われています。これを応用して下記の手順でホームページに掲載します(Wordを使える人にとっては楽な方法です)。

  1. ホームページに載せたい内容(写真&文章)をWordで作成する
  2. 完成した内容をパソコンのモニターで表示する
  3. 表示画面の必要部分をSnippingToolで切取り、画像として保存する
  4. その画像をホームページに掲載する。

掲載例:下記はWordで作成し掲載された例です

☟画像をクリックすると拡大してご覧になれます☟

画像の説明



掲載例7:画像送りボタン付きのスライドショー

  1. 掲載方法はこちら
  2. 具体例1「フレームサイズ:無指定のスライドショー」

    ここでの写真は元写真の横縦比4:3を16:9にして、サイズは480x270pxと小さくしてみた(640x360pxでは大きすぎて一部が表示されない)ところきれいに表示された。掲載方法の説明による570 x 270pxが良いと(570 x 270px以下ならOK)

    Frame

具体例2「フレームサイズ:small のスライドショー」

写真を具体例1と同じ480x270pxを使ったところ、左上コーナの一部しか表示されない。従って掲載方法説明にあるように写真のサイズは事前に 200 x 200px程度に変更しておく必要がある

Frame



具体例3「フレームサイズ:large のスライドショー」

写真を具体例1と同じ480x270pxでは左上コーナから大部分が表示されるが100%でない。しかも写真位置が右側に寄っており要改善。center、rightにしてもダメ。打開策は?

Frame



掲載例8:本命のスライドショー

  1. 掲載方法はこちら

  2. 具体例1 16:9比の写真 320x180px
    本例でのオプション指定値は、高さ➜300(数字を変えても変わらない?)、画像表示は順番➜false、1つの画像を表示する時間 ➜4秒、左の余白➜150、画像切り替えの滑らかさ ➜1秒
    とした場合の記述方法➡➡「#slideshow(300,false,4,150,1)」
    120% 画像説明 画像説明 画像説明

  3. 具体例2 16:9比の写真 480x270px
    本例でのオプション指定値は、高さ➜50(数字を変えても変わらない?)、画像表示は順番➜false、1つの画像を表示する時間 ➜4秒、左の余白➜50、画像切り替えの滑らかさ ➜2秒
    とした場合の記述方法➡➡「#slideshow(50,false,4,0,2)」

    画像説明 画像説明 画像説明 画像説明 画像説明
















  4. 具体例3 16:9比の写真 640x360px





  5. 具体例4 4:3比の写真を2枚並べ1枚にする 640x240px(320x240+320x240)
    画像説明 画像説明 画像説明





  6. 具体例5 4:3比の写真1枚を横640pxを使うとNG 640x480px


掲載例9:GIFアニメとして載せる

昔からよく作られているGIFアニメがあります。
サムネイルで小さな画像を注目させるためには良いと思いますが、写真を見てもらうことに重きを置くケースには向いていない。次の例参照。

  1. アニメ動作をストップしないで繰り返す: auto_0KvoIc.gif
    第5回公開講座で「くらしと趣味に役立てよう」と題して会員5人の講座を開催

  2. 3回繰り返したらストップする: yajirusiAnime3kai.gif
  3. 2回繰り返したらストップする: yajirusiAnime.gif

  4. 1回繰り返したらストップする:それに回り込み文章を追加

    パソコンで介護予防
    GIFアニメも静止画と同じく回り込み掲載が可能。画像の縦幅以上の幅を確保するために改行マークを数個入れる必要があるのも静止画と同じ。



  5. 1回繰り返したらストップする:回り込み文章なし
    ボランティアいきいき パソコンで介護予防




掲載例10:フォトムービーにして載せる

ムービーを作ること、および動画はFTPでアップする必要があり一言では説明できないのでここでは省略します。下記はその一例です。
        下記の画像をクリックしてビデオをご覧ください(3分40秒)

(再生中に画面中央下部の□をクリックすると画面が拡大します)







powered by QHM 6.0.4 haik
based on PukiWiki 1.4.7 License is GPL. QHM

最新の更新 RSS  Valid XHTML 1.0 Transitional