TopCSS > 2006年12月
2006年12月20日

公開テンプレートのサイドバーのカラム幅を変更する

December 20,2006 1:36 AM
Tag:[, , ]
Permalink

公開テンプレートのサイドバーのカラム幅の変更方法についてご質問を頂いておりますので、本エントリーで変更方法をご紹介致します。

CSSは公開しているテンプレートで(多分)共通ですので、テンプレート配布のブログ(Movable Type / Serene Bach / FC2 ブログ / Seesaa ブログ / livedoor ブログ等)をお使いでしたらどれでも適用可能と思われます。

修正するのはスタイルシートのみです。スタイルシートを修正する箇所には似たようなセレクタが並んでおりますので、修正する際には、下記の該当する修正リストのセレクタ名の部分をマウスコピーして、編集画面(またはエディタ)上で検索すると良いでしょう。

なお、固定レイアウトの場合は下記のツールを是非ご利用ください。

テンプレートカスタマイズ支援ツール Column Resizer

Column Resizer ロゴ

1.固定レイアウト

1.1 3カラムレイアウト

スタイルシート後方に出現する、リスト1.1 の赤色部分(2ヶ所)を変更します。

リスト1.1 固定レイアウト・3カラムの変更箇所

.layout-three-column #box {
    width: 850px;
    margin-right: auto;
    margin-left: auto;
    padding: 0 0 15px 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    text-align: left;
    background-color: #ffffff;
}
    :
  (中略)
    :
.layout-three-column #links-left-box,
.layout-three-column #links-right-box {
    float: left;
    width: 185px;
}

上の 850px は3カラム全体(左・中央・右)の幅、そして下の 185px が左右サイドバーの幅です。ということで、まず 185px をお好みの幅に変更してください。ここでは 15px 加えて 200px にひろげる例で進めます。

そして、この値を元に上の 850px の部分を修正します。算出式は

元の値 + サイドバー幅の増分×2

になります。今回の例では、

850px + (200px - 185px) ×2 = 880px

となるので、880px を設定します。
サイドバーの幅をデフォルト値より少なくした場合は、逆に 850px から減算します。

ちなみにサイドバーの全体幅は 185px ですが、余白を左右 15px とっているので、実際に表示される幅はデフォルトで 155px です。Google Adsense のキーワード広告等、160px で設定されている部品をおさめるには、5px 加えて 190px にすれば(多分)大丈夫だと思います。

1.2 2カラムレイアウト(左サイドバー/右サイドバー)

左サイドバーの場合、スタイルシート後方に出現する、リスト1.2 の赤色で示したサイドバーの幅を、お好みの値に変更します。

リスト1.2 固定レイアウト・2カラム(左サイドバー)の変更箇所

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

右サイドバーの場合、左サイドバー同様、リスト1.3 の赤色で示したサイドバーの幅を、お好みの値に変更します。

リスト1.3 固定レイアウト・2カラム(右サイドバー)の変更箇所

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

そして、左サイドバー・右サイドバー、いずれの場合もリスト1.4 の赤色部分を併せて変更してください。

リスト1.4 固定レイアウト・2カラム(左サイドバー・右サイドバー共通)の変更箇所

/* 2カラム用 */
.layout-two-column-left #box,
.layout-two-column-right #box {
    width: 665px;
    margin-right: auto;
    margin-left: auto;
    padding: 0 0 15px 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    text-align: left;
    background-color: #ffffff;
}

665px は 2カラム全体の幅を示しており、変更したサイドバー幅の値を元に、665px の部分を修正します。算出式は

元の値 + サイドバー幅の増分

となります。
例えば、サイドバー幅 185px を 200px にひろげた場合は、

665px + (200px - 185px) = 680px

となるので、680px を設定します。

2.リキッドレイアウト

2.1 3カラムレイアウト

スタイルシート後方に出現する、リスト2.1 の赤色部分(3ヶ所)を変更します。

リスト2.1 リキッドレイアウト・3カラムの変更箇所

/* 3カラム(リキッドレイアウト) */
.layout-three-column-liquid #content {
    margin: 0 185px 10px;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
}
.layout-three-column-liquid #links-left{
    position: absolute;
    width: 155px;
    top: 95px;
    left: 15px;
    color: #ffffff;
}
.layout-three-column-liquid #links-right{
    position: absolute;
    width: 155px;
    top: 95px;
    right: 15px;
    color: #ffffff;
}

ちょっとややこしいですが、155px はサイドバーに実際に表示される部分の幅、最初の185px がサイドバー全体の幅が設定されています。

