memo

スキンが文字化けした時

WebLibertyさんのCGIのスキンの文字コードはUTF-8N(UTF-8 BOM無し)なので、Shift-JIS等の他の文字コードで保存してしまうと、

htmlの場合
そのhtmlで出力している部分の日本語(等の2バイト文字)が文字化けして表示されます。
cssの場合
cssファイルの注釈やフォント名等の日本語(等の2バイト文字)付近の指定が不正になり、周辺のスタイルが適用されなくなったりします。こちらはhtmlのようにページを表示してみてすぐ分かる物ではないので気付きにくいです。

というような事になるので、ファイルを編集する時は必ずUTF-8Nで保存します。
UTF-8N(UTF-8 BOM無し)が扱えるエディタ→TeraPadEmEditorFree

※注意※UTF-8Nで保存されているファイルでも、日本語(等の2バイト文字)を含まない場合はShift-JIS等として開いてしまう事があるので、編集後にそのまま上書き保存してしまわないようにご注意ください。

utf8TeraPadの場合だと、右下辺りに文字コードが出ているので確認出来ます。SJIS等になっていた時は指定しなおして保存します(ファイル→文字/改行コード指定保存→UTF-8N)。

  • 2009/03/15
  • wmks

Firebug(CSSを見る際に便利)

表示しているページのCSS・html・Javascript等を簡単にじっくり見る事が出来ます。
スキンの色を変えたいときなどに、指定箇所を探しやすくなるのでおすすめです。

インストールの仕方

  1. Firefoxをインストールして起動します。
  2. FirefoxでFirebug :: Firefox Add-onsへ行く→Firefoxへインストールという部分をクリック→『今すぐインストール』
  3. インストールが終わったらFirefoxを再起動

使い方

  1. Firefoxで調べたいページを表示します。
  2. 調べたい部分の上で右クリック→『要素を調査』するとウィンドウの下の方にベコッと出てくるので眺めたり触ってみたりします。

firebugこんな感じで見る事が可能です。他にも沢山の事ができます。
→公式の解説CSS/HTML

※Firebug上での編集はページを移動したりリロードすると元に戻ります。実際のカスタマイズはファイルに直接行ってください。

※ファイルを編集する際は文字コード違いによる文字化けにご注意ください。

  • 2009/03/13
  • wmks

bookmark

html・cssの基本

ごく簡単なHTMLの説明 :The Web KANZAKI
XHTMLの書き方と留意点→HTMLとの互換性について
(x)html要素タイプ一覧
ulやdlやblockquote等の使い方
スタイルシートの基本

wdp関連資料

Web Liberty CGI配布元
Web Diary Professional
機能解説 一部の機能の解説
※ ナビゲーション(カレンダー等)の表示/非表示/件数等の変更は管理者用メニュー→環境設定
CGIの改造方法
スキンの基礎 ${○○}や<!–○○_START–>の決まり
Web Diary Professionalのスキン情報 skin/○○.htmlがどこを表示しているか

便利な道具

Firebug
Firefox拡張 / 表示しているページのCSS・HTML・Javascript等を見たりできる
Web Developer
Firefox拡張 / 表示しているページを色々出来る
Html Validator
Firefox拡張 / 表示しているページの文法チェック結果をステータスバーに表示
EmEditor Free
テキストエディタ / html・css等色分け表示 / タブ / 正規表現検索 /etc
Crescent Eve
テキストエディタ / html・css等色分け表示 / 入力支援 / etc

いろいろ

はてぶー
自分のWeb制作関連のブックマーク(はてな)
Google
検索
  • 2009/03/10
  • wmks