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

この記事はこんな人におすすめです
 
  • ブログ初心者
      
  • 記事内リンクを作成したい人
     
  • 記事内の有る部分を飛ばして読ませたい人

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

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

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

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

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

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

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

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

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

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

ぜひ使ってみてください。きっと役に立ちますし、何かと便利です(^^)

ページ内リンクって何?

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

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

では順番に説明していきます。まとめだけ知りたい人はこちら。

※クリックするとまとめページに飛ぶように設定しています。

記事内リンク設定方法

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

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

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

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

ジャンプ先、目的地設定

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

②選んだら(カーソルをクリックして)、

 右側ブロックメニューから「高度な設定」をクリックします。

③HTML アンカーの空欄に好きな文字を入力します。今回は仮に「out1」と入力します。

出発点設定

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

②リンクを設定したい場所を選択し,リンクの挿入をクリックします。

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

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

 今回は例として,「 #out1 」と入力します。これでリンク設定終了です。

注意点
 
  • アンカーリンクに入力する任意の文字はページ内で重複がないようにする
    ある意味当然ですね。順番に数字を振るだけでもいいかなと。
     
  • 文字の大文字,小文字は区別される
    小文字で統一した方が間違いが少なくなります
     
  • 任意の文字に「スペース」は利用できない
     
  • アルファベットから始める
      
  • #に注意、半角です。うまくいかない時はシャープをいろいろ試して見て下さい

これで設定出来たはずです。プレビューしてちゃんと飛ぶかどうか確認してみて下さい。

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

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

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

記事内リンク まとめ

最後のまとめに飛んできたと思います。

こんな感じで使います。

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

※スタート地点の次の行へ戻ります。

元に戻る時はこちら

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

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

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

ぜひ活用してみて下さい。

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

・ブロガー:ブログ収益 5桁/月    

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


コメント

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