楽天お買い物マラソン 開催中   >>

【Cocoon】アンカーリンク使い方記事内に簡単リンクさせる方法 

この記事はこんな人におすすめです
 
  • ブログ初心者
      
  • 記事内リンクを作成したい人
     
  • 記事内の別のブロックへスキップして読ませたい場合

更新日:2023/01/15

ブログを書いているといろいろな場面に遭遇します。

記事を書いていてこの部分へ飛ばせたいなと思う時があります。

記事の途中から記事の別の所へリンクさせて、好きな場所に飛ばせる設定はないものか。

まあ、初心者が思うことは誰でも思うことなので

当然あります。それも簡単にできる方法が。

ネットで調べればすぐに分かります(笑)

それではこの記事を見てくれている人に申し訳ないので

自分の勉強を兼ねて解説します。

いろいろ方法があるみたいですが、紹介するのはもちろん一番簡単な方法です。

私が使っているのが無料テーマCocoon(コクーン)なので、多分他のテーマでも使えると思います。

ぜひ使ってみてください。

きっと役に立ちますし、何かと便利です(^^)

読者の利便性を向上させて、読まれる記事を書きましょう。

ページ内リンクって何?

ページ内リンク(アンカーリンク)とは、

同じページの他の場所に移動させたい場合に設定するリンクです。

ページジャンプとも呼ばれることがあり、

リンクをクリックするとすぐに長いページの上や下のどこかに移動することです。

ページ内リンクのイメージはこんな感じです。

では順番に説明していきます。

まとめだけ知りたい人はこちら。

※クリックすると最後のまとめの部分に飛ぶように設定しています。

記事内リンク設定方法

記事内リンクのイメージがつかめたと思いますので話を進めます。

アンカーリンク(aタグ)とは、HTMLファイルに記述するタグで、

ページ遷移するためのジャンプリンクによく使用されるタグです。

私自身HTMLがわかっていませんので、設定方法だけ解説します。

ジャンプ先、目的地設定

表示一例
表示一例

※設定は、ビジュアルエディター、トップツールバーです。

(おそらく表示はテーマによって異なると思いますので参考まで)

①まず飛ばす先(ジャンプ先)のブロックを選びます。

※分かりやすくするため、見出しを選んでみてください。

②選んだら(飛ばしたい見出しをクリックしたら)、

 右側ブロックメニューからおそらく一番下に表示される「高度な設定」をクリックします。

③「高度な設定」の一行下HTML アンカーの空欄に好きな文字を入力します。

 今回は仮に「out1」と入力します。

私の場合は、英小文字3つ+数字で統一しています。全て半角です。

出発点設定

①目的地が決まったら、次は出発点となる単語にリンクを設定します。

②リンクを設定したい場所(テキスト)を選択し,

 上部メニューの「リンクの挿入」ボタンをクリックします。

(カーソルで文字を選んで、Ctrlキー+kでもできます)

③表示されるURL入力欄に「 #〇〇〇 」( 〇〇〇は任意の文字)を入力していきます。

 今回は例として先ほど設定した「 #out1 」と入力します。

 入力したら右のエンターマークをクリック。これでリンクが挿入されました。

以上でページ内リンク(アンカーリンク)が設定出来たはずです。

プレビューしてちゃんと飛ぶかどうか確認してみて下さい。

上手く設定出来ないとき

上手くジャンプしないときは次のポイントを確認してみましょう。

注意点
 
  • アンカーリンクに入力する任意の文字はページ内で重複がないようにする

    ある意味当然ですね。順番に数字を振るだけでもいいかなと。
     
  • 文字の大文字,小文字は区別される

    小文字で統一した方が間違いが少なくなります
     
  • 任意の文字に「スペース」は利用できない
     
  • アルファベットから始める
      
  • #に注意、半角です。うまくいかない時はシャープをいろいろ試して見て下さい

別ページ内の特定場所にもリンクを貼れる

アンカーリンクは同じ記事内だけでなく、別ページにもジャンプさせることができます。

  • ページURLが「https://fumitakablog.com/post/」で、
  • HTMLアンカーに「out2」を設定した場所

をリンク先とする場合には、「https://fumitakablog.com/post/#out2」と入力します。

記事内リンク まとめ

一気に最後のまとめに飛んできた(ジャンプした)と思います。

こんな感じで使います。

これで記事内リンク(アンカーリンク、ページジャンプ)のイメージがつかめたと思います。

元に戻る時はこちら

※クリックするとスタート地点の次の行へ戻ります(ジャンプします)。

記事内にリンクを設定して飛ばせるようにすると、読者も便利ですし

記事の構成もしやすくなります。

慣れれば簡単な方法ですが、設定方法にたどり着くまでが一苦労ですね^^;

最初はなかなかうまくいかないと思いますが、ぜひ活用してみて下さい。

この記事を書いた人 文貴(fumitaka)


・ブロガー:2021年9月ブログ開設  

・投資家:日本株投資歴38年
     つみたてNISA、iDeCoにてインデックス積立中
     
・フリーランス:2021年早期退職し、バリスタ(サイド)FIREへ


  PVアクセスランキング にほんブログ村

  文貴ブログ|日々徒然なるままに - にほんブログ村

コメント

タイトルとURLをコピーしました