ブログパーツ

趣味の工房

☆ブログの文章中の特定部分にリンクさせる方法☆

ブログを書いていると、時々以前の記事にリンクを貼りたいときがあります。

例えばパーツに対する説明文などは、以前も書いているのでまた書くのもメンド…ではなくて、もう知っている、あるいはすでにご覧になられている方には邪魔な記事になってしまうので、できるだけ過去記事を引用するためにリンクを張るようにしています。

まぁそれ自体はそんなに難しくないんですが、<参照先>が記事のタイトルと関係なかったり、引用したい一文が記事の真ん中くらいにある場合、記事自体にリンクしてしまうと、逆にややこしくなりがち…

ということで、今回は「ある特定の部分」にリンクを貼る方法をご紹介します。



☆ブログの文章中の特定部分にリンクさせる方法☆



ちょうど先日の記事の【ブラウザ】の説明で使っている方法です。
【ブラウザ】の説明を書いた記事は、【FirefoxとThunderbird】という記事の中で、さらっと書いています。
「ブラウザって何!?」と思われた方がその記事のTOPではなく、説明文のある記事の最初部分にリンクするよう設定しています。


といっても、そんなに難しいことではありません。
簡単に言えば、参照したいリンク先に「ラベル」をつけておき、リンク元にはその「ラベル」部分まで指定してやることで、そのラベルをつけた文字の部分に飛べる、というわけです。
検索フォームからの検索と違い、他の同じ文字が含まれた記事までHITすることはありません。


では例えばコチラをクリックしてみてください。→  ココをクリック!!


いきなりページの最後にジャンプしたと思います。
これは最後のバナーの上の文字に「ラベル」をつけておいたためです。
この様に、同一ページ(同一記事)内でのリンクをさせるには、まずリンク先のラベルをつけたい部分(文字・単語など)に、

<a name="ラベル名">ラベルをつける文字(または文章)</a> (※リンク先)



のようにラベルをつけます。つけたい文字や単語を<a name="ラベル名">と</a>で挟む形です。
<、>は半角で記述します。この部分は実際の記事本文には表示されません。

また、「ラベル名」の部分はなんでも構いません。内容にあったものにしておくと、後から自分が判りやすいと思います。
ちなみに、「タグをつける文字」部分は空欄でも構いません。<a name="ラベル名"></a>だけでも機能します。(表示上は何も見えません)
つまり、空白スペースにもタグをつけられるということです。
通常ラベルをつけた部分にリンクで飛ぶと、その文字がまさに一番上に表示されて少し見づらくなってしまうので、ボクは上2行分くらい空け、そこにラベルだけをつけています。



そして、リンク元のほうにはこのように記述します。

<a href="#ラベル名">ここをクリック!!</a>  (※リンク元)



ラベル名の前に「#(半角)」を忘れないように注意。
また当然ながら、参照先のラベル名と、参照元のラベル名は、全角・半角や大文字・小文字含めてまったく同じにしておかないといけませんのでご注意を。(※追記参照



では、違うページの特定の部分に飛びたい場合はどうするかというと…
ラベルのつけ方はまったく同じで、リンク元の記述にリンク先のURLもくわえてあげるだけでOKです。
具体的には…

<a href="URL#ラベル名">コチラ参照。</a>


のように、「#ラベル名」の前にリンク先のURLを加えてあげます。
と、言うより、ページのリンクを作っておいて、リンクURLの後に「#ラベル名」を加える、といったほうがわかりやすいでしょうか!?



知っているとなかなか便利な機能です。興味があればお試しを♪


では。

**SeeYou**( ̄∀ ̄*)ノ




--------------------------------------------------------------------------------------------------------------------
【追記】
同一ページ内のリンクでは基本URLは必要ありませんが、先日携帯からこの記事を確認したところ、リンクが上手く機能しませんでした。( ̄∇ ̄;)
具体的には、サイトのTOPへ飛ばされる感じです。
同一ページ内でもそのURLを入れることで回避できましたので、携帯からご訪問いただいた方のためにもそのように設定しておいたほうがよさそうです。
--------------------------------------------------------------------------------------------------------------------



ランキングに参加しております。クリックにご協力を♪
にほんブログ村 PC家電ブログ 自作PCへ
にほんブログ村
ランキングバナー



元の位置に戻る↑  ←一通り読んだ人はまた戻っちゃうので押さないでねw



関連記事


    21:11 | Trackback : 0 | Comment : 8 | Top
Comment
2010.09.02 Thu 00:05  |  黒ゴマぷりん #-
普段から自作に関する記事などを読ませていただいてます><

自分は現在ブログを開設したばかりでこういった記事はとても参考になります。ありがとうございました!
とっても参考になります!  [URL] [Edit]
2010.09.02 Thu 07:35  |  りくんちゅ。パパ #-
>黒ゴマぷりんさん

初めまして。参考にしていただけたのでしたら幸いです。
このブログは基本的に大きく左右に記事内容がブレますので、ついて来れなくなったら挙手願います(笑)
ムリに毎日続けようと自分にプレッシャーを書けると逆に長続きしません。
ゆるーくやっていくのがコツです。
これからもよろしくお願いしますね♪人´∀`).☆.。.:*
  [URL] [Edit]
2010.09.02 Thu 11:09  |  kaku #-
りくパパさんこんにちはー☆

・・・CSSですね( ̄◇ ̄;)?
アメブロでも出来るかなぁ・・・;

ちょっと実験してみますね^-^)/~☆
参考記事ありがとう御座います!
  [URL] [Edit]
2010.09.02 Thu 12:03  |  Hide-Rocket #-
先生!めっちゃ勉強になりました☆

次回の不定期講義も楽しみしてまーす´-ω-)ノ
  [URL] [Edit]
2010.09.02 Thu 21:17  |  りくんちゅ。パパ #-
>kakuさん

多分できるとは思いますが…試してないので何とも…

携帯からだとページ内リンクが上手く機能しませんね…修正します。


>Hide-Rocketさん

参考になったなら幸いです。( ̄▽ ̄)
不定期更新ご希望ですか…あまり自分も詳しくはないですが、思いついたらまたUPしますね。
  [URL] [Edit]
パパさん

いや!先生ですねww

どんどん授業開催してください^^;
みんなみたいに、うまく作りこみが^^;
勉強しなくては(*´-ω-`)・・・フゥ
  [URL] [Edit]
