2004年12月06日
●サイドメニュー折りたたみスクリプト（cookie等改善版）
サイドメニュー折りたたみスクリプトを改版致しました。
現在公開中のサイドメニュー折りたたみスクリプト（menufolder.js）は、
- cookie消費が大きい
- カスタマイズ性がよくない
今回は cookie を最大2個しか使用しない方式に変更致しました。なお本方式は日頃お世話になっている facet-divers さんよりアドバイス頂きました。この場をお借りしてお礼申し上げます。ありがとうございました。
またカスタマイズ性については、例えばBlogPeople等のメニューでリンク数を表示する場合、aタグを数えてからバナー等の不要なリンク数分をスクリプト内で減算するようにしています（下リスト参照）。
if (idName == "link1") {
counter = objItems.length - 3;
} else if (idName == "link2") {
：
が、複数のリンクを追加する場合、ここに id 属性分のプログラムを新たに実装しなければならないため、この設定方法はJavaScriptを書けない方には障壁になります。またその他の設定についてもプログラムを変更しなければならない実装になっており、その部分のカスタマイズについては説明を省いていました。さらに途中で状態保持や動作遅延対処の機能追加を行った関係で、最初からエントリーを追ってカスタマイズを進めて頂くのも非効率的に感じておりました。今回の改版では他の設定も含めてプログラムの先頭で提供する機能のカスタマイズが可能な方式に改善しております。
そういう訳で手順を含めてこのエントリーにまとめました。はじめてご利用になる方もこちらを参照頂ければ幸いです。
折りたたみスクリプトの主な仕様は下記の通りです。
- サイドバーのメニューを折りたたむことができます。
- 折りたたみマークをメニュータイトル部分に表示します。折りたたみマークはタイトルの左右または左端・右端のいずれかに表示します。表示位置は設定により切り替えられます。また折りたたみマークは任意の文字に変更できます。
- メニュー内のリスト数をタイトル部分に表示することができます。リスト数表示・非表示は設定によりメニュー単位で切り替えられます。リスト数はタイトルの左右に表示します。表示位置は設定により切り替えられます。またリスト数を"（）"や"[]"等の任意の文字で括ることができます。
- cookieを利用して折りたたみ状態を保持することができます。また状態保持の有効・無効を設定により切り替えられます。
- サブカテゴリーのリスト数表示を li タグ数で収集します。また従来の一括表示での収集方法を設定により切り替えられます。
１．menufolder.js ダウンロード
下記のリンクをクリックするとスクリプトのページへジャンプします。そこで menufolder.js をクリックし、同じファイル名でご自身のPCに保存してください。
２．menufolder.js の設定内容を修正
ブログの設定内容に合わせてファイルの先頭にある下記の赤字部分を修正します。
// サイドメニュー用折りたたみマーク
var openMarkForSideBarMenu = '▽';
var closeMarkForSideBarMenu = '△';// 折りたたみマーク挿入位置
// タイトル前に折りたたみマークを配置：true
// タイトル後に折りたたみマークを配置：false
// 左端または右端に折りたたみマークを配置(スタイルシートの設定が必要です)：true
var preMarkForSideBarMenu = true;// リスト数表示位置
// タイトル前にリスト数を表示：true
// タイトル後にリスト数を表示：false
var listNumberPosition = true;// リスト数表示を括るマーク
var leftMarkForListNumber = '';
var rightMarkForListNumber = '';// タイトル表示位置補正方向（スタイルシートで左端または右端に配置した場合）
// タイトルを右方向に移動：true
// タイトルを左方向に移動：false
var centeringPosition = true;// タイトル表示位置補正オフセット（スタイルシートで左端または右端に配置した場合）
var offsetForCentering = 2;// リンクメニュー数
// 他にリンク数を減算する必要があるメニューもここに含めてください
var linkNumber = 2;// 各リンクメニューのオフセット値
// 注：id属性名は「linkx(xは数字)」であること
var offsetValue = new Array(linkNumber);
offsetValue[0] = 3;
offsetValue[1] = 2;// トラックバック数の除数
// 注：id属性名は「trackback」であること
var trackbackNumber = 2;// カテゴリーリスト数計算方法
// サブカテゴリーのカテゴリー数を適正に計数する
// サブカテゴリーに対応：true
// 従来のカテゴリーに対応：false
var subCategoryCount = false;// 状態保持フラグ
// 状態保持を有効にする：true
// 状態保持を無効にする：false
var holdState = true;
設定方法の詳細は下記の通りです。上記リストの青字部分が該当行、赤字が設定値を示しています。
openMarkForSideBarMenu/closeMarkForSideBarMenu
- 名称：サイドメニュー用折りたたみマーク
- 用途：サイドメニューのタイトル横に表示する折りたたみ用リンクのマーク
- 設定値：任意の文字（設定したマークを''で括るように）
- 名称：マーク挿入位置
- 用途：折りたたみマークをタイトルの前後どちらに表示するかを設定します。
- 設定値：
true：タイトルの前に表示／false：タイトルの後に表示。ただしメニューの左端または右端に表示する場合は true を設定（スタイルシートで位置を調整します）
- 名称：リスト数表示位置
- 用途：リスト数表示位置をタイトルの前後どちらに表示するかを設定します
- 設定値：
true：タイトルの前に表示／false：タイトルの後に表示
- 名称：リスト数表示を括るマーク
- 用途：「left～」には左側の文字（'('、'['等）、「right～」には右側の文字（')'、']'等）を設定します。何も設定しない場合はいずれも '' という状態にしてください。また片方だけの設定も可能です。
- 設定値：任意の文字
- 名称：タイトル表示位置補正方向
- 用途：スタイルシートで折りたたみマークを左端または右端に配置する場合、タイトルがメニュー中央から外れるので、タイトル位置を補正するための方向を設定します。補正する必要がない場合は本項目はそのままの状態にして、次の offsetForCentering の値に「0」を設定してください。
- 設定値：
true：タイトルを左方向に移動／false：タイトルを右方向に移動
- 名称：タイトル表示位置補正オフセット
- 用途：上記の centeringPosition で補正する方向のオフセットを半角数字で指定します。なお「1」は半角1文字に相当します。
- 設定値：任意の値。不要な場合は「0」を設定。
- 名称：リンクメニュー数
- 用途：BlogPeople・MyBlogList等のリンクリストの数を半角数字で設定します。
- 設定値：任意の数字（1つであれば「1」）。リンクリストがない場合は「0」。
- 名称：各リンクのオフセット数
- 用途：タイトル左にリスト数を表示する際、a タグの数の合計を表示するのですが、リンクリストの場合はバナー等の計数に不要な a タグが含まれている場合があります。この不要な a タグの数をメニュー毎に設定します。また [x] の部分にはそのメニューが（リンクの中で）何番目に表示されるかを指定します。 1番目に表示されるものはプログラムの都合上 [0] 、2番目に表示されるものは [1] …という具合に設定してください。メニューが表示される順番は画面の左上から右下です。エントリーやカテゴリー等の他のメニューは数に含みません。先に指定した linkNumber で何番目に表示されるかを計算します。linkNumber を「0」に設定した場合はこの設定を変更する必要はありませんので、そのままにしておいてください。
- 設定値：任意の数字（1つ減算する場合は「1」）
- 名称：トラックバック数の除数
- 用途：トラックバックのリスト数を表示する場合、aタグの数の合計を表示するのですが、トラックバック先のリンクとトラックバック元のリンクを同時に表示しているとリスト数が倍になってしまいます。この値はその除数を指定するものです。「2」となっている場合はリスト数の合計を2で割ります。
- 設定値：除数を半角数字で設定
- 名称：カテゴリーリスト数計算方法
- 用途：カテゴリーリスト数計算方法を li タグ（サブカテゴリー表示）で計数するか、a タグ（従来の一括表示）で計数するかを指定します。
- 設定値：
true：li タグで計数／false：a タグで計数
- 名称：状態保持フラグ
- 用途：折りたたみ状態を cookie に保持する／しないを設定します。「保持」を設定した場合、最後に変更した折りたたみ状態が他のページへのジャンプ時やブラウザ起動時、および更新時に反映されます。
- 設定値：
true：有効／false：無効
修正の際にはカスタマイズ箇所以外の部分に全角文字（全角空白）を含まないようお気をつけください。
３．menufolder.js 配置
menufolder.js の修正が終わったら保存し、ローカル・サイト・パスに配置してください。「配置」とはレンタルサーバの場合はFTPツール等によるアップロード、自宅サーバの場合は単なるコピーを示します。
４．テンプレートの設定１（menufolder.js のインクルード文追加）
折りたたみを利用する各テンプレートの <head>～</head> の間に下記のタグを追加してください。charset 属性は menufolder.js の文字コードを指定してください。
<script language="JavaScript" type="text/javascript" src="<$MTBlogURL$>menufolder.js" charset="utf-8"></script>
５．テンプレートの設定２（各メニューに id 属性追加）
下記の要領で、折りたたみたいサイドメニューのタイトルに「id="xxname"」、リストの方に「id="xxlist"」を付与します。"name"と"list"は固定名称です。"xx"の部分にはメニュー毎に異なる名称を付与します（例えばカテゴリーリストは"category"、エントリーは"entry"等）。同じ名称が存在すると正常に動作しませんのでご注意ください。
下記は設定例です。この例と同じように各メニューに青色部分の id 属性を追加してください。
<div class="sidetitle" id="categoryname">
Categories
</div><div class="side" id="categorylist">
<MTCategories>
<a href="<$MTCategoryArchiveLink$>">
<$MTCategoryLabel$></a> [<$MTCategoryCount$>]<br />
</MTCategories>
</div>
なおリスト数表示を補正する必要がある BlogPeople や MyBlogList 等のリンクメニューにつきましてはid属性を "linkx～"（xは半角数字）で統一してください。その場合のタイトル部は「id="link1name"」、リスト部は「id="link1list"」という具合になります（複数存在する場合は数字の部分が増えていきます）。
６．テンプレートの設定３（menufolder.js 実行スクリプトを追加）
各テンプレートの、折りたたみを指定している各メニューの直下（例えばカテゴリーリストであれば４項のタグのすぐ下）に下記のスクリプトを追加します。
<script type="text/javascript">
<!--
FoldNavigation('idName','initState',viewListNumber);
//-->
</script>
スクリプト内の赤字部分を適宜設定します。それぞれの意味と設定値は下記の通りです。
idName
- 名称：id属性名
- 用途：折りたたむメニューのid属性を指定します。
- 設定値：このスクリプトの直前のメニューのid属性名（"name"または"list"を除去した形）
- 名称：初期状態
- 用途：ページを最初に表示した時の折りたたみ状態を指定します
- 設定値：
on：開いた状態／off：閉じた状態
- 名称：リスト数表示
- 用途：メニュータイトル横にリスト数の表示・非表示を設定します
- 設定値：
true：表示／false：非表示
<script type="text/javascript">
<!--
FoldNavigation('category','on',true);
//-->
</script>
という内容で配置します。
７．スタイルシート設定
スタイルシート（styles-site.css）の .sidetitle の下に下記（注：青色部分のみ）を内容を追加します。以前のものと異なりますが動作的には同じです（多分）。２項の設定パターンによってスタイルシートの設定内容が若干異なりますので該当するものをお選びください。
右端にマークを表示
.sidetitle a.foldmark {
float: right; /* マークを右端に配置 */
font-size:9px; /* マークのフォントサイズ */
padding-right:3px; /* 右端からのパディング */
text-decoration: none; /* マークの文字装飾（何も表示しない） */
}
左端にマークを表示
.sidetitle a.foldmark {
float: left; /* マークを左端に配置 */
font-size:9px; /* マークのフォントサイズ */
padding-left:3px; /* 左端からのパディング */
text-decoration: none; /* マークの文字装飾（何も表示しない） */
}
タイトル前にマークを表示
.sidetitle a.foldmark {
font-size:9px; /* マークのフォントサイズ */
padding-right:3px; /* タイトルとマーク間のパディング */
text-decoration: none; /* マークの文字装飾（何も表示しない） */
}
タイトル後にマークを表示
.sidetitle a.foldmark {
font-size:9px; /* マークのフォントサイズ */
padding-left:3px; /* タイトルとマーク間のパディング */
text-decoration: none; /* マークの文字装飾（何も表示しない） */
}
上記サンプルはそのままでも使える値に設定していますがデザインに応じて適宜変更ください。
2004年12月05日
●サイドメニューの折りたたみスクリプト改修中
公開中のサイドバー折りたたみスクリプトですが、cookie保持の改善版をただいま鋭意作成中です。本当は土曜日中にエントリーを公開したかったのですが、他の改善も含めて色々と修正していたら間に合わなくなってしまいました。カスタマイズ手順もこれまでのものをまとめて、新たに作り直す予定です。
ということで、かなりゴージャスなスクリプトに生まれ変わって登場する予定です（設定がかえってややこしくなるという噂も…）。乞うご期待ください！
2004年12月01日
●カテゴリーアーカイブで全カテゴリーリスト表示の記事修正
お詫びです。先日エントリーしたカテゴリーアーカイブで全カテゴリーリストを表示で正規な表示方法があることが判明致しました。
<MTSubCategories>～</MTSubCategories>
を
<MTTopLevelCategories>～</MTTopLevelCategories>
に置き換えるだけでできました。
この方法はNotebook :: Hibi no Noteさんから頂いたコメントより判明致しました。
ということで該当のエントリーの内容を修正するとともに、誤解を招くカスタマイズ方法を公開したことをこの場をお借りしてお詫び申し上げます。
なおモジュール化によるカスタマイズをされたものにつきましては変更の必要はございません（上記タグを使用する方が本来的ですが変更されても動作は変わりません）。またモジュール化自体につきましてもメリットが多いので、そのままご利用頂ければ幸いです。
2004年11月29日
●再構築時の500エラーを解消する
昨日より爆発的（？）に広がってる話題に便乗してご紹介を。
エントリーが増えてくると再構築（エントリーの新規投稿含む）で500エラーが発生する話をよく耳にします。どうやら BerkeleyDB を使用している場合に発生するようで、その原因に db ディレクトリに配置される fileinfo.db の肥大化（10MByte以上とか）が挙げられていました。このファイルにはサイトに配置されているファイル情報等が記録されており再構築時にこのファイルが更新されますが、冗長なファイル情報が残ってしまうみたいです。
肥大化の技術的な原因はogawaさんの言葉を引用させて頂くと、すでにある fileinfo.db を remove してから（データを）追加すべき処理で、
- remove してもその分の BerkeleyDB の空き領域が開放されない
- remove しているがうまく削除できていない
以下参照および関連記事です。ありがとうございました。
参照記事
Magic White：500エラーと投稿時遅延解消法/500エラーと投稿時遅延解消法その2
我楽：新規エントリー投稿時に500エラー。（泣）
上記から参照している元記事
TITO's Web Page：Movable Type「fileinfo.db」の肥大化
リンクサイトで対処された方々（不足ご容赦ください）
V.J.Catkick@：fileinfo.db を削除する
やむやむ：「fileinfo.db」 のスリム化
体験手記レポート部：エントリー投稿時に500エラーが出るのをどうにかする方法
対処については当初「fileinfo.db を手動削除」という手段（バックアップ要保存）が出回ってましたが、 Ogawa::Memoranda さんが削除用スクリプト（下記）を速攻で作成くださいました。個人的にはこちらのスクリプトを使用されることを推奨します（2004.11.30 プラグイン化されております）。
対処用スクリプト
Ogawa::Memoranda：mt-shrinkfinfo.cgi
 詳細は上記サイトを参照ください。なおこのスクリプトを実行し、成功すると下記のような画面が表示され、fileinfo.db のサイズが適正なサイズに縮小されます。私もありがたく使わせて頂きます。ありがとうございました。 |
追記：fileinfo.db のサイズを管理画面に表示する方法をに掲載しました。
2004.11.30 追記
プラグインが提供されまして、管理画面からのクリックで実行できるようになりました。設定方法を簡単に記しておきます。詳細は先のリンクまたはMagic White：mt-shrinkfinfo.cgiがプラグインに。を参照ください。
- mt.cfg の DataSource を相対パスから絶対パスに修正。
- ShrinkFInfo.zipをダウンロード、解凍。
- 解凍した「ShrinkFInfo」をフォルダごと plugins フォルダ内に配置（レンタルサーバの場合、パーミッションの設定がありますのでご注意ください）。
2004.12.11 追記
fileinfo.db のサイズを表示する方法を追記しました。
2004年11月27日
●コメント投稿時のPerlエラーを解消する
私のウェブログは自宅サーバで運用しています。OSは Windows XP です。
で、当初はそれほどでもなかった（というか皆無）Perlのエラーダイアログが、3.11にアップグレードした辺りから画面に5～10枚／日ほど表示されるようになりました。どうもコメント投稿等やエントリー投稿が引き金になっているようです。自分のPCでコメントを投稿しても発生します。またコメント投稿等も正常終了しない（応答が返ってこない）ことがしばしばありました。そのまま放っておくとコメントが二重投稿されてしまうケースもあるようで投稿された方には大変ご迷惑をおかけ致しました。
時間が経過してもいっこうに回復する気配もない（というか待ってて直るはずもない）ので、さすがに困りました。サイトを検索してもそれらしき情報がみつかりません。Perlのバージョンを入れ替えようか、または Movable Type を新規インストールにしようかと策を講じておりました。
が、しつこくサイトを検索していたところようやく下記の記事にたどり着きました。
LaunchBackgroundTasks 0
記事と私の事象は微妙に異なるようですが、「WindowsのPerlでは対応していない機能がある」という文言になんとなくピンときて（笑）、この設定を行ってみることにしました。デフォルトの mt.cfg ではこの値に関する記述はありませんので（追記：記述がないのは 3.0D の mt.cfg です）ファイルの一番下にちょろっと追加。ちなみにこのオプションについてはの下から6番目に説明があります。下記は該当部分の抜粋です。
LaunchBackgroundTasks
タスクの中には、デフォルトで、バックグラウンドで実行されているものもあります。 この仕組みによって、Movable Typeがたとえば再構築など重要なタスクを実行している間、ユーザーや別のソフトウエアはアプリケーションを継続して使うことができます。 ただしこの機能はホスティング環境によっては機能しないこともあります。 効果のない機能がある場合は、LaunchBackgroundTasks 0 を設定してみてください。
具体的な原因は「（Movable Typeが使用する）PerlIS.DLL がfork関数に対応していない（実装されていない）ためにエラーが発生する」ということらしいです。forkというのは簡単に申しますと、いくつかのプログラムを同時に走らせるためのもので、同時に走らせることで処理を早く終わらせられます。ちなみにforkを行っているのは
- lib/MT/Util.pm
sub start_background_task {
my ($func) = @_;
if (!launch_background_tasks()) { $func->() }
else {
$| = 1; # Flush open filehandles
my $pid = fork();
if (!$pid) {
# child
close STDIN; open STDIN, "</dev/null";
close STDOUT; open STDOUT, ">/dev/null";
MT::Object->driver->init();
$func->();
CORE::exit(0) if defined($pid) && !$pid;
} else {
MT::Object->driver->init();
}
}
}
この対処を実施してからすでに1週間以上経つのですが、エラーは発生しなくなりました。コメントも（やや時間がかかりますが）正常終了します。その代償として新規エントリーの投稿にえらく時間がかかりようになりました（笑）。おそらく並列処理をやめて直列で処理を行っている分、時間がプラスされたのでしょう。コメント投稿も完了するまでに数十秒ほどかかるようです。申し訳ございませんが気長にお待ちになってやってください。
追記：本事象は3.0Dからのアップグレードによるものでした。動作が変化した原因につきましては(o)さんから頂いたコメントを参照ください。
2004年11月26日
●個別エントリーアーカイブでの文字化けの原因
個別エントリーアーカイブでのコメント投稿後やTypeKey認証後の文字化けを解消する記事をこちらに投稿しましたが、Daily noteさんのアドバイスより「『続きを読む』を折りたたむスクリプトを入れると文字化けする」とのことで（確認＆ご連絡ありがとうございました）、早速試験サイトで試してみました。
実験結果は、試験サイトでも「続きを読む」がある記事へコメントを投稿すると100%文字化けしました。さらに続きを読むの部分（HTML/JavaScript）を色々切り分けた結果、JavaScriptの ShowHide 関数
function showHide(entryID, entryLink, htmlObj) {
extTextDivID = ('Text' + (entryID));
extLinkDivID = ('Link' + (entryID));
if( document.getElementById ) {
if( document.getElementById(extTextDivID).style.display ) {
if( entryLink != 0 ) {
document.getElementById(extTextDivID).style.display = "block";
document.getElementById(extLinkDivID).style.display = "none";
htmlObj.blur();
} else {
document.getElementById(extTextDivID).style.display = "none";
document.getElementById(extLinkDivID).style.display = "block";
}
} else {
location.href = entryLink;
return true;
}
} else {
location.href = entryLink;
return true;
}
}
この中の赤色部分
document.getElementById(extTextDivID).style.display
の記述で文字化けが発生しているようです（この行と下の同じような記述を削除すると発生しませんでした）。さらに厳密に言うと、
document.getElementById(extTextDivID).style
で発生します。つまりHTMLのstyle属性を参照するところで文字化けを引き起こしています（getElementById までであれば発生しません）。このJavaScriptは「続きを読む」をクリックしないと起動されない（onclick属性で起動）スクリプトなのですが、投稿後のレンダリング時点で文字化けを発生させます。
なお根本的な解決案は現在のところ見つかっておりません（ということで先の対処が生まれました）。個別アーカイブに「続きを読む」をご利用の方にはご迷惑おかけ致しまして大変申し訳ございません。この場をお借りしてお詫び申し上げます。m(__)m
2004年11月25日
●フレーム利用時に表示がずれる不具合を解消する
 可変3カラムの公開テンプレートをフレームに収めると、右サイドバーの各メニューがスクロールバー側に寄った状態で表示されます。またウィンドウをリサイズをするとメニューが中央カラム側にずれてしまい（図）、センタリングされません。なお表示はブラウザやHTMLによって異なるかも知れません。 |
対処としてはウェブログを表示する frame タグに scrolling 属性（青色部分）を付与すると解消します。この属性を付与することで解消するということはフレームにした場合、レンダリングでスクロールバーの存在を適正に認識できていないことが原因と考えられます。
<frame src="http://～/" scrolling="yes">
scrolling 属性には
- yes：常に表示
- no：常に非表示
- auto：自動
2004年11月23日
●.htaccessによる文字化け対策
TypeKey認証やコメント投稿の後で文字化けが発生するという質問を最近何件か頂いています。TypeKeyの文字化けについてはHTTPリダイレクトを伴っており、ページ直前のHTTPレスポンスで返却されたcharsetを見てしまうのが文字化けの要因と思われます（発生するサイトとしないサイトの違いは不明です）。下記のサイトに解説があります。
ただしコメント投稿後の文字化けは原因不明（リダイレクトではないという認識）です。
上記のサイトにも少し書かれていますが、リダイレクトによる文字化け解消について .htaccess を利用する方法がありましたのでご紹介します。
まず .htaccess というファイルをテキストエディタ等で新たに作成し（既に存在する場合はその中）、そこに下記のいずれかの青字部分を記述します（とりあえず上の方をお試しください）。記述例は文字コードが UTF-8 でファイルの拡張子が .html の場合です。
明示的に文字セットを指定していない応答に追加されるデフォルトの文字セット
AddDefaultCharset UTF-8
ファイル名の拡張子を指定されたコンテントタイプにマップ
AddType "text/html; charset=UTF-8" .html
上の設定はHTTPヘッダで charset が設定されていない時に文字コードを指定するものです。
下の設定は拡張子に対応するコンテントタイプ（MIMEタイプ）の設定が目的です。phpファイルも対象に含む場合は
AddType "text/html; charset=UTF-8" .html .php
としてください（拡張子の間は半角空白、拡張子のピリオドはなくてもいいようです）。
記述した行の最後は改行してください。文字コードの部分は「EUC-JP」「Shift_JIS」等、使用されている文字コードに適宜修正ください。
技術的な話をすると、上記はいずれも Apache ディレクティブですのでHTTPサーバに Apache が使われていることが前提になります（多分この文章は無視されても大丈夫だと思います…）。
.htaccess を配置（アップロード）します。このファイルの内容は、ファイルを配置したディレクトリおよびそのサブディレクトリ全てに適用されますので（サイトのトップディレクトリにあると思われる）index.htmlが配置されているディレクトリに配置します。
以上です。なお上記の対策は動作を確認できてないこともあり、完全な不具合解消を保証するものではありませんので予めご了承ください。また本設定がコメント投稿後のページ表示にも適用されればいいのですが（CGIからの出力は一旦HTTPアクセスが行われると思っているので適用されそう？）、そうでなければカスタマイズされたページのどこかに文字化けの要因が潜んでいると考えられます（感覚的にはHTMLタグの文法エラー等ですが改善性については未知です）ので、申し訳ございませんが「デフォルトのテンプレートから少しずつカスタマイズして動作をチェックしてみてください」という原始的なアドバイスしかできません。併せてご了承願います。
↑一応動作確認できているサイトあります。なお文字化けの原因は「続きを読む」を折りたたむスクリプトにあるようでした。ご利用中の方にはご迷惑おかけして大変申し訳ございません。とり急ぎお詫びまで。
