ダイヤリープロ改造の手記
備　 忘　 録

   貴方のブログを一味違った表現に改良して見ませんか　! 。

   以下は、管理者がDiaryProを拡張した時の方法を忘れないように記述したものですが、
FFF-TPで、ファイルの操作が出来ないと実現できない物があります。
タイトルの背景色が薄青色の物はファイル操作が必要ありませんので大いに活用してください。
下図は、DiaryProファイルの内容です。
   Diary Pro　は「XHTML」ですから、テラパッド等のUTF-8のエディターが必要です。
薄青部分は今回対象外です、若緑部分の「data」「skin」部分が我々が編集しやすい部分です。
　　「data」には、投稿した画像や、文章、コメント、などが収録されてます。(編集対象外)
　　「skin」には、基本的なスタイルに関する書式が記載されています、以下の改造部分はこの部分を書き換え又は追記しています。
DiaryPro
archives data
lib skin
diary.cgi diary-paint.cgi
diary-tb.cgi index.html

1.ヘッダーに画像を挿入する。

「skin」→フォルダーの中には沢山のファイルがありますがその中の「common.css」の記述を
  /* ----- 基本構造 -------------------------------------- */
   div#header {
	 float: none;
	 clear: both;
	 height: 120px;
         background-image: url(uradome.jpg);←ここに画像ファイルを追加します、元の記述→
         background-color: #C0C0E3;
   }
のように変更して、「skin」フォルダー内に720Pix*120Pix(uradome.jpg)の画像をはりつける。
つまりアップロードします。


2.挿入画像の位置を指定する。

文章中に次の記号を記述します。
     $FILE1_l     画像1を左詰めで表示する。(l=leftの頭文字)
     $FILE2_c     画像2を中央に表示する。　(c=centerの頭文字)
     $FILE3_r     画像3を右詰めで表示する。(r=rightの頭文字)
何も指定しないと、画像は文章の左上に表示されます。

3.タイトルの色を変更します。

「skin」フォルダーの「common.css」内のヘッダーと表記している部分を探します。

My Diary の色変更
div#header h1 a{
color:#444444; ←を好みの色番号に変更します。

日記の説明　の色変更
div#header p [
margin:0px 15px;
color:#008000 ←を新規追加します。
　font-size : 12px ;
　 }

4.続きを読むの設定方法。

文章がだらだらと長くなると読む人に読んで貰えなくなる、これを防止する為に文章の始まりを簡潔にして内容を分かりやすくして。 本当に深い内容を読んでもらう為に、「続きを読む」の見出しをつけて、これ以上は、「続きを読む」をクリックした人だけに表示する仕掛けです。 続きを読んで貰いたい処に、次の記述をします。
    「-----続きを読む-----」
"-"を「続きを読む」を挟んで5個書きます。そして、この記号の後に内容を続けて記述します。

5.トップメニューに新しいメニューを追加する。

「skin」フォルダーの「header.html」に次のタグ(黄色部分)を追加します。
<div id="menu">
	<h2>目次</h2>
	<ul>
		<li><a href="${INFO_BACK}">戻る</a></li>
		<li><a href="${INFO_PATH}?mode=rss">RSS</a></li>
                  <li><a href="${INFO_PATH}">ブログトップへ</a></li>
                  <li><a href="${INFO_PATH}?mode=profile&user=admin">プロフィール</a></li>
		<li><a href="${INFO_PATH}?mode=admin">管理者用</a></li>
                  <li><a href="${INFO_PATH}?mode=album">ミニ画像表示</a></li>
	</ul>
</div>
戻る、ＲＳＳ、管理者用、は元から有ります。メニューの順番は自由にしてください。
ブログトップへは便利ですから、ぜひ追加を !。

6.パンくずリストを追加するプラグイン。

プラグインとは、アプリケーションに機能を追加するための小さなプログラムの事です。
この仕組みを利用すれば、本体のプログラムを編集することなく、ある程度の機能追加が可能です。
パンくずリストとは、TOP > Menue > Content 等とHP上の位置を表示する機能です。
下記URLからプラグインをダウンロードして、このファイル内にあるreadm.txtに従ってファイルをアップロードする事
により簡単に実現します。
http://www.web-liberty.net/download/diarypro/plugin/index.html#topicpath 　
プラグインはこの他にも上記URL内に沢山あります。

7.レンタル・カウンターを設置する。

