小粋空間: テンプレートアーカイブ

Top ＞テンプレート [全て開く]

2007年11月13日

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

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

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

１．サイドバーの構成

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タグ一覧ツール」をご利用ください。

Comments [16] | Trackbacks [0]

2007年10月23日

サイドバーに Google Adsense を貼り付ける

October 23,2007 12:02 AM
Tag：[Adsense, Customize, Template]
Permalink

当サイト配布のテンプレートのサイドバーに Google Adsense（160ピクセル幅）等のバナー広告を設置する方法です。

完成画面

ワイドスカイスクレイパー（160×600）をデフォルト状態のまま設置すると、右サイドバーが中央カラム（あるいは左サイドバー）の下に回りこむ、いわゆるレイアウト崩れが発生します（下）。

カラム崩れが発生

これはサイドバーの表示幅に、それを超える画像やバナー類を設置しているためで、CSS の float プロパティの性質上、レイアウトが崩れます。

以下、テンプレートの修正方法です。ご利用のテンプレートによって表示内容が若干異なりますが、基本構造は同じです。

１．サイドバーの幅を修正

サイドバーの全体幅はデフォルトで 185px に設定していますが、左右余白分の 30px（15px × 2）が含まれているので、実際の表示領域幅はデフォルトで 155px となります。したがって、160px 幅のバナー類を設置するためには全体幅を 190px に変更する必要があります。

レイアウトによって変更箇所が異なるので、以下の説明にしたがって該当箇所を修正してください。

１．１ 3カラム固定レイアウト

3カラム固定レイアウトの場合、下記のセレクタの width プロパティを 185px から 190px に変更します。

.layout-three-column #links-left-box,
.layout-three-column #links-right-box {
    float: left;
    width: 190px;
}

１．２ 2カラム固定レイアウト（右サイドバー）

2カラム固定レイアウト（右サイドバー）の場合、下記のセレクタの width プロパティを 185px から 190px に変更します。

.layout-two-column-right #links-right-box {
    float: left;
    width: 190px;
}

１．３ 2カラム固定レイアウト（左サイドバー）

2カラム固定レイアウト（左サイドバー）の場合、下記のセレクタの width プロパティを 185px から 190px に変更します。

.layout-two-column-left #links-left-box {
    float: left;
    width: 190px;
}

２．全体のカラム幅を修正

サイドバーのカラム幅が合計10px（2カラムの場合は 5px）増加した分、全体の横幅を広げます。
逆に、中央カラムの幅を狭くする方法もありますが、ここでは割愛しています。

２．１ 3カラム固定レイアウト

3カラム固定レイアウトの場合、下記のセレクタの width プロパティを 850px から 860px に変更します。

/* 3カラム固定レイアウト幅 */
.layout-three-column #box {
    width: 860px;
}

２．２ 2カラム固定レイアウト（右サイドバー／左サイドバー）

2カラム固定レイアウト（右サイドバー／左サイドバー）の場合、下記のセレクタの width プロパティを 665px から 670px に変更します。

/* 2カラム固定レイアウト幅 */
.layout-two-column-left #box,
.layout-two-column-right #box {
    width: 670px;
}

ここまでの修正でカラム崩れは発生しなくなります。

３．フッタ幅の修正

２項にあわせてフッタ幅も併せて修正してください（過去の配布テンプレートにはこの設定はありません。ない場合はスキップしてください）。

３．１３カラム固定レイアウトの場合

3カラム固定レイアウトの場合、下記のセレクタの width プロパティを 850px から 860px に変更します。

.layout-three-column #footer {
    width: 860px;
}

３．２ 2カラム固定レイアウト（右サイドバー／左サイドバー）

2カラム固定レイアウト（右サイドバー／左サイドバー）の場合、下記のセレクタの width プロパティを 665px から 670px に変更します。

.layout-two-column-left #footer,
.layout-two-column-right #footer {
    width: 670px;
}

４．広告表示位置の微調整

広告表示用の script 要素を dd 要素（青色）で括り、必要に応じて縦方向のマージンを調整します。

<dd class="adsense">
<script ～></script>
</dd>

スタイルシート（メイン）に下記の設定を追加します。サンプルは下マージンを 10px 設定しています（表示位置によって適宜修正してください）。

dd.adsense {
    margin: 0 0 10px;
}

Comments [0] | Trackbacks [0]

2007年6月 4日

3カラムレイアウトで中央カラムを（X）HTMLの最初に記述する

June 4,2007 12:10 AM
Tag：[CSS, SEO, Template]
Permalink

配布テンプレートの3カラムレイアウトで、中央カラムを（X）HTMLマークアップの前方に配置するカスタマイズです。

コンテンツの主要な内容が記述されている中央カラムがマークアップの前方にあると SEO で有利と言われています。ただしスタイルシートが若干複雑になるため、当サイトのテンプレートではその方式を採用しておりません。*1

テンプレートのカスタマイズに慣れてきた方、SEOに興味のある方は本エントリーのカスタマイズを行ってみてはいかがでしょうか。

配布テンプレートは、どのブログツール・ブログサービスのものでも適用可能です（多分）。
表示は Windows XP + IE6/IF7/Firefox2/Opera9 で確認しています。IE7 はスタンドアローン版を使用しているので、正式版と表示が異なるようでしたらすいません。

１．概要

配布時は「左→中央→右」という順番で（X）HTMLマークアップされており、これを float プロパティによって左から横並びにしています（図上）が、左カラムと中央カラムを新たな div 要素（#wrap）で括り、その中は右から順に並べ、さらに全体を左から並べることで実現します（図下）。

概略図

