TopMovable Typeテンプレート > 2005年7月
2005年7月13日

3カラム可変と3カラム固定を切り替える

July 13,2005 11:51 PM
Tag:[, , , ]
Permalink

3カラム切り替え当サイトで公開している3カラムテンプレートは可変と固定の2種類がありますが、これをスタイルシート切替を用いて瞬時に切り替えるカスタマイズです。どちらのタイプにするか悩まれている方はこれで解消されるのではないかと思います。
とりあえず私のサイトの右にある「Stylesheets」で可変(Default)⇔固定(Fixed3Column)を切り替えられるようにしていますので、お試しください。全てのブラウザでの正常な動作は保証しておりませんので予めご了承ください。

以下、3カラム可変を使っている状態から3カラム固定のスタイルシートを追加する手順を説明します。3カラム固定から3カラム可変のスタイルを追加する場合は「固定」と「可変」を読み替えて、6項をスキップしてください。

1.3カラム固定スタイルシート用インデックス・テンプレートの作成
管理メニューの「テンプレート」→「インデックス・テンプレート」の「新しいインデックス・テンプレートを作る」をクリック。次のページで下記を設定します。

テンプレートの名前:スタイルシート(3カラム固定) *任意の名称でOKです
出力ファイル名:styles-site2.css
テンプレートの中身:テンプレートのページより3カラム固定のエントリーにジャンプしてスタイルシートをコピー&ペースト

設定が完了したら保存・再構築します。

2.テンプレート修正
メインページ/カテゴリー・アーカイブ/日付アーカイブ/個別エントリーアーカイブ/コメント・プレビュー/コメント・エラーの各テンプレートのヘッダに設定されているCSSファイルの設定(赤色)を、下記のように変更します(青色)。

<link rel="stylesheet" href="<$MTBlogURL$>styles-site.css" type="text/css" />
<link rel="stylesheet" href="<$MTBlogURL$>styles-site.css" type="text/css" title="Default" />
<link rel="alternate stylesheet" href="<$MTBlogURL$>styles-site2.css" type="text/css" title="Fixed" />

一番上に書かれたスタイルシートが起動時に使われ、新しいスタイルシートをその下に設定しています。href 属性に作成したスタイルシートのファイル名(styles-site2.css)、title 属性に任意の名称(Fixed)を設定します。この名称は次項のスクリプトで起動される際のキー情報になります。
設定が完了したら保存します。

使用するテンプレートでこの設定がもれているとスタイルを切り替えた状態でページを切り替えた際にスタイルがなくなることがありますのでご注意ください。なおその際はトップページ等に戻ってスタイル切替のメニューをクリックすれば元に戻りますので、スタイルが崩れても慌てないようにしましょう。

3.styleswitcher.js のダウンロード・アップロード
下記の公式サイトに styleswitcher.js があります。

A List ApartAlternative Style: Working With Alternate Style Sheets

記事の下の方に「download」または「Download styleswitcher.js」というリンクがありますので、クリックして styleswitcher.js をダウンロードしてください。そしてダウンロードした styleswitcher.js をそのままローカル・サイト・パス(index.html と同じディレクトリ)にアップロードします。

4.テンプレートに styleswitcher.js の設定
2項で設定した各テンプレートについて <head>~</head> の間に下記を追加します。

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

設定が完了したら保存します。

5.切り替えメニューの設定
2項で設定した各テンプレートのサイドメニューに以下のタグを追加します。例は公開テンプレートの形式にあわせています。

<div class="sidetitle">
Stylesheet
</div>
 
<div class="side">
<a href="#" onclick="setActiveStyleSheet('Default'); return false;" onkeypress="setActiveStyleSheet('Default'); return false;">Default</a><br />
<a href="#" onclick="setActiveStyleSheet('Fixed'); return false;" onkeypress="setActiveStyleSheet('Fixed'); return false;">Fixed</a>
</div>

setActiveStyleSheet の後方にあるパラメータは、2項で設定した title 属性の名称(Default/Fixed)と一致するように設定します。
設定が完了したら保存・再構築します。

6.テンプレート修正
3カラム固定のスタイルシートはボックスモデルのCSSバグに対処するため、サイドバーの div タグを余分に付与しています。ここでは3カラム可変のテンプレートを元としているので2項で編集した各テンプレートに対し、下記のように青色部分を追加してください。

