Serene Bach テンプレート
Serene Bach 用のテンプレートを作りました。サンプルのスクリーンショットは3カラムですが、2カラム・1カラムも用意しております。カラムレイアウトの設定方法につきましては本エントリーを参照ください。 |
1.動作確認環境
動作確認は下記の環境で行っています。
- OS:Windows2000/XP
- ブラウザ:IE6.0/Firefox1.0.7/Netscape7.1/Netscape8.0.4/Opera8.5
- Serene Bach:2.00R?2.09R
Serene Bach は独自タグを除去すれば旧バージョンでも使用可能のようですが、情報が整理できていませんのでとりあえず 2.03R 用としています。
2.利用規定
ご利用の前にテンプレートのページを必ずご覧くださいますよう、よろしくお願い致します。
3.カラムレイアウト変更方法
このテンプレートではカラムレイアウトのバリエーションとして、
- 3カラム(カラム幅固定)
- 3カラムリキッドレイアウト(中央カラム幅可変)
- 2カラム(右サイドバー:カラム幅固定)
- 2カラム(左サイドバー:カラム幅固定)
- 2カラムリキッドレイアウト(右サイドバー:左カラム幅可変)
- 2カラムリキッドレイアウト(左サイドバー:右カラム幅可変)
- 1カラム(カラム幅固定)
- 1カラムリキッドレイアウト(カラム幅可変)
の計8種類を用意しています(それぞれのサンプルはちょっと下にある画像をご覧ください)。
カラムレイアウトは、HTMLテンプレートの body 要素の class 属性を書き換えることで変更することができます(カラム数を変更する場合はHTMLテンプレートの修正が必要ですがこれについては後述します)。例えば、3カラムレイアウトから2カラム・リキッドレイアウト(右サイドバー)に変更したい場合は、HTMLテンプレートの
<body class="layout-three-column">
の赤色部分を
<body class="layout-two-column-liquid-right">
と、青色の内容に変更します。このテクニックは Designing with Web Standards でも紹介されています。
個別エントリー用HTMLありのテンプレートをお使いの場合、ベースHTMLと個別エントリー用HTMLで異なるレイアウトを設定することができます。例えばベースHTMLで3カラム、個別エントリー用HTMLで1カラムという設定も可能です。
以下にそれぞれのレイアウトに対する class 属性値を示します。なおサンプル画像は Movable Type のものを流用しておりますので予めご了承ください。
<body class="layout-three-column">
3カラム |
<body class="layout-three-column-liquid">
3カラム・リキッドレイアウト |
<body class="layout-two-column-left">
2カラム(左サイドバー) |
<body class="layout-two-column-liquid-left">
2カラム・リキッドレイアウト(左サイドバー) |
<body class="layout-two-column-right">
2カラム(右サイドバー) |
<body class="layout-two-column-liquid-right">
2カラム・リキッドレイアウト(右サイドバー) |
<body class="layout-one-column">
1カラム |
<body class="layout-one-column-liquid">
1カラム・リキッドレイアウト注:左右のマージンをなくすことも可能です。 |
公開テンプレートは一番上の3カラムレイアウトで配布しております。
次にカラム数を変更する場合の修正方法です。例えば3カラムから2カラム(左サイドバー)に変更する場合は、右カラムを表示する
<!-- 右カラム開始 -->
<div id="links-right-box">
<div id="links-right">
:
(ここに書かれているものをコピー)
:
</div><!-- /links-right -->
</div><!-- /links-right-box -->
<!-- 右カラム終了 -->
の間に書かれている必要なメニュー(検索・カテゴリー・バナー等)をコピーし、左カラム
<!-- 左カラム開始 -->
<div id="links-left-box">
<div id="links-left">
:
(ここにペースト)
:
</div><!-- /links-left -->
</div><!-- /links-left-box -->
<!-- 左カラム終了 -->
にペーストしてください。そのあと
<!-- 右カラム開始 -->
:
<!-- 右カラム終了 -->
を丸ごと削除します。1カラムに変更される場合は左右両方のカラムをごっそり削除してください。
4.1カラムレイアウトについて
1カラムレイアウトはポータル的な要素を排除して、個人の日記サイトとして気軽に書けるデザインにしています(言い換えると単にサイドバーをとっぱらっただけです)。個別エントリーとコメント・トラックバックは機能しますので、サイトを初めて訪れる方でも戸惑わずに閲覧することが可能です。
1カラムでご利用になる際は前項での左右カラムの削除および、テンプレート内に設定されている
<!-- for one column
<!-- BEGIN archives -->
<div id="archive">{archives_list}</div>
<!-- END archives -->
<div id="footer-one">
Powered by <a href="{script_webpage}"><strong>{script_name} {script_version}</strong></a><br />
<a href="https://www.koikikukan.com/"><img src="{site_parts}koikikukan.gif" alt="小粋空間" width="128" height="22" /></a>
</div>
/for one column -->
の赤色部分を削除してください(これで月別アーカイブリストとクレジットバナーがページの一番下に表示されます)。
またアーカイブリストはプルダウンメニューで表示することを想定していますので、上記の設定の後、
を実施して、スクリプトをページの最後の方に設定してください。なお ListSelector の起動パラメータは
ListSelector('archive',1,'月別アーカイブ');
としてください。
5.記事の日付表示について
Serene Bach では投稿日の日付が記事単位に付与されますが、本テンプレートでは JavaScript を用いてページの前方に同一日付の記事がある場合、日付を重複して表示しないようにしています。なおデフォルトの環境設定でのみ動作確認していますので不具合ございましたらご連絡ください。
この機能を無効にする場合はベースHTMLテンプレート下にある
<script type="text/javascript">
<!--
var elements = document.getElementsByTagName('h2');
var work;
var work_old = '';
for (i=0; i<elements.length; i++) {
work = elements[i].innerHTML;
if(work == work_old){
elements[i].style.display = 'none';
}
work_old = work;
}
//-->
</script>
を削除してください。
6.XHTML1.0 Transitional valid
当サイトではWeb標準を推奨しています。テンプレートを設定した状態で W3C Markup Validation Service での XHTML1.0 Transitional valid および、Another HTML-lint gateway で高得点になるようにしています。 |
7.その他
基本的な動作は確認したつもりですが、Serene Bach の確認を全て理解できていない状態ですので、不具合等ございましたらご連絡ください。
8.ダウンロード
下のリンクからテンプレートをダウンロードできますのでご利用ください。「個別エントリー用HTMLあり」はテンプレートの個別エントリー用HTMLテンプレートにも反映されます。
2009.07.13 個別エントリーなしのテンプレートをリニューアルしました。
ダウンロードしたファイルを解凍し、中にある txt 形式のファイルを任意のディレクトリにアップロードしてください。そのあと管理画面の「テンプレート」→「インポート」のページで指定して「読込み」をクリックすればインポートされます。
「個別エントリー用HTMLあり」をダウンロードすると、個別エントリーページをインデックスや他のアーカイブページと異なるカラムレイアウトにすることが可能です。
2005.11.18 追記
個別エントリーのトラックバック表示に不具合があったためテンプレートを修正しました。
2005.12.01 追記
動作確認ができましたのでタイトルおよび対応バージョンを変更しました。
2006.02.26 追記
スタイルシートの全称セレクタから font-weight プロパティを削除し、見出し用のタイプセレクタを追加しました。またエントリー日付・コメントタイトル・トラックバックタイトルの配色用セレクタをまとめました。
2007.01.02 追記
動作可能バージョンを 2.09R までに変更しました。
- Serene Bach テンプレート修正
- Serene Bach / sb 公開テンプレートの不具合修正箇所について
- Serene Bach / sb 公開テンプレートご利用の方へ
≫ 小粋空間さんのSerene Bachのテンプレート from とりあえずいっとけ!? Tigers
小粋空間さんがSerene Bachのテンプレートを公開されました。Serene Bach 2.03R テンプレートMTで書いてるメインのブログが小粋空間さんの... [続きを読む]
≫ テンプレ 変更 from ここは どっこ?(^_-) SB別荘
小粋空間さまより テンプレートいただきました。Serene Bach 2.03R テンプレート です。どうも d(゚Д゚)☆スペシャルサンクス☆( ゚Д゚)b... [続きを読む]
≫ 小粋空間さんのテンプレに変更 from [s]saku*saku
小粋空間さんがsb用のテンプレ配布したと聞いて、さっそくDLしました。実はsbの前はMT使ってて、ずっと小粋空間さんのテンプレ使わせてもらってました♪やっぱり使... [続きを読む]
≫ テンプレート from Monochrome Recollections
Movable Type のテンプレートでお馴染みの「小粋空間」さんが、Serene Bach 用のテンプレートを作ってくれた。Movable Type のテン... [続きを読む]
≫ SBテンプレート叩き台 from matu.biz
そういえば先日、MTテンプレートでは有名な小粋空間さまでもSBテンプレートが配布されてましたね。シンプルなのでボムガールさまの基本テンプレ... [続きを読む]
≫ Serene Bachを入れてみた from The blog of H.Fujimoto
このところ、Serene Bachで作られたBlogを見かけることが多くなりまし... [続きを読む]
≫ テンプレート変更 from てぃあら
MT でもお世話になっている 小粋空間 さんの SereneBach 2.03R用テンプレート をいただいてきた。MT で 見慣れ、使い慣れてる 3カラムリキッ... [続きを読む]
≫ とっかかり。 from *kirara
ぶろぐの引越しをして、はや何日このぶろぐのカスタマイズも、忘れない内に記事にしないとなんだけどまずは、テンプレート設定までのお話しをちなみにこのブログのテンプレ... [続きを読む]
≫ 小粋テンプレお借りしてみる from [D*L] Diamond Lesson
これを機に、小粋空間さんよりSerenaBachのテンプレをお借りしました。その昔MT時代にテンプレをお借りしていたサイト様です。また小粋ユーザーの仲間入... [続きを読む]
≫ sbカスタマイズ。 from UNI-TEKI BLOG
とりあえずちょこちょことカスタマイズ中。導入したプラグインはBoreloさんところの「ツリー化プラグイン」Underdoneさんところの「うにゅうにゅRe... [続きを読む]
≫ デザインを変更しました。。。 from コントロール・オルト・デリート?webLog?ブログ
デザインを一新しました。といっても小粋空間さんのテンプレートを頂きまして、色の変更をしただけです。小粋空間さん、ありがとうございます。MT(movabl... [続きを読む]
≫ Serene Bachに変更しました from こんなのアリ?
先週の土曜日からブログをMovableTypeからzac56105さんが使用しているSerene Bachに変更しました。 MovableTypeはサイ... [続きを読む]
≫ 【Serene Bach】テンプレートを変えてみました。 from ふろぐ by fuu
小粋空間さんで配布されているテンプレートを使用させていただきました。シンプルなので気に入っております。目にも優しくてよい感じです。 [続きを読む]
≫ weblogカスタマイズ2・小粋空間さんより from おかち日和
SereneBachでウェブログを新しく作るにあたり、たくさんの技をお借りしました。 [続きを読む]
≫ 情報収集ブログっぽくしてみた from 自アンちゃんねるニャー
変更点&参考サイトメモ。 そのまま使わせて頂いたものから、部分的に参考にさせて頂... [続きを読む]
≫ お世話になりましたサイト様。 from :: go with the light ::
☆プラグインをお借りしたサイト様。・[あ]UnderDone(あんでるどん)様http://underdone.net/blog/「うにゅうにゅ Read... [続きを読む]
さっそく使わせていただきました。
これでMTとSerene Bachと同じスタイルのブログが作れます。
うれしー!!
ほんとうにありがとうございます。
続けてすみません。
サイドバーの「Recent Trackbacks」のところから記事に飛ぶと、なにやら崩れているような感じです。
下の方にコメント欄らしきものがでてるような。
インストールしたのは個別エントリーなしの方です。
>kamuさん
こんにちは。
第1号ご利用ありがとうございます!
ご指摘ありがとうございます。トラックバック表示で div タグの数が不一致になっていたため、崩れてしまってました。確認不足で申し訳ございません。
さきほど修正致しましたので再度ダウンロード願えますでしょうか。
以上です。
それではこちらでもどうぞよろしくお願い致します。
遅くなってすみません。
帰宅してさっそく再ダウンロード&インストールをしました。
きちんと動いているみたいですよ(^^)
今度ともよろしくお願いいたします。
>kamuさん
こんばんは。
ご連絡ありがとうございました。
うまく動作しているようでホッとしました。
こちらこそどうぞよろしくお願い致します。
テンプレートいただきました。
ありがとうございました。
MT3.2テンプレートを利用させていただきました。
ありがとうございます。
テンプレートDLさせて頂きました♪
sbでも小粋空間さんのテンプレが使えると思わなかったため、とても嬉しかったです。
ありがとうございました。
うちでも早速使わせて頂きました。
丁度MTからSBへ移行を検討していた所だったので、とても助かりました。
有難う御座いました。
こんにちは。
はじめまして。
MTの時もテンプレやカスタマイズを色々使わせていただいてました。
SBのテンプレ作ってくださって、有難うございます!
早速DLさせていただきました。
これからも、どうぞ宜しくお願いいたします。
yujiroさんこんちわー
sbのテンプレ配布を始めたと聞いてやってきましたー
私はSerene Bachじゃなくsbのままなんですけど、
sbでも使えるようになんとかいじりま?す。
>hougyokuさん
こんばんは。
テンプレートご利用&ご連絡ありがとうございます!
それでは今後ともどうぞよろしくお願い致します。
>katuさん
こんばんは。
テンプレートご利用&ご連絡ありがとうございます!
それでは今後ともどうぞよろしくお願い致します。
>yukaさん
こんばんは。
テンプレートご利用&ご連絡ありがとうございます!
MyBlogList登録もありがとうございました。そちらは登録件数が一杯のためBlogPeopleに登録させて頂きました。
それでは今後ともどうぞよろしくお願い致します。
>Takaさん
こんばんは。
テンプレートご利用&ご連絡ありがとうございます!
今後ともどうぞよろしくお願い致します。
>さとりん*さん
はじめまして。
MT&Serene Bach、テンプレート&カスタマイズご利用くださりありがとうございます!
こちらこそ今後ともどうぞよろしくお願い致します。
>真希さん
こんばんは。
ご無沙汰してます!
Serene Bach は私の方が初心者でよく分かってないところが色々ありますがぼちぼち試してやってください。
ではでは!
Serene Bach のテンプレートお借りしました!
ぼちぼちとカスタマイズしていこうと思いまーす。ありがとうございました。
>ななさん
こんにちは。
テンプレートご利用&ご連絡ありがとうございました!
今後ともどうぞよろしくお願い致します。
こんにちは。
Serene Bach用プラグイン第1号として、「Blog Status表示」というものを作ってみました。
http://www.h-fj.com/blog/archives/2005/11/29-094451.php
そちらのテンプレートでも動作を確認させていただきました。
>壱さん
こんばんは。
当サイトのテンプレートでの動作確認、ありがとうございます。
「Serene Bach MT化計画」ですね(笑)。
こんばんは?。SereneBach は 少し前に お試しでダウンロードしてみただけで、MTから移行・・・なんてとこまでは 今のところ 考えてないのですが、SereneBachも 使い慣れた 小粋テンプレートを・・・と、こちら ちょうだいしました。今後のカスタマイズもしやすく 心強いです。・・・って、なかなか手が回らないかもしれませんが。
>さえらさん
こんにちは。
こちらもテンプレートご利用くださりありがとうございます!
Serene Bach は設定が簡単でいいですよね。
また暇をみてカスタマイズネタを探します(笑)。
こんにちわぁ^^
お世話になっておりますっ。
遅くなりましたが、テンプレートの事を
記事にさせて頂いたので
TBさせて頂きます!!
今後とも宜しくお願いします♪
>葵さん
こんばんは。
ご連絡&TBありがとうございました。
こちらこそ今後ともよろしくお願い致します!
はじめまして!
Serene Bach のテンプレートを探しておりましたら、こちらを教えていただきました。
さっそく、DLして使わせていただいてます。
シンプルなレイアウトとカラーが大変気に入ってます。もう少し使い方が慣れてきたら、いろいろとカスタマイズしようかと思っています。
>hiroさん
はじめまして。
テンプレートご利用&ご連絡ありがとうございました!
気に入っていただいているようで光栄です。
Serene Bach のカスタマイズは少しずつ記事にしていきたいと思っておりますので、今後ともどうぞよろしくお願い致します。
ごぶたさしています。
MTの頃からお気に入りのテンプレートだったので、再び使えるだけでも凄い嬉しいです。
引越しの予定はまだ考えてないけど、再びお世話になります。
それと、DLしようと思ってもできませんでしたよー!!私だけ??
>高中奈緒さん
こんばんは。
ご無沙汰してます。
またのご利用をお待ち申し上げます。
ダウンロードのリンク切れ、失礼致しました!
お世話になっています。
SB用のテンプレお借りしました。
折り畳みなども参考にさせて頂き、来ました。
ありがとうございます。
質問なんですが、
TBが複数になるとテンプレが崩れますが
どうすればよいのでしょうか?
(カスタマイズする前からです)
初歩的なことで申し訳ないです。
>kiyopさん
こんばんは。
お世話になります。
カラム崩れの件、ご連絡ありがとうございました。
後ほどエントリー致しますので、申し訳ございませんが修正くださいますようお願い致します。
いつもお世話になってます
この度、再度Blogを変えることにしました。
お手数ですが、リンク先の変更をお願いします。
(何度もごめんなさい)
【旧】http://dola78.blog28.fc2.com/
【新】http://dola.daa.jp/
これからもアドレスがわかりやすくなった当ブログを宜しくです。
2006年も、よい年になりますように。
新年早々質問させていただきます。
Version 3.2-ja-2を使っているのですが
インポートが見つかりません。
テンプレートの中には
インデックス
アーカイブス
システム
モジュールしかございません。
MTのインストールミスでしょうか。
お知恵をお貸しください。
>jpnさん
こんばんは。
今年もよろしくお願い致します。
ご質問の件ですが、import ディレクトリはご自身で作成する必要があります(Movable Type のアーカイブには含まれておりません)。
以上です。
それではどうぞよろしくお願い致します。
お久しぶりでーす、元h@tezoneのhateでございますぅ・・・覚えてるかなぁ(汗
先日SereneBachのテンプレ公開してるのを運見つけてしまったので!(爆)
早速お借りすることに決めちゃいましたヨ!*感謝*
sbの時に1カラム使ってたんですが、やっぱり見やすいものが飽きが来ないですねぇ( ̄▽ ̄*)
これからもこそっと草葉の陰から応援させてください。今後ともどうぞよろしく☆(TB送りますね)
>hate☆さん
こんばんは。
ご無沙汰してます!
忘れたくても思い出せません(意味不明)。
ということで、テンプレートご利用&TBありがとうございます。Serene Bach 版、作った甲斐がありました。
それでは引き続き、どうぞよろしくお願い致します。
はじめまして。
テンプレートお借りしました。
これからどんどんカスタムしていこうと思います。
ありがとうございました。
>loveさん
はじめまして。
テンプレートご利用&ご連絡ありがとうございます。
ご不明な点がございましたらお気軽にご連絡ください。
それでは今後ともどうぞよろしくお願い致します。
こんにちは。テンプレートをDLさせていただき
1週間ほどたって気づきました…
コメントを投稿しようとしても窓が出ないのです。
コメント・トラックバックのタグ等は葬ってないのですが何か必要な手順があるのでしょうか?
Q. コメント入力画面の文字や表示がおかしいのですが?
を読んだのですがいまいちわからなくて…
↑自己解決しました。もう1度DLし、見直したところ
<!-- END entry -->の後に
<!-- BEGIN trackback_area -->
中略
<!-- END comment_area -->
抜けている事がわかりくっつけてやったらできました。コメント欄よごして申し訳ないです
>bainariさん
こんにちは。
テンプレートご利用ありがとうございます。
ご質問の件、無事に解決されたようで良かったです(コメントは修正しておきました)。
あと勝手ながらBogPeopleに登録させて頂きました。
それでは今後ともどうぞよろしくお願い致します。
はじめまして。
こちらのテンプレートをお借りしました。
HTML自体もよくわかってないような初心者ですが、説明を読みながらどうにかカラムの変更も出来ました。ありがとうございました。
>chimamamaさん
こんばんは。
テンプレートご利用&ご連絡ありがとうございました。
ご不明な点がございましたらお気軽にご連絡ください。
それでは今後ともどうぞよろしくお願い致します。
はじめまして。
自分でBLOGを作ろうと思い、MT3.2を導入してみたのですが、コメント入力画面の表示が変になってしまいます。
Q&Aを読んで色々見てみたのですが、いまいちよくわかりません。
すいません。
小粋空間さんのテンプレートではないのですが、何かアドバイスをいただけないでしょうか?
BLOGのURLは以下です。
よろしくお願いします。
http://aotsubakiya.life.coocan.jp/blog/
>ひらめさん
はじめまして。
ご質問の件ですが、配布されているテンプレートは3.2のコメント・トラックバック関連のタグに付与された id属性・class属性がスタイルシートに反映されていないようです。
関連する属性をスタイルシートに加えればきれいに表示されるようになると思います。
以上です。
それではどうぞよろしくお願い致します。
初めまして。Serene Bachを利用しているものです。テンプレートをお借りしました。他のブログサイトでもこちらのテンプレートを拝見することがあって、私も利用させてもらうことにしました。ありがとうございました。
>yumecoさん
はじめまして。
テンプレートご利用&ご連絡ありがとうございました!
ご不明な点がございましたらお気軽にご連絡ください。
それでは今後ともどうぞよろしくお願い致します。
初めまして。おはようございます♪
Serene Bach用のテンプレートをお借りしました。
お世話になります。ありがとうございます。
>noa*さん
はじめまして。
テンプレートご利用&ご連絡ありがとうございました!
またBlogPeople登録もありがとうございました。
それでは今後ともどうぞよろしくお願い致します。
MTから乗り換えるにあたって、こちらのテンプレがSereneBechに対応していて感激しました。
2カラム(右サイドバー)にしようとしたのですが、2カラム(リキッド)や、3カラムの場合では問題ない表示が、2カラムだと崩れてしまいます。
(エントリの下、Copyright の上に右に来るはずの中身がずれて表示されます。)
解決策ありましたら、是非教えてくださいm(__)m
>stormcatさん
こんばんは。
テンプレートご利用&ご連絡ありがとうございます。
ご質問の件ですが、カラムずれは3月5日のエントリーに記述された em 要素が影響しているようです(外すと直りました)。
あと勝手ながらBlogPeopleに登録させて頂きました。
それではどうぞよろしくお願い致します。
こんんちわ。
DLさせて頂きました。
ありがとうございます(^_^)
色々カスタマイズしているのですが、同日投稿すると、日付がひとつになってしまうのですが、どのようにすれば良いのでしょうか?
>koyukiさん
こんばんは。
テンプレートご利用&ご連絡ありがとうございます。
ご質問の件ですが、本エントリーの5項に書かれている作業を実施すれば表示されるようになります。
以上です。
それではどうぞよろしくお願い致します。
こんばんは。
Blogは結局、Serene Bachに鞍替えしました。
壊れたMTは「サーバーに設置されているDB_File.pmが結果的に読めない」という状態だったようです。
テンプレートは引き続き、yujiroさんの所でお世話になります。
カスタマイズも初めからになりますが
以前の1カラムデザインに近付けるように頑張ります。
>ねーさん
こんばんは。
作業お疲れ様です。
なお新しいテンプレートは1カラムも比較的簡単に実現できるようになっています。
またなにかございましたらご連絡ください。
ではでは!
はじめまして。
テンプレお借りしました。
ありがとうございました。
>kmamaさん
はじめまして。
テンプレートご利用&ご連絡ありがとうございます。
あと勝手ながらBlogPeopleに登録させて頂きました。
それでは今後ともどうぞよろしくお願い致します。
SereneBachのテンプレートをお借りして
ウェブログを作っております。
便利で素敵なテンプレートをありがとうございます。
ところで、そのウェブログのカスタマイズをしているのですが、
コメント欄に絵文字を挿入したいと思い
jsを使ってカスタムしようとがんばっているのですが、
どうあがいても下記(1)(2)(3)の属性、タグ名がわかりません。
// コメントにカスタマイズ絵文字入力機能:画像変換
function changeCustmizeEmojiTag() {
// (1)コメント全体のタグの id 属性
var commentAreaIdName = '';
// (2)コメント全体のタグ名
var commentAreaTag = '';
// (3)各コメントの class 属性
var commentBodyClassName = '';
(1)comments
(2)div
(3)comment-cotent
などいろいろ試してみたのですが、どれも反映されませんでした(泣)。
もしお時間がありましたら、お教えくだされば嬉しく思います。
よろしくお願いいたします
>グラツィアさん
こんばんは。
テンプレートご利用ありがとうございます。
ご質問の件につきまして、確認しますのでお時間ください。
あと勝手ながらBlogPeopleに登録させて頂きました。
それではどうぞよろしくお願い致します。
お手数をおかけいたしまして申し訳ありません
ありがとうございます。
またBlogPeopleの登録、重ねてお礼申し上げます(*- -)(*_ _)ペコリ
本当にお時間のあるときで結構ですので、
お急ぎになられませんよう・・・。
本当にありがとうございます。
もう一つ、謎が出てきてしまいました^^;
テンプレートのフッターの部分なのですが、
Copyright © 2006 Shigatsukaidan. All Rights Reserved.
と変えたのに元の200x xxxxのまま表示されています。
何度書き替えて、リビルドしても変わりません。
どうしたことでしょう?
これは、もしかしたら何かの拍子に自己解決できるかもしれませんが、
何せ初心者なものですから
申し訳ありません。失礼いたしました。
>グラツィアさん
こんばんは。
ご質問の件ですが、FTPツールを使って、再構築されたファイルを直接参照して(しなくても構いません)変更が反映されているようでしたらブラウザのキャッシュが残っている可能性があります。
変更が反映されていないようでしたら、ページ構築の「クリーンアップ」実施後に再構築してみてください。
それではどうぞよろしくお願い致します。
早速お教えいただきありがとうございます。
>変更が反映されていないようでしたら
表示では反映されていませんでしたので、
いちおうキャッシュもクリアしてから
クリーンアップ実施後に再構築してみました。
ところがローカル、ホスト共に例えばeid○.htmlを見ると
表示されているのは“200x xxxx”のままですが、
ソースを見るとちゃんと
Copyright © 2006 Shigatsukaidan. All Rights Reserved.となっているんです?。
謎です。亜空間に飛び込んだ気分です^^;
ソースが正常である以上、初心者の身では
どこをいじったらいいのか皆目見当がつきません。
(ただ、大したことではありませんので
お返事はお急ぎになりませんようお願い申し上げます)
はじめまして^^色々と見ても分からなかったので
質問させて頂きます
何度、テンプレートをダウンロードしても
コメント表示がHTML部分にない様に思うのですが自分で追記しなければならないのでしょうか?
ダウンロードしてから圧縮されているのを解凍してインポートしています。任意のディレクトリというのはインポート前にどこかにUPするのでしょうか?もう何日も前から自分で調べているのですが分からないので質問させてもらいました。宜しくお願いします
すいません。今、もう一度ダウンロードして他のブログでやってみた所、表示されました。ここ何日間はなんだったんでしょう(涙)何か私自身、知らずの内におかしくいじってしまってたかもしれません。すいませんでした。おかりしますね。ありがとうございます
>グラツィアさん
こんばんは。
わかりました。
レイアウトによって著作権表示を設置する箇所を2ヶ所設けているのですが、表示されない方に設定されているようです。
一番下の方に同じものがありますので、そちらに設定してください。
それではよろしくお願い致します。
>りんさん
こんばんは。
ご連絡ありがとうございます。
とりあえず解消したようでよかったです。
また作業お疲れ様でした。
ではでは!
著作権表示の件、早速のお返事をありがとうございました。
もっと注意深くテンプレートを見るべきでした。
お手数をおかけしまして申し訳ありません。
今度こそ、きちんと表示されました。
どうもありがとうございました(感涙)
>グラツィアさん
こんにちは。
ご連絡ありがとうございました。
気がつくのが遅くなってすいませんでした。
無事に表示されて良かったです。
ではでは!
yujiroさん、こんにちは。
この度ブログをMTからSereneBachに変更するに当たり、テンプレートを使用させていただきました。
今までもテンプレートはがんばって作っていたものの、カスタマイズはいろいろと参考にさせていただいておりました。
カスタマイズしやすいテンプレートで、さすがです。
今後とも参考にさせていただきますので、よろしくお願いします。
>ikuyubonさん
こんにちは。
カスタマイズ、色々ご利用くださっているようで、ありがとうございます。
またこの度はテンプレートご利用、ありがとうございます。
不具合等ございましたらご連絡ください。
それでは今後ともどうぞよろしくお願い致します。
テンプレート、いただきました。
body要素のclass属性を書き換える手法は目から鱗が落ちる思いでした。
ありがとうございました。
>stabuckyさん
こんにちは。
テンプレートご利用&ご連絡ありがとうございます。
CSSによるカラムレイアウト切り替えは Movable Type デフォルトテンプレートの流用ですが、結構気に入ってます。
あと勝手ながらBlogPeopleに登録させて頂きました。
それではどうぞよろしくお願い致します。
ちょっとご報告です。
SereneBachのテンプレートですが、受信したトラックバックによっては、スタイルが崩れてしまいました。
<div class="trackback-content">{trackback_excerpt}</div>
の</div>の<が文字化けしてしまい、右サイドバーがセンターの下に来てしまいます。(3カラムの場合)
</div>の前に半角スペースを入れる事でとりあえず回避出来ましたが、これが根本的な解決になっているのかがよく分かりません。
テンプレートに問題があると言うよりもSereneBachに問題があるのかもしれませんが、ご報告させて頂きました。
テンプレート自体は非常に気に入っておりまして、なんでMTでも利用させて頂かなかったんだろう。と公開しております。
今後もこちらを参考にしながらカスタマイズしていきたいと思います。
>ikuyubonさん
こんにちは。
テンプレートご利用&ご連絡ありがとうございます。
気に入っていただけたようで光栄です。
また不具合のご連絡もありがとうございました。
事象を確認してテンプレート修正、または配布ページで周知させていただきます。
情報ありがとうございました!
はじめまして。
こちらの2カラム用のテンプレートをDLさせて頂きました。
今後はこちらのテンプレートを使用させて頂きたいと考えております。
今、自分なりにカスタマイズを試みており、その際に blog*citronさんの
「タイトルロゴを画像にする」
http://www.webcitron.com/blog/sblog/tips/eid138.html
というものを取り入れております。
画像はうまく入ったのですが、タイトル画像部分の下に空白ができてしまいます。
こちらがその様子です。
http://koharu-biyori.maxs.jp/days/sb.cgi?tid=39
空白をあけないようにしたいと、あれこれ試してみたのですが、どうもうまく行きません。
どの部分を書き換えたら良いのか、ご教授頂けましたら幸いです。
よろしくお願い致します。
>kaoriさん
はじめまして。
テンプレートご利用&ご連絡ありがとうございます。
ご質問の件ですが、<h1>?</h1> の間に改行がないように修正してみてください。
また、直接影響はありませんがスタイルシートにある
#banner {
border-bottom: 1px solid #ceceb7;
color: #999999;
background: #8fabbe;
background-position: right top;
background-repeat: no-repeat;
/* background-image: url(".gif");*/
text-align: left;
}
の赤色部分を削除しておいてください。
それではよろしくお願い致します。
yujiro様
お返事を頂きまして、ありがとうございました。
アドバイス、大変参考になりました。
早速書き換えてみましたところ、隙間も空かず
キレイに表示されるようになりました。
この後、こちらのテンプレートに移行させて頂く
つもりでおります。
本当にどうもありがとうございました。
>kaoriさん
こんばんは。
ご連絡ありがとうございました。
お役に立てたようで良かったです。
今回はコメントの公開と回答が遅くなってしまい、すいませんでした。
ではでは!
いつも貴サイト様のテンプレートをつかわせていただいております者です。お世話になります。
この度、2つ目のブログを設置のためSerene Bach ver 2.12RをDLし、貴サイト様のテンプレートをダウンロードさせていただき、コメントテストをしたところ、『投稿を受け付けることができません。』と言われてしまい、コメント記入しSubmitを押しても、コメントを受け付けてくれません。
なにも弄っていないのですが、新しい2.12Rだと、貴サイト様のテンプレートは使用できないのでしょうか?それとも、なにか考えられる原因が私側にあるのでしょうか。2.11Rから2.12Rにバージョンアップしたのですが、2.11Rのときにもコメントだけが駄目でした。
貴サイト様のテンプレートは以前よりながく使わせていただいておりまして、こんなことは初めてです。
元々にあるSummer Breezeテンプレートでは、コメントできるようです。自分では知識がないため、お助け願えればなと書き込みました。よろしくお願いいたします。
自己解決しました。ありがとうございました。
>はゆるさん
こんばんは。
テンプレートご利用ありがとうございます。
ご質問の件、自己解決されたようで良かったです。
できれば解消の内容も書いていただけると他の方の参考になりますので、差し支えなければご記入よろしくお願い致します。
ではでは!
yujiroさん、たびたび出没してすみません;;
原因は、Serene Bach ver 2.08Dにおいて「コメントを受け付けることができない」と言うバグ?がありまして、テンプレートのコメントフォームに指定された行を追加するようにしてくださいと書かれたことがあったのです。今現在使用しているものに関しては、自分自身が2.08Dの時に、小粋さまのテンプレを修正しておりましたが、今回新しくDLしたものに関しては、その件についてすっかり忘れておりまして、それを付け加えるとコメントできるようになった・・・と言うことだったのです。
http://serenebach.net/log/sb208D_comment.html
以上、ご報告でした。
>はゆるさん
こんばんは。
ご連絡ありがとうございます。
状況理解できました。
ご説明くださりありがとうございました!
こちらこそ、要らぬ心配をさせてしまって申し訳ないです。伝わってよかったです。
余談ですが、私はこちら様のテンプレートが大好きで、Serene Bach使用はずーっと使わせていただいております。yujiroさん、いろいろと大変だとは思いますが、これからも頑張ってくださいませ♪
では、失礼します。
>はゆるさん
こんばんは。
ご愛用、大変嬉しく存じます。(涙)
ではでは!
はじめまして、こんにちは!
この度ブログをSereneBachにするに当たり、テンプレートを使用させていただきました。
かなりカスタマイズしてしまい、あまり面影がなくなってしまいましたが
すごくカスタマイズしやすいテンプレートでよかったです。
今後も参考にさせていただくと思いますので、よろしくお願いします。
>槙葉ゆりなさん
はじめまして。
テンプレートご利用&ご連絡ありがとうございます。
ご不明な点がございましたらお気軽にご連絡ください。
それでは今後ともどうぞよろしくお願い致します。
はじめまして、1カラムのレイアウトを探していてたどりつきました。
シンプルでわかりやすく、初心者の私でもどうにかカスタマイズできそうで嬉しいかぎりです。
さて質問ですが、あれこれ触っているうちにコピーライト部分が表示されていないことに気づきました。フッター部分のhtmlは記述されていますが、何か邪魔しているのでしょうか?
よろしくご教示くださいませ。
こんにちは、初めまして。
ゲームログ用のブログとスキンを捜していてたどりつきました。
こちらのテンプレを使用させて頂こうかとカスタマイズ中なのですが、
当サイトではフレームを使用している関係で、
テンプレート内の著作権表示部分からこちらのサイトや
SB開発研究所さまへ飛ぼうとすると、どうしても
フレーム内リンクになってしまいます。
管理用ページからhtmlのタグにtarget_blankタグを挿入しても
認識されないのか、「保存」を押すと挿入した部分以降のタグが
全消去されたりレイアウトが崩れたりします。
ターゲットを部分的に新窓表示にする事は可能でしょうか?
お手数ですがご指導頂ければ幸いです。
(一応URL記しましたが、現在は他のスクリプトを使用中です)
はじめまして。
先日お借りして、今日まであちこちカスタマイズしておりました。
絵文字のこととか、あらゆる部分を使わせていただき、テンプレも画像など変更していじり倒しました。
エントリーにコメントできなかったときは焦りましたが、色々さがして、タグを付け加えて解決しました。
今後とも宜しくお願いします。
あと、BlogPeopleに追加させていただきますね。
>Rikaさん
はじめまして。
テンプレートご利用ありがとうございます。
ご質問の件につきまして、下記のように変更(赤:削除/青:変更または追加)頂けますでしょうか。
テンプレート・フッタ部分
<div id="footer-one">Copyright © 2007 Rika. All Rights Reserved.</div>
スタイルシート
/* 3カラム用 */
body.layout-three-column,
body.layout-two-column-left,
body.layout-two-column-right,
body.layout-one-column {
margin-bottom: 20px;
text-align: center;
background: #ffffff;
}
:
(略)
:
/* 1カラム用フッタ */
.layout-one-column #footer-one {
margin: 15px 0 0;
padding: 0 0 15px;
font-size: 11px;
text-align: center;
color: #444444;
}
うまくできない場合はお手数ですが再度ご連絡ください。
それではよろしくお願い致します。
>ざくろさん
はじめまして。
テンプレートご利用ありがとうございます。
ご質問の件ですが、サイト(PLAYLOG)の当サイトへのバナーリンクを拝見させて頂いたところ
<a href="http://www.koikikukan.com/"><target="_blank">?
となっている部分は
<a href="http://www.koikikukan.com/" target="_blank">?
ではないでしょうか。
それではよろしくお願い致します。
>そみさん
はじめまして。
テンプレートご利用&ご連絡ありがとうございます。
BlogPeople登録も併せてありがとうございます。
こちらこそ今後ともよろしくお願い致します。
こんにちは、MTテンプレのほうでコメントしたkamikazeです。
Serene Bachは丁度乗り換えようとしていたところなので使わせていただきます。
ドロップシャドーつけたりいろいろと弄ってみようと思います。
今後ともよろしくお願いします。
>kamikazeさん
こんばんは。
テンプレートご利用ありがとうございます。
色々カスタマイズしてみてください。
ではでは!
素晴らしいテンプレートありがとうございます。
3カラム と 1カラムで使わせて頂いています。(幅固定)
大きな画像に対応するため、css の .entry { の部分に、 overflow-x: auto; を入れてみました。
すると、FireFox では、横スクロールしますが、 IE6 では、効きません。
overflow-x: scroll; でも同じでした。
他のテンプレートで同様に、css に overflow-x: auto; を入れたら、IE6 でも横スクロールします。
どんな原因が考えられますでしょうか?
よろしく、アドバイスをお願いいたします。
>y550550さん
こんにちは。
テンプレートご利用ありがとうございます。
ご質問の件ですが、不具合が発生している状態でサイトのURLをご連絡頂けますでしょうか。
それではよろしくお願い致します。
ご返信ありがとうございます。
症状が分かり易いページは、 http://www.yamagishism.org/sb/sb.cgi?cid=15 です。
現在は、CSS 内の .entry と .layout-three-column #content との2箇所に、overflow-x: auto; を入れてあります。
これによって、IE6 では、中央の記事の部分全体が横スクロールするようになりました。 1件ずつの記事の横スクロールは効きません。FireFox では効きます。
以上です。よろしくお願いします。
初めてテンプレートを使わせて頂きます。
個別エントリ版をダウンロードしました。
デフォルトのままテストしているのですが、改行の無い長い文章の場合、
FIreFox2.0.0.8で見ると、折り返されずに枠をはみ出て表示されて
しまいます。
IE7では発生していないのですが、何か対処方法はありますでしょうか。
それとも、新しいSerene Batch(2.17R)を使っているのがいけないの
でしょうか。汗汗汗。
対応バージョンが2.09Rまでと明記されておりますし・・・・
参考にURLを記載しておきます。
トップページ表示
http://capricious.floppy.jp/pv/
カテゴリから選択表示
http://capricious.floppy.jp/pv/sb.cgi?cid=1
Latest Entriesから選択表示 http://capricious.floppy.jp/pv/log/eid0.html
お世話になります。
先日、質問しました大きな画像を載せたときの横スクロールの件ですが、
CSSの .entry { width: auto; の部分を、auto ではなく、数値を入れましたら、
IE6 でも、横スクロールできるようになりました。
overflow-x: auto; は、そのままです。
但し、私の場合、個別記事用テンプレートの方は、1カラムにして表示幅を広くしていましたが、このままですと、 .entry { width: で指定した表示幅になってしまいます。
別々に表示幅を指定する方法がありましたら、どうぞ、よろしくお願いします。
>流浪人さん
こんにちは。
FireFoxでは連続した半角英数が折り返されないという不具合があります。
http://firefox.geckodev.org/index.php?FAQ#l67772fa
上記のサイトに書かれている対処を行うか、「Firefox・Netscapeで連続した半角文字を折り返す」が参考になれば幸いです。
それではよろしくお願い致します。
>y550550さん
こんにちは。
ご質問の件につきましては確認中です。申し訳ありませんがお時間ください。
yujiro様
お返事ありがとうございました。
FireFox自体の問題だったのですね。。。すみませんでした。
ごく稀に、他のサイトでも発生していたので、"?"でしたが、納得しました。
紹介された対処方法、試してみたいと思います。
ありがとうございました!
>流浪人さん
こんにちは。
ご連絡ありがとうございました。
ではでは!
大変お世話になります。
koikikukan テンプレートのポリシーに魅せられて、ずいぶん活用させて頂いています。
従来使っていたテンプレートと見た目は同じデザインを koikikukan で実現しようと思い移植中なのですが、IE と FireFox で、タイトルバナーの部分にズレが生じてしまします。
従来のテンプレートでは、このような症状は出ませんでした。
http://www.kensan-life.org/sb/sb.cgi?tid=20 従来のテンプレート
http://www.kensan-life.org/sb/sb.cgi?tid=21 koikikukan を使用
従来のテンプレートの場合は、IE も FireFox も表示に大差はないですが、
koikikukan を使用した場合は、ご覧の通り大きくずれてしまいます。
タイトルは font-family: "comic sans MS"; ですが、
表示される文字の大きさが、ずいぶん違います。
タイトルの下の枠 width: 400px; の表示幅は同じですが、height: 80px; の表示高が大きく違います。
ブラウザの仕様の違いが原因だと思いますが、従来のテンプレートでは同じように表示されているので、何か解決法があれば、アドバイスを頂けないでしょうか?
どうぞ、よろしくお願いします。
>y550550さん
こんばんは。
ご質問の件ですが、タイトルに適用するCSSを
#banner-header {
font-family: "comic sans MS";
font-size: 40px;
color: #6c0;
margin: 0px 0px 5px 50px;
padding: 10px 0px 0px 0px;
}
にして、タイトルバナー全体を
#banner {
height:210px;
background: #fff;
border-bottom: 1px solid #9c9;
background-position: 50% 0%;
background-repeat: no-repeat;
background-image: url("http://www.kensan-life.org/sb/template/ob10_header_1.jpg");
text-align: left;
}
にしてください。
フォントサイズは h1 の属性に直接指定しないとIEで正常に適用されないようです。
また、タイトル下のテキスト表示位置は、CSSハックになりますが、
div.topmemo {
_height: 95px;
}
を追加してください。
それではよろしくお願い致します。
大変、ありがとうございました。 見事に解決いたしました。
夜おそくまで、お手数をおかけして申し訳ありませんでした。
height: 80px;
_height: 95px;
このような記述をしたことがなく、私には理解できませんので、よろしければお教え下さい。
今後も、質問することがあるかもしれませんが、
お仕事に支障のない範囲で結構ですので、アドバイスを頂けると嬉しいです。
どうぞ、よろしくお願い申し上げます。
>y550550さん
こんにちは。
ご質問の件につきましては「アンダースコア・ハック」が参考になれば幸いです。
それではよろしくお願い致します。
いつもお世話になります。
個別記事用HTMLテンプレートの方に profile_area がありますが、
個別記事用HTMLテンプレートで、プロフィールを表示させる方法が分かりません。
http://www.kensan-society.org/sb/sb.cgi?tid=22&pid=0
アドバイスをよろしくお願い致します。
>y550550さん
こんにちは。
ご質問の件ですが、当サイトのテンプレートに関してのご質問であれば、「個別記事用HTMLテンプレート」のプロフィール独自タグ profile_area は冗長な設定のようです(プロフィールの独自タグは「ベースHTMLテンプレート」に設定されたものが使われます)。
誤解を招く設定で申し訳ございません。
それではよろしくお願い致します。
初めまして。
いつもカスタマイズでお世話になってます。
今回、テンプレートを頂こうと思いましてSerene Bach 用をDLしたのですが、コメント投稿が出来ませんでしたとエラーが出ます。
カスタマイズがおかしいと思ってカスタマイズ前の状態(改造なし)でも投稿してみたのですが、エラーが出ます。
2.11Rのバージョンなのですが、このバージョンは駄目でしょうか?
ちなみに他のテンプレート(blog*citronさん)のは送信できました。
コチラのテンプレートも使ってみたいのですが、教えてください。
Script Errorや500エラーの表示ではなく、Serene Bachの画面で出ました。
>しーさん
こんばんは。
ご質問の件ですが、コメント投稿フォームに
<input type="hidden" name="charset" value="{site_encoding}" />
の1行を追加してみて頂けますでしょうか。
それではよろしくお願いいたします。
私も、しーさんと同じ体験をしまして、Serene Bach のデフォルトテンプレートと比較したところ、この1行が必要らしいので、追加してみました。
<input type="hidden" name="charset" value="{site_encoding}" />
おかげで、無事にコメント投稿できるようになりました。
>y550550さん
こんばんは。
ご連絡ありがとうございました。
無事に直ったようでよかったです。
ではでは!
いつも、お世話になります。
記事の中で、 <div style="・・・・・・・"> で、フォントの色やサイズを指定して、
<table> を使用した場合、IE6 の場合、<table> 内では、色やサイズの指定が解除されてしまいます。
FireFox の場合は、指定が反映されたままです。
他のテンプレートで試してみましたが、IE6 も FireFox も同じように、<table> 内でも指定が効いていますので、ブラウザの問題でもなさそうです。
解決の方法がありましたら、よろしくアドバイスをお願い致します。
>y550550さん
こんばんは。
ご質問の件ですが、すいませんが該当のページのURLをご連絡頂けますでしょうか。
なお、ご質問の内容は、「現在使用しているテンプレートでは、他のテンプレートのようにtable内でスタイルの指定が効かない」と解釈しました。
それではよろしくお願い致します。
さっそくのご返事ありがとうございます。
こちらの連絡が遅くなり申し訳ありません。
↓ 以下のページをご覧ください。
http://www.kensan-community.org/sb/log/eid447.html
それから、いろいろ試行錯誤しまして、<div> を使わないで、
<table style="・・・・・・・"> のように table タグに文字の色やサイズを指定したら、IE6 でも有効になりました。
↓ 以下がそのページです。FireFox では、どちらも同じでした。
http://www.kensan-community.org/sb/log/eid445.html
タグの使い方の知識も乏しいので間違っている部分もあるかもしれませんが、よろしくお願いします。
このページをご覧下さい。IE6ですと、table内でスタイル指定が無効になります。
↓
http://www.kensan-community.org/sb/log/eid447.html
http://www.kensan-community.org/sb/log/eid445.html
↑
このページは、<div style="・・・・・・・"> をやめて、<table style="・・・・・・・"> にしてみたところ、IE6でも、table内のスタイル指定が有効になりました。
タグの使い方など知識が乏しいので、アドバイスの方、よろしくお願いします。
>y550550さん
こんばんは。
ご返事遅くなってすいません。
ご質問の件ですが、下記のスタイルを追加してください。
.entry_body table {
font-size: 100%;
}
それではよろしくお願い致します。
いつも、いつも、大変お世話になり、ありがとうございます。
思った通りの表示にすることができました。
今後とも、どうぞ、よろしくお願い致します。
良いお年をお迎え下さい。
>y550550さん
こんばんは。
ご連絡ありがとうございました。
無事になおったようで良かったです。
ではでは!
お世話になります。
2カラム・リキッドレイアウト(左サイドバー)で設定を行ないのですが、
CSSにも、layout-two-column-liquid-left の記載が見当たらないようです。
どのように、設定すればよいか、ご教授いただけるとありがたいです。
よろしくお願いします。
>y550550さん
こんばんは。
ご返事遅くなり申し訳ありません。
別途確認して本コメントまたは新規エントリーいたします。
すいませんがお時間ください。
それではよろしくお願い致します。
数年前から、ずっと SereneBach用 koikikukan のみで、サイト運営に活用させて頂き、誠に感謝しております。
テンプレートでの質問なのですが、コメント入力欄が、ブラウザによって、ずれていますのです。下記サイトをご参照ください。
http://kaio-mie.main.jp/sb/log/eid3.html
http://as-one.main.jp/ofukuro/sb/log/eid657.html
FireFox では、正常に表示されるのですが、
Chrome や IE8 では、入力項目のずれが生じます。
お手数でが、改善方法をアドバイス頂けないでしょうか?
どうぞ、よろしくお願い致します。
先ほど、コメント input 欄のずれについて質問したものです。
実は、ずっと前に作成したものでは、ずれは出ていないようです。
下記のサイトです。
http://as-one.main.jp/sb1/log/eid711.html
それから、SereneBach ではなく、sb の場合もずれは生じませんでした。
CSS の記述等の知識が乏しいので、ご教授頂けるとありがたいです。
こんばんは。
テンプレートご利用ありがとうございます。
ご質問の件ですが、上記の2サイトをChrome/IE9(ブラウザモードをIE8に設定)で拝見させていただきましたが、コメント入力欄のずれらしき事象は確認できませんでした。
参考までにこちらで確認したときのスクリーンショットを掲載しておきます。
http://www.koikikukan.com/images/20130313_sample1.jpg
http://www.koikikukan.com/images/20130313_sample2.jpg
http://www.koikikukan.com/images/20130313_sample3.jpg
http://www.koikikukan.com/images/20130313_sample4.jpg
ブラウザのキャッシュをクリアして状況が変わらないかご確認願えますでしょうか。