よく読まれている記事一覧 | バカネコ日記

ページ内ジャンプの方法１

もとはと言えば、捨てられた小さな仔猫の里親を探すためだった。トラックバックやリンクをお願いしようとして、その説明をしたのがバカネコ講座の始まりである。テキストリンクから始まって、画像でリンクしたり、別Windowで開く方法などを解説してきた。今日のバカネコ講座は、その一環で、ページ内でのジャンプ方法を紹介しよう。ちょっと長い文章を書いていくと、ページは、どんどん下へ下へと長く延びる。すると、ページの中の特定位置にリンクで飛ばしたいケースも出てくる。短い日記の場合は、あまり使うことはないが、このページ内ジャンプは一般のHPでは、ちょくちょく見かける手法である。例えば、文末から、冒頭へ戻る。　文書中の専門用語にリンクを張って、解説している位置に移動する。冒頭に簡単な目次を書いておいて、それぞれの段落に飛ぶ。これも、リンクの応用であって、あっさり実現できる。お祭りマンボ（赤）ビビアンチョーカー（サファイアブルー）リンクの基本形は<a href="飛び先">テキスト</a>　　であった。思い出してくれたかな。さて、ここで、"飛び先"は、ジャンプ先の住所を意味している。だから、この部分をいじってやればいい。別ページに飛ぶ場合は、そのURLを書くのだが、同じページ内であるから、自分のURLでは、ちと具合が悪い。では、どうやって飛び先の位置を指定するのか？同じページ内だぞ？そんなもん、自分で前もって、目印を付けておけばよいのだ。で、今日は、その目印のつけ方を覚えよう。これも、カンタンである。飛び先の単語をアンカータグではさんで、名前をセットする。例えば、文中の「目印だよーん」という語句を飛び先とするなら、<a name="sirusi">目印だよーん</a>　　と書く。この、name="sirusi"　　というのが、今日、覚える呪文である。名前を付けるのが、そのはたらきだ。この、アンカータグというやつは、飛ばすリンクを作るだけが、能ではない。こうやって、ジャンプを受けるための、名前をつける機能もあったりする。HTMLというのは極めてカンタン、安直なルールで構成されているが、このように、中に書く呪文によって、実にさまざまな機能を実現している。これが、HTMLの便利なところでもあり、HTMLを取っつきにくくしている原因でもある。本日は、ここまで覚えてくれたら充分である。ただし、次回も登場するので、しっかりと頭に叩き込んでおいていただきたい。飛ばすためのアンカータグと、ごちゃ混ぜにしないように！【本日のポイント】１．ページ内でも、リンクを張ってジャンプできる。２．飛び先の目印は、前もって自分で書いておく。３．目印は、目的語句に、アンカータグで名前を付ければよい。【次回の講義は】ページ内でジャンプさせる、リンクの書き方。【トドの夕食】　うちの電気炊飯器、電源コードを差し込むと、自動的に保温になる。　お米を仕込んで、炊飯スイッチを入れ忘れると、　上はガチガチの半なま、　下はネチョネチョの糊状態になってしまう。　１年に何度かは、やってしまうのだが、今日は４合も仕込んでいた。　この大量の炊きそこない、どうしたもんか．．．。　おかゆにする気にもならない。この記事が役に立ったと思う人は１票！　クリック　→　※バカネコ講座では、安全な方法を選んで紹介していますが、　途中でわけがわからなくなっても、責任は負えませんので、あらかじめご了承下さい。ネコでもわかるＰＣ講座はこちら　→　バカネコ講座【楽天トラベル】　バカネコ講座　バカネコソフト　バカネコ村　爆笑ガイド　猫砂の研究　パソコン購入費用の削り方　現物の投下位置　ずぼらなアクセスアップ　ページを読みやすくする方法　バーニャン１号ミニ　バーニャン１号の秘密　にゃんこのコスプレ　テキストリンク下線の消し方　楽しめるアフィリ　己を知れ　自分のＰＣを知る　バカネコ・ビューア　バーニャン２号　にゃんタグ・フルバージョンバカネコ村の秘密兵器画面右上「日記リンク追加」をクリック、「◎追加する」ボタンを押すとこの日記がリンクできます。このサイトの新着記事の通知をご希望の方はご利用ください。

別のページの途中にジャンプ

