WordPress ブログの投稿に脚注を追加する方法

Last Updated: 2023 年 08 月 06 日 2のコメント
無料電子ブック AdSense ウェビナー

脚注は、文章を作成するときに、本文内の特定の部分の情報を補足したり、ソースを明らかにするために本文の下部に入力されるコメントです。 脚注は論文や法律書などでよく使われますが、ウィキペディア、木ウィキなどのサイトでも使われています。

WordPressでは、プラグインを使用して簡単に脚注を追加できます。 プラグインを使用したくない場合は、簡単な方法で脚注を付けることができます。 この記事では、プラグインを使用せずに脚注を取得する方法について説明します。

WordPress ブログの投稿に脚注を追加する方法

プラグインを使用して WordPress ブログの投稿に脚注を付ける方法

WordPress無料または有料プラグインを使用して簡単に機能を拡張できます。 無料脚注プラグインとして、次のプラグインがあります。

Easy Footnotes와 Footnotes Made Easyはプラグインの説明ページがハングルに翻訳されているため、韓国語ページでこのプラグインの機能説明を確認できます。

これらXNUMXつのプラグインは、木製ウィキやウィキペディアの脚注システムと同様に吹き出しが表示されます。

WordPress 脚注プラグイン

簡単に脚注を付けたい場合は、これらのプラグインをインストールしてテストしてください。

ただし、プラグインを使用する場合、今後プラグインアップデートができずに放置されたり WordPress プラグインリポジトリから削除することもできます。 例えば、 脚注という脚注プラグインがありましたが、2022年11月に削除されました。【1]

プラグインを使わずに手動で WordPress ブログの投稿に脚注を付ける方法

WordPressで脚注を取る方法はHTMLを少し知れば簡単に可能です。 デフォルトでは、次の方法で脚注を付けることができます。

  1. まず、本文の下部にHTMLアンカーリンクで脚注（Footnote）を作成します。
  2. 上付き文字でアンカー番号を追加し、リンクを設定します。
  3. 上記の手順を繰り返して、すべての脚注を作成して保存します。
  4. 訪問者が脚注番号をクリックすると、その番号に対応する脚注に移動します。

本文の下部にHTMLアンカーリンクで脚注を作成する

本文の下部に脚注テキストを入力し、対応するブロック設定でHTMLアンカーを指定します。【2]

WordPress 脚注

例では、便宜上、HTMLアンカー footnote - 数値（例：footnote-1、footnote-2）として指定しました。

脚注番号を追加する

次に、脚注番号が表示される部分に[1]、[2]...などの形式で脚注番号を追加します。

WordPress 脚注を追加する

上の図のように上付き文字を適用すると、番号が上付き文字として表示されます。

番号を作成して上付き文字スタイルを適用したら、その番号を選択してリンクアイコンをクリックしてリンクを設定します。 (Ctrl+K ショートカットを使って簡単にリンク設定も可能です。)

WordPress 脚注を作成する

前のステップで、脚注に入力したHTMLアンカーテキストをリンクとして入力します（例：＃footnote-1、＃footnote-2、...）。

訪問者が脚注番号をクリックすると、下の脚注に移動します。

(オプション)脚注内容のプレビュー

ウィキペディア（Wikipedia）や木ウィキでは、脚注番号の上にマウスを置くと脚注の内容がポップアップボックスで表示されます。

WordPress ブログの投稿に脚注を追加する方法

上の図のように脚注コンテンツのプレビューを可能にしたい場合は、次のJavaScript（JavaScript）を使用できます。

