Right Bower

※「Web Diary Proのコメント欄に絵文字をつける」のフォロー記事。
　コメント欄絵文字を実装後にお試しください。

Web Diary Proの環境設定で、
「ログの表示設定」→「記事一覧にコメントの内容を表示」を
「表示する」に設定していると、
コメント欄につけた絵文字が[♪]のようになり表示されない、
ということがありましたので、解決策を。

１．「skin＞diary.html」を開く

２．<!--SKIN_CMT_HEAD_START-->～<!--SKIN_CMT_HEAD_END-->の
　　間に以下の強調部分を追加。

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

３．<!--SKIN_CMT_START-->～<!--SKIN_CMT_END-->の
　　間にある ${ARTICLE_TEXT} を以下のように<div>で囲む

<div class="com_text">${ARTICLE_TEXT}</div>

４．<!--SKIN_CMT_FOOT_START-->～<!--SKIN_CMT_FOOT_END-->の
　　間に以下の強調部分を追加。

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

５．「skin＞footer.html」を開き、「コメント欄にも絵文字をつける」で
　　記入したスクリプトに続けて、以下のものを追加する。

<!-- コメント一覧にも絵文字を表示 -->
<script type="text/javascript">
<!--
// コメントにカスタマイズ絵文字入力機能：画像変換
function changeCustmizeEmojiTag() {
// （１）コメント全体のタグの id 属性
var commentAreaIdName = 'comlist';
// （２）コメント全体のタグ名
var commentAreaTag = 'div';
// （３）各コメントの class 属性
var commentBodyClassName = 'com_text';
// ***************** 設定ここまで *****************
var list = getCommentEmojiList();
var att = getCustmizeEmojiAttribute();
var objComArea;
var classComArea;
var objComBody = new Array();
if (commentAreaIdName != '') {
objComArea = document.getElementById(commentAreaIdName);
if (!objComArea || !objComArea.innerHTML) return;
classComArea = objComArea.getElementsByTagName(commentAreaTag);
} else {
classComArea = document.getElementsByTagName('*');
}
for (var i = 0; i < classComArea.length; i++) {
if (classComArea[i].className == commentBodyClassName) objComBody[objComBody.length] = classComArea[i];
}
for (var i = 0; i < objComBody.length; i++) {
objComBody[i].innerHTML = getStringCustmizeEmojiTag(list, objComBody[i].innerHTML, att);
}
}
function getStringCustmizeEmojiTag(list, s, att) {
for (var i = 0; i < list.length; i++) {
s = s.split('[' + list[i][0] + ']').join('<img src="' + list[i][1] + '"' + att + ' alt="' + list[i][0] + '" />');
}
return s;
}
changeCustmizeEmojiTag();
// -->
</script>
<!-- コメント一覧にも絵文字を表示 ここまで -->

ちなみにここでは暫定的に「comlist」「com_text」などにしてありますが、
同じidで各箇所をそろえれば何でもかまいません。
他とidがかぶりそうな時には別物ものにしてもＯＫです。

※このカスタマイズはWeb Libertyにて配布されている
　Web Diary Professionalスキン「ギャラリー風」用の改造です。
　他のスキンでもOKですが、あまり意味はないかもしれません。

※この改造法はWeb Gallery Professionalでも使用可能です。
　Diary.pm→Gallery.pmと読み替えて行ってください。

※プログラム本体をいじる非公式の改造です。
　動作確認はしておりますが、万が一何らかの不具合が出るかもしれません。
　留意の上、改造を行ってください。

「ギャラリー風」のスキンを利用すると、絵の一覧表示に
ミニ画像以外にもアイコンを使うことができます。
ですが、ミニ画像と違いアイコンには題名のalt属性がつきません。
そこで本体のプログラムを少し弄ります。
ちなみに改造後の状態は、別館にて作動中です。

■　アイコンに題名をつける　■

１．「lib＞webliberty＞App＞Diary.pm」を開く

２．889行目あたりにある次の行に、太文字部分を追加する。

$icon_ins->set_string("<img src=¥"$file_path" . $icon_ins->get_string . "¥" alt=¥"$subj¥" />");

以上でアイコンに題名のalt属性がつきます。

ただし、一覧以外のアイコンにもalt属性がみんなついてしまうので、
見た目に変化はありませんが、嫌だというかたはこのカスタマイズは
なさらないほうが良いでしょう。

■１カラムスキンに使うプルダウンメニューの方法を求めて
色々なＣＳＳ解説サイトやスクリプト配布サイトを放浪していました。
テンプレートとして配布しても大丈夫なものをきちんと
探せたので、もう少しかかりますが配布に取り掛かろうとおもいます。

ちなみに「こんなプルダウンメニューは？」と教えていただいた
ものがあったのですが、それは書籍付録のスクリプトを利用しており、
出版元に問い合わせたところ「再配布になるから止めてね」と
お返事をいただいたので、使用はとりやめました。
せっかく情報をいただいたのに申し訳ありません。
お心遣い、ありがとうございました！

