Read Me | wm

はじめに

Web Clapのお礼ページスキンと管理ページスキンです。携帯向ページは変化しません。
ブラウザのCSS実装状況によってディテールの異なるパーツがあります。
Web Clap本体のバージョンは2.09で確認しています。本体バージョンが異なる場合は、スキンの修正が必要になる事があります。変更箇所はWeb Clap本体の更新履歴を確認してください。
スキンを導入する前に、Web Clap付属の初期状態のスキンで、CGIの機能や動作を確認してください。
ライセンスは『Creative Commons 表示 - 継承 2.1 日本 (CC BY-SA 2.1)』です。
http://creativecommons.org/licenses/by-sa/2.1/jp/
使用に際して生じたいかなる損害も当方は責任を負いません。作業前のバックアップ推奨です。
設置・カスタマイズに関するサポートは行っておりません。

上に戻る

使い方

お礼ページ用スキン変更

defaultフォルダの内容を、clap/skin/内にアップロード

デザインを変更する場合は、引き続き『お礼ページのデザイン変更』を行ってください。

管理ページのスキンを変更する場合は、引き続き『管理ページ用スキン変更』を行ってください。

上に戻る

お礼ページのデザイン変更

『使い方』の手順通りにdefaultを導入する
※extra_designは差分のみです(htmlファイルは含まれていません)
extra_designフォルダを開き、使用したいデザインフォルダの内容を、clap/skin/内にアップロード

デザイン一覧

simple (default): アップロード画像: 縦横お好きなサイズ可
テキスト部分: 400px幅
simple_dx: アップロード画像: 縦横お好きなサイズ可
テキスト部分: 400px幅
『simple』のフォーム周りがちょっとツヤツヤしている版

上に戻る

管理ページ用スキン変更

adminフォルダの内容を、clap/skin/内にアップロード

管理ページの色を変更する場合は、引き続き『管理ページの色変更』を行ってください。

上に戻る

管理ページの色変更

【管理ページ用スキン変更】の手順通りにadminを導入する
extra_colorフォルダを開き、使用したい色フォルダの中のcommon.cssを、設置したwebclapのskin内にアップロード
- 色一覧▽
  ■teal (※default) ■blue ■brown ■green ■purple

上に戻る

カスタマイズ

カスタマイズの前に

ファイルを編集する場合は、文字コードをUTF-8N(＝UTF-8 BOM無し)に指定して保存してください。

日本語(等の2バイト文字)を含まないファイルは、エディタによってはShift-JISとして開く事がありますので、文字コードを指定しなおしてください。

異なる文字コードで保存すると、文字化けやエラーになったりします。
cssファイルが文字化けした場合は、文字化け付近の指定が適用されなくなる等の問題が発生します。

参考:
文字コード＞UTF-8のBOMについて
 EmEditorのインストール
 EmEditorの設定

上に戻る

htmlのカスタマイズ

入力項目の追加

メッセージ送信フォームの追加方法を参照してください。

上に戻る

項目名とフォームを横並びにする

skin/thanks.htmlを開いて↓の部分を

<form action="./clap.cgi" method="post">
	<fieldset>
		<legend>送信フォーム</legend>
		<input type="hidden" name="count" value="${INFO_COUNT}" />
		<input type="hidden" name="page" value="${INFO_PAGE}" />
		<input type="hidden" name="id" value="${INFO_ID}" />
		<p class="submit"><input type="submit" value="もっと送る" class="submit_button" /></p>
		<ul>
			<li>一言あればどうぞ。拍手だけでも送信することができます。</li>
		</ul>
		<p><textarea name="message" cols="50" rows="4"></textarea></p>
		<p>返信
			<input type="radio" name="option1" value="★返信必要" id="option_res_yes" /> <label for="option_res_yes">必要</label>
			<input type="radio" name="option1" value="★返信不要" id="option_res_no" /> <label for="option_res_no">不要</label>
			<input type="radio" name="option1" value="" checked="checked" id="option_res_either" /> <label for="option_res_either">どちらでも</label>
		</p>
	</fieldset>
</form>

以下のように変更

<form action="./clap.cgi" method="post">
	<fieldset>
		<legend>送信フォーム</legend>
		<input type="hidden" name="count" value="${INFO_COUNT}" />
		<input type="hidden" name="page" value="${INFO_PAGE}" />
		<input type="hidden" name="id" value="${INFO_ID}" />
		<p class="submit"><input type="submit" value="もっと送る" class="submit_button" /></p>
		<ul>
			<li>一言あればどうぞ。拍手だけでも送信することができます。</li>
		</ul>
		<dl>
			<dt>Comment</dt>
				<dd><textarea name="message" cols="50" rows="4"></textarea></dd>
			<dt>返信</dt>
				<dd>
					<input type="radio" name="option1" value="★返信必要" id="option_res_yes" /> <label for="option_res_yes">必要</label>
					<input type="radio" name="option1" value="★返信不要" id="option_res_no" /> <label for="option_res_no">不要</label>
					<input type="radio" name="option1" value="" checked="checked" id="option_res_either" /> <label for="option_res_either">どちらでも</label>
				</dd>
		</dl>
	</fieldset>
</form>

上に戻る

CSSのカスタマイズ

編集するファイルについて

skin/clap.css お礼ページ
skin/common.css 管理ページ

上に戻る

大まかな設定部分にジャンプ (基本文字サイズ・基本リンク色等)

skin/clap.css(お礼ページ)かskin/common.css(管理ページ)を開いて、ファイル内を『※』で検索すると、大まかな設定部分に飛ぶ事が出来ます。

上に戻る

[管理ページ] 左側メニュー位置を固定しない

skin/common.cssを開いて、ファイル内をposition: fixed;/* 固定にしたくない場合はこの行を削除してください※ */で検索して削除してください。
この行を削除すると、左側メニューも右側本文と一緒にスクロールするようになります。
※IE6等のposition: fixed;に対応していない古いブラウザでは、メニューの固定は無効です。

上に戻る

ヘルプ

ファイルを編集したら文字化けした

ファイルを編集する場合は、文字コードをUTF-8N(＝UTF-8 BOM無し)に指定して保存してください。
異なる文字コードで保存すると、文字化けやエラーになったりします。
cssファイルが文字化けした場合は、文字化け付近の指定が適用されなくなる等の問題が発生します。
※日本語(等の2バイト文字)を含まないファイルは、エディタによってはShift-JISとして開く事がありますので、文字コードを指定しなおしてください。

参考:
文字コード＞UTF-8のBOMについて
 EmEditorのインストール
 EmEditorの設定