Movable Typeの記事の概要をアコーディオン式で記述してみる。
Movable Typeの記事の概要をアコーディオン式で記述してみる。
まずはブートストラップのアコーディオンの記述を調べる。
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
タイトル１
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
文章１
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
タイトル２
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
文章２
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
タイトル３
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
文章３
</div>
</div>
</div>
</div>
これがうまく機能するか、まずmovable typeの中に
このまま（boostrapのコードのまま）挿入してみる。
記事の概要のInclude moduleの前に入れてみる。
bootstrapの表示通りできる。
<div role "main"></div>
の中でも大丈夫だった。
次に
記事の概要にある<section></section>で囲まれているとうまくいきそうにない。
<section></section>を<div></div> に変更。
アコーディオンのタブは、headingOneとcollapseOne、headingTwoとcollapseTwoとそれぞれにidがある。
これは、headingOneをheading-<mt:EntryID>、collapseOneをcollapse<mt:EntryID>に対応させる。
アコーディオンの記述の最初の文章は繰り返しされていないので
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
</div>
は一番外に出す。
一番上のアコーディオンと２番、３番の違いは、
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
と
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
class="collapsed" が付け加えられている所と、aria-expanded="true" が"false"担っている所。
そして
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> と
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
class="panel-collapse collapse in" がclass="panel-collapse collapse"
担っている所。
全てのブログ内容を最初閉じた状態にさせたいからは、タイトル２以降の記述にしておけば良いはず。
まずはこれで作ってみたが、記事の概要のクリックで、ブログへ飛んでしまう。そのためアコーディオン機能がうまく使えない。アコーディオンとブログへのジャンプが同時に記述されてしまった。
では、タイトルをクリックしたらアコーディオンが開く。内容でクリックしらブログに飛ぶように設定。
記事の概要テンプレートを以下に変更して記事の概要accordとする。
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="head-<mt:EntryID>">
<div class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#entry-<mt:EntryID>" aria-expanded="false" aria-controls="entry-<mt:EntryID>">
<mt:EntryAssets type="image" limit="1">
<figure>
<img src="<$mt:AssetThumbnailURL width="150"$>" class="thumb">
</figure>
</mt:EntryAssets>
<p class="title"><$mt:EntryTitle$></p>
</a>
</div>
</div> <!-- panel-heading-->
<div id="entry-<mt:EntryID>" class="panel-collapse collapse" role="tabpanel" aria-labelledby="head-<mt:EntryID>">
<div class="panel-body">
<p><a href="<$mt:EntryPermalink$>"><$mt:EntryExcerpt$></a></p>
<footer>
<p>投稿日: <time datetime="<$mt:EntryDate format_name="iso8601"$>" itemprop="datePublished"><$mt:EntryDate format="%x"$></time><mt:IfArchiveTypeEnabled archive_type="Category"><mt:If tag="EntryPrimaryCategory"> <mt:EntryPrimaryCategory><a href="<$mt:CategoryArchiveLink$>" rel="tag" class="label category <$mt:CategoryBasename$>"><$mt:CategoryLabel$></a></mt:EntryPrimaryCategory></mt:If></mt:IfArchiveTypeEnabled></p>
</footer>
</div><!-- panel-body-->
</div> <!-- id=entry-->
</div><!-- panel-default-->
ページへの記述を以下にすると
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<mt:Entries limit="$entries_per_page" search_results="1">
<$mt:Include module="記事の概要accord"$>
</mt:Entries>
</div>
うまくいく。デザインをもう少しブラッシュアップすればこれはこれで使える機能だ。
