【小技】ページ内リンクのやり方をまとめてみた【ページが長くなった時に便利】

いつもいいねや読者登録ありがとうございます

２歳と５歳女子たちの子育て中専業主婦
あるふぃーるです。

お得情報発信がんばってます！

メインブログも遊びに来てね！！

普通の主婦あるふぃーるがネットでお小遣い稼ぎに挑戦してみるウェブログ

 

●お小遣い稼ぎを始めようとおもったわけ

 

●楽天高額マイル計算ツールに機能を追加しました

●BONNE計算ツール作成しました

こんにちは

病院の腎臓内科で

「あなたは血が濃すぎる」という忠告をうけ

水分をしっかりとってさらさら血液を目指す

どろどろ血液あるふぃーるです

アラフォーの肉体よ・・・

誕生月記事でページ内リンクを設定してたのですが

↓これ

【2017年5月版】誕生月までに登録するとお得なサイトはこれ！

ふわはちさんが

ページ内リンクすごいよ！っていってくれたので

まとめてみました

とりあえずざっくり！

【追記】

補足説明の記事書いてます

aタグ以外でも設定できます

ページ内リンクとは、同じページ内の指定した場所にするリンクのことです。

ページ内リンクは、HTMLファイルでaタグを使って動作させます。

aタグはリンク先リンク元2か所設定します

↓HTMLソースはこんな感じ

リンク先の設定（飛ばしたい先の目印）

<a id="title" name="title">タイトル</a>

リンク元の設定（ここから飛びます）

<a href="#title">タイトルへリンクする</a>

設定はこれだけです

"title"は任意の文字を設定してください

titleの文字は1ページ内にユニーク（かぶりなし）になるように設定する必要があります 

↓こんな感じに設定していきます

<a id="title01" name="title01">タイトル1</a>

<a id="title02" name="title02">タイトル2</a>

↓これはidがかぶっているのでダメなパターン

<a id="title01" name="title01">タイトル1</a>

<a id="title01" name="title01">タイトル2</a>

アメブロの場合

id属性＆name属性は通常表示での設定はできないので

HTML表示をして設定する必要があります

id属性とname属性は同じ文字を入れてください （本当はid属性だけでいいのですがHTML5対応していないブラウザ対策で念のためname属性も設定しておく）

リンク元は#を忘れずに！

↓シャープがないと飛びません

<a href="#title">タイトルへリンクする</a>

さっそくやってみたいと思います

このHTMLソースをそのままHTML表示にペタッとはると

↓こんな感じになります

リンクを押すとページの下部分に飛びます飛びます

※アメブロアプリではうまくいかないのでサファリなどのブラウザから確認してください

試しにやってみますに戻る

試しにやってみますに戻る

リンクのテストしたいときは

アメブロのプレビューはリンク飛ばないので

一度公開して試すか

ローカルでファイル作って試すのがいいかと思います

１：id属性　name属性の名前を確認！

意外とスペルミスがあったりします

あと重複した名前つけてたりしている場合があるので確認してください

２：ブラウザが非対応

ほとんどないと思いますがHTML５が対応していないブラウザがあります

id属性とname属性両方を設定しておけば安心です

３：jquerymobileのせいなので対応が必要

jquerymobileが影響している場合があります

無効化スクリプトをかいたりする必要があるみたいですが

アメブロではここまで必要はないかと思います

だいたい１か２で解決できるはず

てかほぼ１です

ガチWebプログラマですよね・・・

ｊQueryとはjavasciriptを扱いやすくしたプログラムのこと

ライブラリと読んでます

これを使ったらすごいことが比較的簡単にできます

↓ここのサイトがわかりやすいです

http://kyasper.com/jquery-tips/

でもアメブロではこういったプログラムが使えない？

（ごめんなさいこの辺検証してない）

ぽいので

アメブロ続けたい場合は特に意識しなくてもいいと思います

将来的にWord Pressやってみたいなーっていう方

覚えておいて損はないかも！

こういうの書いているくせに

ｊQueryろくに触ったことないので頑張って勉強します

ブログ長くなったなー

ちょっと読みにくいなーと思った場合こういうの導入すると

読み手に優しいかなと思ったります

余裕があるときに導入してみてはいかがでしょうか？

ちょっとはお役に立てましたでしょうか？

説明わかりにくい！

こういうの教えて！

とかありましたらコメントいただければ嬉しいです＾＾

こういう小技記事ってたまにまとめると自分の勉強になりますね

わたしはデザインセンス０なので

アメブロのブロガーさんが公開しているスタイルシート参考に勉強中です！

デザインできる人素敵！！

それではよいブログライフを！！