# Read Me | wm_wdp

最終更新日 2011/05/28

- はじめに
- 使い方
- カスタマイズ
  - カスタマイズの前に
  - htmlのカスタマイズ
    - メニューのカスタマイズ
    - フッターのカスタマイズ
    - ナビゲーションのカスタマイズ
      - パーツの表示・非表示・件数の設定
      - navigation.html を直接編集する際の注意点
      - 例1) ナビゲーションの一番上にバナーを表示する
      - 例2) ナビゲーションの一番下にバナーを表示する
      - 例3) カレンダーの下に一言を表示する
    - 過去ログ(月別)ページに本文を表示
    - アルバムにナビゲーション表示(要js)
    - アルバムの並べ方を変更(ミニ画像のみ表示向け)
    - アルバムの並べ方を変更(ミニ画像のみ表示向け) ＋ ナビゲーション表示(要js)
    - プロフィールにナビゲーション表示(要js)
    - 「続きを読む」の見た目を調整
  - cssのカスタマイズ
    - 編集するファイルについて
    - 大まかな設定部分にジャンプ (基本文字サイズ・基本リンク色・タイトル画像等)
- プラグイン導入時の補足事項
  - パンくずリスト表示プラグイン
  - 分類タイトル表示プラグイン
  - メニュー表示プラグイン
  - タギングプラグイン
  - ページ移動プラグイン
  - 情報表示プラグイン
  - コンテンツ管理プラグイン
  - ギャラリー表示プラグイン
- 動的パレットの導入について
- ヘルプ
  - スキンが反映されない
  - ナビゲーション部に変更が反映されない(古いままの)ページがある
  - htmlファイルを編集したら文字化けした
  - 参考リンク
- 更新履歴
- 作者情報

## はじめに

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

- 上に戻る

## 使い方

1. 管理メニュー＞環境設定＞ナビゲーションの設定＞ナビゲーションの表示位置＞記事の後に出力に設定
2. defaultフォルダの内容を、diarypro/skin/内にアップロード

デザインを変更する場合は、引き続き【デザイン変更】を行ってください。

プラグインを使用している場合は、【プラグイン導入時の補足事項】もお読みください。

スキンが反映されない場合は、【スキンが反映されない】を確認してください。

ナビゲーションが反映されない場合は、【ナビゲーション部に変更が反映されない(古いままの)ページがある】を確認してください。

- 上に戻る

### デザイン変更

1. 【使い方】の手順通りにdefaultを導入する
2. extra_designフォルダを開き、使用したいデザインのフォルダの内容を、diarypro/skin/内にアップロード

- 上に戻る

#### デザイン一覧

デザイン名の後の数値は本体幅のバリエーションになります。(※polaris_850はdefaultに含まれます)

- polaris
    750/850/950
- crux
    550/650/750
- spica
    750/850/950
- sirius
    750/850/950
- alkes
    550/650/750
- capella
    750/850/950
- procyon
    650/750/850
- proxima
    750/850/950
- proxima_R
    750/850/950
- wei
    650/750/850
- gienah
    750/850/950
- gienah_R
    750/850/950
- saiph
    650/750/850
- phact
    750/850/980
- phact_R
    750/850/980
- hamal
    650/750/850
- duhr
    750/850/980
- duhr_R
    750/850/980
- alphard
    650/750/850

- 上に戻る

## カスタマイズ

### カスタマイズの前に

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

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

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

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

- 上に戻る

### htmlのカスタマイズ

#### メニューのカスタマイズ

1. skin/header.htmlを開いて23行目辺りにある↓の部分を

       <ul class="menu">
       	<li><a href="${INFO_BACK}">Home</a></li>
       	<li><a href="${INFO_PATH}">Reset</a></li>
       	<li><a href="${INFO_PATH}?mode=album">Album</a></li>
       	<li><a href="${INFO_PATH}?mode=rss">RSS</a></li>
       </ul>

   以下のように変更

       <ul class="menu">
       	<li><a href="${INFO_BACK}">Home</a></li>
       	<li><a href="任意のURL">About</a></li>
       	<li><a href="任意のURL">Gallery</a></li>
       	<li><a href="任意のURL">Contact</a></li>
       	<li><a href="${INFO_PATH}">Reset</a></li>
       </ul>

- 上に戻る

#### フッターのカスタマイズ

##### 例1) 素材屋さん等のリンクを追加

