HOME >  Blog カスタマイズ  > アンカータグ

アンカータグ

2006年04月05日 AQ
ブログやホームページを作成していると一番目に付くのがこのタグじゃないでしょうか あっ、ナイキの画像は関係ありません。なんとなくイメージで使っただけです

<a href="・・・"> アンカータグと言います。href が主役じゃないですよ。 見た目はなんか href がえらそうにしていますが、メインはあくまでも < a > のほうです。href はその < a > の属性のひとつにしか過ぎません。(^^)
< a > タグはアンカー ( Anchor = いかり ) の略で、その場所を示し、リンクの出発点と到達点を指定するタグです。リンクの出発点では href 属性でリンク先を指定します。

そして到達点とは、ブログのページそのものであったり、そのブログのページのある特定の部分であったりするわけです。その時にページの中に埋め込む、特定の到達点を示すアンカータグがこれ ・・・

<a name="○○○"></a>

このタグは、外部からのリンクに対してももちろん、内部から内部へのリンクにも良く使われます。とりあえず見てもらいましょうか 色々とウロチョロさせますがごめんなさいね ^^;

■ A - ここから個別記事のタイトルの上へ
○○○○○○○○○○○○○○○○○○○○○○○○○○

■ B - ここから D のところへ
□□□□□□□□□□□□□□□□□□□□□□□□□□

■ C - ここから A の上へ
△△△△△△△△△△△△△△△△△△△△△△△△△△

■ D - ここからこの記事の一番下へ
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇

こんな感じです。やり方はすごく簡単 (^^) name 属性 か id 属性 を使用して、その場所に名前 ( 識別子 ) をつけるだけなんです。

具体的にいうと、A の文字の上にはブログ上からは見えないですが、目印を付けています。

<a name="ajump"></a>
■ A - ここからカテゴリー記事のタイトルの上へ

そして、3 番目の C の部分に A へのリンクを貼っています。

■ C - <a href="#ajump">ここから A の上へ</a>

目的の場所の文字を間にはさんでも良いですし、はさまず上に設置するだけでも OK です。上記の説明では上に設置しているだけですね。はさむ場合は、こうなります ・・・

<a name="ajump">■ A - ここからカテゴリー記事のタイトルの上へ</a>

同じページから同じページへのリンクですので、http://〜 はつける必要はありません。( 相対 URL ) これが違うページ、もしくは違うブログへのリンクの場合はそういうわけにはいきません。必ずリンクするさいに http://〜 の表記が必要になってきます。

一番上の A の文字には、http://〜 から始まるリンクを貼っています。トップページ・カテゴリー別・月別、どのページからクリックされても、アンカータグを打っている特定の場所に到着させる為にです。( 絶対 URL )

■ A - <a href="http://記事のアドレス.html#jump">ここから個別記事のタイトルの上へ</a>

とうぜん、個別記事には HTML の中に、すでにアンカータグを埋め込んであります。( <a name="jump"></a> ) いちいち記事ごとに埋め込むのではなく、HTML に埋め込んでおくと、何も意識しなくても自動的に記事のタイトルの上にアンカータグが設置されます。

トップページはヘッダー画像も含めてすべて見て欲しいけど、個別記事のページに入ったらブログの全体像よりも、記事に対して集中してもらいたい。そうなれば、AQ とこみたいな大きなヘッダー画像は逆に邪魔になります。

ブログのトップ ( 上部 ) から個別記事のタイトル位置まで、できればスクロールバーを操作する事無く、スムーズに記事を読み始めてもらいたい。そういう優しい配慮は地味なテクニックですが、知らず内に閲覧者を増やしていきます。

自分の為に始めたブログ。でも見てもらえる人がいてこそのブログ。見てもらえる人の気持ちになって、カスタマイズしていきましょう。(^^)



■ 追記 : ( 2006年04月09日 )
管理画面の設定において、『 投稿フォームの形式 』 を WYSIWYG エディタ を使用するにチェックし、それをご使用になっておられる方は、このアンカータグは記事文章内には使用できない事がわかりました。

