サムネイルに写真やグラフィックを表示する

シンプルなレッスン

写真とグラフィックスは、多くのサーバースペースを使用します。 これにより、Webページの読み込み速度を大幅に遅くすることができます。 あなたの選択肢の1つは、写真のサムネイルを代わりに使用することです。 サムネイルは同じ画像の小さい方のバージョンです。 それから元の画像にリンクします。

サムネイルを使用すると、1ページに多くのグラフィックを収めることができます。 あなたの読者は、ページ上のすべてのグラフィックスを選んで選択して、見たいものを決めることができます。

サムネイルを作成するのは難しいことではなく、実際にはあまり時間がかかりません。 まず、写真やグラフィック編集プログラムをダウンロードする必要があります。 私はIrfan Viewを使用します。 無料で簡単に使用できます。 これは、Paint Shop ProやPhotoshopのような包括的ではありませんが、色の見え方の変更、切り取り、変更には十分です。

このレッスンではIrfan Viewを使用します。 あなたが別のプログラムを使用している場合は、その指示はそれほど違いはありません。

最初に行うことは、サイズを変更するイメージを開くことです。 これを行うには、「ファイル」、「開く」をクリックし、コンピュータ上の画像を見つけて「開く」ボタンをクリックします。

グラフィック編集プログラムで画像を開いた状態で、画像をトリミングまたはサイズ変更することができます。 クロッピングは、使用したいイメージよりも多くのイメージを持っているときに行うことです。 あなたとあなたの写真がありますが、あなたはその部分をあなたと一緒に使って他の人を切断したいと思う、それは切り抜きです。

トリミングするには、まず保存したい領域を選択する必要があります。 マウスカーソルを保存したい領域の一角に置き、マウスボタンを押したままカーソルを領域の反対側の角にドラッグします。 このようにして領域の周りに線が作成され、完了したらその周りに細い境界線が表示されます。

「Edit」、「Crop selection」をクリックします。 選択した領域が残され、残りの画像は消えます。 あなたが見ているものが好きなら、この時点で画像を保存して、間違ってプログラムを閉じて切り抜かないようにします。 あなたが好きではない場合は、 "編集"、 "元に戻す"をクリックすると、それを切り取る前の状態に戻ります。

画像から何かを切り取りたい場合は、「カット」機能を使用してこれを行うことができます。 「選択範囲にテキストを挿入」を使用して、この時点で画像にテキストを追加することもできます。 これらの機能は両方とも「編集」メニューにあります。 あなたがあなたの仕事を失うことがないようにあなたが好きな変更を加えた後、イメージを保存することを忘れないでください。

今サムネイルを作成します。 「画像」、「サイズ変更/再サンプリング」をクリックします。 画像のサイズを変更できるボックスが表示されます。 高さと幅またはパーセンテージで画像のサイズを変更することができます。 たとえば、50ピクセルの幅を置くことも、イメージを元のサイズの10%にすることもできます。 写真ギャラリーとして使用するサムネイルを作成する場合は、すべての画像を同じサイズに近づけるようにして、ページ上に収まるようにして、まっすぐな行や列を作成することをおすすめします。

画像のサイズを変更したときに画像の明瞭さが失われているように見える場合は、[画像]メニューの[シャープ]機能を使用できます。 サイズ変更後に画像を保存するときは、「保存」機能ではなく「別名で保存」機能を使用していることを確認してください。 これとは違った名前を付けたいかもしれません。 保存するだけで、古いイメージが上書きされ、元のイメージが失われます。 あなたのオリジナルが "picture.jpg"と呼ばれていたら、サムネイルを "picture_th.jpg"と呼ぶことができます。

あなたのホスティングサービスにあなたのWebサイトに簡単にページやグラフィックスをアップロードするのに役立つファイルアップロードプログラムがない場合、アップロードするにはFTPクライアントが必要です。 あなたが持っているホスティングサービスは、ファイルをアップロードできるようにFTPクライアントに入れる必要がある設定を提供する必要があります。

グラフィックスや写真を「グラフィックス」や「写真」という名前のフォルダにアップロードして、ページと区別しておくことができますので、必要なときに簡単に見つけることができます。 私は、異なるフォルダを使ってページやグラフィックスを整理するのが好きです。 素早く探しているものを見つけることができるように、素早くあなたのサイトをきれいに保ちます。何かが必要なときに借りなければならないファイルの長いリストはありません。

また、サムネイルをホスティングサービスにアップロードする必要があります。 「サムネイル」と呼ばれる可能性のある別のフォルダに配置することを検討してください。

これであなたのグラフィックのアドレスが必要になります。 例:Geocitiesでサイトをホストし、ユーザー名が「mysite」としましょう。 メインのグラフィックは "graphics"というフォルダにあり、 "graphics.jpg"という名前が付けられています。 サムネイルは「サムネイル.jpg」と呼ばれ、「サムネイル」というフォルダ内にあります。 あなたのグラフィックのアドレスはhttp://www.geocities.com/mysite/graphics/graphics.jpgであり、サムネイルのアドレスはhttp://www.geocities.com/mysite/thumbnail/thumbnail.jpgです。

今すぐ行う必要があるのは、ページにサムネイルへのリンクを追加し、サムネイルからグラフィックへのリンクを追加することだけです。 一部のホスティングサービスはフォトアルバムを提供しています。 ページに写真を追加するには、指示に従ってください。

HTMLを使用してフォトアルバムを作成することを好む場合は、最初から開始する必要はありません。 代わりにフォトアルバムテンプレートを使用してください。 あなたがしなければならないのは、リンクを追加することだけです。あなたはフォトアルバムを持っています。

メイングラフィックがページに表示されるように、グラフィック自体にリンクしているだけなら、使用する必要があるコードは次のとおりです。

画像のテキスト

このコードでgraphic.jpgが表示れている場合は、 http://www.geocities.com/mysite/graphics/graphics.jpgに変更するか、 / graphics/graphics.jpgのような短い形式を使用できます。 それから、あなたが絵の下で何を言おうと思っていても、「 テキストのためのテキスト」と書かている場所を変更してください。

サムネイルを使用してそこからグラフィックにリンクする場合、使用するコードは少し異なります。

http://address_of_graphic.gifが表示されている場合は、サムネイルのアドレスを追加します。 http://address_of_page.comが表示されている場合は、グラフィックのアドレスを追加します。 ページにサムネイルが表示されますが、グラフィックに直接リンクします。 グラフィックのサムネイルをクリックすると、元の画像に移動します。

これで、サーバーを停止させることなく、1ページに多くのグラフィックスをリンクして、ページの読み込みを遅くすることができます。 これはフォトアルバムを作成するための唯一の選択肢ではありませんが、1ページにたくさんの写真を追加して、ページやページの写真をクリックする必要がなくなります。 彼らはまた、彼らが望んでいない場合、それらのすべてを見る必要がなく、通常のサイズで見たい写真を選択することができます。