Serene Bach：グローネンダールとパピヨンの多頭飼い by Dog*Walk

• 2006.11.01・・・Serene BachからMovable Typeへ：移行方法
• 2006.09.25・・・DrecomRSSのブログリストを利用して更新情報を表示
• 2006.09.25・・・Dog*Walkブログの分割
• 2006.09.19・・・新着表示プラグインを導入
• 2006.07.03・・・ちょちさんのエントリタイトル用画像をお借りしました♪
• 2006.06.26・・・記事タイトルの背景をカテゴリーアイコンと統一
• 2006.06.24・・・サイドメニューにカテゴリアイコン画像設定
• 2006.06.01・・・ステータス文字変更に挑戦
• 2006.05.18・・・並べ替えのプラグイン、便利です！
• 2006.04.19・・・TBピープルにトラックバックすると文字化け発生
• 2006.04.19・・・SB2.03Rで作成した記事を修正すると
• 2006.04.17・・・スパムフィルター（簡易版）が1.1.1にバージョンアップ！
• 2006.04.16・・・Serene Bach オフィシャルガイド
• 2006.03.20・・・Milliさんのトラックバックピープル簡単入力導入
• 2006.03.15・・・スパムフィルター（簡易版） Ver.1.0.0導入
• 2006.03.07・・・パンくずリスト表示プラグイン導入
• 2006.03.04・・・2カラム化に当たって利用したカスタマイズ技
• 2006.03.04・・・3カラムから2カラムへ変更
• 2006.02.17・・・ブログの壁紙を変更しました
• 2006.02.16・・・【再】SereneBach2.04Rバグフィックス版に差し替え
• 2006.02.15・・・SereneBach2.04Rバグフィックス版に差し替え
• 2006.02.11・・・SereneBach2.04Rにバージョンアップしました
• 2006.01.30・・・個別エントリーコピー用リンクタグ
• 2006.01.27・・・Copyright表示プラグインを導入
• 2006.01.26・・・SB用コメント・TB受信設定一括変更プラグイン導入
• 2006.01.10・・・ケータイ版Dog*Walk用にQRコードを作成
• 2006.01.09・・・アーカイブをタイトル一覧表示に変更
• 2006.01.05・・・上部のバナーを変更
• 2005.12.27・・・壁紙を元に戻しました
• 2005.12.22・・・壁紙をクリスマス仕様に変更
• 2005.12.22・・・Milliさんの基本3カラムのカスタマイズ覚え書き
• 2005.12.21・・・SereneBach対ムーバブルタイプ
• 2005.12.20・・・SBで予約投稿の結果は…？
• 2005.12.19・・・SereneBachで予約投稿!?
• 2005.12.17・・・Googleでサイト内検索
• 2005.12.14・・・「ちょっと一言」を設定
• 2005.12.02・・・モブログのサムネイル表示断念-モブログ再々設定
• 2005.12.02・・・モブログ再設定
• 2005.12.01・・・壁紙を変えてみました
• 2005.11.30・・・複数のカテゴリ設定
• 2005.11.30・・・モブログ
• 2005.11.15・・・個別記事表示時のタイトル表示順序を変更する方法
• 2005.11.14・・・サイドバーにスクロールバーをつける
• 2005.11.11・・・トップ画像にリンクを張る
• 2005.10.31・・・テンプレートのカスタマイズ
• 2005.10.28・・・テンプレート
• 2005.10.28・・・モブログ導入メモ
• 2005.10.27・・・ロリポブログ！→Serene Bachデータ移行
• 2005.06.26・・・マックの標準ブラウザ

Serene BachからMovable Typeへ移行する方法です。

ログのエクスポート
Serene Bachで作成したログ（エントリー）をMovableType(MT)テキスト形式で保存します。MTでは、大量のエントリーを一度にインポートすることができないので、カテゴリー別か月別にエクスポートします。

ログの調整
エクスポートしてできたtxtファイルをテキストエディタで開きます。以下のようになっているかと思います。

AUTHOR: 名前（ハンドル）
TITLE: タイトル
STATUS: Publish
CONVERT BREAKS: 1
ALLOW COMMENTS: 2
ALLOW PINGS: 2
PRIMARY CATEGORY: カテゴリー
DATE: 06/08/2007 13:19:04
-----
BODY:
本文
本文
本文
-----
EXTENDED BODY:
追記
追記
-----
EXCERPT:
抜粋（概要）
-----
KEYWORDS:
キーワード
-----

--------

→続きを読む：Serene BachからMovable Typeへ：移行方法

「Dog*Walkキャバグロでゴー！」の親カテゴリーのを別ブログに移転し、Dog*Walk全体で４つのブログになりました。

そこで、それぞれのブログの更新状況が分かるように、DrecomRSSを利用することにしました。

1.「RSSリーダー」にDog*Walkブログの各RSSを追加
2.必要に応じて、「BLOGLIST」の「ブログリスト設定」を設定
3.「BLOGLIST」の「コード生成」で出力されたコードをブログのテンプレートに貼り付け

テンプレートのお好みの場所にコピペすればいいのですが、私は、Serene Bach標準プラグインの「ちょっと一言」にこのコードを貼り付けてみました。

