Web Diary Professional Ver4.14～Ver4.21 → Ver 4.22 以降へのバージョンアップ

Web Diary Professional Ver4.14～Ver4.21 → Ver 4.22 以降へのバージョンアップについて

Ver 4.22 へのバージョンアップで、スキンの一部に変更があります。すべての機能を使用する場合、通常のバージョンアップを行うだけでなく、スキンに加筆修正を行う必要があります。また、バージョンアップ終了後、管理モードにログインした状態でブラウザソフトから diarypro/diary.cgi?mode=setup にアクセスします。必要な項目が設定項目へ自動的に追加されます。

スキンの変更箇所を以下で紹介します。変更のあるファイルは以下の通りです。

• diary.html
• navigation.html
• admin_form.html
• common.css

差し替える必要のあるファイルは以下の通りです。

• pch.html
• admin_paint.html
• mobile_list.html
• mobile_view.html
• mobile_search.html

スキンの変更点

diary.html

30行目あたりにある <!--SKIN_DIARY_END--> の直後に、以下のデータを追加しています。
トップページに直接トラックバックとコメントを表示させる際に使用されます。（環境設定の「ログの表示設定 → 記事一覧にコメントの内容を表示」と「ログの表示設定 → 記事一覧にトラックバックの内容を表示」で表示できます。）class="list" は、CSSからデザインを設定するための指定です。

<!--SKIN_TB_HEAD_START-->
<div class="list">
	<h4>トラックバック一覧</h4>
	<ul>
<!--SKIN_TB_HEAD_END-->

	<!--SKIN_TB_START-->
		<li><a href="${TRACKBACK_URL}">${TRACKBACK_TITLE}</a> from ${TRACKBACK_BLOG} （${TRACKBACK_MONTH}/${TRACKBACK_DAY} ${TRACKBACK_HOUR}:${TRACKBACK_MINUTE}）</li>
	<!--SKIN_TB_END-->

<!--SKIN_TB_FOOT_START-->
	</ul>
</div>
<!--SKIN_TB_FOOT_END-->

<!--SKIN_CMT_HEAD_START-->
<div class="list">
	<h4>コメント一覧</h4>
	<dl>
<!--SKIN_CMT_HEAD_END-->

	<!--SKIN_CMT_START-->
		<dt>${ARTICLE_NAME} <!--ARTICLE_MAIL_START-->Ｅメール<!--ARTICLE_MAIL_END--> <!--ARTICLE_URL_START-->ＵＲＬ<!--ARTICLE_URL_END--> （${ARTICLE_MONTH}/${ARTICLE_DAY} ${ARTICLE_HOUR}:${ARTICLE_MINUTE}）<!--ARTICLE_EDIT_START--> <a href="${INFO_PATH}?mode=edit&amp;no=${ARTICLE_NO}">編集・削除</a><!--ARTICLE_EDIT_END--></dt>
			<dd><!--ARTICLE_ICON_START--><p>${ARTICLE_ICON}</p><!--ARTICLE_ICON_END-->${ARTICLE_TEXT}</dd>
	<!--SKIN_CMT_END-->

<!--SKIN_CMT_FOOT_START-->
	</dl>
</div>
<!--SKIN_CMT_FOOT_END-->

ファイルの最後辺りにある <!--SKIN_PAGE_END--> の直後に、以下のデータを追加しています。
ページ直接移動リンクを表示させるための設定です。

<!--SKIN_NAVI_HEAD_START-->
<div id="navi">
	<ul>
		<li>ページ移動</li>
<!--SKIN_NAVI_HEAD_END-->

	<!--SKIN_NAVI_START-->
		<li><!--NAVI_START-->${NAVI_NO}<!--NAVI_END--></li>
	<!--SKIN_NAVI_END-->

	<!--SKIN_NAVI_MORE_START-->
		<li><!--NAVI_START-->...<!--NAVI_END--></li>
	<!--SKIN_NAVI_MORE_END-->

<!--SKIN_NAVI_FOOT_START-->
	</ul>
</div>
<!--SKIN_NAVI_FOOT_END-->

navigation.html

210行目あたりに過去ログ件数を追加しています。また、「の記事」の文字は削除しています。
件数を表示させたくない場合は、変更する必要はありません。