1. skin/footer.htmlを開いて11行目辺りにある↓の部分を

       <ul class="powered">
       	<li>Script: <a href="http://www.web-liberty.net/" class="top">Web Liberty</a></li>
       	<li>Skin: <a href="http://www.usamimi.info/~witchmakers/">wmks</a></li>
       </ul>

   以下のように変更

       <ul class="powered">
       	<li>Script: <a href="http://www.web-liberty.net/" class="top">Web Liberty</a></li>
       	<li>Skin: <a href="http://www.usamimi.info/~witchmakers/">wmks</a></li>
       	<li>ここに素材屋さんのリンク</li>
       </ul>

##### 例2) 注意書きなど一言追加

1. skin/footer.htmlを開いて11行目辺りにある`<ul class="powered">`の直前の行に↓のように追加

       <p>ここに一言追加</p>

- 上に戻る

#### ナビゲーションのカスタマイズ

##### パーツの表示・非表示・件数の設定

各パーツの表示・非表示は、管理メニュー＞環境設定＞ナビゲーションの表示設定から、
新着の表示件数は、管理メニュー＞環境設定＞ログの表示設定から変更出来ます。

パーツの表示順を入れ替える場合は、スキンのカスタマイズが必要になります。 【navigation.html を直接編集する際の注意点】を参照してください。

- 上に戻る

##### navigation.html を直接編集する際の注意点

HTMLの構造は以下の様になっています。赤い部分と青い部分は触らず、緑のエリア内で紫のパーツを移動したり編集したりするようにします。
またこれとは別に、`<!--SKIN_○○_HEAD_START-->`のようなCGIに必要なコードが含まれますので、こちらの構造も崩さないように注意してください。
編集が反映されない場合は【ナビゲーション部に変更が反映されない(古いままの)ページがある】を参照してください。

- 上に戻る

##### 例1) ナビゲーションの一番上にバナーを表示する

1. skin/navigation.htmlを開いて4行目あたりにある`<div id="utility_A">`の直後の行に以下を追加

       <div class="utility">
       	<h3>ここに見出し</h3>
       	<div class="content">
       		<p><img src="XXX.gif" width="200" height="40" alt="XXXX" /></p>
       	</div>
       </div>

- 上に戻る

##### 例2) ナビゲーションの一番下にバナーを表示する

1. skin/navigation.htmlを開いて293行目あたりにある`<!--SKIN_INFORMATION_FOOT_START-->`の直後の行に以下を追加

       <div class="utility">
       	<h3>ここに見出し</h3>
       	<div class="content">
       		<p><img src="XXX.gif" width="200" height="40" alt="XXXX" /></p>
       	</div>
       </div>

- 上に戻る

##### 例3) カレンダーの下に一言を表示する

1. skin/navigation.htmlを開いて56行目あたりにある`<--SKIN_CALENDAR_FOOT_END-->`の直前の行に以下を追加

       <div class="utility">
       	<h3>ここに見出し</h3>
       	<div class="content">
       		<p>ここに一言</p>
       	</div>
       </div>

環境設定でカレンダーを非表示にしている場合は表示されません。その場合は、表示しているパーツに同じようにして追加してください。

- 上に戻る

#### 過去ログ(月別)ページに本文を表示

通常Archiveの年月をクリックすると、その月のタイトルリストが表示されますが、これを通常の記事ページの様に本文等も表示するように変更します。

その月の全ての記事が表示されます(1ページの表示件数の設定、ページ送りはありません)。
ひと月の記事数がとても多い場合の使用には向いていません。

1. extra_list/の中にあるlist.htmlを、diarypro/skin/内にある同名ファイルに上書きする

- 上に戻る

#### アルバムにナビゲーション表示(要js)

1. 管理メニュー＞環境設定＞ナビゲーションの表示設定＞各記事ページでのナビゲーション表示（JavaScriptが必要）＞『常に表示する』or『固定URLページで表示する』に設定
2. 管理メニュー＞環境設定＞基本設定＞サイトのURL（diary.cgi を格納しているディレクトリのURL / 必ず設定してください）が正しく設定されているか確認
3. extra_album_navi/の中にあるalbum.htmlを、diarypro/skin/内にある同名ファイルに上書きする

※サーバーの都合等でhttp://diary.cgi を格納しているディレクトリのURL/data/内にnavi_start.jsとnavi_end.jsが存在しない場合は、html内の各jsへのパスを設置環境に合わせて書き換えてください。

