TopMovable Typeカスタマイズ折りたたみ追記 > 2006年1月
2006年1月17日

エントリー・アーカイブの追記文章の折りたたみ(改)

January 17,2006 11:53 PM
Tag:[, , ]
Permalink

以前から公開している個別アーカイブに「続きを読む」を導入ですが、このカスタマイズを行うと JavaScript を OFF にした場合、追記文章が読めないという不具合が残っていました(今更ですいません)。

もともとこのスクリプトのオリジナルはscriptygoddessanother revision to the show/hide scriptで、折りたたみを戻す時に指定したアンカー位置にずれないためのカスタマイズ方法を公開していました。その後エントリー・アーカイブでも折りたためますという記事を書いたのですが、当時はアクセシビリティまで考えが及んでおりませんでした。

このスクリプトをメインページ・カテゴリー・アーカイブ・月別アーカイブに導入されている場合は、JavaScript が OFF でもエントリー・アーカイブにジャンプするように作られています(オリジナルからそうなっています)。ただしジャンプした先のエントリー・アーカイブで折りたたみを導入していると読めなくなるケースが発生します。

このエントリーではその点も踏まえ、また 3.2-ja に合わせて過去の記事を書き直してみました。
追記が読めない状態はアクセシビリティ上良くないため、すでに導入されている方は、下記の2項の青色部分を追加されることをお勧めします。

1.JavaScript の追加

エントリー・アーカイブテンプレートの編集画面を開き、<head>~</head> の間に下記を追加します。

<script type="text/javascript">
<!--
function showHide(entryID, entryLink, htmlObj) {
    extTextDivID = ('Text' + (entryID));
    extLinkDivID = ('Link' + (entryID));
    if( document.getElementById ) {
        if( document.getElementById(extTextDivID).style.display ) {
            if( entryLink != 0 ) {
                document.getElementById(extTextDivID).style.display = "block";
                document.getElementById(extLinkDivID).style.display = "none";
                htmlObj.blur();
            } else { 
                document.getElementById(extTextDivID).style.display = "none";
                document.getElementById(extLinkDivID).style.display = "block";
            }
        } else {
            location.href = entryLink;
            return true;
        }
    } else {
        location.href = entryLink;
        return true;
    }
}
//-->
</script>

なお、テンプレートにスクリプトを直接埋め込むよりも、外部ファイルにした方が良いでしょう。

外部ファイルにする場合は、上記リストから先頭と末尾の script タグを削除し、任意のファイル名(拡張子は ".js")で保存し、そのファイルを index.html があるディレクトリにアップロードします。またファイルの文字コードはブログの文字コードと一致させておく方が良いでしょう。
そしてテンプレートの <head>~</head> の部分に下記の1行を追加します。

<script type="text/javascript" src="<$MTBlogURL$>[ファイル名]"></script>

[ファイル名]の部分に保存したファイル名を設定してください。

2.テンプレートの修正

1項と同様、エントリー・アーカイブテンプレートの編集画面を開き、下記の赤色部分を探してください。

3.2/3.3 デフォルトテンプレートの場合

<div id="more" class="entry-more">
    <$MTEntryMore$>
</div>

公開テンプレートの場合

<MTEntryIfExtended>
<div id="more" class="entry-more"><$MTEntryMore$></div>
</MTEntryIfExtended>

上記の赤色部分を下記の内容に書き換えます。

<noscript>
<$MTEntryMore$>
</noscript>
<MTEntryIfExtended>
<div id="Link<$MTEntryID$>">
<a href="<$MTEntryPermalink$>" name="<$MTEntryID pad="1"$>" onclick="showHide(<$MTEntryID$>,'<$MTEntryPermalink$>',this);return false;">続きを読む ≫</a>
</div>
<div id="Text<$MTEntryID$>" style="display: none">
<$MTEntryMore$>
<a href="<$MTEntryPermalink$>" name="<$MTEntryID pad="1"$>" onclick="showHide(<$MTEntryID$>,0,this);return false;">≪ 続きを隠す</a>
</div>
</MTEntryIfExtended>

に変更します。青色の noscript タグで括った MTEntryMore が JavaScript がOFFの場合に表示される部分です。

JavaScript が動作しない場合、「続きを読む」のリンクは表示されっぱなしになりますですので、上記リストではリンクの上に追記を表示するようにしていますが、もう少し説明を加えて、

<noscript>
<$MTEntryMore$>
<p>下記の「続きを読む」のリンクは JavaScript が有効な場合に機能します。</p>
</noscript>

としておくと分かりやすいでしょう。

3.ブラウザの JavaScript を無効ににする方法

IEの場合は、[ツール]-[インターネットオプション]-[セキュリティ]-[レベルのカスタマイズ]-[アクティブ スクリプト]の「無効にする」を選択してOK→OKをクリックします。Firefoxの場合は、[ツール]-[オプション]-[Web機能]-[JavaScriptを有効にする]のチェックを外してOKをクリックします。
いずれも再起動は不要です。

2006.08.23 追記
1項の説明を修正しました。

Comments [33] | Trackbacks [13]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner


AMN
Categories
Monthly Archives
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3