Top ＞ テンプレート ＞ 配布テンプレートのサイドバーにリストを追加する
2007年11月13日

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

Posted at November 13,2007 1:50 AM
Category：[テンプレート]
Tag：[, ]

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

１．サイドバーの構成

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>
　　　　　：

２．リストの追加方法１

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

２．１ テンプレートのサイドバーが 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/">リンク１</a></li>
<li><a href="http://bbb/">リンク２</a></li>
<li><a href="http://ccc/">リンク３</a></li>
</ul>
</dd>

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

<dt class="sidetitle">リンク集</dt>
<dd class="side">
・<a href="http://aaa/">リンク１</a><br />
・<a href="http://bbb/">リンク２</a><br />
・<a href="http://ccc/">リンク３</a><br />
</dd>

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

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

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

とします。

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

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

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

３．リストの追加方法２

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

<dd class="side">
<ul>
<li><a href="http://aaa/">リンク１</a></li>
<li><a href="http://bbb/">リンク２</a></li>
<li><a href="http://ccc/">リンク３</a></li>
</ul>
</dd>

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

３．注意事項

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

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

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

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

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

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

としてください。

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

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

で構いません。

４．(X)HTMLマークアップについて

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

Posted by yujiro
関連記事
人気エントリー
トラックバックURL


コメント

リクエストにこたえていただいて、ほんとうにありがとうございます。

基本的なことかもしれないのに、
ていねいに教えてくださるので、
ほんとうに助かります。

さっそく、リストを追加してみました。

そうしたら、今度は、項目立ての「○印」が不必要になったのですが、
あの○印をなくすのにはどうしたらいいのかがわかりません。

おんぶにだっこでごめんなさい。

よろしくお願いします。

[1] Posted by サエコ : November 16, 2007 8:43 AM

＞サエコさん
こんにちは。
ご連絡ありがとうございます。
うまく設定できたようで良かったです。

ご質問の件ですが、スタイルシートの該当部分を下記の赤色の内容に修正してください。

.side ul,
.side ol {
    padding-left: 0;
}
.side ul li {
    list-style-type: none;
}
　　　：
.side #categories ul {
    padding-left: 0;
}
.side #categories ul ul {
    padding-left: 10px;
}
.side #categories li {
    list-style-type: none;
}

それではよろしくお願い致します。

[2] Posted by yujiro Author Profile Page : November 16, 2007 2:42 PM

お礼が遅くなってしまいました。

「○印」、無事なくなりました。
ありがとうございました。

何度も何度も申しわけないのですが、
今度は、バナーなどが左寄りなってしまうのが気になります。
できれば中央に寄せて設置したいのですが、
これって「ＣＳＳでブロックレベル要素をセンタリングする」の項が該当すると考えていいでしょうか。

それともうひとつ、
バナーとバナーの間を一行あけたくて、
今は「<p> </p>」と入れて設定してあるのですが、
これって合っていますか？

ほんとうに初心者でお手数をおかけしてすみません。
よろしくお願いします。

[3] Posted by サエコ : November 28, 2007 1:26 AM

＞サエコさん
こんにちは。
ご質問の件ですが、センタリングについては、バナーのマークアップを

<p class="ad">タイトル
<a href="http://・・・" target="_blank"><img src="http://・・・" alt="・・・"  />lt;a>
</p>

として、スタイルシートに下記を追加してください。

.ad {
    text-align: center;
    padding: 10px 0;
}

なお、img 要素の border 属性は非推奨なので外しましょう（ご利用のスタイルシートに罫線を表示しない設定がありますので書かなくても大丈夫です）。

また、上に示した CSS の padding プロパティでバナーとバナーの間も空けています（行間を空けるために空のp要素を挿入するのはお勧めできません）。

ただし、上の CSS では、全てのバナー画像の上下に 10px の余白ができるので、一番最後（または最初）の画像に余白をつけたくない場合は、バナー画像にもうひとつの class 属性（赤色）をそれぞれ指定して、

<p class="ad top">タイトル
<a href="http://・・・" target="_blank"><img src="http://・・・" alt="・・・"  />lt;a>
</p>
 
<p class="ad middle">タイトル
<a href="http://・・・" target="_blank"><img src="http://・・・" alt="・・・"  />lt;a>
</p>
 
<p class="ad bottom">タイトル
<a href="http://・・・" target="_blank"><img src="http://・・・" alt="・・・"  />lt;a>
</p>

