画像の横幅(width)指定についての注意!ルールに従って綺麗な画像を適切ばサイズで使う!ホームページの出来栄えは画像で決まる同じ「レイアウト」で、「同じコンテンツ」が書かれているホームページでも、画像が綺麗であるかどうかで、ホームページの印象はずいぶん変わります。「トップバナー」や「画像リンク」等は、現在クオリティが高くなってきています。初心者さんであっても、画像を扱うための最低限の知識を身につければ、当初から見やすく、綺麗なホームページを作成する事は可能です。クオリティの高い画像と、これを加工するソフトは無料で提供されていますので、画像配布サイトはお気に入りに登録し、ソフトはダウンロードしておきましょう。画像ソフトは、無料で使えるソフトであってもGIMPのように操作が複雑で、使いこなすのが難しいソフトも多いです。高性能の画像ソフトを当初から使わない方が良いです。覚えるだけで相当時間がかかり、本末転倒になってしまいます。初心者さんであれば、画像ソフトはJTrim(ジェイトリム)を使ってください。ホームページ作成上とりあえずこのソフトは必要不可欠なので、ダウンロードしておきましょう。それと欲しい画像が検索できるサイト(Pixabay)を紹介しますので、お気に入りに入れておいて下さい。下記URLでは他にもお勧めサイトがありますので、ご活用下さい。JTrim(ジェイトリム)★完全フリー画像サイトのPixabay画像ファイルの3つの種類とルールホームページ作成で使用できる画像フォーマットJPEG・・・スマホ、デジカメ等の写真PNG・・・イラスト、ロゴGIF・・・・イラスト、アニメーションGIF■JPEGフルカラーで1677万色のが使えるため、スマホ、デジカメ等の写真の表示に適した画像形式です。JPEGではファイルの圧縮率の選択で、ファイルサイズを変更する事ができます。圧縮率を小さくし、ファイルサイズを大きくすると画質が鮮明になりますが、あまり大きなサイズの画像を同じページで使い過ぎると、閲覧者さんがページを開くスピードが遅くなり、SEO上不利になります。逆にファイルサイズを小さくするために圧縮率を上げると、ホームページは軽くなりますが、画像は不鮮明になります。ファイルサイズが大きい場合はグーグルの解析ツールであるサーチコンソールで対処できますので、現段階では写真画像はJPEGを使うという事だけ覚えてください。■PNG指定した色に対して透過処理ができることがPNGの特徴です。画像の輪郭など、一部を透明化し、背景の色が見える状態にする事ができます。PNGは1677万色のフルカラーが使えるうえ、ファイルサイズが小さく、JPEGのように圧縮ノイズが目立たないので、イラストやロゴなどの保存に適しています。JPEG形式よりもファイルサイズが極端に大きくなるので注意が必要です。■GIFGIFはデータ容量が非常に小さく、ホームページで閲覧きるように開発された画像フォーマットです。WEB上でよく見かけますが、複数の画像をファイルに入れることで、アニメーションとして動画のように見せている画像がアニメーションGIFです。GIFは使える色数が256色に限られていますので、ファイルのデータ容量が少なくて済みます。色数が少ないので、ホームページ上ではボタン画像などに使われる事が多くなっています。単色が多いロゴや簡単なイラストに向いているって事です。写真画像をPNGで表示すると、輪郭部分の色の変わり目の表現で容量を使いますので、極端にファイルサイズが大きくなりますので注意して下さい。GIFBMP形式はホームページで使えないホームページ作成で使ってはいけない画像フォーマットがあります。それがBMP形式です。なっていて、BMPはビットマップと読みます。このフォーマットはWindows標準の画像形式なのですが、上記の3つの形式と比べて、極端にファイルサイズが大きくなっていて、ホームページで使うには不向きです。通常HTMLで画像を表示させる場合下記のようなタグを使います。画像(img=Image)の引用(src=source)はabc.jpgを表示させ、横幅(width)を120pxとし、代替文字列(alt)は「画像の説明」とする。src="abc.jpg"★img・・・・Image(画像)★src・・・・source(引用)style="width:120px;"★width・・・(横幅)alt="画像の説明"★alt・・・・・(代替文字列)テキストブラウザのように画像を表示しないブラウザや画像表示をOFFにしている閲覧者のために[alt属性]によって画像の代わりとなる代替文字列を記述するルールがあります。画像が見れない状態の閲覧者さんに対して、テキストで画像を説明するのですが、なるべく画像の様子がイメージできるように、詳しく記述する必要があります。alt属性で記述し、実際どのような画像であるかが解るようにしています。このように画像の説明を解りやすく記述すると、グーグルの画像検索でヒットしやすくなります。閲覧者さんがグーグル検索をする際、通常検索窓にテキストを記述するのですが、このときコンテンツによっては[動画]、や[画像]で検索する場合があります。この画像検索で画像がヒットし、クリックして頂いた場合、ホームページに直接飛ぶようになっています。alt属性を正確に記述する事はSEO対策になるわけです。画像の横幅(width)指定についての注意!ホームページに使う画像で、イラストなどの場合は、取り込み先の画像そのままのサイズで使えることが多いですが、写真の場合は大きさの加工が必要になってきます。写真自体を加工しなくても、タグで、「表示上の大きさ」は調節する事ができます。そのためのタグがstyle="width:160px;"であり、160pxが横幅の大きさになります。タグ(width)で画像を小さくした場合は、表示上の大きさは小さく出来たとしても、画像のファイルサイズ自体は変更されず、元の容量のままです。デジカメの写真では、特にファイルサイズが大きくなりますので、上記でお伝えしているJTrim(ジェイトリム)で、ファイルサイズを落とす必要があります。スマホなど携帯端末でもデジカメ並みの大きさがありますので加工は必須になるわけです。上下の写真を比べて、さほど画質に影響がない事が解ります。大きさを5分の1に加工した下記画像は、ファイルサイズでは10分の1以下になっています。↓↓↓640pxに加工した画像をタグ(width)でさらに320pxに落とした画質---45.7KB---320pxの画像をタグ(width)で160pxに落とした画質9,71KB特に写真を多く掲載するホームページを作成したい方は、ファイルサイズを考慮する必要があります。画質にあまり影響しない大きさを色々試してみて、実際にホームページが軽く動くか検証したほうが良いです。グーグルはホームページの各ページが開くスピードを監視しているとお考え下さい。それに閲覧者さんもホームページが開くのを、3秒以上待ってくれません。上位表示の理屈は色々ありますが、このような事が積み重なってSEOに影響するわけです。グーグルアナリティクスでは各ページの重さ(ファイルの大きさ)を検証できます。ページスピードインサイトというツールでホームページの速度を計る事ができます。このようなツールはすべて無料で利用することができます。Yoshida]プロフィール初めてのホームページ作成でビジネス、SEO対策のお役に立てば幸いです。Pagesホームページの仕組みホームページがパソコンのブラウザで表示される原理を解説します。ホームページをアップロードして見れるようにするにはドメインを取得し、レンタルサーバーを契約する必要がありますが、これが直接ホームページが見れる原理に直結しています。ホームページの構成と名称ホームページを作成するのに、トップページにおいて最低限必要な各部の名称と機能は正しく理解しておく必要があります。ホームページの見やすさや使い勝手、SEO対策にも大きく関係する基本的なコンテンツになります。HPのカラムについてカラムとはトップページの区割りであり、構成や外観のことを言います。このカラム数はホームページの情報量によって決まり、閲覧者さんのサイトの使い勝手に影響します。後で変更する事は非常に手間がかかるため、サイトの規模を当初から推測し決める必要があります。リンクについてリンクという機能があるこらこそホームページが成り立ち、現在ここまで発展したと言っても過言ではありません。SEOや検索表示のされ方に大きく影響するため、グーグルのガイドラインに沿った正しいリンク付けをする必要があります。ホームページの階層ホームページのページ数が多くなってくる場合はカテゴリーごとに記事をまとめます。この場合はフォルダを新たに作成し階層を下げる!という作業が必要になります。サイト作成後の更新で画像を入れ替える場合、画像専用のフォルダを作成しておくと便利です。ホームページ作成ソフトランキング!初心者さんにお勧め!.。