[WordPress] 脚注のプラグインを入れてCSSを変更した【Easy Footnotes】

2023.04.082024.01.14

脚注のプラグインを入れました。
定番の「Easy Footnotes」です¹。

[WordPress] 脚注のプラグインを入れてCSSを変更した【Easy Footnotes】

脚注のメリットは、根拠を添えておけることだよね。

1. Easy Footnotesのショートコード（efn_note）

「Easy Footnotes」は、プラグインの追加で検索するとインストールできます。

段落ブロック内にショートコードを挿入すると、脚注になります。

²

マウスポイントでツールチップ³が表示されるのと、記事末尾に注記が並びます。

スマホだと、脚注へのリンクだけだね。

目次に戻る

2. CSSを変更した

CSSを追加して、自分好みのデザインに変更しました。

注釈はカッコで囲んで、不要な下線をなくしました。

脚注は、全体的に文字・余白を小さくして、戻るリンクを上向き矢印にしました。

CSSのポイントは、
「user-select: none」で コピー時に文字列に含まれないようにしたこと⁴。
「font-weight: 900」で Font Awesome 5.0 Free の絵柄が表示されるようにしたこと⁵。

Font Awesomeのアイコンフォントがなかなか表示されなくて戸惑ったね。

フォントウェイトが違うだけで非表示になるんだね。

本文中に挿入される注記は、.easy-footnote クラスで表示されます。

/** Easy Footnote のスタイル*/


/** 本文中の注記 */

.easy-footnote a:where(:not(.wp-element-button)) {
  text-decoration: none;
}

.easy-footnote sup {
  user-select: none;
  font-size: 60%;
}
.easy-footnote sup::before {
 content: "(";
}
.easy-footnote sup::after {
 content: ")";
}

本文後に挿入される脚注は、.easy-footnote-title（見出し）と、.easy-footnote-wrapper（リスト）です。

/** 脚注のスタイル */

.easy-footnote-title {
  padding-left: 0.65em;
  margin-bottom: 0;
}

.article .easy-footnote-title h4 {
  font-size: 11.5px;
  margin-bottom: 0;
  padding-bottom: 0;
}

ol.easy-footnotes-wrapper {
  padding-left: 48px;
  font-size: 13px;
}

a.easy-footnote-to-top {
  text-decoration: none;
}

a.easy-footnote-to-top:after {
  content: '\f062';
  font-family: 'Font Awesome 5 Free';
  text-decoration: none;
  font-weight: 900;
}

脚注のリンクは、印刷時には非表示にしました。

/** 印刷時の脚注の非表示*/
@media print {
	.easy-footnote, .easy-footnote-title, .easy-footnotes-wrapper{
		display:none;
	}
}

目次に戻る

3. 【追記】アイコンリストの方を脚注に合わせた（スマホサイズ）

画面幅が 834px以下になったとき、アイコンリストと脚注のスタイルに違いが出ていたので、アイコンリストに「.has-small-font-size」があるときに余白を減らすようにしました。

/** スマホ用の脚注に合わせてリスト 2024-01-14*/
@media screen and (max-width: 834px) {
	.iconlist-box.has-small-font-size {
		padding-left: 22px;
	}
	.iconlist-box.has-small-font-size ol, .iconlist-box.has-small-font-size ul {
		padding-left: 0px;
	}	
	.iconlist-box.has-small-font-size li::before {
		margin-left: -1em;
	}	
	.iconlist-box.has-small-font-size .iconlist-title {
		padding-left: 0px;
		margin-left: -4px;
	}
}

こちらもどうぞ。