CSSは下記のようにします。

.ad {
    text-align: center;
}
.top {
    padding-bottom: 10px;
}
.middle {
    padding: 10px 0;
}
.bottom {
    padding-top: 10px;
}

最初の設定がやや面倒かもしれませんが、一度設定しておけば後は楽だと思いますし、微調整も可能です。

それではよろしくお願い致します。

[4] Posted by yujiro Author Profile Page : November 28, 2007 1:40 PM

ていねいにお答えいただきありがとうございました。

センタリングひとつも自分の力でできないで、情けないです。


今度は、「ＷＥＢデザインの新しいルール」の「テンプレート・タグのカスタマイズ」に挑戦してみたところ、レイアウトが崩れてしまいました・・・。

悲しいけれど、ＭＴに挑戦するには、わたしはまだまだ初心者すぎのようで、
挫折しそうです。
ほんとうにお手数をおかけしてしまってすみません。

「img 要素の border 属性は非推奨なので外しましょう」とのこと、
ご指摘ありがとうございます。

これもまたよくわからないのですが、
提供されているアフィリエイトバナーのリンクコードをそのまま貼り付けてあります。
その場合でも、img border="0"というのは取り除いたほうがいいのでしょうか。勝手にとっちゃっても大丈夫なのか気になります。

何度もすみません。よろしくお願いします。

[5] Posted by サエコ : November 28, 2007 11:29 PM

＞サエコさん
こんにちは。
ご質問の件ですが、メインページにある div の終了タグがひとつ多いようです（カラムレイアウト崩れは、開始タグと終了タグの数が一致しない時に発生します）。

とりあえず

</MTEntries>

のすぐ下にある

</div>

を取り除いて、再構築して表示を確認してみてください。
解消しないようでしたらお手数ですが再度ご連絡頂けますでしょうか。

border 要素を取り除くことは、(X)HTMLマークアップ的には正しい作業ですが、「タグを書き換えてはいけない」という旨の規約があれば（またはそれが気になるのであれば）そのままでも構いません。

それではよろしくお願い致します。

[6] Posted by yujiro Author Profile Page : November 29, 2007 11:52 AM

ありがとうございました。

無事レイアウトの崩れが解消しました。

センタリングの件ですが、
<p class="ad">　を入れたら、

もしかすると、

<dd class="side">　は取り除いたほうがいいですか？

それと、すみません、もうひとつ。

わたしのブログでいうところの、「日々の成績」のカテゴリーをクリックすると、
monthlyarchiveとなって、10月分しか表示されません。

しかもブログタイトルバナーの上に、変なタグが表示されてしまいます。

これって、php化の失敗でしょうか。
php化をしたときにXML宣言を変更したときのおしりの部分のタグと同じだと思うのですが・・・。

こちらのコメントで質問することではないと思うのですが、
どこでお聞きすればいいのかわからないので、まとめて質問させていただきます。

たびたびでほんとうにすみません。
よろしくお願いします。

[7] Posted by サエコ : November 29, 2007 4:58 PM

＞サエコさん
こんばんは。
ご質問の件ですが、PHP化はほぼ成功しています。

ひとつめの問題は、書籍のP85の手順4と同じ状態になってしまっているようです。つまり、カテゴリー・アーカイブページが、過去に作成した index.html にアクセスしまっています。変なタグが表示されているのもそのせいです。
書籍の記述不足ですいませんが、アーカイブテンプレートについても、FTPツールで、すべての .html ファイルを削除してください（アーカイブファイル用のディレクトリがお分かりでしたらディレクトリをすべて削除して再構築する手もあります）。

また、dd 要素は削除しないでください。理由は、dl 要素の子要素に直接記述できるのは dt または dd のいずれかのみだからです（dd 要素の中はかなり自由に書けます）。
きちんとしたマークアップを書くのは、なれるまで大変だと思いますが、この辺りの話については「XHTMLタグ一覧ツール」がお役にたつかもしれません。

それではよろしくお願い致します。

[8] Posted by yujiro Author Profile Page : November 29, 2007 8:51 PM

ありがとうございました。

変なタグも表示されなくなって、無事解決しました。

お聞きすると、すぐに原因がおわかりになるので、
わたしには神様のように思えます。

何度もお手数をおかけしてすみませんでした。

タグのことも少しずつですが理解できるようになってきました。

まったくわからないと、勉強してもなかなか頭に入ってこないのですが、
こうやって教えていただいて、自分でやってみて、うまくいくと、
とても理解しやすいですし、また、なんだか楽しくなってきました。

