WORDPRESS

WordPressプラグイン「footnotes」の基本的な使い方と設定方法【ブログに脚注・注釈を挿入】

WordPressプラグイン「footnotes」の基本的な使い方と設定方法 アイキャッチ



今回は、WordPressブログにおける便利なプラグインの1つ…

footnotes

の導入手順や基本的な使い方・設定方法をご紹介していきたいと思います

まず「footnotes」は、ブログ記事のなかへ「脚注(注釈)」を手軽に挿入できる便利なプラグインです

具体的には…

wp-footnotes-202001_1-06

↑ こんな脚注を作れるようになります

デザインのパターンもいくつかあり、使い方や設定も非常に簡単です

それではさっそく見ていきましょー🐥

プラグインの種類によっては、導入済みのテーマや他のプラグインとの干渉などでWordPressに不具合が発生する可能性があります。 プラグインのご利用にあたっては、あらかじめのバックアップをおすすめします

関連:WordPressプラグイン「BackWPup」の基本的な設定方法【ブログに必須なバックアップ】

このブログのWordPress環境

\「本気」で収益化するなら /

WING AFFINGER5 バナー 02

今なら超時短ツール「タグ管理プラグイン」の無料配布キャンペーン中!

About me

あずきアイコン main-01 背景透過

- 専業ブロガー・フリーランス -

あずき

独立3年目 / 元アパレル → 歴10年

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます

普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^

Twitter

WordPressプラグイン「footnotes」の導入手順【インストールと有効化】

pc-work-202001_01

普通に「インストール&有効化」をするだけなので、わかる方は読み飛ばしていただいてOKです

① WordPress管理画面 > プラグイン > 新規追加

② 画面右上の入力欄に「footnotes」と入力

wp-footnotes-202001-icon

③ ↑ のアイコンが目印の「footnotes」が表示されるので、 今すぐインストール > 有効化 の順にクリック

プラグインの導入はこれでOKです

今度は基本的な使い方を見ていきましょう🐥

WordPressプラグイン「footnotes」の使い方と設定手順【脚注・注釈の挿入とデザインカスタマイズ】

大きく次の2つにわけて見ていきたいと思います

  • 基本的な使い方(脚注の挿入手順)
  • デザインなどのカスタマイズ設定方法

まずは使い方から見ていきますね🐥

基本的な使い方(脚注の挿入手順)

pc-work-202001_02

今回は一例として…

wp-footnotes-202001_1-06

↑ このような脚注を作ってみたいと思います

wp-footnotes-202001_1-01

↑ まず投稿編集の画面を開いたら、本文欄にベースとなるテキストを入力します

ここまでは普通!

次に、 Blog1)が好きです の 1) にあたる場所へ、その説明(=脚注)となるテキストを…

wp-footnotes-202001_1-02

↑ このような形で、直接そのまま入力します

この時点では意味不明な一文になっちゃってるけど、気にしないでOK

wp-footnotes-202001_1-03

↑ つづいて、この説明(=脚注)部分をマウスで選択しましょう

選択したら、上部に表示されているアイコン一覧から fn というデザインのボタンをクリックします

この「fn」が、「footnotes」の専用アイコン!

すると…

wp-footnotes-202001_1-04

↑ 選択済みのテキストが、 ((   )) の二重括弧で自動で囲われます

実感はまるでないですが、実はこれでもう脚注は完成しています

プレビュー画面でチェックしてみると…

wp-footnotes-202001_1-05

↑ このように、脚注の記号 1) と、ページ末尾にその「説明文」が反映されてます

注意ポイント

「footnotes」を導入すると、fn ボタンを使わずに直接 ((  )) を手入力しても、同じように脚注は自動で生成されます

普段の記事作成で、((  )) をこの脚注以外の目的で使うシーンはめったにないと思いますが、念のためご注意ください

ちなみにこの ((  )) の記号は、任意のタグに変更することもできます(次パートへ!)

同じ流れで、脚注をもう1つ加えると…

wp-footnotes-202001_1-06

↑ 2つ目の脚注は、ちゃんと 2) となって自動でナンバリングされました

基本的な使い方はこれでOKです

今度は、この脚注のカスタマイズ方法を見ていきましょう🐥

デザインなどのカスタマイズ設定方法

pc-work-202001_03

基本的なカスタマイズ項目は、次の3つです

  • 「References」の文言を変更!
  • ナンバリングのパターンを変更!
  • ((  )) のタグを変更!

順に見ていきましょう🐥

wp-footnotes-202001_2-01

↑ WordPress管理画面 > ManFisher > footnotes をクリックします

wp-footnotes-202001_2-02

↑「References label」の項目で…

wp-footnotes-202001_2-03

↑ この脚注タイトルを変更できます。 今回は一例として…

wp-footnotes-202001_2-04

↑「脚注」としてみました

実際のプレビュー画面は、あとでまとめて紹介するよ!

wp-footnotes-202001_2-05

↑ つづいて「Counter style」の項目で…

wp-footnotes-202001_2-06

↑ この脚注のナンバリングを、いくつかのパターンから指定できます。 今回は一例として…

wp-footnotes-202001_2-07

↑ この「A, B, C, D, E, …」を選択してみます

最後に…

wp-footnotes-202001_2-08

↑ この「Footnote tag starts with」「and ends with」の2項目で、脚注を生成する際の記号(タグ)を変更できます

もし脚注以外で ((  )) の記号を普段使うことがあるなら、ここの設定で別の記号に変えてあげればOK!

設定ができたら、「変更を保存」を忘れずにクリックして完了です

プレビュー画面でチェックしてみると…

wp-footnotes-202001_2-09

↑ 脚注タイトルとナンバリングが、無事変更されました

今回の「footnotes」の解説は、これで以上です

大変お疲れさまでした♪

あずき🐥

\「本気」で収益化するなら /

WING AFFINGER5 バナー 02

今なら超時短ツール「タグ管理プラグイン」の無料配布キャンペーン中!

About me

あずきアイコン main-01 背景透過

- 専業ブロガー・フリーランス -

あずき

独立3年目 / 元アパレル → 歴10年

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます

普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^

Twitter

-WORDPRESS

© 2020 あずきのぶろぐ