沖縄とトールペイントが大好きでQuick Homepage Makerでのサイト作りに奮闘中！

Top / QHMReferenceBook / Picture

画像

画像についての注意すること

• ホームページに使える画像は、
  • gif (ジフ)形式
  • jpg (ジェイペグ)形式
  • png (ピーエヌジー)形式

の３つです。bmp形式やそれ以外の形式の画像は表示できません。
これは、ブラウザの決まりです。
IE,Firefox,Safari,Operaどのブラウザであっても、ビットマップ形式の画像は、表示できません。

jpg形式は、「写真」に向いています。写真の画像を小さくするときに、すごく向いています。逆に、文字画像などは、「汚く」なります。

実は、GIFとPNGは役割が同じです。GIFは、ある会社が作った形式で、ライセンスの関連上、自由に使えません。多くのフリーソフトが、gif形式を扱えないのは、この問題のためです。２つとも、Webで画像を表示するための形式です。主に、ロゴや文字画像、図などの保存に使います。キレイにぼけずに保存できます。

背景が透明の画像を作るときも、gif, png を使います。

IE6は、バグがあり、PNGの透明(透過PNG)は、サポートしていません。グレーになったりします。
IE7からは、問題がなくなっていますが。透明画像を使いたい場合は、gifを使いましょう。

でも今後、gifよりpngが主流になります。

Photoshopで作ったjpeg画像は、保存時に「最高画質」を選択すると、ブラウザで表示できなくなる場合があります。
これは、PhotoshopオリジナルのJPEGファイル、もしくは高解像度形式が原因です。PCで見ることができても、ブラウザで表示されないことがあります。
なので、Photoshopの保存時には「Web用に保存」のような形で保存をして下さい。
ロゴ画像、文字画像は、png形式をお勧めします。キレイで、サイズも小さいです。

画像の縮小ページ

http://www.hokuken.com/index.php?resize

縮小、角丸、影付け、ぼかしができる簡単編集フォーム(QHMプロユーザー専用)

https://ensmall.net/p/qhmpro/index.php?ImageConvert

画像を単純に横並びにする

• SWFアップローダーにある画像をコピー&ペーストして改行せずに並べていく。本文部分の横幅（デフォルトでは約550px）を超えないように注意すること。

  &ref2(画像名.JPG,nolink,画像の説明);&ref2(画像名.jpg,nolink,画像の説明);&ref2(画像名.JPG,nolink,画像の説明);

  　↓このようになる。上のままだとくっついているのでスペースを入れてある

&ref2(swfu/d/anpanman.JPG,nolink,画像の説明);　　&ref2(swfu/d/auto_nsYm2F.JPG,nolink,画像の説明);　　&ref2(swfu/d/anpanman.JPG,nolink,画像の説明);　　&ref2(swfu/d/auto_nsYm2F.JPG,nolink,画像の説明);　　&ref2(swfu/d/anpanman.JPG,nolink,画像の説明);

HTMLソース（アフィリエイトタグ）を横並びにする

• この場合も本文部分の横幅（デフォルトでは550pxピクセル）を超えないように注意すること。

  #html{{
  <table><tr><td>ここにアフィリタグA　</td><td>ここにアフィリタグB　</td><td>ここにアフィリタグC　</td></tr></table>
  }}

↓このようになる（上のままだとくっついているのでスペースを入れてある）

ここにアフィリタグA

ここにアフィリタグB

ここにアフィリタグC

• アフィリタグの下に文字を入れる。

  #html{{
  <table><tr><td>アフィリタグA</td><td>アフィリタグB<td>アフィリタグC</td></tr><tr><td>おススメです。</td><td>もう少しおススメです。</td><td>大変おススメです。</td></tr></table>
  }}

このようになる↓

アフィリタグA	アフィリタグB	アフィリタグC
おススメです。	もう少しおススメです。	大変おススメです。

HTMLソースを中央に寄せる

• アフィリエイトなどで、HTMLを多用していてHTMLソースを画面の真ん中に表示したい場合。HTMLソースの一番上と一番下の間に、次のように書く。

  <div align="center">と</div>で囲むことで中央寄せができる

  　　　　　　　　　　↓

  #html{{
  <div align="center">
  ここにリンク用のHTMLソース
  </div>
  }}

