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="コミュニケーション" />
...後略...

ウェブページ

Powered by Movable Type 4.261

このアーカイブについて

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。