Right Bower

【ダウンロード】　※サンプルページはこちら
・skin_bb（lzh）
・skin_bb（zip）

１カラムスキン「BB」の修正版です。Web Diary Pro4.33以上、
「ナビゲーションを記事の前に表示」をONにしてご使用下さい。

○「ナビゲーションを常に表示」で主要ナビの常時表示可能。
　（カレンダー＆新着ミニ画像のみ未対応）
○「.today」が表示されるようになった
○IE5以上、Firefox1.0以上、Netscape6以上、Opera7以上に対応。
　Firefox、Macでの表示崩れを修正。

※「BB II」ではJavaScriptをMugiさんのものから
　Dynamic Driveさんのものへ変更しました。
　旧「BB」からバージョンアップされる方は、スキンを上書きした後
　skinフォルダ内の「popup2.js」を削除してください。

※旧「BB」や他のスキンからの移行する際、
　HTML書き出しをONにしている場合、必ず「サイトの再構築」を
　行ってください。

■ようやく「BB」の修正版、「BB II」が出来ました。
旧版ではどうもスクリプトの相性が悪いらしいので、
海外サイトのスクリプトを引っ張ってきました。
利用規約などをなけなしの英語知識と翻訳サイトの併用で読み、
ようやく組み込みフリーで規約に触れないものが出来きました。

やっといいスクリプトが見つかったと思ったら、
規約を読んだらお金が必要だったり、あるブラウザで動かなかったり。
とっかえひっかえ動作確認を行いました。
そのため完成まで長い時間がかかってしまいました。
旧版「BB」をお使いの方、大変申し訳ありませんでした。

これで４つブラウザに対応できたのですが、
やはりMac環境やsafariなどのブラウザでは（特にスクリプト周辺が）
どうなっているか分かりません。
不具合や表示の崩れなどがありましたら、ご一報いただけますと嬉しいです。

■そういえば、まさかこんな名前のスキンはあるまい、と思って
名づけた「TO-FU」ですが、
まったく同じ綴りでMT用スキンがあり驚きました。
誰も考えたことがないような名前というのは難しいですね

■そして拍手レスです。日々いただいているのを見るたびに
更新の力をいただいております。

≫9/24 リンさん

無事問題が解決できましたか！よかったです
設定の組み合わせにより、思わぬ落とし穴が出てくることもありますね。
過去記事へのサポートも引き続き行っていますので、
このたびのようなご報告がありますととても嬉しいです。
拍手とご報告、ありがとうございました！

≫9/20　リンさん

そのほかにもたくさんの拍手をいただき、本当にありがとうございます。

■改訂版「BB」なんですが、
Firefoxで変になる現象はスキンに組み込んだときに起きるようで、
スクリプト同士の干渉か、スタイルシートの書き方が悪いかの
どちらかが問題のようです。クロスブラウザは本当に難しい……。

■横カレンダー部がMacでは変になる現象は、フォントの問題でした。
スタイルシートのフォント設定部分に
VerdanaやArial、Helveticaを設定するとWinもMacも
同じ表記（特に半角英数字）になるようです。

※「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がかぶりそうな時には別物ものにしてもＯＫです。

あちゃー。

「BB」をMacで見ると崩れている、とのご報告を受け
表示確認してみたのが上の図。ものの見事に崩れていますね

Macだけは環境がないため動作確認ができず、
どうしても発見や対処が遅れがちです。申し訳ありません。
下記記事を利用しながら、順に確認作業を行っていく予定です。

・「Stylesheet Stylebook：これで全部ブラウザテスト」
・「trifles : 各ブラウザでの表示チェックに」
・「ヘタレ系DのBlog: Ajaxと混戦中」（JavaScript クロスブラウザについてetc）