TOP ブログの基本 アフィリエイト アクセスアップ カスタマイズ ブログ・HTML ブログ・CSS




ハイサイ(ようこそ)利爺のブログへ


●ブログの基本、アフィリエイト、HTML・CSSまで
初めての方にも分かり易いように下記のシリーズで纏めています。

・・・・・・・・・・・・・・・・ 各章の項目(目次) ・・・・・・・・・・・・・・・
= 現在、シリーズ記事を書いているブロックです。

エントリー順に確認できるように【目次】を作ってありますので
上段のコンテンツバー(menu)または上記の項目から各ブロックに入れます。


●本文中に表示しているアイコンは
= 参照記事  = 頁中の章  = 注釈  = 記事ブロック
を表します。

2010年01月19日

リンクの基本(中級1)

■ 5-16 ブログにリンクを張る(1)


link(リンク)の意味は ⇒ 「繋ぐ、絆、輪」を意味し、
ブログやホームページ内に埋め込まれ、他の記事(文書)や画像、あるいは他の人のブログなどと繋ぐHTMLの特徴的な機能の一つです。

その「link機能」を使うことをリンクを張るといい、
Webサイトでは、リンクをマウスでクリックすると、関連先にジャンプするようになっています。

リンクの形式はwebだけではなく
日本語入力ソフトや表計算ソフトでの関連付けの機能として使われています。

Seesaaブログでのリンク指定は、左から12番目、鎖形のアイコンをクリックです。
ki-ic01.jpg
                                 ueya.gif

アイコンのタグは
 <a href="http://… url…>〜</a>
の形式になっています。

リンクタグの

【<a href=" ">】

<a>

<href>
  「h」
  「ref」
<" ">
⇒  anchor(アンカー)「錨、最終走者」を意。
    ウェブページにリンクを作ります。

⇒  hyper(ハイパー)の省略。「超越して、過度の」
⇒  reference(レファレンス)は「参照・参考」
⇒  「" "」内にリンク先のurl記入



<a>タグには
<href>属性にurl・ファイル名を記述することで、リンクを張る機能が働き、属性で指定したリンク先にジャンプする仕組みです。

指定するファイル名は、
大文字、小文字そして拡張子を含めて「完全に一致」させる必要があります。

馴染みのあるリンクには
■内部リンク   ■外部リンク
がありますね。

リンクの使い方には色々な方法がありますが、比較的に使用されている「外部リンク」の仕組みは、詳しいと思いますので「内部リンク」について確認しましょう。

    注
   ● リンクの方法の確認ですので
    相互リンク、バックリンクなどの説明は省きます。


■ 内部リンク種類と仕組み

ブログの同一ページ内へのリンクや、他のページへのリンクを内部リンクといいますね。
 
内部リンクには

●「同一ページ内の特定の項目」にジャンプ。
●「同じブログ内の他のページ」へリンク。
●「同じブログ内の他のページの特定の項目」


にリンクする方法があります。

【図1】
   「同一ページ」             「他のページ」
 hyo05.png
 ↑ 画像をクリック・元画像が開きます。

「図1」は内部リンクのサンプル図です。

図内の@〜Cの仕組みを確認します。

リンクを使うメニューの形には

「最近の記事一覧」なども一般的に使われていますが
その一覧は過去記事を含めた「記事のタイトル」がメインになっています。

記事の中に書いている項目(章・見出し)を案内するメニューにして
記事トップで内容を知らせるナビゲーションも有りますね。


下記の【資料】は
記事トップに用いる章立て(目次)のサンプルです。

実際に、この記事の中でリンクの構造を確認するために
章立てした項目の見出しの箇所にジャンプします。


クリックして行き先を確認してみましょう。

【資料】
目次サンプル
※この記事の章(項目)にリンクしていますのでジャンプします。

 @同一記事内の「特定の項目へのリンク」
 A他のページへのリンク
 B他のページの「特定項目」への直接リンク

各項目にジャンプしましたね。

書籍や雑誌類では、記事の内容をページを順に進めて読んでいきます。

また読者が読みやすいように章や項目分けをして、
筋立てするのが一般的です。

同じことがWebのブログにも言えますね。

ブログの記事内に上記のような「項目メニュー」があれば
書籍や雑誌の目次と同じ働きをして、訪問した方は読みたい記事をすぐ探せます。

Webでは、リンクを使って情報を提供する仕組みがあり、
ブログにおける「カテゴリー」や「最近の記事」もその一種です。

ブログは、新しく更新した記事がメインとなり、
過去記事が重要な内容の情報を含んでいても
トップページからは消えてしまう点があります。

その為、訪問した方はトップページだけに目を通して
帰ってしまうことが非常に多いです。

重要な情報を提供しているページは
トップページだけではありませんね。

多くの情報を提供していることを、訪問した方に明確に伝えるために、
リンクで情報を提供する仕組みにすることは重要なことです。

ページが長い文章で構成されているときは
なおさらリンク機能を生かすべきだと考えています。