まず、サイドバーの表示部分 155px の値を変更した後、

元の値 + サイドバー幅の増分

を加算してください。例えばサイドバーの表示部分の幅を 155px から 160px に変更した場合、185px の部分は、

185px + (160px - 155px) = 190px

となり、190px を設定します。

2.2 2カラムレイアウト(左サイドバー)

スタイルシート後方に出現する、リスト2.2 の赤色部分(2ヶ所)を変更します。

リスト2.2 リキッドレイアウト・2カラム(左サイドバー)の変更箇所

/* 2カラム(リキッドレイアウト:左サイドバー) */
.layout-two-column-liquid-left #content {
    margin: 0 0 10px 185px;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
}
.layout-two-column-liquid-left #links-left {
    position: absolute;
    width: 155px;
    top: 95px;
    left: 15px;
    color: #ffffff;
}

値の変更方法は2.1項を参考にしてください。

2.3 2カラムレイアウト(右サイドバー)

スタイルシート後方に出現する、リスト2.3 の赤色部分(2ヶ所)を変更します。

リスト2.3 リキッドレイアウト・2カラム(右サイドバー)の変更箇所

/* 2カラム(リキッドレイアウト:右サイドバー) */
.layout-two-column-liquid-right #content {
    margin: 0 185px 10px 0;
    border-bottom: 1px solid #666699;
    border-right: 1px solid #666699;
}
.layout-two-column-liquid-right #links-right {
    position: absolute;
    width: 155px;
    top: 95px;
    right: 15px;
    color: #ffffff;
}

値の変更方法は2.1項を参考にしてください。

3.中央カラム幅も変更する(固定レイアウトの場合のみ)

3.1 3カラムの場合

中央カラムの幅を変更する場合は下記の赤色部分を修正します。増加分はリスト1.1 の 850px の部分に、さらに追加します。

リスト3.1 固定レイアウト・3カラムの変更箇所

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

3.2 2カラム(左サイドバー)の場合

下記の赤色部分を修正します。増加分はリスト1.4 の 665px の部分に、さらに追加します。

リスト3.2 固定レイアウト・2カラム(左サイドバー)の変更箇所

/* 2カラム(左サイドバー) */
.layout-two-column-left #content {
    float: left;
    width: 478px;
    margin: 0 0 10px 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
}

3.3 2カラム(右サイドバー)の場合

下記の赤色部分を修正します。増加分はリスト1.4 の 665px の部分に、さらに追加します。

リスト3.2 固定レイアウト・2カラム(右サイドバー)の変更箇所

/* 2カラム(右サイドバー) */
.layout-two-column-right #content {
    float: left;
    width: 478px;
    margin: 0 0 10px 0;
    border-bottom: 1px solid #666699;
    border-right: 1px solid #666699;
}

中央カラム幅のみ変更する場合は「中央カラムにバナー広告を表示する」を参照願います。

Comments [21] | Trackbacks [0]
2006年12月18日

JavaScript 不要な月別アーカイブの年別ツリー化+折りたたみ

December 18,2006 12:39 AM
Tag:[, , ]
Permalink

JavaScript 不要な月別アーカイブの年別ツリー化+折りたたみ月別アーカイブのリスト表示は、Movable Type のデフォルト機能では全ての年月を連続で表示することしかできませんが、プラグインを利用することで年毎の表示が可能になり、これを利用して、以前「月別アーカイブリストのツリー化 for Movable Type」を紹介致しました。

さらに、年毎のツリー化リストに折りたたみマークを与えるために「月別アーカイブリストの年毎の折りたたみ for Movable Type」もエントリーしました。この複合技が左のスクリーンショットになります。

上記とは別に、ツリー化をより簡単に実現するテクニックとして、「JavaScript 不要なサイドメニューのツリー化 for Movable Type」をエントリーしました。
ですが、これまでの「月別アーカイブのツリー化+折りたたみ」に「JavaScript 不要なサイドメニューのツリー化 for Movable Type」を適用する場合のタグの構成が不明になっておりました。記事を跨って参照すれば不可能ではありませんが、やや分かりにくいです。

ということで、本エントリーで、月別アーカイブリストの

  • 年別ツリー化
  • 年別折りたたみ
  • 全体の折りたたみ

について、まとめてカスタマイズする手順を紹介致します。

以前、ご質問を頂いていた回答ですが、公開が遅くなり申し訳ございませんでした。この場をお借りしてお詫び申し上げます。

1.プラグインのダウンロード・アップロード

