Top > CMS・ブログ > テンプレート > 2007年11月
2007年11月13日

配布テンプレートのサイドバーにリストを追加する

November 13,2007 1:50 AM
Tag:[, ]
Permalink

配布テンプレートのサイドバーにリストを追加する方法です。ご質問を頂きましたので本エントリーにて紹介致します。

1.サイドバーの構成

Movable Type 3.x および Movable Type 4 用のテンプレートの左サイドバーの構成イメージは下記のようになっています。

     :
<dl id="links-left">
 
<dt class="sidetitle">リストタイトル1</dt>
<dd class="side">
[リスト1の内容]
</dd>
 
<dt class="sidetitle">リストタイトル2</dt>
<dd class="side">
[リスト2の内容]
</dd>
 
<dt class="sidetitle">リストタイトル3</dt>
<dd class="side">
[リスト3の内容]
</dd>
     :
</dl>
     :

全体が dl 要素で括られ、リストタイトルが dt、リストの内容は dd 要素で括られています。dt 要素と dd 要素で一組のリストを表示します。
また、dt 要素の class 属性には sidetitle、dd 要素の class 属性には side を与えており、それぞれのスタイルを決めています。

他のテンプレートや他のブログツールのテンプレートでは dl/dt/dd ではなく、div 要素を使っています。

     :
<div id="links-left">
 
<div class="sidetitle">リストタイトル1</div>
<div class="side">
[リスト1の内容]
</div>
 
<div class="sidetitle">リストタイトル2</div>
<div class="side">
[リスト2の内容]
</div>
 
<div class="sidetitle">リストタイトル3</div>
<div class="side">
[リスト3の内容]
</div>
     :
</div>
     :

全体が div 要素で括られ、リストタイトル、リストの内容も div 要素で括られています。

参考までに、WordPress テンプレートでは div/ul/li/h2 によるマークアップになっています。

     :
<div id="links-left">
    <ul>
        <li><h2>リストタイトル1</h2>
            <ul>[リストの内容1]</ul>
        </li>
 
        <li><h2>リストタイトル2</h2>
            <ul>[リストの内容2]</ul>
        </li>
 
        <li><h2>リストタイトル3</h2>
            <ul>[リストの内容3]</ul>
        </li>
    </ul>
</div>
     :

2.リストの追加方法1

テンプレート編集画面を開き、2.1または2.2項の作業を行ってください。Movable Type 4 であればブログ管理画面の「デザイン」→「テンプレート」→「テンプレートモジュール」→「サイドバー(またはサイドバー2)」よりテンプレート編集画面が開きます。

2.1 テンプレートのサイドバーが dl/dt/dd で構成されている場合

以下のように dt 要素と dd 要素の(X)HTMLマークアップを追加します。

<dt class="sidetitle">リストタイトルn</dt>
<dd class="side">
[リストnの内容]
</dd>

dt 要素の内容にタイトル名、dd 要素の内容にはお好きなテキスト文字や(X)HTMLマークアップ、あるいはご利用のブログでサポートしているテンプレート用タグ等を記述してください。

dt 要素と dd 要素に与えられている class 属性は削除しないでください。class 属性を削除すると、追加したリストの表示が他のリストと異なってしまいます。

dl 要素の中であればどこにでも追加可能です。他の dt/dd のリストの dt と dd の間には挿入しないでください。

例えばリンク集を追加する場合は、

<dt class="sidetitle">リンク集</dt>
<dd class="side">
<ul>
<li><a href="http://aaa/">リンク1</a></li>
<li><a href="http://bbb/">リンク2</a></li>
<li><a href="http://ccc/">リンク3</a></li>
</ul>
</dd>

とします。この例ではリンク集の内容全体を ul 要素で括っていますが、

<dt class="sidetitle">リンク集</dt>
<dd class="side">
・<a href="http://aaa/">リンク1</a><br />
・<a href="http://bbb/">リンク2</a><br />
・<a href="http://ccc/">リンク3</a><br />
</dd>

のようにしても構いません(推奨するマークアップではありません)。

リストの内容がスクリプトを利用して表示する場合は

<dt class="sidetitle">リンク集</dt>
<dd class="side">
<script type="text/javascript">
// リストを表示するスクリプト等
</script>
</dd>

とします。

2.2 テンプレートのサイドバーが div で構成されている場合

以下のように、div 要素の(X)HTMLマークアップを追加します。

<div class="sidetitle">リストタイトルn</div>
<div class="side">
[リストnの内容]
</div>

3.リストの追加方法2

dt 要素、つまりリストタイトルは(X)HTMLマークアップ上、必須ではありませんので、上記のリンク集の例であれば、

<dd class="side">
<ul>
<li><a href="http://aaa/">リンク1</a></li>
<li><a href="http://bbb/">リンク2</a></li>
<li><a href="http://ccc/">リンク3</a></li>
</ul>
</dd>

と、リストの内容だけを追加しても構いません。

3.注意事項

dl 要素の子要素に記述できるのは、dt および dd のみです。したがって下記のようなマークアップ(赤色部分)は誤りです。

<dt class="sidetitle">リンク集</dt>
<dd class="side">
<ul>
<li><a href="http://aaa/">リンク1</a></li>
<li><a href="http://bbb/">リンク2</a></li>
<li><a href="http://ccc/">リンク3</a></li>
</ul>
</dd>
 
<script type="text/javascript">
// 追加したリストを操作するスクリプト等
</script>

上記の場合は、script 要素全体も dd 要素で括り、

<dt class="sidetitle">リンク集</dt>
<dd class="side">
<ul>
<li><a href="http://aaa/">リンク1</a></li>
<li><a href="http://bbb/">リンク2</a></li>
<li><a href="http://ccc/">リンク3</a></li>
</ul>
</dd>
 
<dd>
<script type="text/javascript">
// 追加したリストを操作するスクリプト等
</script>
</dd>

とするか、リストの内容に含め、

<dt class="sidetitle">リンク集</dt>
<dd class="side">
<ul>
<li><a href="http://aaa/">リンク1</a></li>
<li><a href="http://bbb/">リンク2</a></li>
<li><a href="http://ccc/">リンク3</a></li>
</ul>
<script type="text/javascript">
// 追加したリストを操作するスクリプト等
</script>
</dd>

としてください。

div 要素で構成されたサイドバーは

<div class="sidetitle">リンク集</div>
<div class="side">
・<a href="http://aaa/">リンク1</a><br />
・<a href="http://bbb/">リンク2</a><br />
・<a href="http://ccc/">リンク3</a><br />
</div>
 
<script type="text/javascript">
// 追加したリストを操作するスクリプト等
</script>

で構いません。

4.(X)HTMLマークアップについて

(X)HTMLマークアップの基本や、マークアップでの親子関係(ある要素の親要素または子要素に記述可能な要素が何か)等が分からない場合は「XHTMLタグ一覧ツール」をご利用ください。

Comments [16] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

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

AMN
Categories
Monthly Archives
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3