なぜか理由はわかりませんが、完全な URL を記載したリンクタグ以外は、すべて管理画面へのアクセス URL に自動的に変換されてしまうみたいです。

シンプルエディタを使用している方は、まったく問題ありません。自由にアンカータグを記事文章内に設定し、活用して下さい。

この記事へのコメント
1. Posted by 月光仮面    2006年04月07日 03:57
おートップに桜が!
またノリさんがやったか?(^^)V
[晴れ]
話題に関係ないコメントで失礼しました。m(__)m
大変勉強になりました。
で、なんでナイキ?
[フリフリ]
2. Posted by AQ    2006年04月07日 04:02
> 何してんの月光仮面さん [ギョロ目]

何時やと思てんのん [汗汗]
人の事は言えへんけど ^^;

いや、アンカーの記事やから " イカリ " の画像を
探していたんやけど、あんまりええのんが無くて、
ちょうどナイキの画像が、アンカーっぽいかな ・・・ って。

ダメやね。夜中に記事書くと根気がないから [アイタ]
3. Posted by POP    2006年04月08日 01:01
AQさん先ほどはどうもありがとうございました(o^∇^o)ノ
AQさんに答えていただいて、なぜか知らないけれど
とってもうれしかったですぅ***ヾ(≧∇≦)ノ"***

あたしはあまり「続きを読む」を使わないので
ついつい記事が長くなりがち。。
このテクを使ってみようと思いまぁす
どうもありがとうございま〜す♪[チュッ]
4. Posted by AQ    2006年04月08日 01:06
> POP さん (^^)
ははは、私もすぐに誰の質問かがわかったので、
急いで回答しました。ww

この記事のアンカータグの内容は、ごく一部なんですが、
わかりにくい部分があったら、またいつでも言って下さい。[ニコ]
5. Posted by POP    2006年04月08日 03:20
AQさぁーん[ウェーン]
毎回個別記事の一番下に
「この記事のタイトルへ」というようにしたい場合
個別記事のHTMLテンプレートの、
どこにアンカータグを埋めたらいいのですか?
お忙しい中ごめんなさい。
いつでも結構ですので教えてください。。
どうぞよろしくお願いいたします。
おやすみなさぁーい・・[鼻水]
6. Posted by AQ    2006年04月08日 04:41
> POP さん
これの設置には少しセンスが必要です。[アイタ]

個別記事のタイトルの上に設置すると、ブラウザーの上がタイトルにベタッと引っ付いてしまって、タイトルが見にくくなるから、少しその上に設置すると綺麗に見えます。

今回の場合は、タイトルの上の日付に、" 到達点 " を設定すれば一番良いかなと思います。

個別記事の HTML の中にこういう部分があります。

<div class="datebody"><h2 class="date">
<$ArticleDate$></h2></div>

このタグの少し上に、例として次のタグを埋め込みます。

<a name="titlejump"></a>

そして、個別記事の一番下部。投稿欄の 「 書き込み 」 ボタンより下に設置するつもりなら、「 この記事のタイトルへ 」 の出発点を示すタグを、POP さんのブログの場合は、テーブルタグのすぐ下に入れるほうが良いみたいですね。ここの部分です。

</tr>
</form>
</table>
<script type="text/javascript">

--- ここの場所 ---

</div>
</div>
<div id="footer"></div>

でっ、POP さんのブログソースを確認したら、同じ位置に、もうすでにそれらしきタグが書いてあったんですけど ・・・

<div class="pagetop"><a class="aposted" href
="#top">このページの上へ▲</a></div>

ブログに表示されてませんよね。
その原因は、その上にある、

<script type="text/javascript"> の [?] な記述。

これが原因で表示されていないみたいです。何かのカスタマイズした後の消し忘れじゃないですか? どうりで、ブログを表示させた時にエラーが出ると思っていたんですよ。削除しておいて下さい。

