クイックホームページメーカーやWebサイト作成に関する情報サイト。QHM専門のリンク集・デザインカスタマイズを中心に情報を公開中！

メニュー部に設置できる文字サイズ変更ボタン

解説

１）ダウンロード

↓のダウンロードボタンをクリックし、保存して下さい。
　

※zip化していますので、Lhaplusなどを使用して解凍してください。

２）swfuを使用してファイルをアップロードする

2-1　ユーザー認証後、「swfu」を開き「アップロード」をクリック

2-2　先ほどダウンロード-解凍した「fsp」フォルダを開き、中に入っているファイルをすべて選択しアップロードする

2-3　アップロード作業は完了になります

　

３）ソースを記述する

3-1　編集ボックスの「設定」→「サイト情報の設定」→「その他のタグ」に　サイト情報の設定で記述するソース　を貼り付ける

3-2　編集ボックスの「メニュー管理」→「メニュー編集」　任意の箇所にメニュー部に記述するソース　を貼り付ける

3-3　作業はすべて完了になります

　

４）記述例

どちらもコピペして利用してください。

• サイト情報の設定で記述するソース　↓

  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="swfu/d/jquery.cookie.js"></script>
  <script type="text/javascript" src="swfu/d/fsp.js"></script>

• メニュー部に記述するソース　↓

  #html{{
  <h2>文字サイズ変更</h2>
  <div style="text-align:center">
  <img src="swfu/d/txtszg.gif" onclick="font('13px')" onkeypress="return(true);" onmouseover="this .src='swfu/d/txtszg4.gif'" onmouseout="this .src='swfu/d/txtszg.gif'" alt="文字サイズ小" />
  <img src="swfu/d/txtszg2.gif" onclick="font('15px')" onkeypress="return(true);" onmouseover="this .src='swfu/d/txtszg5.gif'" onmouseout="this .src='swfu/d/txtszg2.gif'" alt="文字サイズ中" />
  <img src="swfu/d/txtszg3.gif" onclick="font('17px')" onkeypress="return(true);" onmouseover="this .src='swfu/d/txtszg6.gif'" onmouseout="this .src='swfu/d/txtszg3.gif'" alt="文字サイズ大" />
  </div>
  }}

表示例

　
サイト右上の文字サイズ変更が実例になります。
　

留意点

箇条書きや見出し１～３、先頭に半角スペースを付けた場合の文字などは変わりません。主に本文の見易さを向上させるために使ってください。

応用

３つある　onclick="font('13px')　のpxサイズを変更すれば任意の大きさに変更できます。
箇条書きなど文字が変わらないのをうまく利用することでレイアウトが崩れるのを防ぐこともできます。色々試してみましょう。

応用 2

次のソースを利用することで上記よりもより簡単に設置することができます。無償版ユーザーでも使いやすい文字変更ボタンです。
博多連々様から情報をいただきました。

まず、設定 > サイト情報の設定 > その他のタグ　に下のタグを入れる。

<script type="text/javascript"><!--
function large()  { document.body.style.fontSize = "120%"; }
function middle() { document.body.style.fontSize = "100%"; }
function small()  { document.body.style.fontSize = "80%"; }
//--></script>

120% 等の数字は任意に変える。14pxなど、他の単位でもよい。

次にメニュー部に以下のソースをコピペして利用してください。

#html{{
<div style="padding: 0pt 0pt 4px; background-color: rgb(250, 250, 250); text-align: center;">
<span style="color: rgb(153, 51, 102);">文字サイズ変更</span><br/>
<input type="button" value="小" onclick="small()"/>
<input type="button" value="中" onclick="middle()"/>
<input type="button" value="大" onclick="large()"/>
</div>
}}