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




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


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

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

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


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

2010年01月24日

リンクの基本(中級2)

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

前回の「ブログにリンクを張る(1)では、内部リンクの

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

を確認しました。



リンクしてページを開く特徴には

●今見ているページに上書きしてブログを開く「同窓」
●別の窓を立ち上げて開く「別窓」が有りますね。

例えば、Seesaaブログでは「記事を書く」「確認する」などは同窓で、「ブログを見る」は別窓で開きます。

ほかのブログに訪問して「見やすい」「使いやすい」と感じるサイトは
「同窓」と「別窓」の互いの利便性を上手く使っています。

同窓にすると、
元のブログや最初のページに戻りにくい点がありますが

プロバイダのアドレスバーのアイコンには、ブルダウンの選択メニュー「最近表示したページ」を利用することで、道に迷うことはないようになっています。

別窓にすると
開いた分だけのサイトがモニターに次々と重なって表示されます。

表示サイズを調整することで
複数のサイトを同時に表示して、ページの比較や記事を参照することも可能ですが、
PCのメモリを消費してしまう点など、気になることもあります。

PCやWebには、閲覧している側が
キーボードやマウスを使って「別窓」で開く方法が組み込まれています。

別窓で開く方法

●「Shift」を押しながらクリックして別窓で開く。
●「Ctrl」を押しながらクリック、タブで別窓を開く。
●マウスのホイール(回転ボタン)をクリック、タブで別窓を開く。
●リンクを右クリック「新しいウィンドウで開く」で別窓。

同窓より別窓の方が使いやすいと言う方は試してください。
便利な機能です。

■「戻る」リンクの組み立て

【画像1】
他のページへのリンク構成図の表示。

前回、参照したリンクの略図です。

 ↑ 画像をクリック・元画像が開きます。

「ブログトップに戻る」
「この記事のトップに戻る」

   
●参照するために他のページからジャンプして来た。
●検索エンジンなどから特定のページに訪問してきた。

など
直接にページに訪問した人を「ブログのトップ」に
行けるように案内する「道しるべ」です。

訪問した特定のページだけでなく、ほかの記事も参照して欲しい時によく使われます。

その「戻る」リンクの仕組みを確認します。


■ ブログのトップと記事のトップ
 
ブログは記事を更新したときに、
新しい記事がつねにブログのトップページに表示されます。

この利爺ブログのトップのurlは
  ▲ http://tosiji-dreamafi.seesaa.net/

記事のトップ(最新の記事)のurlは
  ▲ http://tosiji-dreamafi.seesaa.net/article/・・・・・・・・・.html/

の表示形式になっています。


● ブログのトップ

 ● http://ブログURL/

ブログのトップは決められた位置に有ります。

ブログを表示した時
ブログトップには、最新の記事が表示されるので、ブログトップと記事トップは同じに見えますが

ブログは
構成部分と記事部分に分かれた構造になっています。

ブログの構成部分の表示にともなって、最新の記事を判断して
記事部分として合体して表示される仕組みになっています。

このブログの構成の形から分かるように
ブログトップはブログ表示の階層構造の最上段(トップ)にあり
表示する位置、構造形は記事によって左右されませんね。

● 記事のトップ

http://ブログURL/article/記事番号/

記事は
その記事が新しいのか、過去の記事なのかに関係なく絶対的な
記事番号(/article/記事番号/)を持っています。

ブログのトップを表示した時、新しい記事かどうかを番号で判断され入れ替えられます。

また、リンクなどで記事番号を指定した時は、その番号の記事を表示します。


● ブログトップへのリンクと記事トップへのリンク
上記のことから

@ブログのトップに戻るは
構造のトップ位置にある
<a href"http://ブログURL">(記事番号無しの表記)
へのリンクになります。

A記事のトップに戻るは、今見ている記事の番号へのリンク
<a href"http://ブログURL/article/記事番号.html">
となりますね。

記事のトップに戻るは
同じ記事へジャンプさせ、同窓で再び同じ記事を表示させる形になります。

それらの両方のタグを記事の該当箇所に、HTMLで記入してリンクを貼ればいいと言うことです。

しかし記事の更新のたびに内部リンクとして
「ブログトップに戻る」「記事のトップに戻る」と入力して、 リンクurlを書き込む作業は大変な煩わしさです。

■ 戻るリンクを「自動」で表示させる。

「戻る」リンクを記事の末尾に、自動で表示させる方法を確認します。

seesaaブログでは

●ブログの全体の構造を掌る、大本のHTMLと
●記事の構造をみるHTML

の二つのHTMLでブログを構築しています。

「戻る」リンクを置く場所は、更新をする記事内ですので、HTMLの修正は記事の構造をみる
「記事のコンテンツHTML」の書き換えになります。

「メニュー」→「デザイン」→「コンテンツ」→「記事」と進み
「コンテンツHTML編集」

を開きます。

入力するタグは

【資料1】
戻るリンクの設定

●ブログのトップに戻る「タグ」
<a href="<% blog.page_url %>">ブログのトップに戻る</a>

●記事のトップに戻る「タグ」
<a href="<% article.page_url %>">記事のトップに戻る</a>


が基本形です。

【画像2】記事の末尾
hyo01.jpg
 ↑ 画像をクリック・元画像が開きます。