本日のバカネコ講座は、先に進まずに、前回の補足をする。ページ内ジャンプで、好きな位置に飛ばせるのなら、よそのペ－ジの好きな位置にも飛ばすことは出来ないのかという、質問があったからだ。もちろん可能である。確かに前回のままでは、解説としては不親切であろう。なので、今日はその方法を紹介する。チェック柄シャツ（グリーン）アロハシャツ（グリーン）リンクの基本形は、<a href="飛び先">テキスト</a>　である。同じページ内でジャンプする場合、"飛び先"は、予め自分で作っておく。例えば、memo1 という名前をつけて、飛び先にするなら、<a name="memo1">テキスト</a>　と書く。ここにリンクを張って飛ばすには、<a href="#memo1">テキスト</a>　と書けばよい。以上、前回までのおさらいである。　思い出していただけたであろうか。さて、ここまでくれば、勘の良いかたなら応用が利く。基本形 <a href="飛び先">テキスト</a>　の飛び先を良く見てみよう。別のページにジャンプするには、そのURLを書けば良いのであった。そして、自分自身のページ内でジャンプするには、半角の「#」をつけた「目印」を書いてやれば良いのであった．．．。ならば、別のページの特定位置にジャンプさせるには？そう。飛ばすページのその位置に、予め目印を仕込んでおく。目印のつけかたは、memo1 という名前にするなら、<a name="momo1">テキスト</a>と書けばよいのであった。別のページに飛ばすのであるから、これに加えて、URLも必要だ。ここは安直に考えて、ただ足せばよろしい。答えは以下のようになる。<a href="URL#memo1">テキスト</a>なんのことはない。URLと目印を足して、飛び先に指定しただけである。なんとカンタンなルールであろうか。実際にやってみよう。3/13の日記の、【トドの夕食】というところにリンクを張ってみる。予め、この語句には、yusyokuという目印を付けておく。→　<a name="yusyoku">【トドの夕食】</a>でもって、3/13の日記のURLを仕込むと、こうなる。<a href="http://plaza.rakuten.co.jp/nyancolon/diary/200503130000/#yusyoku">ここをクリック</a>実際の表示　→　ここをクリックこの方法で、好きなページの好きな場所に、リンクできる。これでまたひとつ、あなたの自由度が高まった。にゃはは。　今日はめでたい日である。【今日のドジ】オリジナルドメインの有効期限が迫っている。　延長料金を振り込まなくちゃ。レンタルサーバの料金も振り込まないと。まだ、時間的があるなんて、余裕こいてたら、あっという間に３月も下旬に入った。忙しくて、振込を忘れてたよ～。入金確認に２～３日かかるのと、有効期限切れが土日だってことも見落としてたぁ～。ドメイン消失なんてことになったら、えらいこっちゃ。　ひぇ～～。【トドの独り言】たったこれだけを解説するのに、３ページをあてた。実は、この程度なら８行たらずで、解説できる。実際、通常の書籍ではそうしている。　たとえば．．．　　　　　　　↓リンクの基本形は、<a href="飛び先">テキスト</a>　である。同じページ内でジャンプする場合、"飛び先"は、予め自分で作っておく。例えば、memo1 という名前をつけて、飛び先にするなら、<a name="momo1">テキスト</a>　と書く。ここにリンクを張って飛ばすには、<a href="#memo1">テキスト</a>　と書けばよい。さらに、別のページ(URL)のその位置に飛ばすのなら、<a href="URL#memo1">テキスト</a>のように書く。だが！それでは、初心者には、わからんのである。バカネコ講座は、そのへんを重視しているところが、普通の書籍と編集方針が異なる。この記事が役に立ったと思う人は１票！　クリック　→　※バカネコ講座では、安全な方法を選んで紹介していますが、　途中でわけがわからなくなっても、責任は負えませんので、あらかじめご了承下さい。ネコでもわかるＰＣ講座はこちら　→　バカネコ講座【楽天トラベル】　バカネコ講座　バカネコソフト　バカネコ村　爆笑ガイド　猫砂の研究　パソコン購入費用の削り方　現物の投下位置　ずぼらなアクセスアップ　ページを読みやすくする方法　バーニャン１号ミニ　バーニャン１号の秘密　にゃんこのコスプレ　テキストリンク下線の消し方　楽しめるアフィリ　己を知れ　自分のＰＣを知る　バカネコ・ビューア　バーニャン２号　にゃんタグ・フルバージョンバカネコ村の秘密兵器画面右上「日記リンク追加」をクリック、「◎追加する」ボタンを押すとこの日記がリンクできます。このサイトの新着記事の通知をご希望の方はご利用ください。