記事のINDEXページを作るために、ちょっとお勉強しました。
あいうえおの50音indexに記事のリンクを並べると、ものすご～く縦に長い記事になってしまいます。
そこで、ページの頭にページ内リンクできるヘッダーをおくことで、ちょっとでも見やすく、探しやすくしてみました。キコキコがんばってスクロールしなくても、目的の場所にたどり着けます。
：：注意：：
タグってなに、HTMLってなに、というレベルのモンキチがネットの情報だけを頼りに覚えた内容です。間違いや誤解もあると思います。気付いたらそっと教えてくださいﾈ
今回は、ここのページを中心にお勉強してきました。
http://www.shoshinsha.com/hp/ref/html/a_name.html
<A Name="アンカー名">～</A>、<A Href="#アンカー名">～</A>
<a href="#アンカー名">～</a>
がその場所へ飛ばす、リンクタグになります。
<a name="アンカー名"></a>
をページ内の飛ばしたい場所へ埋め込みます。
・アンカー名は好きな名前をつけることが出来ます。
・同ページ内では、同じアンカー名は使えません。
・アンカー名は半角英数字でつけてください。
まぁ、文で書かれても素人のあたしにはわかったようなわからないような…。
ってなわけで、はじめはページリンクが貼ってあるページを、アメプロの標準エディタに貼り付けて、「HTMLタグを表示」して中身を見てみることからはじめました。
ま、あとでアメブロならでは(?)の２つトラップに引っかかるわけですが･･･。
ともかく、出来上がったのがこちらのページです。
サンプルページとして見てみてください。
50音Indexで使っているHTMLタグはこちらです。ご参考までに。
<p>50音index<br />
<a href="#a">【あ行】</a>
<a href="#ka">【か行】</a>
<a href="#sa">【さ行】</a>
<a href="#ta">【た行】</a>
<a href="#na">【な行】</a>
<a href="#ha">【は行】</a>
<a href="#ma">【ま行】</a>
<a href="#ya">【や行】</a>
<a href="#ra">【ら行】</a>
<a href="#wa">【わ行】</a>
<a href="#other">【その他】</a>
</p>
<p><a name="a">【あ行】</a></p>
<p><a name="ka">【か行】</a></p>
<p><a name="sa">【さ行】</a></p>
<p><a name="ta">【た行】</a></p>
<p><a name="na">【な行】</a></p>
<p><a name="ha">【は行】</a></p>
<p><a name="ma">【ま行】</a></p>
<p><a name="ya">【や行】</a></p>
<p><a name="ra">【ら行】</a></p>
<p><a name="wa">【わ行】</a></p>
<p><a name="other">【その他】</a></p>
それは、ちょこちょことタグといじって、いざ表示確認したときに気が付きました。
ページ内リンク【か行】をクリック、ポチっとな
いぇ～い、エラーだわ～い。なんでぇ？めちゃがんばったのにぃ
仕方なくHTMLタグ表示を確認してみると…
<a href="http://blog.ameba.jp/ucs/entry/#a
">【あ行】</a>
<a href="http://blog.ameba.jp/ucs/entry/#ka
">【か行】</a>
あれっ？なんか余計なんが入ってる…
赤いところを消して、タグの非表示でプレビュー確認して、再チャレンジ。
っとそのまえにもう一度タグを確認。
あん？またやつが入ってきている
そうです、いちどタグの非表示ページに切り替えると、上の赤い部分が入り込んでしまうみたいなのです。
仕方ないので、公開ボタンを押す前にHTMLタグを表示のページで
<a href="#a">【あ行】</a>
<a href="#ka">【か行】</a>
の状態に戻してからUPしました。
何ででしょうか。素直じゃないんだからっ。
仕方ないので、ページ内リンクを埋めた各ページのタグをメモ帳に保存して、編集するたびにコピペしてます。誰か助けてください
最初のトラップを乗り越えて、無事ページ内リンクを完成させたものの
なーんか微妙にリンクする位置がズレてますけど
どうやら、アメブロのバーが数行分ほどスペースをとっているようで、目的の場所にリンクしたものの上部分が隠れて表示されていないようなのです。
ムカっ
しかし、ここはアメブロさんのスキンを使用させていただく身、苦肉の策で改行
<br />を入れてみることにしました。そして最終的に行きついたのがこの形。
<p><a name="a"><br /><br /></a>【あ行】</p>
<p><a name="ka"><br /><br /></a>【か行】</p>
ふぅっ、なんとかイメージどおりの形に収めることができました
各種ホームページでは当たり前に使ってる機能ですけど、こんな風になっていたんですね。今回もよい勉強になりました
今度は「ページのトップへ戻る」でも探してみようかしら。
でもそれは、まだ先のお話
同じようにブログを見やすくしたくてもやり方がわからないと苦労している方、すこしでも参考にしていただければと思います。ただし、質問や疑問にはいっさい答えられません・・・。なにせ、見よう見まねでやってますからやってみればなんとかなるもんですよ
ポチっとお願いします