// This script displays a tooltip with footnote content.
// Wait until the document is fully loaded before executing the script
document.addEventListener("DOMContentLoaded", function() {
  // Create a new div element for the tooltip
  var tooltip = document.createElement("div");

  // Assign the 'tooltip' class to this div, 
  // which applies the tooltip styles defined in the CSS
  tooltip.className = 'tooltip'; 

  // Add the tooltip div to the body of the document
  document.body.appendChild(tooltip);

  // Find all anchor tags where the href attribute starts with '#footnote'
  document.querySelectorAll("a[href^='#footnote']").forEach(function(anchor) {
    // Extract the innerHTML of the footnote corresponding to this anchor tag
    var footnoteContent = document.querySelector(anchor.getAttribute('href')).innerHTML;

    // When the mouse hovers over the anchor tag, display the tooltip
    anchor.addEventListener('mouseover', function() {
      tooltip.innerHTML = footnoteContent; // Set the content of the tooltip
      tooltip.style.display = 'block'; // Display the tooltip
    });

    // When the mouse moves over the anchor tag, move the tooltip
    anchor.addEventListener('mousemove', function(e) {
      tooltip.style.top = (e.pageY - tooltip.offsetHeight - 10) + 'px'; // Set tooltip position
      tooltip.style.left = (e.pageX - (tooltip.offsetWidth / 2)) + 'px'; // Set tooltip position
    });

    // When the mouse stops hovering over the anchor tag, hide the tooltip
    anchor.addEventListener('mouseout', function() {
      tooltip.style.display = 'none'; // Hide the tooltip
    });

    // When the anchor tag is clicked, smoothly scroll to the footnote
    anchor.addEventListener('click', function(event) {
      event.preventDefault(); // Prevent the default click action
      // Scroll to the footnote element, with smooth scrolling enabled
      document.querySelector(this.getAttribute('href')).scrollIntoView({
        behavior: 'smooth'
      });
    });
  });
});

上記のスクリプトには、脚注番号をクリックしたときにスムーズに移動するコードも含まれています。

脚注番号はfootnote-1など footnote - 数値ある場合に動作するようにコードが作成されました。 脚注番号の規則が異なる場合（例：fn-1、fn-2...）は、上記のコードを適切に修正してください。

そして、次のカスタムCSSコードを ルックス » カスタマイズ » 追加 CSSに追加します。

/* This style block is for tooltips created by our JavaScript script */

.tooltip {
  display: none; /* Initially the tooltip is not displayed */
  position: absolute; /* The tooltip is positioned absolutely to its nearest positioned ancestor */
  border: 1px solid #333; /* The tooltip has a border that is 1px wide, solid, and dark grey */
  background-color: #161616; /* The tooltip's background color is a darker grey */
  border-radius: 5px; /* The tooltip's corners are slightly rounded */
  padding: 10px; /* The tooltip has a bit of padding to give space around the text */
  color: #fff; /* The color of the tooltip text is white */
  font-size: 12px; /* The size of the tooltip text is 12 pixels */
  z-index: 100; /* The tooltip will appear on top of other positioned elements that have lower z-index */
  max-width: 300px; /* The maximum width of the tooltip is 300 pixels. Adjust to your preference */
  word-wrap: break-word; /* If the tooltip text is too long to fit, it will break onto the next line */
  overflow-wrap: break-word; /* More modern version of word-wrap, does the same thing */
  hyphens: auto; /* If the text breaks onto a new line, insert a hyphen. Not fully supported in all browsers */
}

コードを適切に修正して、好きなスタイルにしてください。

上記のスクリプトとCSSコードを適用すると、次の画像と同様に機能します。 GeneratePress テーマでテストしました。 テーマに関係なく、上記のJavaScriptコードとCSSが正しくロードされ、ブログの投稿で脚注を正しく追加した場合は、うまく機能します。

脚注を使ってもいいですか？

脚注は旧時代であり、もはや必要ではないと主張する人もいます。 特にWebではハイパーリンクを付けることができるため、脚注は必要ありません。 追加情報もすぐ下に追加することも可能です。 ただし、場合によっては、脚注を使用して本文の下部に追加情報を入力する方が効率的かもしれません。

脚注でソースサイトを表記する場合、脚注のリンクをクリックして外部サイトに移動し、離脱率が増える恐れがある場合や、脚注を追加することが煩わしく思われる場合でも脚注の使用を避けることが望ましいでしょう。

脚注を使用する場合は、本文の読みやすさを高め、SEOの改善に役立つように適用する方法について心配してみるのも良いようです。

[1]。 プラグインにセキュリティの脆弱性が見つかり、期間内に修正されない場合、プラグインは WordPress リポジトリから削除できます。 場合によっては、プラグイン開発者の要求によって削除されることがあります。

[2]。 HTMLアンカーは、同じページまたは他の特定の場所のテキストまたは画像へのリンクを識別するHTMLタグです。 WordPressでは、各ブロック設定の詳細セクションで設定できます。 Gutenberg 当初は一部のブロック（タイトルブロックなど）にのみアンカー設定が可能でしたが、現在はすべてのブロックに設定できるように更新されました。

参照

2のコメント

コメント