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

画像について

Top / QHMReferenceBook / Picture

画像

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

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

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

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

実は、GIFとPNGは役割が同じです。GIFは、ある会社が作った形式で、ライセンスの関連上、自由に使えません。多くのフリーソフトが、gif形式を扱えないのは、この問題のためです。2つとも、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);};
Google


  • 1枚だけのポップアップなら「説明」と「グループ」を省略してもできる。
    ※最低限これだけで表示できる。
  • 1枚だけのテキスト表示ポップアップ
    &greybox(http://blog.yunahana.com/swfu/d/anpanmana.JPG){アンパンマン};

こうなる
アンパンマン

  • 1枚だけの小さい画像を使ったポップアップ
    &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,クリックしてみて!);}; 
     こうなる
    クリックしてみて!

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

カチャーシー

カチャーシーとは、掻き混ぜるという意味で、三線の早弾きに乗って踊る沖縄の手踊りです。基本になる上品で綺麗なカチャーシーもありますが、嬉しい楽しい気持ちを自由に体中で表現します。タオルを頭に巻いたり、前歯に海苔を付けたり、ちょっとした変装でおもしろおかしく踊ったりしたりしてお祭りや結婚式など祝い事の席を盛り上げます。勿論お祝いの席だけじゃなく、呑み屋さん、カラオケ、同窓会、2人以上集まればいつでもです! 一人ずつ順番に踊ったり、見物していると手を引っ張られカチャーシーの輪の中に強制参加参させられます。恥ずかしいなんて言ってられません(^^;


ページトップへ

最新の更新 RSS  Valid XHTML 1.0 Transitional