WordPressのfootnotesプラグインで脚注をつける

Wikipediaみたいに文章に脚注をつけたいなと思いプラグインを探していたら、footnotesというプラグインがあったので早速インストールして適用してみました。

脚注番号前後の文字

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88_2016-10-18_22_11_53

脚注の見出し

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88_2016-10-18_22_12_04

脚注説明文として認識される文字列を囲むタグ

デフォルトは、(())となっているようです。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88_2016-10-18_22_12_09

脚注スタイルのカスタマイズ

おそらくCSSスタイルを修正するケースが多いと思います。プラグインの設定ページでCSSを指定できます。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88_2016-10-18_22_12_22

私のページではこんな風にカスタマイズしてみました。

脚注[1]脚注の例ですの例です。脚注[2]脚注の例ですの例です。脚注[3]脚注の例2ですの例2です。脚注[4]脚注の例3ですの例3です。

同じ脚注説明の場合は、1つにまとめられるようです。

.footnote_container_prepare > p {
    border: none !important;
}

.footnote_container_prepare > p > span:first-child {
    padding-left: 0 !important;
}

.footnote_plugin_index {
    width: 4% !important;
}

.footnote_plugin_link {
    width: 2% !important;
}

.footnote_plugin_text {
    width: auto !important;
}

#footnote_references_container table {
  margin-left: 10px;
}

#footnote_references_container table tr > th, 
#footnote_references_container table tr > td {
    border: none !important;
    padding: 5px;
}

#footnote_references_container table {
    table-layout: auto;
}

.footnote_plugin_link, .footnote_plugin_tooltip_text {
    pointer: coursor;
    color: #0073a8;
}

.footnote_plugin_tooltip_text {
    top: 0.5em !important;
}

.footnote_plugin_tooltip_text {
    padding: 2px;
}

脚注   [ + ]

1, 2. 脚注の例です
3. 脚注の例2です
4. 脚注の例3です

byebyehaikikyou

日記やIT系関連のネタ、WordPressに関することなど様々な事柄を書き付けた雑記です。ITエンジニア経験があるのでプログラミングに関することなどが多いです。

シェアする

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

コメントする

Translate »