FC2ブログ

kantaのアフィリエイト生活スポンサー広告画像に関する小技 その1[カスタマイズ]HTMLの小技画像に関する小技 その1

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

|--/--/--|スポンサー広告||PageTop↑ | 編集| 

画像に関する小技 その1

よく記事内に画像があり、クリックすると別窓で拡大された画像が出てくるのがありますよね。

実は、私も「どうやるのかな?」と疑問は持ってました。また、コメントを頂いている方からこの質問を受けました。

「この機会だから記事にしてみよう!」という事で、今日から連載でこの手法を取り上げていきます。
方法はいくつかあります。

?JPEG形式の画像のサムネイル機能を利用する(FC2のみ?)
?画像を貼り付ける際、タグに画像の大きさを指定して記事に掲載する方の画像を小さく見せる
?画像処理ソフトを使って画像のサイズを小さくして、元の画像とリンクさせる

があります。(他にもあるかもしれませんが…。)

まず、?JPEG形式(拡張子が.jpg)の画像のサムネイル機能を利用する です。
これは、JPEG形式・PNG形式(拡張子が.png)に限定されてしまいます。GIF形式(拡張子が.gif)の画像には適用されませんので注意してください。(拡張子って?という方はこちらをお読み下さい。)

FC2ではファイルのアップロードの際にJPEG形式、PNG形式の画像は「サムネイルを作成する」にチェックを入れると、元の大きさの画像とサムネイル(縮小された画像)が一緒にサーバーに保管されるようになっています。
記事内の限られたスペースにたくさんの画像(主に写真)を掲載できるようにこういう配慮がされているようです。
そして、記事を投稿する際に本文を記入するフォームの上にある「画像」のボタンを押し「記事を書く(サムネイルあり)」をクリックすると、こんなタグが出てきます。

<a href="http://blog○.fc2.com/○/○○○○/file/○○.jpg" target="_blank">
<img src="http://blog○.fc2.com/○/○○○○/file/○○s.jpg" alt="001s.jpg" border="0"></a><br clear="all">

上の赤文字の部分が元画像、青文字がサムネイル画像のアドレスになっています。違いがわかりますか?「file/○○」の後に「s」が付いているかいないかです。
下の<ing src=?>で元画像を記事中に表示させ、<a href=?>で元画像とリンクして、target="_blank"で別窓で表示させる構造になっています。これで投稿すればOKです。
他にもタグはたくさんあります。「勉強してみたい!」という方はこちらがとても参考になりますので、ご覧下さい。

次は、?画像を貼り付ける際、タグに画像の大きさを指定して記事に掲載する方の画像を小さく見せる についてお話します。
スポンサーサイト
|2005/08/12|[カスタマイズ]HTMLの小技||PageTop↑ | 編集| 

RSS

お手持ちのRSSリーダーやMy Yahoo!などに当ブログを登録できます。よろしかったらどうぞ。


My Yahoo!に追加

Add to Google

Subscribe with livedoor Reader

このブログをリンクに追加する

アクセスアップツール

↓SEO対策にお使い下さい。

キーワードアドバイスツールプラス
Powered by SEO対策

サイトマップラス
Powered by SEO対策

アフィリエイター専用のアクセスアップサービス
アフィリエイター専用のアクセスアップサービス

カテゴリー

月別アーカイブ

ブログ内検索

ウェブ検索

Google

WWW を検索
FC2 を検索

最近のコメント

お友達ブログ

管理人が仲良くして頂いている皆さんです。

リンク

プロフィール

by 似顔絵イラストメーカー kanta

  • Author:kanta
こんなハンドルネームですが♀です(笑
東京都在住。家族はダンナ(30歳代前半)、息子2人(3歳・0歳)と管理人(ダンナの1歳年下)の4人。この秋に1人家族が増えたばかりです^^
管理人:kantaにメールする 
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。