ここでは、無料レンタルのカウンターをヘッダーに設置する例を記述します。
無料でレンタルしてくれるサイト(ここでは→http://www.3counters.net/)を探して、そこでカウンター設置の方法に
従いデザイン、カウント桁数等を入力して、カウンター設置のタグを作成します。
出来あがったタグをコピーして、「skin」→header.html のメニューの後半に貼り付けます。
(5.トップメニューに新しいメニューを追加するを参照)
なお、設置するブログのアドレスは「http://hktagb.ddo.jp/~shirousagi/」と記述します。
(H23-3-7)
追伸-
カレンダーの前に表示する方法　タグを「skin」→navigation.htmlに次に示す位置にコピーペする。

<!--SKIN_NAVIGATION_HEAD_START-->
<div id="navigation">
<!--SKIN_NAVIGATION_HEAD_END-->
   <!--SKIN_CALENDAR_HEAD_START-->
   <div class="block">
タグ始まり→<a href="http://www.3counters.net/wc-89803.html">
            <img src="http://www.3counters.net/services/wcounter/wcounter.php?s
            =911F4606FCF352B224A7D8BD4D75455201155A28FC2DAC437C0721C09EAC
            40B5C94B7AA21BA52AC8C17F76" title="無料カウンター by 3 カウンター" 
            border="0" /></a>←タグ終わり
      <h2>カレンダー</h2>
　　　<table summary="${CALENDAR_THIS_YEAR}年${CALENDAR_THIS_MONTH}月のカレンダー">
	　<tr>
	　　　<th colspan="7">${CALENDAR_THIS_YEAR}年${CALENDAR_THIS_MONTH}月</th>
	　</tr>
8. 三カラム化の方法。

三カラム化のスキンを提供しているサイト(下記)からファイルをダウンロードして解凍します。 フォルダーの中身のreadme.txtを除く全部を　skin 内にアップロードします。これで三カラムになります。
http://www.web-liberty.net/download/diarypro/skin/index.html
9. コンテンツの追加方法。

HTMLやCGIで出来たコンテンツを自分のHPサイトにアップロードしておきます。
「管理者」から、「コンテンツの追加」に入り、「コンテンツ名」とHTMLやCGIを「http://」の続きに記入して、「投稿する」ボタンを押して、トップに戻りコンテンツ欄に新しい コンテンツ名が出来ておりコンテンツ名をクリックしてコンテンツ内容が表示されれば完成です。


10. プロフィールに画像を表示する方法。

skinフォルダ >common.cssファイルに次を追加 (common.cssは"skin"フォルダーにあります)。
私は最下部に記述しました。（配布スキンによっては　css 内の最下部に以下の記述をしてある場合があります）
.imgl {
 float: left;
}
.imgr {
 float: right;
}
.imgclear {
 clear: both;
}
skinフォルダ > navigation.html に次を追加 (ナビゲーションのプロフィールに画像を追加します)

<!--SKIN_PROFILE_HEAD_START-->〜 <!--SKIN_PROFILE_HEAD_END-->に下記を追加します。
 <!--SKIN_PROFILE_HEAD_START-->(250行目付近)
  <div class="block">
  <p class="prof">ɬimg src="http://hktagb.ddo.jp/~shirousagi/diarypro/prof.jpg"
  alt="プロフィール画像" width="180" height="144" class="imgl"></p>
  <ul>
  <!--SKIN_PROFILE_HEAD_END-->
プロフィール設定画面での記述例 (プロフィールに表示する為のタグと内容)

<img src="http://hktagb.ddo.jp/~shirousagi/diarypro/prof.jpg" alt="プロフィール画像"
width="180" height="144" class="imgl" />
好き ： ロック・小説・動物・トマト
嫌い ： 辛いもの
*注*　予め、prof.jpgと言う名前(名前はなんでも良いがタグとの整合性が必要)のプロフィール画像
を"diarypro"フォルダーにアップロードして置く必要が有ります。

11. ナビゲーションのプロフィールに画像を表示する方法。

skin/navigation.htmlの205行目(編集により番号はずれています)から
	<!--SKIN_PROFILE_HEAD_START-->
	<div class="block">
		<h2>プロフィール</h2>
		<ul>
	<!--SKIN_PROFILE_HEAD_END-->
		<!--SKIN_PROFILE_START-->
			<li><a href="${INFO_PATH}?mode=profile&user=${PROFILE_USER}">${PROFILE_NAME}</a></li>
                        <!--SKIN_PROFILE_HEAD_START-->
　　　　　<img src="skin/images/猫の日3.jpg" width="120" heigth="80" alt="猫" />
		<!--SKIN_PROFILE_END-->
	<!--SKIN_PROFILE_FOOT_START-->
		</ul>
	</div>
	<!--SKIN_PROFILE_FOOT_END-->
214行目からの<!--SKIN_PROFILE_HEAD_START-->以下に黄色い背景の部分のタグを追記します。
画像はskin/images/猫の日3.jpgですが 画像の設置場所や画像は例ですからコレにこだわりません。

12. ナビゲーション下部にリンク画像(新規作成)を表示する方法。

skin/navigation.html　の最終行の
<!--SKIN_NAVIGATION_FOOT_START-->〜<!--SKIN_NAVIGATION_FOOT_END-->の〜部分に下記黄色背景部分を挿入します。
<!--SKIN_NAVIGATION_FOOT_START-->
<div class="bannerblock">
<h2>オプションLINK </h2> (名前は変えてください)
<a href="http://www.web-liberty.net/" class="top"> <img src="${INFO_URL}skin/images/wdp.gif" width="80" heigth="15" alt="Script : Web Diary Professional ${INFO_VERSION}" /> </a> 
<!--SKIN_NAVIGATION_FOOT_END-->
skin/imagesフォルダーに「wdp.gif」(コレは例です)画像を貼り付けます。

*注* 　 画像だけならリンクは省略して下さい。ナビゲーションにフッターが表示されたら、</br>を<!--SKIN_NAVIGATION_FOOT_END-->の前に 追加して見て下さい。Edit(H24-8-19)

13. 色々な 3カラムや2カラムへの改造スキン配布サイト。


これは、色々なサンプルの改造「images」「skin」がダウンロード出来るサイトの紹介です。
改造方法は簡単です、サンプルのフォルダーをダウンロードしたら、解凍して、「DisryPro」内の「SKIN」に解凍した、「skin」内のファイルを 全て貼り付けます、つまりサイトの「SKIN」にアップロードします。また「images」フォルダーを「DisryPro」内の貼り付けます。
これは、代表的な例を示していますから、「readm.txt」が有る場合はこれの指示にしたがってください。
なお、サンプルに記載してある注意書きを良く読んで下さい。色々な注意書きがしてあります。
ダウンロードサイトURL=http://web.ultinet.co.jp/~deedee/niky/htm/download.htm
上記サイトは休止しているか繋がりませんのでこちらからどうぞ3colum
*注*
解凍したファイルは「images」「skin」です。(ここでは小文字で表現しています)
     サイト内のフォルダーは「DisryPro」その中のフォルダーは「SKIN」。(ここでは大文字で表現しています)
14. 環境設定によるエラー時の対処方法。

data/init.cgiには環境設定が反映されています、これを修正する事によりある程度の修復が可能です。
15行目あたりのdiaryproの設置場所の修正。
117行目あたりの戻り先の設定。
    * 注 *上記行数は環境設定により異なります。
http://www.web-liberty.net/download/diarypro/skin/index.html
←ダイヤリープロの使い方のこの部分に相当します。
15. 本文中に動画を表示させる方法。

Diaryproファイルの中に「PM4」フォルダーを新たに作成します、MP4形式の動画をこの中に保存しておきます。 投稿の記事には
<video controls="" muted width="534" height="300" >
<source src="MP4/お水送り.mp4" type="video/mp4" />
</video>
と記述します。
なお、画像の表示は5枚しか表示出来ませんが、これ以上表示したれけば動画と同じ要領で画像専用のフォルダーをつくり、 その中に画像を貼り付けて、
<img src="ooo.jpg">で表示可能ですが画像幅を600Pix以下を推奨します。
基本的に各deta内の表示(例えばプロフィール)はタグが使えますので自分なりに工夫して表示しましょう。

*注*「お水送り」.mp4は動画ファイル名です。muted はいきなり音がでないためにありますから動画の再生をクリックする必要があります。動画のサイズは動画の規格で違います、適当に大きさを変えて下さい。
16. カレンダーの曜日タイトル色を変更する方法。
diarypro/skin/ 内の navigation.htmlの12行目〜20行目に曜日タイトルがあります、
下記のように色タグの黄色部分を追記します、そして上書き保存します。 　　

<tr>
　　　　<td><font color="#ff0000">日</font></td>
　　　　<td>月</td>
　　　　<td>火</td>
　　　　<td>水</td>
　　　　<td>木</td>
　　　　<td>金</td>
　　　　<td><font color="#0080ff">土</font></td>
</tr>

ダイアリープロの徹底解析と色々と改造のアイディアに !!

　　リンクしています更に詳しく、ダイアリープロの色々と改造のアイディア←ここ

「以下工事中」(H30-6)


■戻る