エントリー・アーカイブの追記文章の折りたたみ(改)
以前から公開している個別アーカイブに「続きを読む」を導入ですが、このカスタマイズを行うと JavaScript を OFF にした場合、追記文章が読めないという不具合が残っていました(今更ですいません)。
もともとこのスクリプトのオリジナルはscriptygoddess:another 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項の説明を修正しました。