下記のリンクよりプラグインをそれぞれダウンロードしてください。

ArchiveDateHeader プラグイン
ArchiveDateFooter プラグイン

ダウンロードしたアーカイブを解凍し、中にあるファイルを、Movable Type の plugins ディレクトリにアップロードします(詳細はそれぞれのエントリーを参照ください)。
管理メニューの

メイン・メニュー > システム・メニュー > プラグイン

で、それぞれのプラグイン名が表示されればOKです。

2.スクリプトのダウンロード

下記のリンクより menufolder.js をダウンロードしてください。

download

3.スクリプトの修正

menufolder.js の中間辺りにアーカイブリスト表示用の設定項目がありますので、赤色部分 *1 を必要に応じて適宜変更してください。デフォルトの状態では各年の最後尾に折りたたみマークが表示される設定になっています。

リスト3.1 menufolder.js の修正箇所

// アーカイブリスト用折りたたみマーク
// 上:閉じている状態で表示されるマーク
// 下:開いている状態で表示されるマーク
var openMarkForArchives  = '';
var closeMarkForArchives = '';
 
// アーカイブリスト用折りたたみマーク挿入位置
// カテゴリー前に折りたたみマークを配置:true
// カテゴリー後に折りたたみマークを配置:false
var preMarkForArchives = false;
 
// アーカイブリストのタイトルとマークのスペース
var offsetForTitleAndMarkOfArchives = 1;

4.スクリプトのアップロード

menufolder.js を index.html のあるディレクトリにアップロードします。

5.テンプレートの修正(script タグ追加)

月別アーカイブリストを表示したいテンプレートに、 </head> の直前にリスト5.1 のタグを追加します(すでに他の折りたたみで設定済の方はこの項をスキップしてください)。

リスト5.1 script タグの追加

<script type="text/javascript" src="<$MTBlogURL$>menufolder.js"></script>

6.ツリー画像のダウンロード・アップロード

下記のツリー画像をダウンロードしてください。画像は、実線・点線の2種類を用意しています。それぞれ2つの画像がありますのでご注意ください。

実線:tree_lst_solid.gif / tree_end_solid.gif
点線:tree_lst_dotted.gif / tree_end_dotted.gif

保存方法は、(IEの場合)リンクをクリックして一旦画像を表示し、その後に「ファイル」→「名前をつけて保存」で保存するか、リンクを右クリックして「対象をファイルに保存」を選択します。

ダウンロードした画像ファイルのファイル名をそれぞれ

tree_lst.gif
tree_end.gif

に変更して、サーバにアップロードします。アップロード先は任意ですが、ここでは index.html と同じディレクトリにアップロードしてください。

7.月別アーカイブの年別ツリー化表示+折りたたみ用タグの設定

月別アーカイブの年別ツリー化表示+折りたたみができるタグ(リスト7.1)を、表示させたいテンプレートのサイドバー部分に貼り付けます。div 要素は当サイトで公開しているテンプレートに合わせたものですので、設定は任意です。お好みに応じて修正してください。

リスト7.1-1 月別アーカイブの年別ツリー化表示+折りたたみ用タグ(div要素を利用)

<div class="sidetitle">
Monthly Archives
</div>
 
<div class="side">
<MTArchiveList archive_type="Monthly">
<MTArchiveDateHeader><div id="archive<$MTArchiveDate format="%Y"$>name"><span><$MTArchiveDate format="%Y年"$></span></div><ul id="archive<$MTArchiveDate format="%Y"$>list" class="tree"></MTArchiveDateHeader>
<li class="tree<MTArchiveDateFooter>_end</MTArchiveDateFooter>"><a href="<$MTArchiveLink$>"><$MTArchiveDate format="%B月"$></a> [<$MTArchiveCount$>]</li><MTArchiveDateFooter></ul></MTArchiveDateFooter>
</MTArchiveList>
</div>
 
<script type="text/javascript">
//<![CDATA[
<MTArchiveList archive_type="Monthly"><MTArchiveDateHeader>FoldNavigation('archive<$MTArchiveDate format="%Y"$>','off',false);</MTArchiveDateHeader>
</MTArchiveList>
//]]>
</script>

リスト7.1-2 月別アーカイブの年別ツリー化表示+折りたたみ用タグ(dl/dt/dd要素を利用)

<dt class="sidetitle">
Monthly Archives
</dt>
 