[9] Posted by サエコ : December 2, 2007 11:53 PM

＞サエコさん
こんにちは。
最初は慣れるまで大変かもしれませんが、少しずつクリアにしていきましょう。
ではでは！

[10] Posted by yujiro Author Profile Page : December 3, 2007 2:04 PM

こんばんは。
サイドバーにアマゾン商品を紹介したくて、コチラを参考にやってみたのですが、その下の部分から表示がおかしくなってしまいました。

何がいけないのでしょうか？
分からなくて。

宜しくお願い致します。

[11] Posted by hi-lite&coffee : December 9, 2007 5:56 PM

＞hi-lite&coffeeさん
こんにちは。
ご質問の件ですが、「表示がおかしく」とは、画像の後に書かれたテキストの回りこみのことでしょうか。
該当の記事のURLと、もう少し具体的な説明を頂ければ幸いです。
それではよろしくお願い致します。

[12] Posted by yujiro Author Profile Page : December 10, 2007 1:39 PM

右側のサイドバーの一番上に

<dt class="sidetitle">Now Recommend</dt>
<dd class="side">
<center><a href="http://www.amazon.co.jp/exec/obidos/ASIN/B000X4FH0Q/poosblog-22/ref=nosim/" target="_blank"><img src="http://images-jp.amazon.com/images/P/B000X4FH0Q.09.TZZZZZZZ.jpg" alt="アズ・アイ・アム(初回生産限定盤)" border="0" /></a><center/>
</dd>

と記入しました。
そうしましたら、その下のサイドバータイトルから文字が小さくなりcenterよりになってしまいました。

ＩＥでは崩れずに見れるのですがFirefoxだと崩れるようです。


また、ここで書くことではないのですが、失礼します。
友達がコメントを記入してくれたのですが、Permalinkページを見ると、コメントが見れず、コメントの数の分だけ同じエントリーが表示されてしまいます。

このような場合はどこをどのように変えたらよいのでしょうか？宜しくお願い致します。

[13] Posted by hi-lite&coffee : December 12, 2007 9:35 AM

＞hi-lite&coffeeさん
こんにちは。
ご質問の件ですが、center 要素の終了タグが誤っているようです。

誤

<center/>

正

</center>

また、center 要素は非推奨タグですので、センタリングはスタイルシートでの設定をお勧めします。

同じエントリーが表示される問題は、テンプレートの設定がどこか誤っている（「コメントの詳細」の内容が他のテンプレートの内容になっているか、MTIncludeの関係が適正でない）と思われますので、再度ご確認頂けますでしょうか。

それではよろしくお願い致します。

[14] Posted by yujiro Author Profile Page : December 12, 2007 2:06 PM

ありがとうございました。小さなミスに気づきませんでした。

右サイドバーのimgだけセンタリング設定したいのですが、その場合、スタイルシートはどこをどのように変えればいいのでしょうか？

宜しくお願い致します。

[15] Posted by hi-lite&coffee : December 15, 2007 9:29 PM

＞hi-lite&coffeeさん
こんにちは。
ご質問の件 （再掲）ですが、スタイルシートに

.hoge {
    text-align: center;
}

を追加して、右サイドバーのマークアップを

<dd class="side">

から

<dd class="side hoge">

に変更してください。
hoge の部分は適当な名称に変更してください。

それではよろしくお願い致します。

[16] Posted by yujiro Author Profile Page : December 17, 2007 1:49 PM
コメントする

*必須



お知らせ：2008年5月現在、多忙のため、7月頃までコメントを速やかに回答できない状態が続きます。ご質問の内容によっては回答が7月以降になる可能性がありますので、予めご了承ください。

太字 イタリック アンダーライン ハイパーリンク 引用

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り（プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り）、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります（全て半角文字）

Now loading...
Entries of this Category
QRcode

現在停止中です
携帯電話からこのQRcodeを撮影することで携帯用URLを取得することができます

URI for cellular phones
ギターに入った猫
Styles
Font Size
＜ Default ＞
For defective color vision
Gray Scale
RGB Color
Search this site

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

loading ...
BlogPeople
Now loading...
Syndicate this site
FeedBurner（RSS1.0/RSS2.0/Atom）
Counter
これまでのアクセス
クリエイティブ・コモンズ・ライセンス
Powered by
Movable Type 4.1
 
List Me!