witchmakers blog

★2011/06/03　配布テンプレートのwm_freo.cssに追記しました

1. ネタバレボタンの実装についての通りに導入作業を行う。
2. css/wm_freo.cssを開いて、一番した辺りに↓を追加

   /*================================================
   	ネタバレボタン
   ================================================*/
   span.hidearea {
   	line-height: 2.0;
   	cursor: pointer;
   	padding: 4px 12px;
   	border: 1px solid #707070;
   	background-color: #808080;
   	color: #FFFFFF;
   }
   span.hidearea:active, span.hidearea:hover {
   	border: 1px solid #B0B0B0;
   	background-color: #A0A0A0;
   	color: #FFFFFF;
   }
   div.hidearea {
   	padding: 7px 20px;
   	border: 1px solid #F0F0F0;
   	background-color: #F5F5F5;/* ↓colorと同じ色にする */
   	color: #F5F5F5;/* javascriptOFF時の文字色(↑background-colorと同じ色にする) */
   	/*※javascriptON時の文字色は『js/default.js』を編集*/
   }

テスト

通常

表示文字変更

EmEditor Free

高機能テキストエディタの高機能なフリー版
http://jp.emeditor.com/modules/download2/rewrite/tc_5.html
ページの下の方、『EmEditor Free X.XX.X のダウンロード』から

便利な機能(一例)≫ 分割表示[Ctrl+F12]、並べて表示[2つファイルを開く＞片方のタブの上で右クリック＞新しいグループ＞メニュー＞ウィンドウ＞左右(上下)に並べて表示]、書き換え禁止[ウィンドウの右下辺りをダブルクリック]、HTML/CSS/PHP/Javascript/etcの色分け表示、ユーザー定義の強調表示[メニュー＞現在(すべて)の設定のプロパティ＞強調]、行数表示[メニュー＞ツール＞すべての設定のプロパティ＞基本＞行番号を表示]、文字コードUTF-8Nが扱える

Firebug (Firefoxアドオン)

表示中のページのHTML/CSS/javascript等を解析
https://addons.mozilla.org/ja/firefox/addon/firebug/
Firefoxを導入後、上記にアクセスして『+Add Firefox』をクリック、インストール終了後Firefoxを再起動

使い方≫ [調べたいページを表示＞調べたい部分の上で右クリック＞要素を調査] or [調べたいページを表示＞ウィンドウ右下辺りの虫アイコンをクリック]
便利な機能(一例)≫ スタイルを調べる[HTMLタブ内で調べたい部分をフォーカス＞スタイルタブを参照(継承状態、どのファイルの何行目の指定か分かる)]、サイズを調べる[HTMLタブ内で調べたい部分をフォーカス＞サイズタブを参照]、javascriptから出力されたHTMLもHTMLタブ内で参照できる、スタイルタブ内のプロパティを編集して表示中のページに一時的に反映する事も可能(※実際のファイルを変更するわけではない)

Html Validator (Firefoxアドオン)

表示中のページの文法チェックを自動で行い結果をウィンドウ右下辺りに表示
https://addons.mozilla.org/ja/firefox/addon/html-validator/
Firefoxを導入後、上記にアクセスして『+Add Firefox』をクリック、インストール終了後Firefoxを再起動

[結果アイコンを右クリック＞オプション＞ブラウザ画面＞自動的に閲覧中のページを文法チェック/OFF＞例外]から、チェックの有無をドメインで振り分け可能

XAMPP

Apache、PHP、Perl等をまとめてインストール可能なパッケージ
ローカルにfreoを設置し動作確認が可能になる
http://www.apachefriends.org/jp/xampp-windows.html
配布ページの「ダウンロード」「インストール」「演習」「セキュリティについて」を確認してください

PHP Labo内の解説ページ:
XAMPPのインストール
XAMPPの設定
開発環境のテスト
GoogleでXAMPPを検索:
http://www.google.co.jp/search?q=XAMPP

その他

直接カスタマイズに使用するわけではないが作業時に便利なツール

X-Finder

http://www.eonet.ne.jp/~gakana/

タブ型ファイラー

2分割表示[メニュー＞表示＞ウィンドウの分割]、タブ固定[タブをダブルクリック]、上のディレクトリに移動[フォルダ内の空いたスペースダブルクリック]、ディレクトリ毎に壁紙設定[タブ右クリック＞壁紙の変更]

GoogleでX-Finderを検索
http://www.google.co.jp/search?q=X-Finder

Devas

http://www.forest.impress.co.jp/lib/sys/file/filesearch/devas.html

複数のファイルから単語検索（...の部分から複数行入力も可/サブディレクトリ内対象設定も有）、置換(※オプションから文字コード指定可/UTF-8のBOMが無い方に設定)、正規表現可

WinMerge

http://www.forest.impress.co.jp/lib/stdy/program/progsupt/winmerge.html

二つのファイルを比較して異なる部分を色分け表示

名前にボーダーがついてしまったりする時用。

css/wm_freo.cssの一番下辺りに追加

/*================================================
	Twitter widget
================================================*/
.twtr-widget h3, .twtr-widget h4 {
	border: none;
	background: none transparent;
}
.twtr-widget em {
	font-weight: normal;
}