この記述位置は、ブログのテンプレートによって変わります。ですから今回の話は、現在のテンプレートに限っての話です。これでも出来なかったらまた言って下さい。[ゲソッ] ちょっと眠いです。zzz
7. Posted by POP    2006年04月08日 09:59
AQさん。お手数おかけしてごめんなさい。。

最初投稿記事ごとに作業すればいいかなぁと思い、試しにやってみたところゼンゼンだめで[もっとorz...]
毎回同様ならばカスタマイズのところからすればいいのかなぁ。。でもどこに?
で、AQさんに質問ーーでした。
そーれちゃちゃっと!ってできないので[ガビン]
あとでじっくりやりますね
取り急ぎご指摘の意味不明な記述は消します(≧∇≦)ゞ
またのちほど・・
AQさん。。こんなあたしみたいなわからんちんのナレッジャー質問戦隊がいますから
なかなか難しいと思いマスが・・
ゆっくりねんねしてくださいね[汗汗]
どうもありがとうございました[ハート]
8. Posted by AQ    2006年04月08日 17:34
> POP さん
あ〜そういうことですか。

それなら、とりあえず到達点のタグは HTML に埋め込んでおいて、出発点のタグを毎回の記事の最後に書き込めば、簡単にできますよ。

<div align="right"><a href="#titlejump">
この記事のタイトルへ</a></div>

■ 書き込むときは改行しないで書き込んで下さい。
■ #titlejump は POP さんが到達点に埋め込んだアンカー名に合わせてリンクさせて下さい。
■ <div align="right"> </div> は、表示させる時に右にあったほうが良いかなと言う配慮で書きましたが、左側に表示させたいのであれば、left 中央は center と書けば OK です。

PS. 寝すぎるほど寝てしまいました。[もっとorz...]
9. Posted by POP    2006年04月08日 23:18
┃_・)ジー
AQさーん[ウェーン]度々ごめんなさい。ご迷惑とは思いつつ。。もいっこだけ質問させてください。
試しにやってみるのですが
記事編集→HTMLで、記事の最後に
<div align="right"><a href="#titlejump">この記事のタイトルへ</a></div>
と書き、再構築して確認すると
管理画面にジャンプしてしまうのです
↓このように書き替わってしまいます
<DIV align=right><A href="http://cms.blog.livedoor.com/cms/article/edit?.back=1&amp;blog_id=番号&amp;id=番号#titlejump">この記事のタイトルへ</A></DIV>
「"#titlejump"」の前に、その記事の編集のURLが加わってしまうようで・・
あたしまたなにかしでかしてますか?[ドクロ]
お忙しいところ申し訳ありません。
ゼンゼン急ぎません。「○○を調べてみて」ということで結構です。
どうぞよろしくお願いいたします。
10. Posted by AQ    2006年04月09日 00:14
> POP さん
AQ は、記事の投稿フォームの形式を、シンプルエディタ にしているから、何の事か意味がわからなかったんだけど、ためしに WYSIWYGエディタ に替えてみてテスト投稿したら、あらビックリ [ギョロ目]

こんな事あり [?] みたいな感じですね。^^;
おっしゃるとおり、そうなるみたいです。

シンプルエディタで、もう一度同じようにタグを打ち込んでみて確認すると、今度は正しくリンクが貼られました。つまり WYSIWYGエディタ で記事を書いている方には、投稿記事本文中にはこのタグの使用は不可能という事になります。

しかし、なぜ自動的に管理画面のタグに変換するのだろう [?] ビックリしますね。こうなれば、直接 HTML にタグをあらかじめ打ち込んでおくしか方法はなさそうです。

