2005年07月17日(日) 23時36分56秒

第17回画像の表示(リメイク版)その1

テーマ:緊急企画!アメブロタグ講座

 ずいぶん前に書いた第17回のアメブロタグ講座「画像の表示」であるが、かなり不評だったのでリメイクしてみた。


 画像の表示タグは結構ややこしい。使いこなすのは大変そうだ。


 でも、できることならXML(HTML)タグで書けることに越したことはないと思う。


 なぜならば、アメブロの「記事を書く」欄でそのまま画像を貼ろうとすると、プログラムにバグが多くて、予期しない表示になってしまうことがあるからだ。


 どうなるかというと、例えば、記事として書いた文章と画像が知らぬ間にリンクされていたりする。


 まあ、imgタグで画像をとりあえず貼ってみよう。


 以下のタグを使うと画像は一応貼れる。


 <img src="画像のURL" alt="画像にふさわしい名前">


 例えば


 <img src="http://ameblo.jp/user_images/f4/b5/10001274032_s.gif" alt="夏らしい食べ物">

 というタグを使うと、こんな感じで画像が貼れる↓。


 夏らしい食べ物


 ちなみに画像の大きさを変えたり、記事のどのあたりに画像を貼るかの位置調整もタグでできる。


 まあ、今回はタグモードで一度試しに画像を貼ってみよう。


 そんなことたいしたことじゃないよと言われれば確かにそれまでだが。(自分の所の画像と文章が単にリンクされているだけだし。)

いいね!した人  |  コメント(0)  |  リブログ(0)
2005年06月26日(日) 19時15分34秒

番外編 チームマイナス6%バナーの貼り方

テーマ:緊急企画!アメブロタグ講座

 最近話題のチームマイナス6%だが、ここのHPにはバナーの貼り方が詳しくのっていないので、自分のブログにバナーが貼れなくて困っている人もいるようだ。


 というわけで、チームマイナス6%さんに代わってタグの貼り方を解説する。


 まずチームマイナス6%バナーを右クリック「画像をコピーする」で、どこか好きなところへ保存した後、WEBに画像をアップする。


 アメブロだったらユーザー管理→記事を書く→画像フォルダ→画像の選択→タイトルを入力→アップロードとやるとアップされる。


 アップされると、チームマイナス6%バナーが画像フォルダに表示されるので、バナーを右クリック→プロパティでチームマイナス6%バナーが保存されているURLを確認する


 その後バナーを貼りたい場所に以下のタグを貼れば完了。


 記事に貼る場合は、記事を一度タグの非表示で書いてから、HTMLタグを表示に切り替えて、元々のタグが壊れない適当な位置へ以下のタグを入れる。


 <a href="http://www.team-6.jp/ " target="_blank"><img src="チームマイナス6%バナーが保存されているURL" border="0" alt="チームマイナス6%"></a>

いいね!した人  |  コメント(10)  |  リブログ(0)
2005年05月22日(日) 19時48分21秒

第17回画像の表示