2010.09.03 Fri 00:00  |  丸ボロマン #-
僕もアメブロ始めてから2週間ぐらいになりますが、未だに記事を書くとき、試行錯誤しながら、何度も手直ししています(;^ω^)

今回も僕にとってタイムリーなネタで大変参考になりました<(_ _)>
  [URL] [Edit]
2010.09.03 Fri 00:27  |  りくんちゅ。パパ #-
>夜王さん

こんばんは~。
FC2はテンプレートやカスタマイズが比較的簡単にできるのですが…アメブロはどうなんでしょう!?(; ̄ー ̄A
作りこみはいろんなサイト参考にしながら、いろいろ試して試行錯誤しながら直していくしかないと思います。
…といいながら4年も続けているボクは全然進化してませんが(爆)



>丸ボロマンさん

こんばんは~♪
それでいいと思いますよ。ボクも記事を書くときは何度もプレビュー確認しながら、へんな表現になっていないか、不快に思えるような言い回しがないか確認します。
文章だけの表現て、ホントに難しいですからね…。
「そんなつもりじゃない」発言も、「どんなつもり」で書いているのかを明確にしておかないと、相手にわかるはずもないので…

レビューとして、製品のいい、悪いを評価するのは大切ですが、特に不具合箇所を書く場合などは、必要以上にけなす言葉になってしまっていないかということと、「個人の意見ですが」とか、「自分の環境では」という断りは必ず入れるようにしています。

ちょうどkakuさんが先日いい記事を書かれてましたね。
  [URL] [Edit]









(編集・削除用)


管理者にだけ表示を許可
Trackback
http://rikuntyudady.blog101.fc2.com/tb.php/289-13a1a80a
プロフィール

りくんちゅ。パパ

Author:りくんちゅ。パパ
初歩的な話からオーバークロックまで、PCに関することやその他趣味に関することを思い付きで書いています。
コメントはお気軽にどぞ。

「rikuntyudady」の名前で出没することもあります(笑)

rikuntyudady01.jpg

このサイトはFirefox,Google Chrome用に最適化されています。
IEでは一部表示が正しく行われない場合があります。
ご了承ください。


アクセスカウンター
signbot_20101017072856.gif
現在の閲覧者数:

galleryロゴ02
cmcrogo2.png
RikuntyudadyのCM690をUP!!
☆ただ今34台展示中☆



みんなのPC♪ギャラリーはコチラ。

Page 1 Page 2


Categories...

クリックで全て開閉↓

openclose


○自作をしてみたい方へ
○オーバークロックについて

「+」はフォルダクリックでOPEN

全ての記事を表示する


見つからない場合はコチラ
(記事内検索)

最新記事
最新コメント
☆MY GEAR☆
カスタマイズ工程はコチラ
画像
画像
画像
画像
画像
画像
画像
ATCS840
COSMOS II
CORE1500
MasterCase5Mod

<製作依頼PC>
画像
Overclock.net work log
MNPCTECH"Case Mod Blog"
画像
画像
【CORSAIR Vengeance® C70】
HAF X MOD

<コラボ企画> 画像
SNIPER
☆おもな活動サイト☆

Cooler Master Forum
CoolerMaster

techPoweUp! Case Mod Gallary-
techPowerUp!

Overclock.net
   -Case Mod Work Logs-
Overclock.net

Case Modding Forum
Case Modding Forum

こだわりの持ち物を登録しよう♪
2010y05m05d_221238218.jpg

Web page translation
THIS IS MY GEAR
2016y03m23d_233159886.png 2016y03m23d_233204419.png
感染者増殖中...
りくんちゅ。パパにメールする







本文:

☆掲示板☆

趣味の工房 ~みんなの休憩室♪~
お気に入りブログ♪
カメラ熱上昇中♪
【Canon】EOS 70D 70D.png ○レンズ
【Canon】
EF-S18-135mm F3.5-5.6 IS STM
EF-S55-250mm F4-5.6 IS STM 【SIGMA】
18-35mm F1.8 DC HSM|Art
APO 50-150mm F2.8 EX DC OS HSM


【Canon】G7 X canon_g7x_20150528010550367.png
☆広告☆
ブロとも申請フォーム
QRコード
QRコード
RSSリンクの表示