6.34 追記の折りたたみ ★
メインページ・アーカイブページで追記を折りたたむ
●JavaScript外部ファイルの作成とアップロード
P.552
showhide.js
showHide = function(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;
}
};
P.553
●head要素にscript要素を追加
「ヘッダー」テンプレートモジュール
...前略...
<script type="text/javascript" src="<mt:blogURL />showhide.js"></script>
</head>
<body class="<mt:getVar name="page_layout" />"<mt:if name="body_onload"> onload="<mt:getVar name="body_onload" />"</mt:if>>
...後略...
★「HTMLヘッダー」テンプレートモジュール(デフォルトテンプレート)
デフォルトテンプレートの場合、「HTMLヘッダー」テンプレートモジュールのCCLicenseRDFタグの直前に、script要素を追加します。
...前略...
<script type="text/javascript" src="<mt:BlogURL />showhide.js"></script>
<$mt:CCLicenseRDF$>
●テンプレートの変更
「ブログ記事の概要」テンプレートモジュール(サンプルテンプレート)
...前略...
<div class="content">
<h2 id="a<mt:entryID pad="1" />" class="entry-header"><a href="<mt:entryPermalink valid_html="1" />"><mt:entryTitle encode_html="1" /></a></h2>
<mt:include module="メタデータ" />
<div class="entry-content clearfix">
<mt:if tag="entryBody">
<mt:entryBody />
</mt:if>
<mt:if tag="entryMore">
<div id="Link<mt:entryID />">
<a href="<mt:entryPermalink />" onclick="showHide(<mt:entryID />,'<mt:entryPermalink />',this);return false;" onkeypress="showHide(<mt:entryID />,'<mt:entryPermalink />',this);return false;">続きを読む ≫</a>
</div>
<div id="Text<mt:entryID />" style="display: none">
<a href="<mt:entryPermalink />" onclick="showHide(<mt:entryID />,0,this);return false;" onkeypress="showHide(<mt:entryID />,0,this);return false;">≪ 続きを隠す</a>
<div class="entry-more"><mt:entryMore /></div>
<a href="<mt:entryPermalink />" onclick="showHide(<mt:entryID />,0,this);return false;" onkeypress="showHide(<mt:entryID />,0,this);return false;">≪ 続きを隠す</a>
</div>
</mt:if>
<mt:if tag="entryMore">
<p class="entry-more"><a href="<mt:entryLink archive_type="Individual" />#more">続きを読む "<mt:entryTitle encode_html="1" />"</a></p>
</mt:if>
</div>
<mt:include module="コミュニケーション" />
</div>
...後略...
★「ブログ記事の概要」テンプレートモジュール(デフォルトテンプレート)
元のテンプレートから004~011を変更しています。
...前略...
001: </MTEntryIfTagged>
002:</mt:if>
003:<MTIfNonEmpty tag="EntryMore" convert_breaks="0">
004: <div class="asset-more-link" id="Link<mt:entryID />">
005: <a href="<mt:entryPermalink />" onclick="showHide(<mt:entryID />,'<mt:entryPermalink />',this);return false;" onkeypress="showHide(<mt:entryID />,'<mt:entryPermalink />',this);return false;">続きを読む ≫</a>
006: </div>
007: <div class="asset-more-link" id="Text<mt:entryID />" style="display: none">
008: <a href="<mt:entryPermalink />" onclick="showHide(<mt:entryID />,0,this);return false;" onkeypress="showHide(<mt:entryID />,0,this);return false;">≪ 続きを隠す</a>
009: <div class="entry-more"><mt:entryMore /></div>
010: <a href="<mt:entryPermalink />" onclick="showHide(<mt:entryID />,0,this);return false;" onkeypress="showHide(<mt:entryID />,0,this);return false;">≪ 続きを隠す</a>
011: </div>
012:</MTIfNonEmpty>
013: </div>
014: <div class="asset-footer"></div>
...後略...
P.554
ブログ記事ページで追記を折りたたむ
「ブログ記事」テンプレート(サンプルテンプレート)
...前略...
<div class="entry-content clearfix">
<mt:if tag="entryBody">
<div class="entry-body"><mt:entryBody /></div>
</mt:if>
<mt:if tag="entryMore">
<noscript>
<div class="entry-more"><mt:entryMore /></div>
</noscript>
<div id="Link<mt:entryID />">
<a href="<mt:entryPermalink />" onclick="showHide(<mt:entryID />,'<mt:entryPermalink />',this);return false;" onkeypress="showHide(<mt:entryID />,'<mt:entryPermalink />',this);return false;">続きを読む ≫</a>
</div>
<div id="Text<mt:entryID />" style="display: none">
<a href="<mt:entryPermalink />" onclick="showHide(<mt:entryID />,0,this);return false;" onkeypress="showHide(<mt:entryID />,0,this);return false;">≪ 続きを隠す</a>
<div class="entry-more"><mt:entryMore /></div>
<a href="<mt:entryPermalink />" onclick="showHide(<mt:entryID />,0,this);return false;" onkeypress="showHide(<mt:entryID />,0,this);return false;">≪ 続きを隠す</a>
</div>
</mt:if>
</div>
<mt:include module="コミュニケーション" />
...後略...