トップ –> MovableType –> フォントサイズの切り替え1

MovableType

フォントサイズの切り替え1

フォントサイズの切り替えの方法は、いくつかあるようですがスタイルシートを切り替えるという方法をご紹介します。

1.styleswitcher.js のダウンロード
こちらのサイト「A List Apart」よりstyleswitcher.jsをダウンロードして保存します。
通常MTはUTF-8ですのでUTF-8で保存。個々の環境にあわせて保存してください。

2.styleswitcher.js のアップロード
FTPでstyleswitcher.jsをローカル・サイト・パスにアップロードします。

3.切替用のスタイルシートの準備
現在使用しているスタイルシートをコピーし、「テンプレート」→「新しいインデックス・テンプレートを作る(MT3.2:テンプレートを新規作成)」でペースト、フォントサイズを切替たい箇所を変更。
(content p のフォントサイズを変更したい場合は、content p のスタイルの文字サイズ部分を変更)
「テンプレートの名前」「出力ファイル名(ここではstyles-site-large.css)」を記入し保存・リビルド。

4.テンプレートの修正
テンプレート内(メイン、カテゴリー、個別等)の<head>~</head>内のスタイルシート部分を下記に変更。

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

赤い部分は、設定したスタイルシート名をいれてください。
次に下記を追加。

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

5.ソースの追加
フォントサイズ切り替え用のソースを追加します。

フォントサイズ:<a href="#" title="フォントサイズ:小" onclick="setActiveStyleSheet('default'); return false;"><span style="font-size:10px;">A</span></a> | <a href="#" title="フォントサイズ:大" onclick="setActiveStyleSheet('large'); return false;"><span style="font-size:12px;">A</span></a>

フォントサイズ:A|というようになります。
の部分は、個々に修正してみてください。
ソースを追加したらリビルドして終了です。

欠点としては、スタイルシートの変更の際に2つ修正しなければならないというところでしょうか。複数のスタイルシートを使用している場合は、大変かもしれません。

Dwnld_iTunes_bdg_H_wht.gif

トラックバック

ご意見・ご感想を投稿

・ ご意見・ご感想の内容は確認後表示されます。しばらくお待ちください。
・ 本サイトと無関係の内容は、削除いたします。ご了承ください。

August 15, 2007

      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31  

Recent Comments

Index