テーマ:緊急企画!アメブロタグ講座

 今回は画像の表示について勉強します。画像表示にはimgタグを使います。

 imgタグで使える主な属性は

  src="画像のURL"

  alt="代替テキスト" 

  width="画像の幅"

  height="画像の高さ"

  align="画像の位置"

  border="線の太さ"

  hspace="左右の余白"

  vspace="上下の余白"

 です。


 画像を表示するとき、絶対に必要なのがsrc属性とalt属性です。

 というわけで画像を表示するには最低限、下のようなタグが必要です。

 <img src="画像のURL" alt="代替テキスト">

 ここで代替テキストというのは、画像の表示ができないブラウザで、画像の代わりに表示させる文字のことです。

 画像が表示されないブラウザ利用者のために適切な表現で、代替テキストを作りましょう。


 画像のサイズはwidth属性とheight属性で指定できます。

 サイズはピクセル数、またはウィンドウ幅に対する割合で指定します(アメブロ上ではピクセル数指定が無難なようです。というかパーセンテージで指定すると不具合が生じます。単細胞生物が試した結果、そう判断しました(関連記事は第12回横罫線を引くですが、関連性は薄いです)。

 <img src="画像のURL" alt="代替テキスト" width="サイズ" height="サイズ">

 例えば

 <img src="http://ameblo.jp/user_images/77/97/10000777541_s.gif" alt="ラーメンを食べる単細胞生物" width="200" height="200">

このタグを表示すると

 ラーメンを食べる単細胞生物

 

 align属性では画像と短い文章の位置関係を決めることができます。

   top:画像の上の部分と文章の始まりの位置を揃える

   middle:画像の中心部分と文章のベースラインを揃える

   bottom:画像の下の部分と文章のベースラインを揃える

   left:画像を左側、文章を右側

   right:画像を右側、文章を左側

 文章との組み合わせになるので、pタグ(段落タグ)などと組み合わせて画像と文章を一緒に表示することになります。

 実際のタグと表示は以下の通り。

<タグ>

 <p><img src="http://ameblo.jp/user_images/d6/e1/10000777547_s.gif" alt="単細胞生物のいつもの授業風景" align="top" width="150" height="150">単細胞生物は学生なので毎日の日課は授業を受けること。</p>  

 

単細胞生物のいつもの授業風景単細胞生物は学生なので毎日の日課は授業を受けること。

<タグ>
 <p><img src="http://ameblo.jp/user_images/8e/cd/10000777529_s.gif" alt="サラリーマン時代" align="middle" width="150" height="150">でも昔は私にも新入社員の時期が。いろいろな意味でやる気満々。</p>  

サラリーマン時代でも昔は私にも新入社員の時期が。いろいろな意味でやる気満々。

<タグ>

 <p><img src="http://ameblo.jp/user_images/0b/55/10000777552_s.gif" alt="作業員もしてました" align="bottom" width="150" height="150">サラリーマン時代の私はヘルメットに作業着姿で普段はまさにこんな感じ。</p> 

作業員もしてましたサラリーマン時代の私はヘルメットに作業着姿で普段はまさにこんな感じ。

<タグ>

  <p><img src="http://ameblo.jp/user_images/a0/67/10000777559_s.gif" alt="元気がない" align="left" width="30%" height="150">しかし、うつ病などという厄介な病気にかかってしまい、会社を辞める羽目に。とほほ・・・。</p> 

元気がないしかし、うつ病などという厄介な病気にかかってしまい、会社を辞める羽目に。とほほ・・・。










<タグ>

  <p><img src="http://ameblo.jp/user_images/dc/14/10000777535_s.gif" alt="病院通い" align="left" width="30%" height="150">いまでは、すっかり病院通いが欠かせなくなってしまいました。ふぅ。できることなら行きたくない!</p>  

病院通いいまでは、すっかり病院通いが欠かせなくなってしまいました。ふぅ。できることなら行きたくない!









 

border属性を使うと画像に枠をつけることができます。

 枠線の太さはピクセル数で指定します。

<タグ>

 <p><img src="http://ameblo.jp/user_images/dc/14/10000777535_s.gif" alt="病院通い" align="left" width="150" height="150" border="3">お医者さんを3ピクセルの枠で囲んでみた</p>  

病院通いお医者さんを3ピクセルの枠で囲んでみた










 

あれっ、管理画面では枠に囲まれてるけれど、ブラウザでは表示されません。失敗です。オオーw(*゜o゜*)w


  画像の周りには余白をつけることができます。

 画像の左右の余白の大きさをhspace属性で、上下の余白の大きさをvspace属性で指定します。

 余白の大きさはピクセル数で指定します。

 もし、左右の余白を100ピクセルに指定すると

<タグ>

 <img src="http://ameblo.jp/user_images/dc/14/10000777535_s.gif" alt="病院通い" hspace="100">

病院通い

 また、上下の余白を100ピクセルに指定すると

<タグ>

 <img src="http://ameblo.jp/user_images/dc/14/10000777535_s.gif" alt="病院通い" vspace="100"> 病院通い

 また、画像にリンクを設定するには以前にやったaタグ(第13回~第16回を参照)を組み合わせるとこんな感じでリンクが貼れます。

<タグ>

 <a href="http://tansaibouseibutsu.ameblo.jp/category-112f3b11303e58dcc4d3963a22fdb67a.html"><img src="http://ameblo.jp/user_images/f2/f7/10000777520_s.gif" alt=""うつ病と闘う談話室へ></a>

 
いいね!した人  |  コメント(12)  |  リブログ(0)
2005年05月14日(土) 19時54分37秒

第16回メールアドレスとリンク、プラス補足

テーマ:緊急企画!アメブロタグ講座

 今回はメールアドレスとリンクする方法とアンカーリンクの補足事項について説明します。


 メールアドレスとリンクするのはとっても簡単。


 <a href="mailto:リンクするメールアドレス">何か説明文</a>


 これだけです。単細胞生物は敢えてメールアドレスを公表しません(笑)。ここから先はアンカーリンクの補足事項です。


 <補足1>


 name属性と同じ機能を表す属性にid属性がありますが、id属性はサポートされているブラウザが少ないようです。


 <補足2>


 「うつ病が心の風邪と呼ばれる所以について考えてみた」へ飛ぶ


 上のリンク表示は下記のようなタグを使っています。リンクのところにマウスをのせてみましょう。手のマークのところに吹き出しで説明文が書かれているでしょう?

 title属性を使うと説明文を付け加えることができるんです。使用タグは下記。


 <a href="http://tansaibouseibutsu.ameblo.jp/category-132cf9d9f4593de8252f423a76b958e2.html#utu" title="超うつ病入門講座の最初の記事へ">「うつ病が心の風邪と呼ばれる所以について考えてみた」へ飛ぶ</a>


 <補足3>


 iモード用のページなら電話番号もリンクできるかも。タグはこんな感じ。単細胞生物は確認してませんが、携帯専用サイトの方は試す価値があるかもです。うまくいかなかったらごめんなさい。


 <a href="tel:電話番号">何か説明文</a>


 
いいね!した人  |  コメント(3)  |  リブログ(0)
2005年05月08日(日) 21時42分45秒

第15回他のページの指定箇所へリンクを貼る

テーマ:緊急企画!アメブロタグ講座

 今回は他のページの指定箇所へのリンクの貼り方を説明します。やり方は第14回と大変似てます。


 <ステップ1>


 リンクを貼る先に目印をつけるために、まず目印に適当な名前(アンカー名)をつけます。


 アンカー名に使える文字は半角アルファベット、数字、記号、アスキー文字です。


 なんでもいいので好きな名前をつけてください。とりあえず、私はここでアンカー名にutuという名前をつけることにします。


 <ステップ2>


 リンクを貼る先に目印をつけます。


 リンクを貼りたいところにaタグとname属性を使って目印をつけます。


 目印は、<a name="アンカー名">と</a>というタグでリンク先の言葉や文章をはさめば、つけることができます。


 私はこんな目印(アンカー名top)を「うつ病が心の風邪と呼ばれる所以について考えてみた」という過去記事のタイトル部分につけています。(注:画面上には埋め込んだタグは出てません)


 <a name="utu">うつ病が心の風邪と呼ばれる所以について考えてみた</a>


 <ステップ3>


 目的の場所へ飛ぶリンクを作ります。タグはこんな感じです。


 <a href="リンク先ページの絶対URL#アンカー名">リンク先へ飛ぶ旨の説明文</a>


 例えば、今私は「うつ病が心の風邪と呼ばれる所以について考えてみた」という過去記事にリンクを貼りたいと思ったので、こんなタグを作ってみました。


 <a href="http://tansaibouseibutsu.ameblo.jp/category-132cf9d9f4593de8252f423a76b958e2.html#utu">「うつ病が心の風邪と呼ばれる所以について考えてみた」へ飛ぶ</a>


 このタグを使うと下のように表示されます。下の「うつ病が心の風邪と呼ばれる所以について考えてみた」へ飛ぶをクリックしてみてください。指定した過去記事へ飛べるはずです。


 「うつ病が心の風邪と呼ばれる所以について考えてみた」へ飛ぶ


いいね!した人  |  コメント(2)  |  リブログ(0)
2005年05月07日(土) 18時50分31秒

第14回同一ページ内の指定箇所へリンクを貼る

テーマ:緊急企画!アメブロタグ講座

 第13回では他のページへ飛ぶ形のリンクの貼り方を紹介しました。


 今回は同一ページ内の指定箇所へのリンクの貼り方を紹介します。


 <ステップ1>


 リンクを貼る先に目印をつけるために、まず目印に適当な名前(アンカー名)をつけます。


 アンカー名に使える文字は半角アルファベット、数字、記号、アスキー文字です。


 なんでもいいので好きな名前をつけてください。とりあえず、私はここでアンカー名にtopという名前をつけることにします。


 <ステップ2>


 リンクを貼る先に目印をつけます。


 リンクを貼りたいところにaタグとname属性を使って目印をつけます。


 目印は、<a name="アンカー名">と</a>というタグでリンク先の言葉や文章をはさめば、つけることができます。


 私はこんな目印(アンカー名top)をこの記事のはじめの部分につけています。(注:画面上にはタグは出てません)


 <a name="top">第13回では他のページへ飛ぶ形のリンクの貼り方を紹介しました。</a>


 <ステップ3>


 目的の場所へ飛ぶリンクを作ります。タグはこんな感じです。


 <a href="#アンカー名">リンク先へ飛ぶ旨の説明文</a>


 例えば、今私はこの記事のはじめに戻るリンクを作りたいと思ったので、こんなタグを作ってみました。


 <a href="#top">記事のはじめに戻る</a>


 このタグを使うと下のように表示されます。下の記事のはじめに戻るをクリックしてみてください。この記事のはじめに飛べるはずです。


 記事のはじめに戻る


いいね!した人  |  コメント(2)  |  リブログ(0)
2005年05月04日(水) 19時42分23秒

番外編 ブラウザによって表示は異なる

テーマ:緊急企画!アメブロタグ講座

 現在アメブロ上で使えるHTMLのタグ講座をやってますが、解説を書くのに結構難儀してます。


 それはなぜか?


 第一に
 アメブロの管理画面でHTMLタグを表示を選択して記事を書いたとき、どのようにタグが反映されるのか、実際にページを表示するまで私にもわからないということ。
 (予想外のことが起きて、記事アップから30分くらい記事をいじっていることがしばしばある。)


 第二に
 使用するブラウザによって表示のされ方が全然違うということ。
 (例えば、前回の横罫線を引くで中央揃えで横罫線を引いたとき、インターネットエクスプローラーではきちんと中央揃えになっているが、ファイアフォックスでは左揃えになってしまうなどなど)


 ということで、多分画面の向こう側で、

 「表示がどう見ても解説どおりになってないぞ!単細胞生物はちゃんと表示を確認して記事を書いてるのか」

 と思っている方もいらっしゃると思います。


 しかし、こればっかりは仕方がありません。私も素人なのでブラウザによる表示の違いについてはどうにもこうにも対応のしようが・・・。


 読者の皆さん、もしこの手の話に興味があってコンピュータのメモリーに余裕があるなら、是非一度いろいろなブラウザ(フリーのソフトがたくさんあります。ベクターさんなどでダウンロードしてみてください。)を使って、自分のページを表示してみてください。


 意外なことに気づくかもしれません。

いいね!した人  |  コメント(4)  |  リブログ(0)
2005年05月03日(火) 12時47分43秒

第12回横罫線を引く(書き換えバージョン)

テーマ:緊急企画!アメブロタグ講座

 今回は第12回の書き直しバージョンです。とりあえず水平線を引くタグはhrです。


 このタグにいろいろな属性を組み合わせていくと、いろんな横罫線が引けますよ。まずalign属性を使うと水平線を引く位置が指定できます


 もし画面の右に揃えるならright、中央に揃えるならcenter、左に揃えるならleftで指定します。


 というわけで右揃えで横罫線を引きたいときには


 <hr align="right">


これを実際に表示するとこうなります↓


 




 あらあら、本当は右揃えになるとこなんですけど、水平線の長さを指定しなかったので、線がいっぱいいっぱい引かれてますね。これだけだと揃える意味がありませんね(笑)。


 size属性を使うと水平線の太さ、width属性を使うと水平線の長さ、color属性を使うと水平線の色を指定できます。


 但しcolor属性は未対応のブラウザがあり、指定色が画面に反映されないことがあります。ちなみに私が調べたところインターネットエクスプローラーとファイアフォックスは大丈夫でした。


 size(水平線の太さ)はピクセル数で指定し、width(水平線の長さ)はウィンドウ幅に対する割合(%)またはピクセル数で指定します。


 5ピクセルの太さで60ピクセルの長さの横罫線を青色で引くなら


 <hr size="5" width="60" color="blue">


これを実際に表示するとこうなります↓


 




 3ピクセルの太さでウィンドウ幅50%の長さで緑色の横罫線を引くなら


 <hr size="3" width="50%" color="green">


これを実際に表示するとこうなります↓


 




 noshade属性を使うと通常の(一応)立体的な水平線を実線にすることができます。


 以上の説明を総合的に反映させて横罫線のタグを1つ書いて見ましょう。


 中央揃えで太さ10ピクセル、長さはウィンドウ幅の60%、実線の赤色で水平線を引くならこんなタグになります。


 <hr align="center" size="10" width="60%" color="red" noshade>


 これを実際に表示するとこうなります↓





 ちょっとはわかりやすい説明になりましたか?ご感想コメントをお待ちしてます。

いいね!した人  |  コメント(4)  |  リブログ(0)
2005年05月01日(日) 20時03分41秒

第13回アンカーリンクについて

テーマ:緊急企画!アメブロタグ講座

 今回はアンカーリンクを特集します。ブログ(またはHP)上で思いのままにリンクが貼れるといいなあと思っている人は是非マスターしておきたいタグですね。


 アンカーリンクはaタグを使用します。


 リンク先はhref属性で指定します。


 <a href="リンク先ページのURL">リンク先の説明文</a>


 ここでリンク先ページのURLは絶対URLまたは相対URLで指定します。


 例えば私が「あめまにゅ」さんにリンクを貼りたいときは絶対URLで指定します。


 ブラウザで表示されるURL(IEならアドレス欄に表示されるURL)を全部書いて指定することになります。


 <a href="http://manual.ameblo.jp/">ここをクリックするとあめまにゅに行けるよ</a>


 このタグを使うとこうなります↓。


 ここをクリックするとあめまにゅに行けるよ


 実際にクリックしたら、あめまにゅさんに行けたと思います。



 これに対してもし、自分のサイト内にリンクを貼りたいときは、相対URLを使うと便利です。


 相対URLというのは簡単に言えば絶対URLの省略形と思えばいいです。


 例えばうちのブログのトップページの絶対URLはhttp://tansaibouseibutsu.ameblo.jp/です。


 私がもし自分のページ内の超うつ病入門講座へリンクを貼りたいとき


 絶対URLはhttp://tansaibouseibutsu.ameblo.jp/category-132cf9d9f4593de8252f423a76b958e2.html


 相対URLはcategory-132cf9d9f4593de8252f423a76b958e2.html


 になります。だから、もしここから超うつ病入門講座へリンクを貼るときにはこう書きます。


 <a href="category-132cf9d9f4593de8252f423a76b958e2.html">超うつ病入門講座へジャンプ</a>


このタグを使うとこうなります↓。


 超うつ病入門講座へジャンプ


 「クリックすると上のリンクから超うつ病入門講座へ飛べたでしょう。」と言おうと思ったら、飛べませんね。上のタグでは無理なようです。というわけで、やはり面倒でも絶対URLを使ってください。今度こそ飛ぶぞ。えいや!


 <a href="http://tansaibouseibutsu.ameblo.jp/category-132cf9d9f4593de8252f423a76b958e2.html" >超うつ病入門講座へジャンプ</a>


このタグを使うとこうなります↓。


 超うつ病入門講座へジャンプ


 今度は無事に飛べたはずです。こんな感じでリンクを貼っていってくださいね。

 <追記>


 第12回の解説が不評だったので、第12回のもう少しわかりやすいバージョンを作りたいと思っています。期待をしないでお待ちくださいませ。


 現在せっせとコメ返し中ですが、お疲れモードなので、ゆっくりお返ししますね。<(_ _)>

いいね!した人  |  コメント(4)  |  リブログ(0)
2005年04月24日(日) 00時29分26秒

第12回横罫線を引く

テーマ:緊急企画!アメブロタグ講座

 今回は水平線の引き方を勉強します。水平線を引くタグはhrです。


 属性にはalign、size、width、noshade、colorの5種類があります。


 align属性を使うと水平線をどの位置に揃えるかを指定できます(指定しないと中央揃えになります←訂正アメブロ上では左揃えになるようです)。


 右揃えはright、中央揃えはcenter、左揃えはleftで指定します。


 size属性で水平線の太さ、width属性で水平線の長さ、color属性で水平線の色を指定することができます。


 但しcolor属性は未対応のブラウザが多いです。


 sizeはピクセル数で指定し、widthはウィンドウ幅に対する割合(%)またはピクセル数で指定します。


 noshade属性を使うと水平線を実線にすることができます(指定しないと立体線になります)。


 例として


 中央揃えで太さ10ピクセル、長さはウィンドウ幅60%、実線の赤色で水平線を引きたいときは以下のように書きます。


 <HTMLの場合>


 <hr align="center" size="10" width="60%" color="red" noshade>


 <XMLの場合>


 <hr align="center" size="10" width="60%" color="red" noshade="noshade" />


 実際の表示はこうなります。



いいね!した人  |  コメント(2)  |  リブログ(0)

AD

ブログをはじめる

たくさんの芸能人・有名人が
書いているAmebaブログを
無料で簡単にはじめることができます。

公式トップブロガーへ応募

多くの方にご紹介したいブログを
執筆する方を「公式トップブロガー」
として認定しております。

芸能人・有名人ブログを開設

Amebaブログでは、芸能人・有名人ブログを
ご希望される著名人の方/事務所様を
随時募集しております。