#left、#right はそれぞれ #links-left-box、#links-right-box に読み替えてください。

２．表示順序を入れ替える（固定レイアウト・リキッドレイアウト共通）

テンプレートの中央カラムと左カラムの表示順序「左カラム→中央カラム→→カラム」を「中央カラム→左カラム→右カラム」に入れ替えます。

具体的には、下記に示す中央カラム（赤色部分）

<!-- 左カラム開始 -->
<div id="links-left-box">
　　　　　：
　　　（省略）
　　　　　：
</div><!-- /links-left-box -->
<!-- 左カラム終了 -->
 
<!-- 中央カラム開始 -->
<div id="content">
　　　　　：
　　　（省略）
　　　　　：
</div><!-- /content -->
<!-- 中央カラム終了 -->
 
<!-- 右カラム開始 -->
<div id="links-right-box">
　　　　　：
　　　（省略）
　　　　　：
</div><!-- /links-right-box -->
<!-- 右カラム終了 -->

を、下のように左カラムの前に移動します（青色部分）。

<!-- 中央カラム開始 -->
<div id="content">
　　　　　：
　　　（省略）
　　　　　：
</div><!-- /content -->
<!-- 中央カラム終了 -->
 
<!-- 左カラム開始 -->
<div id="links-left-box">
　　　　　：
　　　（省略）
　　　　　：
</div><!-- /links-left-box -->
<!-- 左カラム終了 -->
 
<!-- 右カラム開始 -->
<div id="links-right-box">
　　　　　：
　　　（省略）
　　　　　：
</div><!-- /links-right-box -->
<!-- 右カラム終了 -->

前後のヘッダ・フッタには手を加えないでください。

３．div 要素の追加（固定レイアウトのみ）

中央カラムと左カラムを <div id="wrap"> で括ります（青色部分）。

<div id="wrap">
 
<!-- 中央カラム開始 -->
<div id="content">
　　　　　：
　　　（省略）
　　　　　：
</div><!-- /content -->
<!-- 中央カラム終了 -->
 
<!-- 左カラム開始 -->
<div id="links-left-box">
　　　　　：
　　　（省略）
　　　　　：
</div><!-- /links-left-box -->
<!-- 左カラム終了 -->
 
</div>
 
<!-- 右カラム開始 -->
<div id="links-right-box">
　　　　　：
　　　（省略）
　　　　　：
</div><!-- /links-right-box -->
<!-- 右カラム終了 -->

４．CSS修正（固定レイアウトのみ）

４．１ XML宣言なしの場合

テンプレートの1行目に XML 宣言がない場合は、下記の修正を行ないます。

まず #wrap を追加してください。

.layout-three-column #wrap {
    float: left;
    width: 665px;
}

そして #content の float プロパティを right に変更します。

.layout-three-column #content {
    float: right;
    width: 478px;
    margin: 0 0 10px 0;
    border-bottom: 1px solid #669;
    border-left: 1px solid #669;
    border-right: 1px solid #669;
}

４．２ XML宣言ありの場合

テンプレートの1行目に XML 宣言がある場合は、２．１項の修正に加え、さらに下記の修正を行ってください。

#box の width プロパティ値を変更（赤色）
CSSハックでIE以外のモダンブラウザに対応させるための width プロパティを追加（青色）

.layout-three-column #box {
    width: 852px;
    margin-right: auto;
    margin-left: auto;
    padding: 0 0 15px 0;
    border-bottom: 1px solid #669;
    border-left: 1px solid #669;
    border-right: 1px solid #669;
    text-align: left;
    background-color: #fff;
}
html > body.layout-three-column #box {
    width: 850px;
}

#content の width プロパティ値を変更（赤色）
CSSハックでIE以外のモダンブラウザに対応させるための width プロパティを追加（青色）

.layout-three-column #content {
    float: right;
    width: 480px;
    margin: 0 0 10px 0;
    border-bottom: 1px solid #669;
    border-left: 1px solid #669;
    border-right: 1px solid #669;
}
html > body.layout-three-column #content {
    width: 478px;
}

５．カラムサイズを変更している場合の計算方法

XML 宣言がない場合は、#wrap の width に「#content の width + #links-left-box の width + 2px」を設定してください。

XML 宣言がある場合は、現在設定されている #content および #box の width をそれぞれ +2px します。そして、CSS ハックの #content と #box に元の width の値を設定してください。
#wrap のサイズは「（CSSハックではない）#content の width + #links-left-box の width」を設定してください。

６．補足

「XML 宣言ありの場合」のスタイルシートが複雑になっている理由は次の通りです。

IE6 の後方互換モードでは、ボックスモデルの解釈が仕様と異なるという不具合があります。XML 宣言が記述されていると「後方互換モード」として解釈されてしまうため、当サイトのテンプレートの #box および #content で利用している border プロパティが影響するためです。

仕様の解釈では下記のようになります。

IE6（後方互換モード）以外のモダンブラウザの解釈

ところが、IE6の後方互換モードでは次のようになります。

IE6（後方互換モード）の解釈

実際には padding も width に含まれるてしまうのですが、配布テンプレートでは padding を width と併用していないので干渉はありません。

つまり、カラムレイアウトでは border を用いない方が設定が簡単です。

７．WordPress で変更する場合

この記事とあわせて、「3カラムレイアウトで中央カラムを（X）HTMLの最初に記述する（WordPress 用テーマ版）」をご覧ください。

2008.03.12
７項を追記しました。

*1：配布当初のリキッドレイアウトは中央カラムの内容を（X）HTML の先頭に配置してました。

Comments [7] | Trackbacks [1]

小粋空間 - a cheap joke and a play on words site