<!--SKIN_PAST_START-->
	<li><a href="${INFO_PATH}?date=${PAST_YEAR}${PAST_MONTH}">${PAST_YEAR}年${PAST_MONTH}月</a> （${PAST_SIZE}件）</li>
<!--SKIN_PAST_END-->

145行目、175行目、195行目あたりに新着表示マークを追加しています。
新着表示マークを表示させたくない場合は、変更する必要はありません。

<!--SKIN_LIST_START-->
	<dt><a href="${ARTICLE_URL}">${ARTICLE_SUBJ}</a><!--ARTICLE_NEW_START--> <em class="new">New!</em><!--ARTICLE_NEW_END--></dt>
		<dd>${ARTICLE_YEAR}/${ARTICLE_MONTH}/${ARTICLE_DAY} ${ARTICLE_HOUR}:${ARTICLE_MINUTE}</dd>
<!--SKIN_LIST_END-->

<!--SKIN_CMTLIST_START-->
	<dt><a href="${INFO_PATH}?mode=comment&amp;no=${ARTICLE_PNO}#comment">${ARTICLE_SUBJ}</a><!--ARTICLE_NEW_START--> <em class="new">New!</em><!--ARTICLE_NEW_END--></dt>
		<dd>${ARTICLE_NAME}</dd>
		<dd>${ARTICLE_YEAR}/${ARTICLE_MONTH}/${ARTICLE_DAY} ${ARTICLE_HOUR}:${ARTICLE_MINUTE}</dd>
<!--SKIN_CMTLIST_END-->

<!--SKIN_TBLIST_START-->
	<dt><a href="${INFO_PATH}?mode=trackback&amp;no=${TRACKBACK_PNO}#trackback">${TRACKBACK_TITLE}</a><!--TRACKBACK_NEW_START--> <em class="new">New!</em><!--TRACKBACK_NEW_END--></dt>
		<dd>${TRACKBACK_BLOG}</dd>
		<dd>${TRACKBACK_YEAR}/${TRACKBACK_MONTH}/${TRACKBACK_DAY} ${TRACKBACK_HOUR}:${TRACKBACK_MINUTE}</dd>
<!--SKIN_TBLIST_END-->

admin_form.html

70行目あたりにある <li><input type="checkbox" name="tb" id="tb_checkbox" value="1"${FORM_TB} /> <label for="tb_checkbox">トラックバックを受け付ける</label></li> の行の直後に以下のデータを追加しています。
更新PING送信機能を使用している場合、必ず追加する必要があります。

<!--FORM_PING_START--><li><input type="checkbox" name="ping" id="ping_checkbox" value="1"${FORM_PING} /> <label for="ping_checkbox">更新PINGを送信する</label></li><!--FORM_PING_END-->

ファイルの差し替え

以下のファイルは、最新版付属のものに変更してください。

• pch.html
• admin_paint.html
• mobile_list.html
• mobile_view.html

ファイルの追加

最新版に付属している以下のファイルを追加してください。

• mobile_search.html

common.css の修正

トップページに直接トラックバックとコメントを表示させる際のデザインを指定します。div#diary への指定があるところに追加すればいいですが、よく判らなければファイルの最後に記述すればOKです。
設定は一例なので、スキンに合わせて自由に変更してください。

div#diary .list {
	border: 1px solid #AAAAAA;
	margin: 0px 0px 10px 20px;
	padding: 5px 10px;
}
div#diary .list h4 {
	border-bottom: 1px solid #CCCCCC;
	margin: 0px 0px 15px 0px;
	padding: 3px 5px;

	color: #444444;
	background-color: #FFFFFF;
}
div#diary .list ul {
	margin: 0px 0px 10px 20px;
}
div#diary .list dl dt {
	margin: 0px 5px;
        font-weight: bold;
}
div#diary .list dl dd {
	margin: 10px 10px 0px 15px;
}

ナビゲーション部分の新着マークにはnewクラスを割り振っているので、色などを変更する場合、以下のコードで設定が可能です。

.new {
	color: #FF0000;
}

Copyright © 2002-2008 Knight, All rights reserved.