<dd class="side">
<MTArchiveList archive_type="Monthly">
<MTArchiveDateHeader><div id="archive<$MTArchiveDate format="%Y"$>name"><span><$MTArchiveDate format="%Y年"$></span></div><ul id="archive<$MTArchiveDate format="%Y"$>list" class="tree"></MTArchiveDateHeader>
<li class="tree<MTArchiveDateFooter>_end</MTArchiveDateFooter>"><a href="<$MTArchiveLink$>"><$MTArchiveDate format="%B月"$></a> [<$MTArchiveCount$>]</li><MTArchiveDateFooter></ul></MTArchiveDateFooter>
</MTArchiveList>
</dd>
 
<dd> 
<script type="text/javascript">
//<![CDATA[
<MTArchiveList archive_type="Monthly"><MTArchiveDateHeader>FoldNavigation('archive<$MTArchiveDate format="%Y"$>','off',false);</MTArchiveDateHeader>
</MTArchiveList>
//]]>
</script>
</dd>

メニューリスト全体を折りたたみたい場合は、リスト7.1-1 または7.1-2 に、下記の青色部分 *1 を追加してください。

リスト7.2-1 月別アーカイブの年別ツリー化表示+折りたたみ用タグ2(div要素を利用)

<div class="sidetitle" id="monthlyname">
Monthly Archives
</div>
 
<div class="side" id="monthlylist">
<MTArchiveList archive_type="Monthly">
<MTArchiveDateHeader><div id="archive<$MTArchiveDate format="%Y"$>name"><span><$MTArchiveDate format="%Y年"$></span></div><ul id="archive<$MTArchiveDate format="%Y"$>list" class="tree"></MTArchiveDateHeader>
<li class="tree<MTArchiveDateFooter>_end</MTArchiveDateFooter>"><a href="<$MTArchiveLink$>"><$MTArchiveDate format="%B月"$></a> [<$MTArchiveCount$>]</li><MTArchiveDateFooter></ul></MTArchiveDateFooter>
</MTArchiveList>
</div>
 
<script type="text/javascript">
//<![CDATA[
<MTArchiveList archive_type="Monthly"><MTArchiveDateHeader>FoldNavigation('archive<$MTArchiveDate format="%Y"$>','off',false);</MTArchiveDateHeader>
</MTArchiveList>
FoldNavigation('monthly','off',false);
//]]>
</script>

リスト7.2-2 月別アーカイブの年別ツリー化表示+折りたたみ用タグ2(dl/dt/dd要素を利用)

<dt class="sidetitle" id="monthlyname">
Monthly Archives
</dt>
 
<dd class="side" id="monthlylist">
<MTArchiveList archive_type="Monthly">
<MTArchiveDateHeader><div id="archive<$MTArchiveDate format="%Y"$>name"><span><$MTArchiveDate format="%Y年"$></span></div><ul id="archive<$MTArchiveDate format="%Y"$>list" class="tree"></MTArchiveDateHeader>
<li class="tree<MTArchiveDateFooter>_end</MTArchiveDateFooter>"><a href="<$MTArchiveLink$>"><$MTArchiveDate format="%B月"$></a> [<$MTArchiveCount$>]</li><MTArchiveDateFooter></ul></MTArchiveDateFooter>
</MTArchiveList>
</dd>
 
<dd> 
<script type="text/javascript">
//<![CDATA[
<MTArchiveList archive_type="Monthly"><MTArchiveDateHeader>FoldNavigation('archive<$MTArchiveDate format="%Y"$>','off',false);</MTArchiveDateHeader>
</MTArchiveList>
FoldNavigation('monthly','off',false);
//]]>
</script>
</dd>

8.CSS

リスト8.1 をスタイルシートに追加してください。

リスト8.1 CSS

ul.tree {
    margin: 0 0 0 15px;
    padding: 0;
    font-size: 9px;
    list-style: none;
}
ul.tree ul {
    margin: 0 0 0 10px;
    padding: 0;
}
ul.tree li {
    margin: 0;
    padding: 0 0 0 11px;
    background-image: url(tree_lst.gif);
    background-repeat: no-repeat;
    list-style: none;
}
ul.tree li.tree_end {
    background-image: url(tree_end.gif);
    list-style: none;
}

*1:色覚障害等で色が識別できない場合は、サイト右上の「Styles」メニューにある Gray Scale をクリックしてください。IEではグレースケール表示され、青色部分が下線表示、赤色部分が二重下線で表示されます。Firefox/Opera ではカラー表示のままですが下線表示に切り替わります。なお設定の都合上、リンクとテキスト表示が判断できなくなりますので予めご容赦ください。

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

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

AMN
Categories
Monthly Archives
2021年
2020年
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