SereneBachというインストール型ブログで運営している、「Dog*Walk」の記事数が1,200を超え、再構築に苦労するようになりました。

そこで、親カテゴリーのいくつかを別ブログに移動しました。

Dog*Walkブログ運営メモ
↑このブログです。Serene BachやHP、サーバー、ドメインのお話しはこちら

Dog*Walk海外旅行記
↑ズボラなオットの緻密な旅計画、上海旅行など、海外旅行のお話しはこちら

Dog*Walkノエルの足跡
↑盲導犬ノエルと盲導犬ユーザーAMIさんのお話しはこちら

Dog*Walkキャバグロでゴー！
↑メインのブログ

久しぶりにSereneBachのテンプレートをいじってみました。 小粋空間さんの v 新着表示プラグイン（サブカテゴリーリスト版） v 新着表示プラグイン（最新記事リスト版） を導入しました。 このプラグインは、現在時刻から24時間以内に投稿されたカテゴリーと最新記事の横に「New!!」というテキストを表示させます。 24時間の部分はお好みで変更可、また、表示をテキストではなく画像にすることも可能です。 独自タグの設定については、「カテゴリーのプルダウン化プラグイン」に書かれていますが、このテンプレートは、カテゴリーリストや最新記事の表示がdl/dt/ddになっていますので、以下のように記述してあります。 ▼カテゴリー

<!-- BEGIN fold_category --> <dl class="category"> <dt id="categoryname">カテゴリー</dt> <dd id="categorylist"> <div id="categories">{fold_category_list}</div> </dd> </dl> <!-- END fold_category -->

▼最新記事

<!-- BEGIN latest_entry_with_time --> <dl class="recententry"> <dt id="newentryname">最新記事</dt> <dd id="newentrylist"> <div class="side" >{latest_entry_list_with_time}</div> </dd> </dl> <!-- END latest_entry_with_time -->

▼こんな感じになりました

その他、お気に入りに追加で主要RSSリーダーに登録できるようにしました。

ちょちさんがまたまた、リクエストに応えて作ってくださいました。
ありがとうございます！
やっぱり、カテゴリとお揃いがいいですよね♪

⇒エントリタイトル

Dog*Walk内の関連記事：サイドメニューにカテゴリアイコン画像設定

サイドメニューにカテゴリアイコン画像設定したのにあわせて、記事タイトルの背景を変更しました。 ▼変更前