- 上に戻る

#### アルバムの並べ方を変更 (ミニ画像のみ表示向け)

管理メニュー＞環境設定＞アルバムページの設定＞一覧に表示するファイルの種類＞ミニ画像のみ表示で使用している時用です。画像を横に並べて表示します。

1. extra_album_mini/の中にあるalbum.htmlを、diarypro/skin/内にある同名ファイルに上書きする

- 上に戻る

#### アルバムの並べ方を変更(ミニ画像のみ表示向け) ＋ ナビゲーション表示(要js)

1. 管理メニュー＞環境設定＞ナビゲーションの表示設定＞各記事ページでのナビゲーション表示（JavaScriptが必要）＞『常に表示する』or『固定URLページで表示する』に設定
2. 管理メニュー＞環境設定＞基本設定＞サイトのURL（diary.cgi を格納しているディレクトリのURL / 必ず設定してください）が正しく設定されているか確認
3. extra_album_mini_navi/の中にあるalbum.htmlを、diarypro/skin/内にある同名ファイルに上書きする

※サーバーの都合等でhttp://diary.cgi を格納しているディレクトリのURL/data/内にnavi_start.jsとnavi_end.jsが存在しない場合は、html内の各jsへのパスを設置環境に合わせて書き換えてください。

- 上に戻る

#### プロフィールにナビゲーション表示(要js)

1. 管理メニュー＞環境設定＞ナビゲーションの表示設定＞各記事ページでのナビゲーション表示（JavaScriptが必要）＞『常に表示する』or『固定URLページで表示する』に設定
2. 管理メニュー＞環境設定＞基本設定＞サイトのURL（diary.cgi を格納しているディレクトリのURL / 必ず設定してください）が正しく設定されているか確認
3. extra_profile_navi/の中にあるprofile.htmlを、diarypro/skin/内にある同名ファイルに上書きする

※サーバーの都合等でhttp://diary.cgi を格納しているディレクトリのURL/data/内にnavi_start.jsとnavi_end.jsが存在しない場合は、html内の各jsへのパスを設置環境に合わせて書き換えてください。

- 上に戻る

#### 「続きを読む」の見た目を調整

プログラム本体を直接編集します。記述ミス等があるとCGIの動作に問題が発生します。
ファイルの文字コードは必ずUTF-8Nで保存してください。

1. diarypro/lib/webliberty/App/Diary.pmを開いて1127行目辺りにある↓の部分を

       } else {
       	if ($id_ins->get_string) {
       		$text_ins->set_string("$text<a href=\"$info_path?id=$id&amp;continue=on#continue\">$continue</a>");
       	} else {
       		$text_ins->set_string("$text<a href=\"$info_path?no=$no&amp;continue=on#continue\">$continue</a>");
       	}
       }

   以下のように変更

       } else {
       	if ($id_ins->get_string) {
       		$text_ins->set_string("$text<span class=\"continue\"><a href=\"$info_path?id=$id&amp;continue=on#continue\" title=\"『$subj』の続きを読む\">$continue</a></span>");
       	} else {
       		$text_ins->set_string("$text<span class=\"continue\"><a href=\"$info_path?no=$no&amp;continue=on#continue\" title=\"『$subj』の続きを読む\">$continue</a></span>");
       	}
       }

本文の省略表示機能について

- 上に戻る

### cssのカスタマイズ

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

- skin/wm_wdp.css
- skin/image.html (画像の原寸表示時のページ※html上部にCSS記述)
- skin/pch.html (PCHのページ※html上部にCSS記述)
- skin/error.html (エラー表示用のページ※html上部にCSS記述)

- 上に戻る

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

skin/wm_wdp.cssを開いて、ファイル内を`※`で検索すると、大まかな設定部分に飛ぶ事が出来ます。

- 上に戻る

## プラグイン導入時の補足事項

- パンくずリスト表示プラグイン
- 分類タイトル表示プラグイン
- メニュー表示プラグイン
- タギングプラグイン
- ページ移動プラグイン
- 情報表示プラグイン
- コンテンツ管理プラグイン
- ギャラリー表示プラグイン

- 上に戻る

### パンくずリスト表示プラグイン

プラグインに同梱のreadme.txtにある使用方法の通りにプラグイン導入し、動作確認を行ってから作業してください。
パンくずリスト表示プラグイン

