【WordPress】footnotesのカスタマイズ方法【footnotes】

こんにちは！hogawishです！
こちらの記事の続きを書きたいと思います

⇒【WordPress】脚注を付けるプラグインを導入してみた【footnotes】

footnotesのデフォルト設定

下の画像が、footenotesのデフォルト設定でそのまま脚注を付けた状態です

さて、いくつか直したいところがあります。

１、まず説明語句のインデックス番号がやや高い位置についてしまっていて、上の行に微妙にかぶってしまっています。

２、英語になっているので、これでは僕がまるでアメリカかぶれなのかと勘違いされかねません。

３、この矢印の意味が初めて見た読者にはわかりにくいです。

3の矢印は読んでいた本文の位置までウィンドウを戻してくれるボタンです。わかりやすいように『本文へ』あたりに書き直しましょうか。

まずは、簡単に直せる２，３から修正していきましょう。

footnotesの設定画面

さて、footenotesをインストールしたら、Worspressのダッシュボードの下の方に『ManFisher』という項目が追加されているはずです

『ManFisher』>『footenotes』と選択すると、footnotesの管理画面を開けます。

上が設定画面のsettingタブです。 １のReference labelで脚注のタイトル、デフォルトではReferencesとなっている部分を修正できます。ここを脚注に書き換えましょう。
これで、日本語表記にできました。

２、のFootnote tag starts with:とand ends with:では本文中脚注にしたい部分をくくる文字列を編集できます。前記事に書いていますが、デフォルトでは（（ここに説明を書く））のように半角二重かっこでくくることになっています。スクリプトの関係でエラーが出ることがあるらしいので、その時は違う文字列でくくるように設定するといいかもしれませんね。

３、のCounter style:では、脚注の通し番号のつけ方を選べます。

次にCustomizeタブを開いてみましょう。

いろいろと設定できますが、今回直したい部分はここ

or enter a user defined symbol:のところへ『本文へ』という文字列を書き込みましょう。これで『↑』が『本文へ』に置き換わります。

それぞれ編集を終えた後がこちら

さて、後はインデックス番号の位置の修正ですね。

インデックス番号の位置の修正

さて、こういった文字の位置などの設定はCSSファイル¹⁾CSS:ホームページの文字色、フォント、レイアウトなどを決めるための言語で決めています。 なので、footnotesのcssファイルをいじらないといけません。

『ダッシュボード』＞『プラグイン』＞『プラグイン編集』で『編集するプラグインを選択』の欄で『footnotes』を選択します。

すると、図のようにfootnotes/css/settings.css と、footnotes/css/public.cssの二つがあるようです。

該当箇所に関係するのがどちらかはわかりませんが、このどちらかを編集することになりそうです。

該当箇所のセレクタ²⁾セレクタ:CSSでスタイルを設定するときに、どこに設定するかを決めるものを特定するには、ブラウザの要素の検証機能が便利です。

こちらの記事を参考にしてみてください
⇒【STINGER PLUS】ドロップダウンメニューがずれた時の対処法。
そして調べていくと<sup class=footnote_plugin_tooltip_text> という要素でくくられていることが分かります。

なので、セレクタ『.footnote_plugin_tooltip_text』あたりを探しましょう。

探してみると、footnotes/css/public.cssにありました。

相対配置³⁾相対配置:CSSのpositionプロパティの設定の一つ。ほかの要素に影響をあたえないで、位置をずらすことができる。にして、top⁴⁾top:CSSのpositionプロパティの値の一つ。上から下へのずれ具合を設定できる。今回はマイナスになっているので下から上へずれているにマイナスの値を設定することにより、上にずらしているようです。

フォントや行間の設定によってはちょうどよいのでしょうが、僕が使っているSTINGER　PLUSではちょっと高すぎるようです。

いろいろと、修正の方法はあるでしょうが、今回は単純にtopの値を調整して、ジャストな位置に来るように設定しましょう。

調整の結果0.4em⁵⁾em:cssで使う長さの単位。1emが一文字分の長さにあたるあたりがちょうどよいみたいです。

修正の結果がこちら

みなさんのお使いのテーマに合わせて調整してみてください。

まとめ

さて、かなり便利な脚注プラグイン『footnotes』みなさんも導入してみてはどうでしょうか？

またカスタマイズしたら逐一記事にしていきたいと思います！

そして、新曲も残すところ動画編集作業を残すのみとなりました！

近いうちに公開できればとおもいます。

それではまた！

-plugin, Wordpress
-footnotes, plugin, Wordpress, カスタマイズ, 脚注