h2,h3{ margin:30px 25px 5px; padding:5px; background-color:#e8f2f8; border-left:20px solid #110f74; font-size:12px; font-weight:bold; } h4{ margin:10px 25px 5px; padding:5px; background-color:#e8f2f8; border-left:20px solid #110f74; font-size:12px; font-weight:bold; }

▼変更後

h2,h3{ margin:30px 25px 5px; padding:5px; background-color:#ffffcc; border-left:12px solid #0b5197; font-size:12px; font-weight:bold; } h4{ margin:10px 25px 5px; padding:5px; background-color:#ffffcc; border-left:12px solid #0b5197; font-size:12px; font-weight:bold; }

Blog Style*のちょちさんの素材がかわいいので、ウチのブログのサイドメニュー用に文字なし版の浮き輪のアイコンを作っていただきました！
ちょちさん、ありがとうございました。

CSSは以下の通り

div#side dt{
padding:5 5 5 24px;
background:url({site_parts}icon09_notitle.gif) no-repeat;
font-weight:bold;
}

⇒ブログカテゴリ画像タイトルなし版

各記事の末尾に表示されている「comments」「trackbacks」を「コメント」「トラックバック」に変更しました。 ▼変更前 ▼変更後 lib/sb/Language/ja.pmを変更しますので、要バックアップ 207・208行目が

$self->string('parts_com_num' =>'comments '); $self->string('parts_tb_num' =>'trackbacks ');

となっているので、 以下のように変更します。

$self->string('parts_com_num' =>'<small>コメント</small> '); $self->string('parts_tb_num' =>'<small>トラックバック</small> ');

205行目を以下のようにしたのですが、独自タグは反映されないようです。

$self->string('parts_sequel' =>'{entry_title}の続きを読む＞＞');

ja.pmを変更後、サーバーにアップロード、ブログの管理画面からページ構築します。 参考にさせていただいたサイト ⇒chocolat* BLOG | ステータス文字の変更

Serene Bachオフィシャルガイドについていた並べ替えのプラグインを入れてみました。今まで、並べ替えをするとエラーが出たりして（エラーはSerene Bachではなく、サーバーのせいだと思うんですが）時間がかかっていましたが、このプラグインだと簡単です(^^)v

トラックバック・ピープルに更新Pingを送ると、送信完了（記事投稿完了）時に文字化けするという現象が最近起こっていました。毎回ではないのですが、結構頻繁に起こります。 Serene Bachパティオの文字化けのスレッドを読んでサーバー上のextフォルダ内のJcode.pmを削除して、全再構築したにもかかわらず、改善しません…(;_;) 以下2点は文字化けの画像です。 ▼追記 extフォルダごと削除して全構築しても症状は変らず。Millibarさんの管理画面にトラックバックピープル検索窓のコメント欄を読んだら、他にも文字化けしている人が！ Jcode.pmが問題だったのではなかったようです。 いろいろ試してみて分かったのは、TBピープルにトラックバックすると文字化けが生じるのではなく、管理画面左側メニューに設置した検索窓に文字を入力後、記事を投稿したときのみ文字化けするということ。検索窓に文字を入力せずに、プルダウンからTBピープルのトラックバック先を選択した時は発生しませんでした。 このブログはUTF-8版なので、lib/resource/ja/main.htmlをテキストエディタのTeraPadとMKEditorでUTF-8に指定して再保存し、サーバーにアップしてもダメでした。EUC-JP版の方は、これで解決したみたいなんですけど(;_;)UTF-8版で成功した方いらっしゃいませんか？ 仕方ないので、lib/resource/ja/main.htmlはSB2.04Rのデフォルトに戻し、lib/resource/ja/entry.htmlの方に以下の記述を復活させました。

<div class="entry_tool"><a href="javascript:void(bloppop=window.open('http://member.blogpeople.net/tbps_bm.jsp','TBPS', 'scrollbars=yes,width=490,height=600,left=0,top=0, status=yes,resizable=yes'));">話題検索</a></div>

<!-- BEGIN sb_entry_tbform -->と</dd><!-- END sb_entry_tbform -->の間に記述します。 詳細はスヌーピーキャンディーさんのTB PeopleのTB URLを新規記事画面にをご覧ください。

---

【当サイト内の関連記事】 v 2006.02.11 SereneBach2.04Rにバージョンアップしました v 2006.03.20 Milliさんのトラックバックピープル簡単入力導入

現在使っているSerene Bachのバージョンが2.04Rでも、トラックバックが重複して送信されてしまいますね。 カテゴリーの関連付けの件で過去の記事を修正していたら、今さらいろいろなところにトラックバックやpingが送信されてしまいました(;^^A

ネットメモ｜スパム対策：スパムフィルターの恐るべき威力を拝見して、凪さんのスパムフィルターが1.0.0から1.1.1にバージョンアップしたことを知りました。 ネットメモさんも書かれていますが、スパムフィルターを導入して以来スパムがありません！（感謝） ダウンロード先：this calm night.｜スパムフィルター（簡易版） Ver.1.1.1

このサイト「Dog*Walk」はSerene Bach（シリーン・バッチ）という、インストール型ブログツールを使っています。Serene Bach オフィシャルガイド~カスタマイズ自在のウェブログツールが出たので早速注文。昨日届きました。 管理画面やヘルプを読んでいなかったあまり読まずに感覚的に使っていたので、知らなかったことがいくつかもありました。 ■カテゴリーの関連について Serene Bachでは、1記事に対してカテゴリーを複数指定できます（メイン1と関連カテゴリー複数）。また、親カテゴリーの下に子、孫とカテゴリーを増やすことができ、階層の深さに制限はありません。 投稿時のメインカテゴリーに子カテゴリーを選択した場合、親カテゴリーを関連付けるように設定しておくと（設定は管理画面左サイドにある編集設定メニューで行います）、カテゴリーリストに表示される親カテゴリーの記事数に、子カテゴリーの記事数が加算されます。実は、このことを知らず、ずっと親カテゴリーが0件のままで、Serene Bachはそういう仕様なのだと思っていました(^^;　毎回、自分で関連カテゴリーを選択するのは面倒なので、そのままにしておいたのです。 ただし、この親カテゴリーの関連付けは、上位1カテゴリーに対してのみ有効です。つまり、孫カテゴリーに自動で関連付けられるのは子カテゴリーのみで、親カテゴリーは自動では関連付けられません。 そこで、今まで孫カテゴリーまであったものを親・子カテゴリーになるよう、カテゴリーを変えました。具体的には、“イヌのコト＞ウチのイヌたち＞イヌの名前”だったのを“イヌのコト＞イヌの名前”とし、ウチのイヌたちというカテゴリーを削除。 関連付けの設定は、次回投稿時から有効になるので、900件を超える過去の記事をちまちま手作業で直していきました(涙) ■カテゴリ－専用のインデックスページについて カテゴリ－専用のインデックスファイルを作成するかどうかの指定も、良く分かっていませんでした。インデックスページを作成しない場合、カテゴリーのリンク先はhttp://dog-walk.net/sb.cgi?cid=1のようになり、クリックされるたびにスクリプトを動作させて表示させます。 インデックスファイルを作成すると、index.htmlファイルが作られます。リンク先は、http://dog-walk.net/dogs/のようになります。 インデックスページを作成する・しないのどちらがいいかは、実はよく分かっていないのですが、今回作成するにしてみました。作成したあとに、SBユーザーのブログを見て回ったのですが、作成していない方が多かったです。どちらがいいんでしょう？考え方次第だと思うのですが…。 ※インデックスファイルを作成する場合の注意 管理画面のページ構築メニューのディレクトリで、あらかじめ各カテゴリーインデックスファイル用のディレクトリを作成しておきます。その後、記事カテゴリーメニューでインデックスファイルを作成するをプルダウンで選択し、その下の保存先も指定します。そして、ページ構築ですべてを再構築します。 複数Serene Bachを設置するTipsも知りませんでした。未発表のプラグインやテンプレートなどが付いていますので、インストール型ブログに興味のある方、Serene Bachの初級から中級ユーザーにピッタリの内容になっています。 《他の方の感想》 vblog TK*Plus1 | Serene Bachオフィシャルガイド vmatu.biz｜オフィシャルガイド買ったよ。 vcache*cache｜Serene Bachオフィシャルガイド vネットメモ｜Serene Bach オフィシャルガイドの感想 vThe blog of H.Fujimoto｜「Serene Bachオフィシャルガイド」発売 vボムガール｜「Serene Bachオフィシャルガイド」読んだよ！ vｓａｍ☆ｗｅｂｌｏｇ｜Serene Bach オフィシャルガイド vSerene Bach｜Serene Bachオフィシャルガイドのお知らせ

Millibarさんの「トラックバックピープル簡単入力」を導入しました。TB先をプルダウン式で簡単に入力できます。 引き続き

<div class="entry_tool"><a href="javascript:void(bloppop=window.open('http://member.blogpeople.net/tbps_bm.jsp','TBPS', 'scrollbars=yes,width=490,height=600,left=0,top=0, status=yes,resizable=yes'));">TBピープル話題検索</a></div>

をつけてあるので、プルダウンにないTB先もすぐに検索できます(^^)v Milliさんに感謝＆復活してくれてウレシイ！ ▼2006.3.20追記 Milliさんの「管理画面にトラックバックピープル検索窓」、いいですねぇ。こちらも取り入れさせていただきました！ ▼2006.4.19追記 Milliさんの方法もナイス！なんですが、どうしても文字化けを回避できず、スヌーピーキャンディーさんのTB PeopleのTB URLを新規記事画面にというワザ↓に再度変更しました。

<div class="entry_tool"><a href="javascript:void(bloppop=window.open('http://member.blogpeople.net/tbps_bm.jsp','TBPS', 'scrollbars=yes,width=490,height=600,left=0,top=0, status=yes,resizable=yes'));">TBピープル話題検索</a></div>

凪さんのトラックバックスパムフィルターを入れていたのですが、昨日など100以上のコメントスパムが届き辟易。SereneBachユーザーパティオを見ていたら、スパムフィルターとしてバージョンアップしていたので差し替えました。 凪さんに感謝！

Hamster-Santaさんの「パンくずナビ」を読んで、私も設置しました。 ▼カテゴリー一覧のタグ

<!-- BEGIN topic_path --> <div class="topic_path"> <a href="サイトのURL">HOME</a> > {topic_path}</div> <!-- END topic_path -->

▼個別記事のタグ

<!-- BEGIN topic_path --> <div class="topic_path"> <a href="サイトのURL/">HOME</a> > {topic_path} > {entry_title}</div> <!-- END topic_path -->

▼CSS

.topic_path{ padding:10px 15px 0; }

classを定義して、表示位置を調整しました。 プラグイン提供は、Boleroさんの「パンくずリスト表示プラグイン」です。 お二人に感謝！

今回新たに利用させていただいたカスタマイズ技です。ありがとうございますm(uu)m v 小粋空間さんのカテゴリーのプルダウン化プラグイン ▼マークで展開、▲マークでサブカテゴリーが非表示になります。 v neige essaiさんのタイトルの一覧表示に挑戦 前より一覧表示がシンプルになりました。

3カラムだとナビゲーションが分かりにくいとオットから指摘を受けたので、2カラムにしてみました。 ▼変更後 ▼変更前 今回もMilliさんのテンプレートをお借りしました。ありがとうございますm(uu)m

つぼやんのわんこ素材から「b_06.gif」の壁紙を借りました。つぼやん、さんきゅ～♪

昨日まで配布されていたSB2.04Rに以下のバグがあったため、再度差し替えとなりました。

• 記事編集画面においてファイルアップロードを行うと、過去の記事が上書きされてしまいます
• 送信済みのトラックバックが保存されません
• アーカイブ用テンプレートの設定が正しく反映されません

開発者さまの素早い対応に感謝。 ⇒sb開発研究所

重大なバグがあったそうで、バグフィックス版がアップされていました。幸い大きなバグは経験しなかったのですがアップデートしておきました。 ⇒sb開発研究所

blog*citronのユヅさんのblog*citron | SereneBach2.04Rリリースによると、バグの修正が多くされていてバージョンアップをお勧めするとのことでしたので、本日2.04Rにバージョンアップ完了。 個人的にはカテゴリーに設定したトラックバックが重複して送信されてしまいますというのが修正されたようなので嬉しいです。スヌーピーキャンディーさんのTB PeopleのTB URLを新規記事画面にの話題検索は便利なので、lib/resource/ja/entry.htmlに以下を追記しました。

<div class="entry_tool"><a href="javascript:void(bloppop=window.open ('http://member.blogpeople.net/tbps_bm.jsp', 'TBPS','scrollbars=yes,width=490,height=600, left=75,top=175,status=yes,resizable=yes') );">話題検索</a></div>

⇒SereneBach公式サイトの記事 ▼2006.2.11追記 カテゴリーに設定したTBはやはり重複されているように見えます。したがって、カテゴリーに設定したTBを削除し、スヌーピーキャンディーさんのTB PeopleのTB URLを新規記事画面にをそのまま実行することにしました。

スヌーピーキャンディーさんの固定リンクとblog*citron | 個別エントリへのコピー用リンクタグの記事を参考に個別エントリーコピー用リンクタグを追加しました。

<input type="text" name="trackback_url" id="trackback_url" value="&lt;a href=&quot;{site_top}&quot; title=&quot;Dog*Walk&quot; target=&quot;_blank&quot;&gt;Dog*Walk&lt; /a&gt;&lt;a href=&quot;{entry_permalink}&quot; title=&quot;{entry_title}&quot; target=&quot;_blank&quot;&gt;{entry_title}&lt;/a&gt;" size="70" readonly="readonly" onfocus="this.select()" />

※注意事項 value内を実体参照（HTMLで特殊文字を記述するための符号）で記述すること。ただし、「{」と「}」を除く。Dog*Walkのところはご自身のブログ名を入れます。 SBのパティオでmatu.bizのmatuさんにもお世話になりました。 トラックバックURLも「onfocus="this.select()" />」を追記して、文字列をクリックすると一括選択できるようにしました。右クリックで簡単にTBのURLをコピーできるようになりました。 ▼2006.3.15追記 赤字の「&quot;」が抜けていました。 ▼2006.4.18追記 上記だとコピーされるタグが、

<a href="http://dog-walk.net/" title="Dog*Walk" target="_blank">Dog*Walk</a>｜<a href="http://dog-walk.net/log/site/serenebach/eid863.html" title="個別エントリーコピー用リンクタグ" target="_blank">個別エントリーコピー用リンクタグ</a>

のようになるのですが、今回

<a href="http://dog-walk.net/log/site/serenebach/eid863.html" title="Dog*Walk｜個別エントリーコピー用リンクタグ" target="_blank">Dog*Walk｜個別エントリーコピー用リンクタグ</a>

となるように変更しました。（リンクタグをひとつ減らしました）

<input type="text" name="trackback_url" id="trackback_url" value="<a href="{entry_permalink}" title="Dog*Walk｜{entry_title}" target="_blank">Dog*Walk｜{entry_title}</a>" size="160" readonly="readonly" onfocus="this.select()" />

sizeは3カラムから2カラムに変更したので、70から160にして幅を広げました。

The blog of H.FujimotoさんのCopyright表示プラグイン(Serene Bach用)を使わせていただきました。

このプラグインでは、「2004-2005」などの年号の部分を、最初と最新のエントリーの日付から自動的に割り出して表示することができます。

今まで年が変るとテンプレートを直していたのですが、これなら一回タグを書き込んでしまえばいいので便利です。

過去の記事に対してスパムが届くようになったので、コメント／トラックバック受信設定一括変更プラグイン(Serene Bach用)を導入しました。 SBの場合、コメントやトラックバックの設定変更は変更後の記事に対してのみ有効で、過去の記事は1件ずつ手作業で変えなければいけないためそのままにしておいたら(800を超える記事を手作業で変更するなんて気が遠くなります…)、とうとうスパムされるようになってしまいました。プラグインを作成・公開してくださったH.Fujimotoさんに感謝！

QRのススメさんで作成しました。現在、左サイド下方のその他欄に表示中。

カテゴリーや月別記事をクリックした際に、タイトルが一覧表示になるように変更しました。 まず、タイトル一覧表示用のテンプレートを作成する。 　　　　　　　　　　　↓ 管理画面の「テンプレート」メニューにある「設定」タブの「アーカイブ」で、タイトル一覧表示用のテンプレートを指定。 《注意》「アーカイブ」とは、カテゴリーの他に月別表示・検索結果表示も含まれるので、カテゴリーだけに適用したい場合は、「記事カテゴリー」の「詳細」でひとつひとつ指定すること。 この設定を使った場合は、カテゴリー表示用テンプレートの個別記事テンプレート部分に記事の全体が表示されるものを指定しないと記事が読めなくなるそうです。 カテゴリで一覧表示が実現しない場合は、

lib/sb/App/Main.pm L.119 の if ( ($mode eq 'srch' or $mode eq 'arc') を if ( ($mode eq 'srch' or $mode eq 'arc' or $mode eq 'cat') として下さい。

現在の設定は以下の通り

▼テンプレート▼ <dl> <dt id="categoryname">{selected_archive}</dt> <dd class="archive"> <!-- BEGIN entry --> <ul><li>{entry_date}<a href="{entry_permalink}">{entry_title}</a></li></ul> <!-- END entry --> </dd> </dl> ▼CSS▼ dd.archive{ margin:0; padding:0; font-size:12px; line-height:100%; } dd.archive ul { padding:0; padding-left:2em; margin:0; list-style-position:inside; } dd.archive ul li { margin: 10px 0; border-bottom:3px dotted #110f74; } dd.archive ul li a { padding-left:1em; }

最初に設定したのは以下の通り。スマートじゃない上に<dt>～</dt>を<dl>～</dl>の中に記述しないのは構文上の間違いです。

▼テンプレート▼ <dt id="categoryname">{selected_archive}</dt> <!-- BEGIN entry --> <div class="archive"> <dl> <dd> ・&nbsp;<a href="{entry_permalink}">{entry_date}&nbsp;&nbsp;{entry_title}</a> </dd> </dl> </div><!-- entry --> {trackback_auto_discovery} <!-- END entry --> ▼CSS▼ .archive{ margin:0px; padding:20px 20px 0; font-size:12px; line-height:100%; }

タイトルリスト一覧表示を実現するにあたり、SereneBach パティオ、回答くださったふうこさん、nagiさん、でんこさん、トルキーさんに大変お世話になりました。ありがとうございました！ ▼2006.1.10追記 nagiさんのコメントを参考に少し変更してみました。いいヒントをくださりありがとうございます！

▼テンプレート▼ <dl> <dt id="categoryname"><h2>{selected_archive}</h2></dt> <dd class="archive"> <!-- BEGIN entry --> <ul><li><span>{entry_date}</span><a href="{entry_permalink}">{entry_title}</a></li></ul> <!-- END entry --> </dd> </dl>　←閉じ忘れに気づかず(^^; ▼CSS▼ dd.archive{ width:396px; } dd.archive{ margin:0; padding:20px 25px 30px; font-size:12px; line-height:100%; } dd.archive ul { padding:0 2em; margin:10px 0; list-style-position:outside; list-style-type: disc; border-bottom:3px dotted #110f74; } dd.archive ul li { margin: 0; padding:2px 0; } dd.archive ul li a { padding-left:1em; } dd.archive ul li span{ font-family:monospace; }

新しい年になったので変更。

クリスマスを過ぎたので、壁紙を元に戻しました。

壁紙をクリスマス用に変更しました。画像はSimple Lifeさんからいただきました。シンプルで素敵な素材がたくさんあります。

Milliさんのサイトがドメイン移行のためしばらく見れなくなるかもしれないので、今までのと重複するけど自分のためにまとめておくことにしました。 【HTMLテンプレート】

<h1 id="top">{blog_name}</h1> 　　　↓ <h1><a href="ブログURL" title="ブログタイトル"><span>ブログタイトル</span></a></h1>

これはタイトル部分を画像に変更した際、画像にトップページへのリンクを張る方法

<!-- BEGIN page --> <div class="page"> {prev_page_link} {page_now}/{page_num} {next_page_link} </div> <!-- END page --> 　　　↓ <!-- BEGIN page --> <div class="page"> {prev_page_link} <!-- BEGIN page_exp --> {page_navi_exp} <!-- END page_exp --> {next_page_link} </div> <!-- END page -->

ページの表示を「#/##」から「1 2 3 4 5 >>」に変更 【CSSテンプレート】 /* 全体の設定 */

a:link {text-decoration: none;} a:active {text-decoration: underline;} a:visited {text-decoration: none;} a:hover {text-decoration: underline;} を追加

background-image:url({site_parts}○○○.gif);

○○○.gifを壁紙にする /* 配置と色指定 */

div#banner{ height:100px; color:#FFFFFF; background-color:#002F65; } を div#banner{ width:778px; color:#FFFFFF; background-color:#110f74; } に変更

div#banner h1{ padding:10px 15px 0;　←　取る font-size:18px; font-weight:bold; }

以下を追加 div#banner h1 a{ width:778px; height:100px; background-image:url({site_parts}○○○.jpg); display:block; } div#banner h1 span{ display:none; }

○○○.jpgをバナーに指定

div#banner p.description{ padding:3px 20px; } を div#banner p.description{ display:none;　←　環境設定でしたブログの説明を表示しない }

/* その他の設定 */

.pict{ border:1px solid #002F65; } を以下の通り .pict{ border:none;　←　線をなくした } text-align:center; } img.pict_mb {　←　モブログ用画像の設定 float: left; clear: left; border:none; padding-right: 1.5em; } .topmemo{　←　ちょっと一言の設定 margin:0px; padding:20px 25px 30px; font-size:11px; }

その他文字の色などを好みの色に変更

dd#archivelist{ overflow:auto; height:360px; }

月別記事をスクロール化

Movable Typeを導入しようと考えていたときに購入した「Movable Typeで今日から始めるカスタムブログ」を昨日読み返したところだったので、Movable Typeでブログを運営していらっしゃるThe blog of H.Fujimotoさんの「Serene Bachを入れてみた」を興味深く読ませていただきました。
やはり、初心者ならSereneBach、物足りなくなってもっとカスタマイズしたくなったらMovable Type、ですね。

---

《当サイトの関連記事》
・4月30日無料ブログサーバー比較-その後
・10月27日インストール型ブログツールはどれがいい？

ubicast BloggerやBlogWriteに興味を持ったのは実は投稿が楽になるからというのではなく、ある機能に期待したからでした。それは、

→続きを読む：SBで予約投稿の結果は…？

先の日付で予約投稿ができるブログを羨ましいと思っていたのですが、 あるソフトを使うとSereneBachでも可能になるかもしれません。うまく行ったらご紹介します。

Googleのサイト内検索窓をつけてみたのですが、最新記事が検索に反映されるまで少し時間がかかるようですね。二度手間になるのではずしました。

ネットメモさんの一言メッセージの設定方法を参考に「ちょっと一言」を設定してみました。 ちょっとしたお知らせに便利ですね！ 2005.12.15追記 そのままだと私には文字が小さかったので、CSSで以下のようにフォントサイズを指定しました。

.topmemo{ margin:0px; padding:20px 25px 30px; font-size:11px; }

今日のモブログ再設定という記事にあるようにサムネイルを表示する方法を試してみたのですが、文字にまでリンクが張られてしまいますね…。(参考１、参考２)
文字へのリンクを解除する指定方法が分からないのと、私の場合、表示される画像が小さければサムネイルなしでもいいので、image templateを以下のように変更しました。heightを設定しなかったのは横位置の画像対策。幅だけ指定しておけば成り行きで高さが決まるので。この場合、横位置の画像は縦位置のものに比べて小さくなってしまうのが難点です。(参考３)

▼template
%(imagecontent)s\n%(caption)s\n<div class=\"clearing\"> </div>

▼image template
<img src=\"%(imageurl)s\" class=\"pict_mb\" width=\"120\" align=\"top\" alt=\"mobile photo\" />

▼2006.2.6追記▼
240*320サイズで撮影しなくなったので(エッジが汚くて諦めました)、image templateのwidth指定をなくして、

<img src=\"%(imageurl)s\" class=\"pict_mb\" align=\"top\" alt=\"mobile photo\" />

としました。

▼2006.4.24追記▼

▼template
%(imagecontent)s%(caption)s<br style=\"clear:left;\" />
▼image template
<img src=\"%(imageurl)s\" class=\"pict_mb\" align=\"top\" alt=\"mobile photo\" />

に変更しました。

<img src="画像URL" class="pict_mb" align="top" alt="mobile photo" />本文<br style="clear:left;" />

のように書き出されます。

Eternal Loveさんの記事でモブログでサムネイル表示できることを知りました。
ケータイの撮影サイズを120*160にしていた時は10月28日の記事の通りでよかったのですが、画質の関係で240*320で撮ることにしました(参考：12月1日の記事)。ただ、240*320サイズの画像がブログにアップされると大きすぎるので、サムネイル表示させる方法に変更しました。

具体的な方法は、Sweet osmanthusさんのmoblogで写真のサムネイル表示やUssy's Roomさんのmoblogで写真のサムネイル表示を参考にさせていただきました。

▼template
%(imagecontent)s\n%(caption)s\n<div class=\"clearing\"> </div>

▼image template
<a href=\"%(imageurl)s\" onclick=\"window.open('%(imageurl)s',
'popup','width=640,height=480,scrollbars=no,
resizable=no,toolbar=no,directories=no,
location=no,menubar=no,status=no,left=100,
top=100');return false\">
<img src=\"%(imageurl)s\" class=\"photo\" height=\"120\" width=\"160\" align=\"top\" border=\"1\"alt=\"blog-photo\" /></a>

上記のようになっていたのを私は下記のようにしました。テンプレートは一緒で画像用テンプレートを変えました。元画像のサイズが640*480ではなく240*320なので。太字が相違部分。

▼template
%(imagecontent)s\n%(caption)s\n<div class=\"clearing\"> </div>

▼image template
<a href=\"%(imageurl)s\" onclick=\"window.open('%(imageurl)s',
'popup','width=240,height=320,
scrollbars=no,resizable=no,toolbar=no,
directories=no,location=no,menubar=no,
status=no,left=100,top=100');return false\">
<img src=\"%(imageurl)s\" class=
\"pict_mb\" width=\"120\" height=\"160\" align=\"top\" alt=\"mobile photo\" />

しかし、この指定だと縦位置のみの画像になるのがネック。(たまに横位置も撮りたい)

合いそうな壁紙を見つけたので変更 変更前はこちら

Hamster-Santaさんの「sbからSereneBachへ移行」という記事を読んで、SereneBachでは複数のカテゴリを設定できると知りました。今まで、メインとサブカテゴリが設定できるだけだと思っていたのでこれはウレシイ。 ブラウザによって見え方が違うのでOperaとFirefoxもインストールしてみた。今のところ不具合はなさそう。どちらも画像の回り込みが反映されないみたいです。

結構な頻度で投稿が重複するのがちょっと…。SereneBachに標準装備されることを希望します！

気になったので自分用にメモ。

通常タイトル部分は <title>{site_title}</title> で活用されていますが、Serene Bach独自タグを使うことで順序を変更することができるのです。 <title>{entry_title}｜{blog_name_only}</title> 変更すると順序が「記事のタイトル｜ブログ名」になるのです。

参考サイト：ネットメモさん

コメントやアーカイブにスクロールバーを付けたい場合、CSSに以下を追加

dd#commentlist,dd#archivelist{ overflow:auto; height:200px; }

height:200px;の200はお好きな数値に変えてくださいね！ 参考サイト：Millibarさんのコメント欄

テンプレートをお借りしているMilliさんに教わって、トップ画像を差し替え(ロゴと文字入れ)てリンクを張りました。

【HTMLテンプレート】 <h1 id="top">{blog_name}</h1> 　　　↓ <h1><a href="ブログURL" title="ブログタイトル"><span>ブログタイトル</span></a></h1> 【CSSテンプレート】 div#banner　の　height:150px;　と　background-image:～　を削除 以下を書き換え div#banner h1{ font-size:18px; font-weight:bold; } div#banner h1 a{ width:画像の横幅（700pxにするとよいでしょう）; height:画像の縦幅; background-image:url(画像のURL); display:block; } div#banner h1 span{ display:none; } div#banner p.description{ display:none; } ブログタイトルも説明文もタイトル部分に文字としては表示されなくなりますので、必要なものは画像に載せちゃってください。

→ 詳細はMillibarさんの犬と海　Ver1.00をご覧ください。その他のTipsも参考になります。

・サイドバーのメニューの順番を若干入れ替え。 ・Dog*Walkのコピーライトを入れる。 ・「Blog People」を貼り付ける。 ・「Recommend」のタイトルが一つの商品に一つずつ表示されるので、タグの表記位置を変更 元のタグ(このテンプレートにはamazonのタグは入っていませんでしたが、一般的な表記例として)

<!-- BEGIN amazon --> <dl> <dt>amazonのタイトル/dt> <dd> ここに独自タグを記述 </dd> </dl> <!-- END amazon -->

<!-- BEGIN amazon -->の前にタイトル(このブログではRecommendという単語を使用)を出すことで、画像のみを列記することが可能。

<dl> <dt>amazonのタイトル/dt> <dd> <!-- BEGIN amazon --> ここに独自タグを記述 <!-- END amazon --> </dd> </dl>

⇒参考サイト：blog*citoronさん ・Serene Bach用はコメントリスト・トラックバックリストのみツリー化だったので、JUGEMカスタマイズ講座｜ツリー化スクリプト ver 2を導入。Serene Bachでも動いてます。 ・[あ] UnderDone(あんでるどん)さんのSerene Bach用うにゅうにゅ Read Moreプラグインβ1(Ver. 0.01)を導入。これは、トップページにある、「続きを読む」をクリックしたとき、ページが変わらずに続きを読めるようにするプラグイン。 ・ふうこさんのページナビゲーション展開（番号センタリング） 1.00 b03を導入。

犬のテンプレートだったので、迷わずMillibarさんの犬と海をダウンロード。 anicoさんのタイトル画像も全体の雰囲気に合っていて良かったのですが、4頭の画像を使いたかったので差し替えさせていただきました。 オリジナルのサイズは700×250だったのですが、高さを150に変更。それに伴い、CSSテンプレートのdiv#bannerにあるheight:250px;を150pxに変更。自分でどこを指定するのか分からず、Milliさんに教えていただきました。ありがとうございました。 あと、濃い色に文字がかかると視認性がよくなかったので、引用部分の色をグラデーションから単色に変更。 Milliさんのサイト＞＞Millibar

blog*citronのユヅさんの記事を参考にmoblog.uva.ne.jpを利用してモブログを導入。 テンプレートはユヅさんのをそのままお借りしました。

▼template %(imagecontent)s%(caption)s
▼image template <img src=\"%(imageurl)s\" class=\"pict_mb\" alt=\"mobile photo\" />

CSSは以下の通り。画像の回り込みをしています。

img.pict_mb { float: left; clear: left; padding-right: 1.5em; }

Mosaicさんの記事にcommentsやtrackbackのリンクがある項目が画像に回り込まないよう対処する方法もあり。 そしてneige essayのyuki。さんの記事にあるように以下を忘れないこと

SereneBach側では「init.cgi」に「XmlrpcForcedPublish 1」を追加。これで強制公開になる。

そのほかの参考サイト＞＞de-sign.log | moblog.uva.ne.jpのカスタマイズ みなさん、ありがとうございました！ あと、時間ができたらプチパレブログさんの画像に写真風、ポラロイド風の枠をつけるも試してみよう。

忘れないように覚え書き。 １．sb開発研究所のダウンロードセンターで正式版のUTF-8版をダウンロード。 ＊ ロリポブログのXML形式でのエクスポートの文字コードがUTF-8のため ２．インストール手順を見ながら、自分のサーバーにファイルをアップしてインストール。 ３．ロリポブログの管理画面のカスタマイズ→ロリポブログの設定→エクスポートを選択。XML形式でのエクスポートのリンクをクリックしてデータをダウンロード。 ４．Serene Bach管理画面の追加機能→データ移行→インポートで３．で保存したファイルを読込データ欄で選択して下の方にある読込ボタンをクリックする。 ＊ 追加機能にデータ移行が表示されていないときは、環境設定→プラグインでデータ移行のプラグインが利用できるようにチェックボックスにマークする（デフォルトでは利用するになっているハズ）。

サファリでこのブログを見るとカレンダー以外のサイドバーがズドンと下に落ちているそうで。 知らなかった…(;_;) どうやって直したらいいかなぁ。

Powered by
Movable Type 4.34-ja