どこの部分にいつもタグが出て欲しいですか [?]
おっしゃって下されば、その部分をお伝えしますが ・・・。
11. Posted by POP    2006年04月09日 03:11
6のAQさん「すでにそれらしきタグが…」
コメント欄を開くとそれらが現れます。
それらをTOPの記事にも現れるようにしたらいいかなとか(できるのかしら?)シンプルエディタにしようかとかいろいろ考え中デスが、コメント欄を開くとまたエラー表示が・・[ドクロ]
'bake'はNullじゃないとかなんとか…
月別やカテゴリ別で開いてもエラーにはなりません。
6でAQさんがおっしゃってるあたりになにかがあるのかも・・
bake?Null?ナニを焼く?ノドぬーるなら知ってるけど?なにそれ[ふーん]ってカンジです(≧∇≦)
12. Posted by POP    2006年04月09日 03:12
ひとつヒントをください
ステータスバーの警告アイコンをクリッで詳細が出ます。
このラインの数字は何行目がおかしいって教えてくれてるのデスか?
それは表示→ソースの○行目ってことでしょうか?
ヒントをいただいて自分で間違いが発見できたらうれしいかなぁと思って。。(たぶんすぐにAQさんにヘルプミ〜だと思いマスが・・)
なんだか個人授業を受けさせていただき・・この場を長々とお借りして申し訳ありません[汗タラー]
本当に感謝デス。AQさんありがとうございます(=^-^=)ノ
13. Posted by AQ    2006年04月09日 07:00
> POP さん

> 「 すでにそれらしきタグが ・・・ 」
> コメント欄を開くとそれらが現れます。

できますよ。(^^) でも、HTML に直接埋め込むしか方法はありません。WYSIWYGエディタ に、完全な URL 以外のアドレスを打ち込むと、すべて管理画面にアクセスするアドレスに変換されるみたいですね。色々と実験しました。[ガビン]

到達点のアンカータグさえも、WYSIWYGエディタ を使った場合は、記事文章内には反映されない事もわかりました。シンプルエディタを使用していれば、まったく問題は無いのですが ・・・。

> コメント欄を開くとまたエラー表示が ・・・
今はエラー出ていませんよ。大丈夫です。

> ステータスバーの警告アイコンをクリッで詳細が出ます。
あ〜、あれは僕も意味がわかりません [汗汗]
ナレッジで聞いてみればいかがですか [?]

僕はカスタマイザーであって、エンジニアではないので、ああいういかにも! っていう専門記述は理解できていません。申し訳ないです。^^;
14. Posted by POP    2006年04月09日 12:59
AQさん(o^o^o)ノ
今ナレッジしてきました[音符]

アンカータグは、今までのAQさんの教えを元に
シンプルエディタにするのかも含めて
「自分自身検討委員会」で検討ののちチャレンジしてみます
できたら報告します
できなくて[もっとorz...]の時はまたご相談させていただきます[汗タラー]
どうもありがとうございました[チュッ]
今後ともどうぞよろしくお願いいたします(≧∇≦)ゞ
15. Posted by AQ    2006年04月09日 17:38
> POP さん

今後の POP さんの Web の向上を考えたら、
シンプルエディタにするほうが良いと思います。

簡単な方法としたら、オーサリングソフト ( ホームページ作成ソフト ) を使用してあらかじめ記事を作成し、それをコピーしたものを記事投稿画面のシンプルエディタに貼り付けるの。

一度投稿したのを目で確認し、見映えが良いように、改行などの修正をすれば OK!

僕は毎日の記事の投稿をその方法でおこなっています。[ニコ]
16. Posted by POP    2006年05月23日 22:49
AQさん
うまくまとめられなくて長文になってしまうのですがごめんない[ガビン]

えぇと・・
<div class="datebody"><h2 class="date">
<$ArticleDate$></h2></div>
の少し上に<a name="titlejump"></a>を埋め込むということですが
"datebody"がありません。なのでそれらしき(h2あたり)ところに埋め込みました。

<div class="blog">
<$TrackBackAutoDiscovery$>
<a name="titlejump"></a>
<h2 class="date"><$ArticleDate$></h2>

毎回記事を書くときに本文一番下に
<div align="right"><a href="#titlejump">
この記事のタイトルへ</a></div>
を記入。