1. diarypro/lib/webliberty/Plugin/TopicPath/init.cgiを開いて、マークアップ開始文字↓を

       $init->{markup_begin} = '<p>';

   以下のように変更

       $init->{markup_begin} = '<p class="topicpath">';

2. 以下のファイルに`${TopicPath}`を追加
   - skin/diary.htmlの7行目辺りにある`<h2>Entry</h2>`の直後の行
   - skin/list.htmlの5行目辺りにある`<!--SKIN_DIARY_HEAD_START-->`の直後の行
     ※『過去ログ(月別)ページに本文を表示』を使用している場合は、7行目辺りにある`<h2>Entry</h2>`の直後の行

- 上に戻る

### 分類タイトル表示プラグイン

プラグインに同梱のreadme.txtにある使用方法の通りにプラグイン導入し、動作確認を行ってから作業してください。
分類タイトル表示プラグイン

1. diarypro/lib/webliberty/Plugin/FieldTitle/init.cgiを開いて、マークアップ開始文字↓を

       $init->{markup_begin} = '<p>';

   以下のように変更

       $init->{markup_begin} = '<p class="fieldtitle">';

2. 以下のファイルに`${FieldTitle}`を追加
   - skin/diary.htmlの7行目辺りにある`<h2>Entry</h2>`の直後の行
   - skin/list.htmlの5行目辺りにある`<!--SKIN_DIARY_HEAD_START-->`の直後の行
     ※『過去ログ(月別)ページに本文を表示』を使用している場合は、7行目辺りにある`<h2>Entry</h2>`の直後の行

- 上に戻る

### メニュー表示プラグイン

プラグインに同梱のreadme.txtにある使用方法の通りにプラグイン導入し、動作確認を行ってから作業してください。
メニュー表示プラグイン

- A. ヘッダーに追加
- B. ナビゲーションに追加

### A. ヘッダーに追加

1. extra_plugin/Menu/の中にあるmenu.htmlを、diarypro/lib/webliberty/Plugin/Menu/内にある同名ファイルに上書きする
2. skin/header.htmlを開いて23行目辺りにある↓の部分を

       <ul class="menu">
       	<li><a href="${INFO_BACK}">Home</a></li>
       	<li><a href="${INFO_PATH}">Reset</a></li>
       	<li><a href="${INFO_PATH}?mode=album">Album</a></li>
       	<li><a href="${INFO_PATH}?mode=rss">RSS</a></li>
       </ul>

   以下のように変更

       ${Menu}

- 上に戻る

### B. ナビゲーションに追加

1. extra_plugin/Menu/の中にあるmenu.htmlを、diarypro/lib/webliberty/Plugin/Menu/内にある同名ファイルに上書きする
2. skin/navigation.htmlを開いて、4行目あたりにある`<div id="utility_A">`の直後の行に↓を追加

       <div class="utility">
           <h3>Menu</h3>
           <div class="content">
               ${Menu}
           </div>
       </div>

   ※ナビゲーション内の他の位置に追加したい場合は、【navigation.html を直接編集する際の注意点】を参照してください
   ※編集が反映されない場合は【ナビゲーション部に変更が反映されない(古いままの)ページがある】を参照してください。

- 上に戻る

### タギングプラグイン

プラグインに同梱のreadme.txtにある使用方法の通りにプラグイン導入し、動作確認を行ってから作業してください。
タギングプラグイン

- タグ
- タグクラウド
  - A. 通常
  - B. タグ数に応じてフォントサイズが変わる
- 検索結果
  - A. 通常
  - B. ナビゲーション有り (要js)
  - C. 本文を直接表示
  - D. 本文を直接表示 ＋ ナビゲーション有り (要js)

#### タグ

1. skin/diary.htmlを開いて16行目辺りにある

       <!--ARTICLE_FIELD_START--><li>Category: <a href="${INFO_PATH}?field=${ARTICLE_FNO}">${ARTICLE_FIELD}</a></li><!--ARTICLE_FIELD_END-->

   ↑の下の行に、以下を追加

       <!--ARTICLE_Tagging_START--><li>Tag: ${ARTICLE_Tagging}</li><!--ARTICLE_Tagging_END-->

#### タグクラウド

##### A. 通常

