AFFINGER ブログ

【アフィンガー6】ページ内リンクを作る方法【画像付きで解説】

2022年10月7日

この記事はアフィリエイト・アドセンス広告を利用して作成しています。

この記事で解決できるお悩み

  • AFFINGER6でページ内リンクを作りたい!
  • 記事内をスキップさせる方法が知りたい
  • 記事内のテキストをクリックして、目的の見出しへジャンプさせるには?

 

きくやん
このようなお悩みを解決できる
記事を書きました。

 

この記事を読めば、記事内リンクを
使いこなせるようになりますよ!

 

手っ取り早く、「記事内リンクの作り方」だけ
知りたい方はこちら

 

本記事の内容

記事内リンクとは

記事内リンクの作り方

おまけ:記事内リンクの応用

 

記事内リンクとは

記事内リンクとは、ページ内の特定箇所に
リンクできる機能のこと。

 

記事内リンクを使いこなすことで、
目的の情報にすぐアクセスできるようになり、
ユーザーの離脱率が下がります。

 

例えばこの記事を読んでいる人は、
「記事内リンクの作り方」という情報が
知りたいはずです。

 

前半部分にいらない情報がダラダラと
書いてあるとウザいですよね。

 

スキップしたくなるはず。

 

記事内リンクの作り方

・プラグインありで作る方法

・プラグインなしで作る方法

を紹介します。

 

さっさと「プラグインなしで作る方法」が
知りたい方はこちら

 

プラグインありで作る方法

①ジャンプさせたいテキストを選択して、
リンク挿入を押す。

②#abcと入力➡︎適用。
いったん更新で保存しておく。

テキスト選択、リンク挿入

ポイント

abcの部分はローマ字ならなんでもいいです。

1や2などの数字はNGです。

プラグイン➡︎新規追加より、
Advanced Editor Tools(旧TinyMCE Advanced)
インストール。

今すぐインストール

 

有効化➡︎設定をクリック。

有効化、設定

 

下へスクロールし、
アンカーをドラッグ&ドロップ➡︎変更を保存

アンカーをドラッグ&ドロップ

 

①記事に戻り、ジャンプで飛んでくる場所を選択。

挿入➡︎アンカーをクリック。

挿入、アンカーをクリック

 

abcと入力➡︎OK。

abcと入力

 

プレビューで動作確認をします。

プレビュー

 

プラグインなしで作る方法

①ジャンプさせたいテキストを選択して、
リンク挿入を押す。

②#abcと入力。

#abcと入力

 

ポイント

abcの部分はローマ字ならなんでもいいです。

1や2などの数字はNGです。

 

③テキストエディタに切り替えます。

④ジャンプで飛んでくる場所に
下記のHTMLを入力。

<a id=”abc”></a>

HTMLを入力

 

注意ポイント

<a id=”#abc”></a>としないように

 

プレビューで動作確認をします。

 

プレビュー

おまけ:記事内リンクの応用

・他ページの特定部分へジャンプさせる方法

について紹介します。

 

興味のある方は、読んでみてくださいね。

 

他ページの特定部分へジャンプさせる方法

クリックで他のページの特定部分に
ジャンプします。

 

#demoの前に、他ページのURLを入れるだけ。

 

他ページの特定部分へジャンプ

 まとめ

記事内リンクの作り方について解説しました。

 

記事内リンクを活用して、
読みやすい記事を量産しちゃってください!

-AFFINGER, ブログ