ということは。。
すべての記事に「この記事のタイトルへ」が表示されます。
・個別記事ページは1件しか表示されませんのできちんとしてますが
が、複数件表示されているトップページ、月別、カテゴリー別からクリックしても動きません。。
17. Posted by POP    2006年05月23日 22:51
では4枚のHTMLすべてにこの作業をすればいいかと、したところ
・個別記事ページはきちんとしてますが
・トップ、月別、カテゴリー別では複数のページが表示され、クリックするとそのページの一番上にしか行きません。。
なので、やはりAQさんが最初に教えてくださったように個別記事のHTMLに出発点のタグを埋め込むこととし、
当初どのページのどの記事からも、その記事のタイトルに行くようにしたかったのですが、どうも無理みたい?なので
個別記事ページのみで使える技にすることにしました。
よく考えたら、一度読んでもう1回読みなおすなんてあまりないかなぁとも思いましたので。
以上長くなりましたがご報告です。
いろいろとありがとうございました[ハート]
18. Posted by POP    2006年05月23日 22:53
で、今回お尋ねしたいことというのは
「続きを読む」をクリックすると、その記事のトップから表示されるのですが
AQさんとこのようにそのまま続きが続くというのは私のブログでは無理なものでしょうか?
(トップページのみサイドバーが表示され、その他のページはサイドバーが非表示デス)
「コメントを書く」をクリックするとコメント記入欄から表示されるようにするしかないのでしょうか[無言]
うぅ[ウェーン]次から次へとごめんなさい[汗汗]
19. Posted by AQ    2006年05月26日 04:40
> POP さん (^^)

コメントはちゃんと確認していますよ。
回答はもう頭の中では出来上がっているんですけど、
ちょっと長文になってしまいそうなんで、もうちょっと
待ってくださいね。

なんかバタバタしてて ・・・ [汗汗]
20. Posted by pop    2006年05月27日 21:50
はい(^o^)/いつでもいいのです。。急ぐ旅ではございません♪
かわいいわんこ届きました☆近々記事にしたらまたトラバらせていただきますね
21. Posted by AQ    2006年05月28日 00:36
> POP さん

すみません。今日そのコメント書こうと思ったら、
PTA の総会がありました。・・・ でっ、懇親会 ・・・

でっ ・・・ 2次会 [もっとorz...]
頭、痛いです。(-_-;)
22. Posted by AQ    2006年08月25日 02:03
> POP さん
え〜とまず ・・・

>>16
>>17
は、設置後の経過報告と考えて良いのですね [?]

でっ ・・・

>>18
なんですが ・・・
[blockquote]AQさんとこのようにそのまま続きが続くというのは
私のブログでは無理なものでしょうか?[/blockquote]
無理かどうかは、POP さんの HTML を実際に見てみないとわからないのです。ブログにアクセスして見るソースじゃなくて、実際のトップページの元 HTML です。

ブログから確認したソースでは、独自タグが呼び出された
日本語に変換されてしまって、確認がしずらいんですよ [汗汗]

できれば管理画面内にある、トップページの 元 HTML を見せていただければ、こちら側でそれを貼り付けて、できるかどうかの検証がおこなえます。ですのでそこでお願いがあります。

POP さんの HTML ( トップページだけで結構です ) を、
メールに貼り付けて、送っていただけないでしょうか [?]

CSS はこちらでダウンロードします。
検証後、この質問の返答をお返ししますので (^^)
23. Posted by POP    2006年08月28日 17:55
了解デス[アハ]
あとでメールします。
よろしくお願いします[ハート]
24. Posted by AQ    2006年08月28日 21:03
> POP さん
>>23
メール届きました (^^)
検証したら詳細をここに書きますね。
少々 ・・・ 少々、お待ちを (^_^;)
この記事にコメントする
 :Name
 :Mail
 :URL
  情報を記憶:   書き込みのリセット: 
 
ご利用のブラウザ、設定ではご利用になれません。
 
  
Information
Category Menu
Promotion
New Entries
Mini BBS
Back Number
Comments
TrackBacks
Tag Click
Click Please!