1. extra_plugin/Tagging_tagcloud/の中にあるlist.htmlを、diarypro/lib/webliberty/Plugin/Tagging/内にある同名ファイルに上書きする
2. skin/navigation.htmlを開いて158行目あたりにある`<!--SKIN_FIELD_FOOT_END-->`の直前の行に以下を追加

       <div class="utility">
       	<h3>Tagcloud</h3>
       	<div class="content">
       		${Tagging}
       	</div>
       </div>

   ※Category(分類一覧)を非表示にしている場合や、他の位置に追加したい場合は、【navigation.html を直接編集する際の注意点】を参照してください
   ※編集が反映されない場合は【ナビゲーション部に変更が反映されない(古いままの)ページがある】を参照してください。

##### B. タグ数に応じてフォントサイズが変わる

1. extra_plugin/Tagging_tagcloud_size/の中にあるlist.htmlを、diarypro/lib/webliberty/Plugin/Tagging/内にある同名ファイルに上書きする
2. skin/navigation.htmlを開いて158行目あたりにある`<!--SKIN_FIELD_FOOT_END-->`の直前の行に以下を追加

       <div class="utility">
       	<h3>Tagcloud</h3>
       	<div class="content">
       		${Tagging}
       	</div>
       </div>

   ※Category(分類一覧)を非表示にしている場合や、他の位置に追加したい場合は、【navigation.html を直接編集する際の注意点】を参照してください
   ※編集が反映されない場合は【ナビゲーション部に変更が反映されない(古いままの)ページがある】を参照してください。

#### 検索結果

##### A. 通常

1. extra_plugin/Tagging_search/の中にあるsearch.htmlを、diarypro/lib/webliberty/Plugin/Tagging/内にある同名ファイルに上書きする

##### B. ナビゲーション有り (要js)

1. 管理メニュー＞環境設定＞ナビゲーションの表示設定＞各記事ページでのナビゲーション表示（JavaScriptが必要）＞『常に表示する』or『固定URLページで表示する』に設定
2. 管理メニュー＞環境設定＞基本設定＞サイトのURL（diary.cgi を格納しているディレクトリのURL / 必ず設定してください）が正しく設定されているか確認
3. extra_plugin/Tagging_search_navi/の中にあるsearch.htmlを、diarypro/lib/webliberty/Plugin/Tagging/内にある同名ファイルに上書きする

※サーバーの都合等でhttp://diary.cgi を格納しているディレクトリのURL/data/内にnavi_start.jsとnavi_end.jsが存在しない場合は、html内の各jsへのパスを設置環境に合わせて書き換えてください。

##### C. 本文を直接表示

1. extra_plugin/Tagging_search_entry/の中にあるsearch.htmlを、diarypro/lib/webliberty/Plugin/Tagging/内にある同名ファイルに上書きする

##### D. 本文を直接表示 ＋ ナビゲーション有り (要js)

1. 管理メニュー＞環境設定＞ナビゲーションの表示設定＞各記事ページでのナビゲーション表示（JavaScriptが必要）＞『常に表示する』or『固定URLページで表示する』に設定
2. 管理メニュー＞環境設定＞基本設定＞サイトのURL（diary.cgi を格納しているディレクトリのURL / 必ず設定してください）が正しく設定されているか確認
3. extra_plugin/Tagging_search_entry_navi/の中にあるsearch.htmlを、diarypro/lib/webliberty/Plugin/Tagging/内にある同名ファイルに上書きする

※サーバーの都合等でhttp://diary.cgi を格納しているディレクトリのURL/data/内にnavi_start.jsとnavi_end.jsが存在しない場合は、html内の各jsへのパスを設置環境に合わせて書き換えてください。

- 上に戻る

### ページ移動プラグイン

プラグインに同梱のreadme.txtにある使用方法の通りにプラグイン導入し、動作確認を行ってから作業してください。
ページ移動プラグイン