リンクの基本は内部リンクも外部リンクも同じ考え方です。


@ 同一記事内の「特定の項目へのリンク」

内部リンクのひとつ
同一記事内の「特定の項目へのリンク」を確認していきます。

【図2】
 同一ページ内の特定項目へジャンプ
link-kom01.png
  ↑ クリック・元画像が開きます。

参考図2のように
メニューから各項目にジャンプさせるのもリンクの一つですね。

記事内項目へのリンクは他のページ出ることなく
同一記事内でのリンクになりますので「リンクの形式」が異なります。

■ リンク先(ジャンプ先)の「項目」につけるタグ

ページ内の特定の位置に移動するには

(1)特定の項目にアンカー名を付ける(リンク先:受け入れ先)
(2)その特定項目にジャンプするようにリンクを張る(リンク元)

の設定が必要です。

▲ 特定項目にリンク先(受け入れ先)であることを示す
アンカー名を付けます。

アンカー名は<a>要素に

「name」属性で指定します。

タグは
<a name="アンカー名">リンクさせる項目名</a>

<a name>の形式で「項目名」を括る(囲む)形式です。

アンカー名は自由に付けて構いませんが、
リンクと同様に使える文字は、半角英数と一部の記号類で
漢字は使えません。

名前が重複しないように、
分かり易い判別のしやすいアンカー名がいいでしょう。


▲ リンク元(リンクを張る箇所)に付けるタグ

リンク元(ここでは記事のトップに置いた目次)には

記事内の「アンカー名」が付いた箇所にジャンプするようにリンクを張ります。
「アンカー」名でリンクすることに気をつけましょう。

<a href="#ジャンプ先の特定項目のアンカー名">目次項目</a>
の形で括る形式です。

一般のリンクと異なるところは
アンカー名の頭に「」が付きます。

この「#」を付け忘れるとリンクになりません。