「画像2」のように表示位置は
記事の最末尾、タグの語句やSocial BookMark のアイコンが表示されている
すぐ上に表示するようにします。

「コンテンツHTML」での上記戻るタグ追加位置は

<% if:glog.bookmark_service %>
の4行上の

<% if:list_tag %><div class="tag-word">
の前の空白箇所になります。

記事のコンテンツHTMLは長い構文体ですね。
挿入する箇所を特定するため、目で追って探すのは簡単なことではないです。

■ 検索機能を使う。

IEやFirefoxには語句を「検索する」ための便利な機能があります。
ブログを表示しているときやHTMLを開いている時に、検索窓を開くことが可能です。

@「コンテンツHTML編集」を開いた状態で

Aショートカット「Ctrl + F」
で検索窓を開き

B検索する語句「bookmark」を入力。

  ※検索する語句は「list_tag」でもいいです。

【画像3】検索状況
link-kensaku01.jpg
 ↑ 画像をクリック・元画像が開きます。

「画像3」のように語句「bookmark」が検索された状態になりましたね。

青ベタで表示されている「bookmark」は検索機能がHTMLを最初からチェックして、初めに探し出した「bookmark」の語句です。

その青ベタより前には、
該当する語句は無いという意味での青ベタになっています。

次に探し出した該当する語句からは
黄ベタbookmarkで表示されます。

青ベタや黄色ベタで表示されている語句をチェックしていけば、
該当するHTMLの列を簡単に探し出せます。

この検索機能はブログやネットのいろいろな箇所で使えますので活用してみましょう。


記事HTML

★ ← ← タグを挿入する箇所
% if:list_tag %><div class="tag-word">…
 ・
<% /if -%>
% if:blog.bookmark_service %
 ・


<% if:list_tag %><div class="tag-word">……
の上段の空白の部分印の箇所に

a href="% blog.page_url %"ブログのトップに戻る</a>
a href="% article.page_url %"記事のトップに戻る</a>

を直接に入力します。

<a href=" の後ろの
<>は「入れ子」の形式になっていますので、気をつけましょう。


挿入後の記事HTML

a href="% blog.page_url %"ブログのトップに戻る</a>a href="% article.page_url %"記事のトップに戻る</a>
% if:list_tag %><div class="tag-word">タグ…
 ・
<% /if -%>
% if:blog.bookmark_service %
 ・


入力した後
プレビューで確認して記入もれなどのエラーが無ければ「保存」して終了です。
 
 ※「保存」する前に、必ずプレビューで確認しましょう。

このHTMLの追加で、新しく記事を書き上げるたびに
直接にリンクタグを張り込まなくてすみます。


■戻るリンクに「ブログ名や記事タイトル」を自動で表示。

上記の記事HTMLの修正では、
「ブログのトップに戻る」「記事のトップに戻る」のように簡単なリンク表示にしていますが、


ブログ名・記事名の自動表示

@ 「利爺とゆったりアフィリエイト」のトップに戻る。
A 「記事欄アイコン「リンク」(2)」のトップに戻る。


「ブログタイトル」や開いている「記事のタイトル」を表示して、行き先が分かり易いのように表示することも出来ます。

@「ブログ名」を戻るリンクに自動で表示。
前述のタグに
<a href="<% blog.page_url %>"><% blog.title %>のトップに戻る</a>

の赤文字の<% blog.title %>タグを追加します。

A「記事名」を戻るリンクに追加して自動で表示。
ブログ名表示と同じように
<a href="<% article.page_url %>"><% article.subject%>のトップに戻る</a>

に赤文字のタグ<% article.subject%>を追加します。

これら自動表示のタグは「相対指定」の形式になっていますから、
仮にブログ名を変更した時でも、新しいブログ名の表示になります。

更新した新しい記事タイトルにも相対的に対応しますので、
一度、記事の「コンテンツHTML」を修正(編集)して置けばいいということです。

このような「ブログ名 + トップに戻る」の使い方は
ブログ名(例:利爺〜アフィリエイト)が入っていますので
検索エンジン対策にもいいと言われますが、真偽のほどは分かりません。


■戻るリンクに「アイコン」を挿入

【画像4】
hyo02.jpg
 ↑ 画像をクリック・元画像が開きます。

この利爺のブログには、
リンクの頭に、訪問した方の目に付きやすいように
「画像」(アイコン)を使用しています。

画像のURLの挿入箇所は
  <a href="<% blog.page_url %>">ブログのトップに戻る</a>

印のどの箇所でもかまいません。


画像の挿入例

<a href="<% blog.page_url %>"><img src="http://画像URL" />ブログのトップに戻る<a>


HTMLを軽くするためには、アイコン類を使うこともないですが、
参考として下さい。

無料で使えるアイコンがネット上には沢山有りますので、
気に入った物を取得して使って見てもいいでしょう。

独自のアイコンを手元に置きたい方は
シリーズを参照にしてアイコンやファビコンを作ってみて下さい。






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

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



この記事へのコメント
こんにちは。
全体的に私の頭では追いつかない内容ですが、時々お邪魔させて頂き参考にさせてもらいます。『戻るリンクを自動で表示させる』はいいですね。
応援済みです。
Posted by hebaseijin at 2010年01月24日 17:36
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

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


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。

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

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