サイトの変更箇所
Top / DesignChange
（D++ QHM Cool Design Labo様参考）
文字サイズ変更ボタンの設置
- D++さんからダウンロードしたファイルを全部SWFUにアップロードする。
- 編集画面の設定→サイト情報の設定→その他のタグに下記のタグを入れる。
<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> }}
scrollsmoothlyの設置
- ダウンロードしたファイル（scrollsmoothly.js）をSWFUにアップロードする。
- 編集画面の設定→サイト情報の設定→その他のタグに下記のタグを入れる。
<script type="text/javascript" src="swfu/d/scrollsmoothly.js"></script>
main.css の編集
見出し２の下線の色変更（204行あたり）
#body h3 {
line-height:1em;
color:#4d4d4d;
font-size:18px;
background-image:url(h3_bg.png);
background-repeat:no-repeat;
background-position:left center;
border-bottom:solid 1px #b25050;
margin:10px 0 5px;
padding:3px 35px;
border-bottom:solid 1px #b25050;←この色番号を変更
サイト”あーちゃん”の変更色は【#b25050】
メニューバーの背景の色の変更 color.cssの361~364あたり
#search_form{
color:#666;
text-align:center;
background-color:#ff5ee;←ここを好きな色番号に変える
border:none;
背景を画像に変更
画像ではなく背景色が適用されている場合の変更（全方向リピート）「color.css」
- ３行目〜８行目body内に
background-image:url("○○○");を追加します※○○○はオリジナル画像の名前にする - オリジナルの画像が（jimi-a.jpg）なので、background-image:url("○○○"); をbackground-image:url（"jimi-a.jpg"）に変更して
background-image:url("jimi-a.jpg");と、変更しました。 - 注 さらにオリジナルの画像である（"jimi-a.jpg"）をFTPを使用し「color.css」と「layout.css」と同じ階層にアップロードしました。
もともと画像が適用されている場合の変更（全方向リピート）「color.css」
- ３行目〜８行目body内のbackground-image:url("○○○"); をオリジナル画像の名前に変更します
- 例えばオリジナルの画像が（jimi-a.jpg）という場合は
background-image:url("○○○");↓
background-image:url（"jimi-a.jpg"）
に変更します - 注 さらにオリジナルの画像である（"jimi-a.jpg"）をFTPを使用し「color.css」と「layout.css」と同じ階層にアップロードします
留意点
- 画像はできる限り小さくすること。できれば１００バイト以下が好ましい。
- 応用リピートの有無でさまざまな応用が可能になります。例えば一枚絵の背景にすることもできますし、縦方向だけ、横方向だけ、全方向にリピートなど色々できるらしいです。今度試してみたいです！
リンクできる画像にカーソルを乗せた時に画像を半透明する 「color.css」
- ２８行目に以下のコードをコピー＆ペーストします
a:hover img{ opacity:0.85; /* opera firefox safari */ filter: alpha(opacity=85); /* ie */ } - 不透明度数を変更させる場合は、opacity:0.85;とfilter: alpha(opacity=85);の数字を変更する。０になるほど透明になり、１００になるほど不透明になる
応用テクニック・「ロゴ」画像を半透明にしない 「color.css」
- ６８行目に改行（Enterキー）を入れ、１行空白を作ります
- ６８行目に以下のコードをコピー＆ペーストします
#logo a:hover img{ opacity:1; /* opera firefox safari */ filter: alpha(opacity=100); /* ie */ }
応用テクニック・「ＱＨＭライセンスのＲＳＳ・Ｗ３Ｃバナー」画像を半透明にしない 「plugin.css」
- 「color.css」と同じ階層にある「plugin.css」をＰＣ側にダウンロードし、テキストエディタで開きます。
- ４７１行目か４７２行目に以下のコードをコピー＆ペーストします
div#licence a:hover img{ opacity:1; /* opera firefox safari */ filter: alpha(opacity=100); /* ie */ }