【記入例】
●リンク元には
ジャンプ先がアンカー名で記入されていることを示す「#アンカー名」
(#が付きます)

  【例】ジャンプする先のアンカー名を仮に「komoku-b」としての
    記入形式は
    <a href="#komoku-b">ジャンプ先の項目名</a>

●ジャンプする(リンク)先の項目には
<a>タグの「name」属性で受け入れる「アンカー名」であることを設定します。

  【例】アンカー名を「komoku-b」
    <a name="komoku-b">ジャンプを受ける項目名</a>
   (#は付きません)で受け入れます。

    注
   ⇒リンク先とリンク元の項目名は同じ名前です。
   ⇒リンク元(リンクを張る項目)には「#」が付きます。
   
   ⇒ 【図2】を参照


実際に使用して気づく点は
●リンク元もリンク先も、<a>要素形式のため、両方ともリンク表示の薄水色の文字色になっています。

●リンク先はリンクを表す文字の色になっていますが、リンクタグとしては働かないので、クリックは出来ません。

リンク先の
文字色を変化させないようにするには、CSSの「class」での定義になります。
CSSの説明のときに確認します。


 ●リンク先の「 name 属性」(アンカー名)の付け方
 ●リンク元の<a href=" #アンカー名 "> 〜 </a>の形式を覚えましょう。

    注
   ●ジャンプした項目から、記事のトップに戻すため
    その章の末尾に「記事のトップへ戻る」と表記して
    戻るリンクを設定することも出来ます。

   ●リンク形式は
    <a href="http:// ブログurl /article/記事番号.html">
    記事のアドレスを記入して、トップに戻します。

    ※詳しくは次回の「リンクの基本(中級2)」で確認します。


A他のページへのリンク

他のページへのリンクは、頻繁に使用されている形式ですね。
使っていないブログを見つけるのが難しいくらいです。

おもにブログ内の記事同士を繋ぐ方法で、形は外部リンクと同じ「絶対指定」です。

数多くの記事の中の特定のページ(記事)へのリンクになりますで、
ページ番号(ページアドレス)が付加されることが特徴的です。

事例として、
このブログの他のページにリンクを張ってみます。

   「使用例」

        ↑
      ※該当ページにジャンプするようにリンクを設定しています。
      ※article/133954766.html が記事番号(アドレス)ですね。

タグは
 <a href="http:// ブログurl /article/記事番号.html" target="_blank">タグの仕組みと基本形</a>

の形式ですね。
 
●article(アーティクル)は「記事、論文、品物」と言う意味。

●/article/記事番号.html 

の記事番号はこの Seesaaブログの記事番号でプラウザのアドレスバーに表示されます。

記事番号の付け方は、
各ブログサービスによって異なっているようですので
使用しているブログサービスの記事番号の附加に準じてください。

この形式で指定されたページにジャンプします。

<target="_blank">は
前述したジャンプ先を「別窓」で開くの意味ですね。  


B他のページの「特定項目」への直接リンク

このリンクの方法は
他のページのトップにリンクするのではなく

「他のページの特定の場所にリンク」する方法です。

形式は

「他のページへのリンク」
「記事内の特定の項目へのリンク」

の二つを組み合わせて使います。

●「他のページへのリンク」のタグ形式 
<a href="http://ブログurl/article/記事番号.html" target="_blank">〜</a>
 
  +

●「同一記事内の特定の項目へのリンク」のタグ形式
<a href="#アンカー名">〜</a>

  ↓


<a href="http://ブログurl
/article/記事番号.html#アンカー名"
target="_blank">〜</a>


/article/記事番号.html#アンカー名
の間には「スペース」や「/」記号などは入れません。
空白無しでの連続記入になります。

他のページであっても該当項目には

@ 同一記事内の「特定の項目へのリンク」と同じように「アンカー名」を付ける必要があります。

さらに、他のページへのジャンプですから、別窓で開く「 target="_blank"」のタグを記入しておき、リンク元のページに戻れるようにします。


「使用例」
このブログの過去記事のページ

●記事欄アイコン「表示位置指定」(画像と文章)の中の特定項目
「画像は左揃え・文章は画像の右(余白有り)」

にジャンプするリンクを作ってみます。
 
<a href="http://tosiji-dreamafi.seesaa.net/article/136498096.html#hi03"
target="_blank">画像は左揃え・文章は画像の右(余白有り)</a>

他の記事の特定項目へのリンク例

  参照 ⇒ 画像と文章を組み合わせる
       項目名 → ●画像は左揃え・文章は画像の右(余白有り)


「該当するページ」の「特定の該当した項目」に直接ジャンプしますね。

    注
   ●内部リンクの項目へのリンク
    リンク先が「項目」だけに限られるのでなく、「段落」や文章の中の
    特定の「文字や語句」あるいは「画像」にも使用できます。

   ●キーワードマッチ(アフィリエイト)でも、外部リンクと共に
    よく使用されています。

……

リンクは数多くあったほうがいいとは言い切れません。
数多くのリンクを張って、逆に迷路になることもありえます。

「アクセスアップの為に」
「SEO対策の為に」

内部リンクを充実させよう。

とよく耳にしますが
アクセスアップやSEOは二次的なもので、

内部リンクの充実は
訪問した方のことを考え、使いやすさに配慮したブログを作り上げること目的にしています。

コンセプトが明確であり、内容も充実して利用しやすい。
「また訪問したい」
という気持ちにさせるブログが、アクセスアップやSEOの対策にも繋がります。

……

●この例では、HTMLとCSSでの内部リンクの形式を確認するのが主な目的ですので
参照画像では説明上、該当ページと他のページの2ページのリンク例にしています。

●参照画像から、全てのページを数多くのリンクで繋いだ方がいいと捉えられる恐れがありますが
「リンクの数は多ければいい」
ということではないですね。

●自身のブログの命題にそった「道筋を示すリンク」をどのように設定するかを考えましょう。


次回は「戻る」リンクを確認します。




▲HTMLの関連記事
   holder01.gif ブログで使うHTML-目次ー
    http://tosiji-dreamafi.seesaa.net/article/133635358.html
    【別窓での表示です】

★ご協力お願いいたします★   
      kame.jpg
    banner_01.gif
……人気ブログランキング……


画像類の無断使用を禁止します。必要であれば、確認了承を得る手続きが必要です。
この記事へのコメント
こんばんは!

ブログは新しい記事がトップになり
それ以前の記事は読まれていない気がします。

リンクの件また勉強させていただきました。
その人のしっかりした発想や考えが込められた記事内容が大事なんですね。

応援済みです。
Posted by hebaseijin at 2010年01月19日 22:04
ハイサイ!利爺さん。

ありすです。
いつも応援をありがとうございます☆

リンクって何も考えずに使用していたのですが、こんなに意味があるとは!!!
またひとつ賢くなれました。
ありがとうございます♪

ところで、最近リンク集を作りました。そして、もし良ければ相互リンクしていただけないでしょうか??
よろしくお願いします。

…と、お願いしつつ、利爺さんの右サイドバーにある「リンクモスト」に登録すれば良いのかな??と疑問を持ち始めてます。
どのような方法が一番ベストなのでしょうか??

応援済みです^^☆
Posted by 超初心者ありすの稼ぐアフィリエイト戦略 at 2010年01月21日 03:17
利爺さん、こんにちは。

ご無沙汰しています。
辛口のあずきです^^(笑)

いつも丁寧な記事に感服します。

私の殴り書きのような記事と
大違い・・・です。


記事を読み返してみると
確かにもっとリンクを活用してもいいな。ってこと
気がつくことあります。

ブログの記事が貯まってくるほど
説明のために過去の記事をリンクして利用すると
読んでいる方には親切な記事になりますね。

応援ポチ<★です^^♪
Posted by あずき@夢見る悠々田舎ぐらし at 2010年01月23日 15:08
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/138288561
※ブログオーナーが承認したトラックバックのみ表示されます。

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。