• 上記のcenter　を right に変更すると右寄せになる。

greyboxを使って画像やウェブサイトをポップアップする

• lightboxとの違いは、Webサイト（ホームページ・Yahoo!やGooGleなど）も表示できること。
• 基本的な書き方

  &greybox(URL,説明,グループ){表示名};

• 各項目について
  • URL：ホームページのURL（又は画像のURL）を書く。
  • 表示名：ホームページ上に表示される内容です。Wiki書式、画像も使用できる。
  • 説明：ここに書いた内容がポップアップのウインドウ内に表示される。
  • グループ：任意の同じグループ名を指定すると、次の画像へのナビが現れ、連続して表示させることができる。
  • （※[ ]で囲っている「説明」と「グループ」の項目は、省略可能）

• &greyboxでウェブサイトを表示

&greybox(http://www.google.co.jp/,検索ならGoogle,){&ref2(swfu/d/Google.PNG,nolink,Google);};

• １枚だけのポップアップなら「説明」と「グループ」を省略してもできる。
  ※最低限これだけで表示できる。

• １枚だけのテキスト表示ポップアップ

  &greybox(http://blog.yunahana.com/swfu/d/anpanmana.JPG){アンパンマン};

↓こうなる
アンパンマン

• １枚だけの小さい画像を使ったポップアップ

  &greybox(http://blog.yunahana.com/swfu/d/anpanmana.JPG){&ref2(swfu/d/anpanman.JPG,nolink,クリックしてみて！);};

↓こうなる

• 小さい画像を使った連続表示のポップアップ

  &greybox(http://blog.yunahana.com/swfu/d/anpanmana.JPG,アンパンマン,anpanman){&ref2(swfu/d/anpanman.JPG,nolink,クリックしてみて！);};
  &greybox(http://blog.yunahana.com/swfu/d/anpanmanb.JPG,カリッ！,anpanman){アンパンマン・カリッ！};
  &greybox(http://blog.yunahana.com/swfu/d/anpanmanc.JPG,ポリッ！,anpanman){アンパンマン・ポリッ！};
  &greybox(http://blog.yunahana.com/swfu/d/anpanmand.JPG,ごちそうさま〜♪,anpanman){ごちそうさま〜♪};

↓こうなる

アンパンマン・カリッ！
アンパンマン・ポリッ！
ごちそうさま〜♪

{表示名}この表示名を消して半角スペースを入れるとページ上の表示を無くすことが出来る。

&greybox(http://blog.yunahana.com/swfu/d/anpanmana.JPG,アンパンマン,anpanman2){&ref2(swfu/d/anpanman.JPG,nolink,クリックしてみて！);};
&greybox(http://blog.yunahana.com/swfu/d/anpanmanb.JPG,カリッ！,anpanman2){ };
&greybox(http://blog.yunahana.com/swfu/d/anpanmanc.JPG,ポリッ！,anpanman2){ };
&greybox(http://blog.yunahana.com/swfu/d/anpanmand.JPG,ごちそうさま〜♪,anpanman2){ };

↓こうなる

lightbox2を使ったポップアップ（画像の表示だけ）

• 書き方の基本

  &lightbox2(画像名[,説明][,グループ]){表示名};

  • 画像名：画像ファイルがあるURL（又は相対パス）と画像名を書きます。
  • 表示名：ホームページ上に表示される内容です。Wiki書式、画像も使用できます。
  • 説明：ここに書いた内容がポップアップのウインドウ内に表示されます
  • グループ：任意の同じグループ名を指定すると、次の画像へのナビが現れ、連続して表示させることができます。
  • ※[ ]で囲っている「説明」と「グループ」の項目は、省略可能です。
• 文字表示のポップアップ

  &lightbox2(http://blog.yunahana.com/swfu/d/anpanmana.JPG){アンパンマン};

  ↓このようになる。
  アンパンマン

• 文字の代わりに小さい画像表示でポップアップ

  &lightbox2(http://blog.yunahana.com/swfu/d/anpanmana.JPG,アンパンマン,anpanman){&ref2(swfu/d/anpanman.JPG,nolink,クリックしてみて！);}; 

  　↓こうなる
  

画像の横に枠を並べてみる。