<!-- 左サイドバー開始 -->
<div id="links-left-box">
<div id="links-left">
      :
</div>
</div>
<!-- 左サイドバー終了 -->
 
<!-- 中央コンテンツ開始 -->
      :
<!-- 中央コンテンツ終了 -->
 
<!-- 右サイドバー開始 -->
<div id="links-right-box">
<div id="links-right">
      :
</div>
</div>
<!-- 右サイドバー終了 -->

設定が完了したら保存・再構築します。

以上です。3カラム可変から固定に切り替えた場合、カラムずれが発生する場合がありますので、テンプレートのページのFAQにて類似した問題をご確認ください。またスタイルシートがキャッシュに残って変更が反映されない場合があるようですので、IEであれば更新ボタンをクリックしてみてください。

Comments [22] | Trackbacks [5]
2005年7月 2日

カウンタ設置方法

July 2,2005 11:12 PM
Tag:[, , ]
Permalink

アクセスカウンタをテンプレートに設置する方法です。
ここでは「夢カウンタ」の設置例を紹介します。

KENT WEBDream Counter

設置方法の説明は上記ページにありますのでここでは Movable Type の場合について説明します。
なおフリーのカウンタは他にも色々なものが出回ってます。このエントリーで紹介しているものより簡単なものもあると思いますので、ご自身で良いものを探してみてください。

1.カウンタ用スクリプトのダウンロード
Dream Counterのページより dream.lzh または dream.zip をダウンロードします。ダウンロード後、解凍すると下記のファイルが表示されます。

dream.cgi
drinit.cgi
drmgr.cgi
gifcat.pl
index.dat

2.カウンタ素材のダウンロード
このカウンタには表示するためのカウンタ素材(0~9までの画像ファイル)が添付されていませんので、
素材をダウンロードする必要があります。
やり方が分からない方はとりあえず下記のカウンタ画像をお使いください。

0123456789

下の couter.zip に上記のカウンタ画像が入っていますのでクリックしてダウンロードし、解凍してください。

counter.zip

3.設定ファイルの修正
dream.cgi および drmgr.cgi を任意のエディタで開いて、1行目の

#!/usr/local/bin/perl

#!/usr/bin/perl

に変更します。言い換えると mt.cgi の 1行目と同じ内容にします(といっても -w を付与する必要はありません)。
また drinit.cgi で下記の設定をしておくと良いでしょう。

$ip_chk = 1;

これは同一IPアドレスからのアクセスを重複カウントしない設定です。
その他の設定については公式サイトの説明を参照ください。

4.ファイルのアップロード
1項と2項のファイルをアップロードします。アップロードするディレクトリは CGIPath/count としています。各ファイルの配置とアクセス権は下記のようにしてください(上記サイトからの引用)。

CGIPath/count/dream.cgi  [705]
CGIPath/count/drmgr.cgi  [705]
CGIPath/count/drinit.cgi [604]
CGIPath/count/gifcat.pl  [604]
CGIPath/count/data [707] /index.dat [606] ← カウンタ値を保存するファイル
CGIPath/count/lock [707] /
CGIPath/count/gif1/0.gif … 9.gif ← カウンタ画像

gif1 および lock ディレクトリの名称は変更しないでください。lock ディレクトリは作成のみです。

5.テンプレートの設定
テンプレートに下記のタグを追加します。

<img src="<$MTCGIPath$>count/dream.cgi?id=index" alt="カウンタ" />

公開テンプレートであれば下記の部分を変更します。

<div class="sidetitle">
Counter
</div>
<div class="side-counter">
<img src="" alt="カウンタイメージ" />
<img src="<$MTCGIPath$>count/dream.cgi?id=index" alt="カウンタ" />
</div>

追加したら保存・再構築してください。これで正常に表示されればOKです。

6.カウンタ値の修正等
最初に立ち上げた時、カウンタの値は0から開始されます。これまでのカウンタ値を反映させたい場合は、

CGIPath/count/data/index.dat

にカウンタ値が設定されていますので、エディタで開いて任意の値に変更してください。

以上です。カウンタ自体の動作については Movable Type に依存するものではありませんので、不具合等につきましては公開サイトの情報より確認してください(当方の説明誤りについては速やかに修正致します)。

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

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

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