AFFINGER5 WINGイメージ画像

AFFINGER5 WING WORDPRESS

ようやくわかった!同じ記事内の特定の場所にリンクをつける方法!

投稿日:

今回のテーマは、『目次をつくる』!

ページの冒頭に目次があればカッコ良いでしょ?

それは個人の好みかもしれないが、よそ様のサイトを訪問して目次がついていればすごいなと思います。

ひとつには、目次ポインターを持っていくとちゃんとリンク設定されているのはすごい。だって、ひとつひとつリンクつけるのって面倒なものですから、作業してるってだけでもすごいです。

でもさ、よおく考えるとWordPressだからね、たぶん自動リンクできるはずなんだよ。例えば、エリアを指定してそのエリア内に入っている文字と見出しの文字が一致すればそこに自動リンク・・・とか、できると思う。

まぁとりあえず記事を書きながらいろいろ探ってみようと思います。

 

目次

  1. 目次を作る
  2. 自動リンクはできるのか?
  3. 同じページの特定の場所にリンクする方法

 

AFFINGER5 WING記事作成!目次をつくる

探しましたよ、目次ボタン。

見つけて仕舞えば簡単だけど、眠くてちょっと時間がかかりました。

私の記事はクラッシックモードを使っています。こんな画面の『タグ』のなかにひっそりと『目次』 がありますのでクリックしてみました。

Affinger5目次タグ

クリックするとすぐに目次のサンプルがでてきます。簡単すぎる(笑)

テキストを変えるだけで目次完成です。

Affinger5目次

こんなに簡単でいいのか?と思いました。

 

目次のテキストにリンクをつける

さて、目次と同じタイトルで見出しを作ると、目次からそのタイトルのところに自動リンク設定はできるのでしょうか?

Googleで検索すると、どうらや簡単にできるらしい。

プラグインを入れれば簡単だと書いてありました。

やっぱりプラグインですか!私のサイトがこれ以上重くなるのは避けたい。もうこれ以上プラグインは採用しなことはすぐに決断できました。

では、どうすればプラグインなしで目次から見出しに飛べる?飛ぶというのはリンクするってことです。ここに2日ばかり時間を費やしました。

とりあえず自動リンクは諦めました。実にあっさりと諦めましたとも!

 

同じページの特定の位置にリンクする方法

そういえば、昔ホームページを作るときによく使ったよね。同一ページの特定の文字にリンクつけるってよくやった記憶があります。

なんて言いましたっけ?ホームページビルダーではたしか『ラベル』って言いましたっけ?

そしてこのAFFINGER5でも見つけました!ラベルタグを!

Affinger5ラベルタグ

早速クリックしてみると・・・

Affinger5ラベル

違うやんか!

黄色の帯がでてきました。これがラベルかぁぁぁ。思わず3秒ほど落ち込みました。

うむ〜〜、振り出しに戻りましたね。

再びGoogle検索に戻ります。なんだか諦めきれないのよ。

画像やテキストから別ページにリンクするのは、リンクボタンを押してURLを挿入すればすぐにできるし、同じサイト内リンクも同様に簡単なのだけど、同じページ内にっていうのがやりたいのです。

そうしてようやくわかったのが、『アンカー』というのが世間一般の共通語らしいとのです。そうかもしれません。アンカーという言葉が頭の隅に残ってますもの。

 

アンカーをつける手順

文中に印をつけておき、目次からそこにリンクする。その印のことをアンカーって言います。たぶんそれで合ってると思います。

そして作業を簡単にしようと思うと、やはりプラグインの出番です。アンカーボタンが装備されているエディタを入れると簡単らしい。

でもノーモアプラグインですから、手動で設置してみたいと思います。

 

アンカー タグを調べてみます。

まずはその場所をクリックしてカーソルを表示します。

次に、 このエディタはビジュアルモードで書いていますが、右上のタブから『テキスト』をクリックして、テキストモードの画面を出します。

テキストモード

そこにこのアンカー タグを記入してください。

<a id="k"></a>

赤字のところは半角英数のアルファベットで適当に変更可能です。

コピペでいいのでテキストモードでそのタグを置いて、ビジュアルモードに戻ってみると、小さな錨マークが付いています。アンカーだから錨マークなのねと思いましたが、それなら エディタにボタンも作ってくれればいいじゃんと思ってしまったのはワガママでしょうか?

 

ページ上部の目次に戻って、リンクをつけたいテキストをハイライトします。そしてエディタのリンクボタンを押して、『#k』と記述してください。

『k』はアンカータグとお揃いにしてくださいね。そしてエンターキーを押して決定すればリンクがつくことになります。

アンカーリンク

このエディタのテキストモードがなかなかやっかいで、表示に時間がかかることがあります。

今回もアンカー位置が少しずれてしまいましたが、それはまた後日調整します。

 

まとめ

  1. アンカーを設置する
  2. 目次のテキストをハイライトし、リンクをアンカーと同じアルファベットで指定する

やってみれば簡単でしたね。

自動リンクは諦めましたけど、同一ページ内リンクはマスターしました。

 

びっくりニュース!

今回Google検索で見つけたものがもうひとつありました。

こんな言葉で検索したら、なんと検索1ページ目、しかも上から2番目になんだかみたことのあるタイトル!そうなんです、このサイトの記事が2番目にランキングされていました。

キーワードは、確か『Affinger5 Wing カスタマイズ』です。

素人なのにGoogle検索でこの位置は嬉しいなぁ。

Google検索1ページ目

 

これからも諦めずに頑張ろうという気持ちになりました!応援よろしくお願いします。

 

 

 

↓ポチッと応援お願いします↓

 にほんブログ村 グルメブログ いろいろなグルメへ



-AFFINGER5 WING, WORDPRESS
-, ,

Copyright© e-SHOKUDO , 2019 All Rights Reserved.