Adobe SpryでMovableTypeにタブパネルを設置する

今回、kosukekato.comで目新しいことと言えばトップページのタブパネルくらいなのですが、備忘録がてらやり方を少々ご紹介。基本的にはDreamweaverで雛型になるもの作ってそれをMovableTypeのテンプレートにぶち込んでいます。

まず、ヘッダにSpryのJavaScriptとCSSを読み込みます。

<script src="<$MTBlogURL$>js/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="<$MTBlogURL$>js/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />

でメイン画面のテンプレートにタブパネルのソースを叩き込んでやります。

<div id="TopTab" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">カテゴリA</li>
<li class="TabbedPanelsTab" tabindex="0">カテゴリB</li>
<li class="TabbedPanelsTab" tabindex="0">カテゴリC</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
<mt:Entries category="カテゴリA" lastn="10">
<$mt:Include module="ブログ記事の概要"$>
</mt:Entries>
</div>
<div class="TabbedPanelsContent">
<mt:Entries category="カテゴリB" lastn="10">
<$mt:Include module="ブログ記事の概要"$>
</mt:Entries>
</div>
<div class="TabbedPanelsContent">
<mt:Entries category="カテゴリC" lastn="10">
<$mt:Include module="ブログ記事の概要"$>
</mt:Entries>
</div>
</div>
</div>
<script type="text/javascript">
<!–
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TopTab");
//–>
</script>

タブパネルのソースの中に<mt:Entries category="カテゴリA" lastn="10">でエントリ記事の概要一覧を呼び出してやるイメージです。

加藤 康祐 / 企画・設計

プランナー、デザイナー。加藤康祐企画設計代表。Webデザインを入り口に、2005年よりフリーランスとしてのキャリアスタート。主な仕事としてベンチャー企業でのサービスのUXデザイン、独法との防災メディアの運営、社会的養護の子どもたちの自立を支援するNPOのサポート。ラグビーと料理、最近イラスト。

加藤康祐企画設計

是非、フォローしてください！
Twitter / Instagram

『ひとり仕事: フリーランスという働き方』 加藤 康祐

posted with amazlet at 15.09.10

(2012-10-5)
売り上げランキング: 14,705
100円

Amazon.co.jpで詳細を見る

フリーランスとして働き始めるってどういうことだったのか？フリーランスとして働くってどういうことなのか？フリーランスが目指すことってなんなのか？5年間の自分の経験から書きました。（2010年執筆）