Top > January 17, 2006

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

January 17,2006 11:53 PM
Category:[追記]
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 [32] | Trackbacks [13]
Now loading...
List of "Jan 17, 2006"
QRcode

現在停止中です
携帯電話からこのQRcodeを撮影することで携帯用URLを取得することができます

URI for cellular phones
ギターに入った猫
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

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

loading ...
BlogPeople
Now loading...
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
クリエイティブ・コモンズ・ライセンス
Powered by
Movable Type 4.1
 
List Me!