1. diarypro/lib/webliberty/Plugin/Page/page.jsを開いて44行目あたりにある↓を

       document.write('<p>');
       if (flag && prevData[0]) {
       	var no    = prevData[0];
       	var subj  = prevData[1];
       	var field = prevData[2];
       	var link  = prevData[3];

       	document.write('&lt;&lt; <a href="' + link + '">' + subj + '</a> ');
       }
       document.write('| <a href="' + siteUrl + '">トップページ</a> |');
       if (flag && nextData[0]) {
       	var no    = nextData[0];
       	var subj  = nextData[1];
       	var field = nextData[2];
       	var link  = nextData[3];

       	document.write(' <a href="' + link + '">' + subj + '</a> &gt;&gt;');
       }
       document.write('</p>');

   以下のように変更

       document.write('<div id=\"entry_link\"><ul class=\"entry_link\">');
       if (flag && nextData[0]) {
       	var no    = nextData[0];
       	var subj  = nextData[1];
       	var field = nextData[2];
       	var link  = nextData[3];

       	document.write('<li class=\"previous\"><a href=\"' + link + '\" title=\"Newer: ' + subj + '\">' + subj + '</a></li>');
       }
       document.write('<li class=\"home\"><a href=\"' + siteUrl + '\">Reset</a></li>');
       if (flag && prevData[0]) {
       	var no    = prevData[0];
       	var subj  = prevData[1];
       	var field = prevData[2];
       	var link  = prevData[3];

       	document.write('<li class=\"next\"><a href=\"' + link + '\" title=\"Older: ' + subj + '\">' + subj + '</a></li>');
       }
       document.write('</ul></div>');

2. skin/diary.htmlを開いて31行目あたりにある`<!--SKIN_DIARY_END-->`の直前の行に↓を追加

       <script type="text/javascript">
       //<![CDATA[
       var showNo = ${ARTICLE_NO};
       //]]>
       </script>
       ${Page}

3. 記事を投稿する等のnavi_start.jsとnavi_end.jsが更新される操作を実行

- 上に戻る

### 情報表示プラグイン

プラグインに同梱のreadme.txtにある使用方法の通りにプラグイン導入し、動作確認を行ってから作業してください。
情報表示プラグイン

- A. 記事一覧のトップにお知らせを表示
- B. ナビゲーションにサイトの概要を表示

#### A. 記事一覧のトップにお知らせを表示

1. skin/diary.htmlを開いて、3行目あたりにある`<!--SKIN_LOGS_HEAD_END-->`の直前の行に以下を追加

       <div id="information">
       	<div class="information">
       		<h2>Information</h2>
       		<div class="content">
       			${Information}
       		</div>
       	</div>
       </div>

#### B. ナビゲーションにサイトの概要を表示

1. skin/navigation.htmlの4行目あたりにある`<div id="utility_A">`の直後の行に以下を追加

       <div class="utility">
       	<h3>Information</h3>
       	<div class="content">
       		<p>${Information}</p>
       	</div>
       </div>

   ※他の位置に追加したい場合は、【navigation.html を直接編集する際の注意点】を参照してください
   ※編集が反映されない場合は【ナビゲーション部に変更が反映されない(古いままの)ページがある】を参照してください。

- 上に戻る

### コンテンツ管理プラグイン

プラグインに同梱のreadme.txtにある使用方法の通りにプラグイン導入し、動作確認を行ってから作業してください。
コンテンツ管理プラグイン

- A. 通常
- B. ナビゲーション有り (要js)
- C. ナビゲーション有り (任意の内容)

#### A. 通常

1. extra_plugin/Contents/の中にあるcontents.htmlを、diarypro/lib/webliberty/Plugin/Contents/内にある同名ファイルに上書きする
2. コンテンツプラグインの管理メニュー (ログインした状態でdiarypro/diary.cgi?plugin=Contents)＞ページの再構築＞○○を構築を実行

※コンテンツのタイトルはh2要素になります

#### B. ナビゲーション有り (要js)

1. 管理メニュー＞環境設定＞ナビゲーションの表示設定＞各記事ページでのナビゲーション表示（JavaScriptが必要）＞『常に表示する』or『固定URLページで表示する』に設定
2. 管理メニュー＞環境設定＞基本設定＞サイトのURL（diary.cgi を格納しているディレクトリのURL / 必ず設定してください）が正しく設定されているか確認
3. extra_plugin/Contents_navi/の中にあるcontents.htmlを、diarypro/lib/webliberty/Plugin/Contents/内にある同名ファイルに上書きする
4. コンテンツプラグインの管理メニュー (ログインした状態でdiarypro/diary.cgi?plugin=Contents)＞ページの再構築＞○○を構築を実行

※コンテンツのタイトルはh2要素になります

※サーバーの都合等でhttp://diary.cgi を格納しているディレクトリのURL/data/内にnavi_start.jsとnavi_end.jsが存在しない場合は、html内の各jsへのパスを設置環境に合わせて書き換えてください。

