上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 文字サイズ変換ツール。「大」「中」「小」なんていうのが親切なサイトには常備されています。
 それを、当サイトが紹介しているテンプレートに装着できます。

現在テンプレートの仕様が変わっています。「メイリオフォント」が使用されているテンプレートのほとんどで、このスクリプトは動作しません。
 メイリオが使われていないものは、普通に動作すると思います。

見本↓


 以下のタグを、「プラグインのフリーエリア」にコピー&ペーストするだけです。
 一応当サイト用に作ってありますが、時々他のテンプレートで動作する場合もあります。他のテンプレートで使いたい場合は、ページ下部にチュートリアルが用意されています。


<div class="plugin-freearea" &align>
<script type="text/javascript">
<!--
function mojiSize(FONTSIZE){
if (FONTSIZE==0){
document.getElementById("main").style.fontSize="140%";
} else if (FONTSIZE==1){
document.getElementById("main").style.fontSize="100%";
} else if (FONTSIZE==2){
document.getElementById("main").style.fontSize="90%";
}
}
-->
</script>
<input type="button" value="" onclick="mojiSize(0)" style="font-size:12px;border-width:1px;">
<input type="button" value="" onclick="mojiSize(1)" style="font-size:12px;border-width:1px;">
<input type="button" value="" onclick="mojiSize(2)" style="font-size:12px;border-width:1px;">
</div>
(*1)

 赤字の部分が、簡単に変更出来る部分です。
「140%」というのは、「文字サイズを元のサイズの140%の大きさにしなさい。」という命令文です。他の単位(px等)を指定することもできます。
「大」というのは、ボタンの文字です。画面に表示される文字なので、好きな文字を入れてください。




■CSS応用編

 現在小さめの文字で、ほとんどデフォルトに近い「inputボタン」を表示していますが、このインプットタグにスタイルを当てることも可能です。
 タグ中に「<input ~」から始まる部分が3つ用意されています。その中の

<input type="button" value="大" onclick="mojiSize(0)" style="font-size:11px;border-width:1px;">

 この「緑色」で示した部分がスタイルシート部分です。

 スタイルの詳細については、こちらを参照してください。
実用的スタイルシート入門




■中級編

 他のテンプレートで適応するには?
 タグの緑色で示した部分がポイントになります。これは、HTML部分の「ID要素」を示しています。
 当サイトのテンプレート構造は…

<div id="header">
ヘッダー
</div>
<div id="conteinar">
コンテナ
<div id="banner">
ヘッダーバナー
</div>
<div id="main">
メインカラム
</div>
<div id="side">
サイドバー
</div>
<div id="footer">
フッター
</div>
</div>
<div id="fc2ad">
FC2フッター
</div>
(*2)

 このような感じになっています。
 この中の青の部分「<div id="main">」の要素が、文字サイズ変換ツールのタグ(*1)、緑の「main」と対応しているわけです。それで、「大」ボタンを押せば、メインカラム内のみ、文字サイズが変わると言うわけです。

 ですので、ご使用のテンプレート構造を把握してもらって、(*1)タグの緑の部分を書き換える必要があります。
 ID要素でなければ動作しないので(class要素では反応しない…)その点を注意してください。

 例えば、当サイトのテンプレートを使用した場合、緑の「main」を「side」と置き換えることで、文字サイズ変換ツールのボタンを押すと、サイドバーの文字サイズが変えられるようになります。


■カスタマイズ一覧
テンプレート簡単カスタマイズ
このエントリーをはてなブックマークに追加
Sun.03.14.2010
Comment
Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。