ホーム » カスタマイズ・メモ » MT-plugin » footnote pluginによる脚注編集

footnote pluginによる脚注編集

ブログを書いていると脚注に用語の説明を任せられれば文章の流れがすっきりしていいなと思うことがあります。そんな時に文書の流れの中で違和感なく脚注を編集してくれるfootnote pluginが便利です。

Open MagicVox.netのぴろりさんの公開しているMovable Type向けのプラグインで、導入も簡単に出来ました。

尚、本文の脚注番号から脚注へのジャンプ、その逆のジャンプにはスロー・スクロール機能を加えています。

  1. 脚注を記述できる MovableType プラグイン:Footnote」のページに使い方の詳しい説明があります。その下のダウンロードの説明にある方法でfootnote.plファイルをダウンロードして、Movable Typeのpluginsフォルダにアップロードします。

  2. 次に、テンプレート・タグEntryBody、EntryMore、PageBody、PageMoreに脚注文を収集するグローバル・フィルタを設定します。当サイトの場合は引数2つをそのまま与えています。

    
    (ブログ記事編集テンプレート)
    
    ~
    <mt:EntryBody gather_footnote="<sup>%s</sup>","*%d" />
    ~
    <mt:EntryMore gather_footnote="<sup>%s</sup>","*%d" />
    ~
    
    (ブログ記事リスト編集テンプレート)
    
    ~
    <mt:EntryBody gather_footnote="<sup>%s</sup>","*%d" />
    ~
    
    (ページ・アーカイブ編集テンプレート)
    
    ~
    <mt:PageBody gather_footnote="<sup>%s</sup>","*%d" />
    ~
    <mt:PageMore gather_footnote="<sup>%s</sup>","*%d" />
    ~
    
  3. 収集した脚注文を編集する処理をブログ記事編集テンプレートとページ編集テンプレートに加えます。当サイトの場合はエントリー・タグを編集する処理の前に挿入しています。黄色の部分は後述のスロー・スクロールのためのクラス指定です。

    
    <mt:IfFootnotes>
              <mt:Footnotes>
                  <mt:FootnotesHeader>
                      <div class="footnotes"><ul>
                  </mt:FootnotesHeader>
                      <li><a id="<mt:FootnoteAnchor />" href="#<mt:FootnoteRefer />" class="slowscroll">*<mt:FootnoteCount /></a>&nbsp;&nbsp;<mt:FootnoteText /></li>
                  <mt:FootnotesFooter>
                      </ul></div>
                  </mt:FootnotesFooter>
              </mt:Footnotes>
    </mt:IfFootnotes>
    

    ブログ記事リスト編集テンプレートには収集結果を編集する処理を加えていません。デザイン的にどうもよろしくないのが理由です。本文に埋め込まれる脚注番号からのジャンプ先が無くなるのですがHTML上の処理には問題が出ていません。

  4. 本文に埋め込まれた脚注番号から脚注へのジャンプ、脚注から本文に戻るジャンプをスロー・スクロールさせるため以下のjavascriptを使っています。

    
    <script type="text/javascript">
           jQuery(function() {
               jQuery('.slowscroll').click(function(event){
                   event.preventDefault();
                   var url = this.href;
                   var parts = url.split("#");
                   var target = parts[1];
                   var target_offset = jQuery("#"+target).offset();
                   var target_top = target_offset.top;
                   jQuery('html, body').animate({
                        scrollTop:target_top}, 1000);
               });
           });
    </script>
    

    footnote.plにもスロー・スクロールのためのクラス指定を行うカスタマイズを加えています。
    対象のバージョンは 0.00_01。50行目に黄色で示す部分を加えています。

    
        $text =~ s!<($tag)>\(?(.*?)\)?</\1>!sub {
            push @$footnotes, $_[0];
            my $index = scalar @$footnotes;
            sprintf $format->[0],
                sprintf qq{<a title="%s" id="$refer" href="#$anchor" class=\"slowscroll\">$format->[1]</a>},
                    MT::Util::encode_html($_[0]), $index,$index, $index;
        }->($2)!ge;
        $ctx->stash ($MYNAME. qq{::footnotes}, $footnotes);
        $text;
    });
    
  5. 当サイトでのCSSは以下の通りです。適宜修正してください。

    
    .footnotes {
        margin: 5px 0 10px 0;
        padding: 5px 0;
        border-top: 1px dotted #999999;
    }
    .footnotes ul li {
        margin-left: -13px;
        list-style: none;
    }
    

以上です。

pocket このエントリーをはてなブックマークに追加 ブログランキング 花 にほんブログ村 写真ブログ 風景写真へ

トラックバックURL

このエントリーのトラックバックURL:
https://www.mizunara.com/cgi-bin/mt/mt-tb.cgi/1156

コメントする