- 上に戻る

#### C. ナビゲーション有り (任意の内容)

1. extra_plugin/Contents_navi_edit/の中にあるcontents.htmlを開いて、`<!-- ▼ナビゲーション▼ -->`～`<!-- ▲ナビゲーション▲ -->`内を編集する
   - ナビゲーション内の構造については【navigation.html を直接編集する際の注意点】を参考にしてください。
   - カレンダー等はnavigation.html内でしか使用出来ないので、表示したい場合は【B. ナビゲーション有り (要js)】を使用してください。
   - 1個しか場所が必要ない場合は、`<!-- ▽Ｂ▽ -->`～`<!-- △Ｂ△ -->`の間を削除してしまってください。
2. 編集したcontents.htmlを、diarypro/lib/webliberty/Plugin/Contents/内にある同名ファイルに上書きする
3. コンテンツプラグインの管理メニュー (ログインした状態でdiarypro/diary.cgi?plugin=Contents)＞ページの再構築＞○○を構築を実行

※コンテンツのタイトルはh2要素になります

- 上に戻る

### ギャラリー表示プラグイン

プラグインに同梱のreadme.txtにある使用方法の通りにプラグイン導入し、動作確認を行ってから作業してください。
ギャラリー表示プラグイン

- A. 通常
- B. ナビゲーション有り (要js)

#### A. 通常

1. extra_plugin/Gallery/の中にあるgallery.htmlを、diarypro/lib/webliberty/Plugin/Gallery/内にある同名ファイルに上書きする

#### B. ナビゲーション有り (要js)

1. 管理メニュー＞環境設定＞ナビゲーションの表示設定＞各記事ページでのナビゲーション表示（JavaScriptが必要）＞『常に表示する』or『固定URLページで表示する』に設定
2. 管理メニュー＞環境設定＞基本設定＞サイトのURL（diary.cgi を格納しているディレクトリのURL / 必ず設定してください）が正しく設定されているか確認
3. extra_plugin/Gallery_navi/の中にあるgallery.htmlを、diarypro/lib/webliberty/Plugin/Gallery/内にある同名ファイルに上書きする

※サーバーの都合等でhttp://diary.cgi を格納しているディレクトリのURL/data/内にnavi_start.jsとnavi_end.jsが存在しない場合は、html内の各jsへのパスを設置環境に合わせて書き換えてください。

- 上に戻る

## 動的パレットの導入について

- CSSの追加は不要です (※記述済)

動的パレットの導入について

- 上に戻る

## ヘルプ

### スキンが反映されない

- 『HTML書き出し機能』を使用している場合は、管理メニュー＞サイト再構築＞○○を構築を実行してください。
- 『コンテンツプラグイン』を使用している場合は、コンテンツプラグインの管理メニュー (ログインした状態でdiarypro/diary.cgi?plugin=Contents)＞ページの再構築＞○○を構築を実行してください。
- ブラウザのキャッシュを削除してください。

- 上に戻る

### ナビゲーション部に変更が反映されない(古いままの)ページがある

- navi_start.jsとnavi_end.jsの内容が更新される操作(記事を投稿する等)を実行してください。
- ブラウザのキャッシュを削除してください。

- 上に戻る

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

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

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

- 上に戻る

### 参考リンク

Web Diary Professional 機能解説
  http://www.web-liberty.net/download/diarypro/function.html
スキンの基礎
  http://www.web-liberty.net/improve/design/index.html
Web Diary Professional のスキン情報
  http://www.web-liberty.net/improve/design/diarypro.html

- 上に戻る

## 更新履歴

2011/05/28
  デザイン『wei』『saiph』を追加
  extra_list(過去ログ(月別)ページに本文を表示)を追加
  全デザイン細部調整
  - skin/wm_wdp.css
2011/05/12 (2)
  記述ミスがあったのを修正
  - skin/list.html
  - ReadMe.htmlのパンくずリスト表示プラグイン、分類タイトル表示プラグイン導入補足のlist.htmlの編集位置
2011/05/12
  リニューアル＆デザイン複数追加
  - html,css,プラグイン導入方法等、色々な部分を変更

- 上に戻る

## 作者情報

Name
  wmks
WebSite
  http://www.usamimi.info/~witchmakers/
Profile
  Google Profile

### Thanks

Web Diary Professional
  Knight
  http://www.web-liberty.net/

- 上に戻る