■で、配布可能そうなＣＳＳプルダウンメニューを紹介している
「WEB公房きくちゃん」さんより、
ＲＳＳを人間にも見れる状態にするＣＳＳのご紹介。

実はもともとこれ、Web Diary Pro ver3用に作られていたらしく、
そのままver4にも利用できます。
ＣＳＳを適用するとどうなるか、実際にこのサイトのＲＳＳでやって
おりますので「ＲＳＳ」をクリックしてみてくださいませ。

■ Web Diary Pro4　でのやり方　■

１．「webliberty＞RSS.pm」を開き、４５行目あたりにある
　　XMLの記述の２行目に次のように書き加える。

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="スタイルシートのアドレス" type="text/css"?>

２．「weblibery＞App＞RSS.pm」を開き、２０３行目あたりにある
　　XML宣言の直下に、上記と同じようになるようコードを記述。

　※スタイルシートのアドレスは、好きな場所に置いて決めて下さい。
　　絶対値パスでやると一番問題ないかと。

３．スタイルシートを書く。
　　これは参照ページそのままのものを、最初の行だけ
　「@charset 'utf-8';」に書き換えます。

４．スタイルシートと書き換えたRSS.pmをそれぞれアップロード。

ちなみにこれはＲＳＳを押した人がびっくりしないようにしたい人や、
ソース丸見えのＲＳＳが格好悪いと感じる人以外には
あまり意味のないカスタマイズですので、無理にやる必要性はありません。

■実は、このサイトのRSSは今まで配信できない状態でした。
まさかーと思って自分のリーダーに読み込もうとしたところ、
ものの見事に読み込んでくれず、こりゃ大変だとサポート掲示板のログを
あさってきました。すると同様の質問が多く過去にも出ていました。

どうも無料レンタルサーバーによくある
自動広告挿入スクリプトがXMLにも入れられてしまうため、
一番最初に空白の行ができてしまい、うまく配信されない状態に
なってしまうようです。このサーバーも無料レンタルなので、
ほっとくと最初の行に広告タグをいられれてしまいます。

で、この問題はWeb Diary Pro側では対処できません。
サーバー側の仕様なのですから仕方ないわけです。
同様の問題にお嘆きの方は、自身のレンタルサーバーの質問掲示板や
「広告を非表示にするには？」などのQ&Aを参照なさると
解決策が見つかると思われます。

■ちなみに無料Xreaの場合、「x」フォルダ内にWDPを設置するか
広告非表示用の.htaccessをWDPと同じフォルダ内に入れるかすれば
この問題は回避できます。（このサイトでは.htaccessを使用）
どちらにせよちゃんと手動で広告を入れないといけないわけですが。

参考≫
・XREA SUPPORT BOARD - rss表示について
・はやわかり XREA - .htaccess を使って広告自動挿入を無効にする

■オマケ。RSSって何ぞや？という方にも分かりやすい解説ページ付きで
簡単に主要リーダーへの登録ボタンも作ってくれるサイト。
・RSS アイコン 2.0 - 説明ページつきRSSアイコンを無料作成
ナビゲーション下部、Operaバナーと一緒に貼ってありますので
興味のある方はどうぞ。

JUGEMカスタマイズ講座さんからまたひとつ、
『「記事の内容」の一部を隠す』の導入方法。
これを導入すると、<hr />と書き込んだところから下が
隠し記事として折りたたまれます。
「続きを見る」の簡易版やネタバレ用として使えるかも。

ネタバレボタン導入が面倒だったという方にも
簡単にできるカスタマイズです。

■「記事の内容」の一部を隠す■

１．「skin＞diary.html」を開き、${ARTICLE_TEXT}に
　　ついているdivのclass属性を確認する。

<div class="text">
<!--ARTICLE_ICON_START--><p>${ARTICLE_ICON}</p><!--ARTICLE_ICON_END-->
${ARTICLE_TEXT}
</div>

２．「skin＞common.css」を開き、最後のほうでもいいので
　　次のスタイルを記入する。
　　このとき、（１）で調べたclass属性名を使います。

.text hr {
  display: none;
}

３．「skin＞footer.html」を開き、
　　<!--SKIN_FOOTER_START-->～<!--SKIN_FOOTER_END-->間の
　　好きなところに「記事の一部を隠す」のスクリプトを入れる。

４．上記スクリプトの最後の部分を（１）で確認したclass名に書き換える。

gTextVisible = '↓[続きを表示]'; /* 「続き」を表示するためリンク */
gTextHidden = '↑[続きを隠す]'; /* 「続き」を隠すためのリンク */
gTextPosition = 0; /* 「続きを隠す」を表示する位置 0:「続き]の前 1:「続き」の後ろ 2:両方 */
gTextSequel = new Array();
initSequel('div','text');

スキンによってclass名が違う場合は、
各自それにあわせて太文字部分を書き換えてください。
設定方法は元記事にならいます。