livedoor ブログテンプレート
livedoor ブログ 用のテンプレートを作りました。サンプルのスクリーンショットは3カラムですが、2カラム・1カラムも用意しております。またリキッドレイアウトへの変更も可能です。カラムレイアウトの設定方法につきましては本エントリーを参照ください。
1.動作確認環境
動作確認は下記の環境で行っています。
- OS:Windows2000/XP
- ブラウザ:IE6.0/Firefox1.0.7/Netscape7.1/Netscape8.0.4/Opera8.5
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 でも紹介されています。
以下にそれぞれのレイアウトに対する 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">
<$PluginList_B$>
<div class="elsehead"></div>
<div class="elsebody">
:
</div><!-- /links-right -->
</div><!-- /links-right-box -->
<!-- 右カラム終了 -->
の間に書かれている <$PluginList_B$> をコピーし、左カラム
<!-- 左カラム開始 -->
<div id="links-left-box">
<div id="links-left">
<$PluginList_A$>
<$PluginList_B$>
</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 -->
の赤色部分を削除してください。
5.その他
タイトルバナー上部に表示されている livedoor のヘッダは削除しないでください(削除は livedoorブログの規約違反となります)。
基本的な動作は確認したつもりですが、Serene Bach の確認を全て理解できていない状態ですので、不具合等ございましたらご連絡ください。
6.ダウンロード
下のリンクからテンプレートをダウンロードできます。
2006.09.01 初版
2006.09.10 IE+リキッドレイアウト対処
2006.09.18 個別記事ページの追記の不具合修正
2009.04.12 デザイン修正
2009.04.19 RelatedArticles追加
2009.10.28 カテゴリアーカイブの前後ページのリンク追加
2010.03.29 ページ上部に表示されるヘッダ用タグを削除
テンプレートの設定方法については、「livedoor ブログ設定方法」をご覧ください。またアーカイブを解凍した中にある README.txt にも記しております。
- livedoor ブログテンプレート修正(ヘッダ情報の削除)
- livedoor ブログテンプレート修正(カテゴリアーカイブの前後ページのリンク追加)
- livedoor ブログテンプレート修正
- livedoor テンプレート不具合のお知らせ(前後ページへのリンク追加)
- テンプレート不具合のお知らせ(カレンダーリンクの改善) for livedoor ブログ
≫ CSS、HTMLすべて変更しました。 from 下を向いて歩こう
えーと、思うところがありCSS、HTMLすべて変更しました。
いろいろ、不具合が出ていますがこのテンプレートのせいではなく私の方の問題です。
基本的に... [続きを読む]
≫ 可変幅から固定幅に変えました。 from 下を向いて歩こう
えー、見ての通り可変幅から固定幅に変更しました。
画面を広く使えていいのですがやはり画面によって表示が変わるって事は色々制約がありまして画面によっては間... [続きを読む]
≫ ブログのデザインを変更しました from オンラインゲームをはじめよう
小粋空間さんで配布されているlivedoorブログテンプレートを使用させていただきました。 [続きを読む]
≫ テンプレートの変更 from セカンドライフ スタイルLabs(暮しと生活研究室)
テンプレートを小粋空間さんの: livedoor ブログテンプレートに変更してから 驚くほどアクセスをいただいております
小粋空間さんに感謝です
... [続きを読む]
≫ 小粋空間のテンプレートに変更しました(^_^)V from 在宅ワーク・ブログアフィリエイトで情報起業
心機一転って訳じゃないけど、
ブログのテンプレートを livedoor標準テンプレートから
「小粋空間」さんのテンプレートに変更しました。
... [続きを読む]
最初のlivedoor ブログのリンクがSerene Bachになってます。
>oqunoさん
こんばんは。
ご指摘ありがとうございました!
始めまして。
livedoorのテンプレートを使わせていただいてます。
追記の表示に不具合があったので報告します。
追記の「続きを読む」をクリックして個別記事に行っても追記の部分が表示されず「続きを読む」が表示されたままです。もちろんクリックしても何も起こりません。
たぶん、個別記事のソースの
<!-- 追記 -->
<IfArticleBodyMore>
<div class="entry-more">
<a href="<$ArticlePermalink$>" class="continues">続きを読む</a>
</div>
</IfArticleBodyMore>
上記の部分を
<!-- 追記 -->
<IfArticleBodyMore>
<div class="entry-more">
<$ArticleBodyMore$><br><br clear="all">
</div>
</IfArticleBodyMore>
のように書き換えれば直ると思います。
HTMLとかよく解らないので間違っているかもしれませんがご報告まで。
>スノーさん
はじめまして。
テンプレートご利用ありがとうございます。
ご指摘の部分は配布テンプレートを修正致しました。
ご指摘くださりありがとうございました。
あと勝手ながらBlogPeopleに登録させて頂きました。
それではよろしくお願い致します。
どうも、お世話になっています。
実は3カラム・リキッドレイアウトから3カラム(固定)に切り替えたところ右側のカラムが左側の下に表示されるようになってしまいました。
カラムの中に入ってる物の幅に問題があるかと思ったのですが問題がないようでした。
別IDを作ってプレーンなブログを作って試してみましたがやはり右側のカラムが落ちてしまいます。どうも3カラム固定にしたときのテンプレートに問題がある模様です。
確認していただければ幸いです。
何とか自己解決しました。
.layout-three-column #links-left-box,
.layout-three-column #links-right-box {
float: left;
width: 185px;
}
を
.layout-three-column #links-left-box
{
float: left;
width: 185px;
}
.layout-three-column #links-right-box
{
position: absolute;
}
と書き変える事で何とか問題なく表示できました。
ただし私はCSSの知識はまったく無いので正しい表示ではないと思われます。
テンプレートの訂正をお願いします。
たびたび、お世話になります。
訂正です。
前回の書き込みだとIEだといいのですがFirefoxで見ると思いっきり重なっています。
試行錯誤した結果、下記のようにしてなんとかなりました。
.layout-three-column #links-left-box
{
float: left;
width: 185px;
}
.layout-three-column #links-right-box
{
float: left;
}
コメント欄を汚してすいません。
>スノーさん
こんにちは。
ご質問の件ですが、スタイルシートを修正したサンプルを下記に配置しました。
http://www.koikikukan.com/samples/20061005/
当サイトは文字コードを強制的にUTF-8にしているため、上記ページは最初真っ白に表示されます。表示するために、ブラウザの[表示]→[エンコード(文字エンコーディング)]で "日本語(EUC)" を選択してください。
また、修正したスタイルシートは Firefox で
http://www.koikikukan.com/samples/20061005/site.css
と入力すれば見ることができます。修正箇所には
/* 2006.10.05 修正 */
というキーワードを入れてますので、参考になれば幸いです。
それではよろしくお願い致します。
す、素晴らしすぎる…。
迅速な対応ありがとうございます。
ブログも何とがカラムを調整したものの何か文字が寄っていたり微妙に問題があったのですがご提示いただいたCSSで解決しました。
ありがとうございます。感謝感激!
>スノーさん
こんばんは。
ご連絡ありがとうございます。
お役に立てたようで良かったです。
なおカラムが崩れていたのは、右上の画像の幅がサイドバーより若干広かったのが影響していたと思われます。
ではでは!
このテンプレートの出来がすばらしいのでとても気に入ってます。
ところで上のサンプル画像のカレンダーの表示が、(Movable Typeとは言え )今日の日付に黒く枠が入っているのに対し、どうしてもうまく反映してくれません。あと、日付をクリックしてもうまくリンクしてくれない・・・orz
どなたか同症状克服された方いましたらご指摘下さい
>トンボさん
こんばんは。
ご質問の件ですが、livedoor ブログのご質問と解釈してよろしいでしょうか。
であれば、カレンダーに黒枠をつけるのは、「休日表示付リアルタイムカレンダー for livedoor ブログ」のカスタマイズを行ってください。
また「日付をクリックしてもうまくリンクしてくれない」は具体的にどのような状態でしょうか。ちなみに livedoor のカレンダーとテンプレートは関係ありませんので、カレンダーのリンクはどのテンプレートでも同じように動作するはずです。
Movable Type のテンプレートの話でしたら、ブログのURLをご連絡頂いた方が適切な回答ができると思います。
それではよろしくお願い致します。
はじめまして!
Livedoorのテンプレートをはじめて使わせていただきました。やっと自分の探していたテンプレートにめぐり合ったので感激でした。早速テンプレートの入れ替えをしてみたら1箇所どうしてもうまくいきません。3カラムリキッドを使ったのですが右カラムのフレームから内容がずれて本体の中にかぶってしまっています。どうやっても修正できないのですが解決策を伝授していただけますか?お待ちしております。
>ダンキチさん
こんばんは。
テンプレートご利用&ご連絡ありがとうございます。
先日と同じ回答になりますが、右サイドバーにある横幅の広い画像(FMV-DESKPOWER TX95U/D)を削除すればはみ出さなくなると思います。
それではどうぞよろしくお願い致します。
早速の回答ありがとうございます。
記事の編集がいけなかったんですね?(恥)
削除したらバッチリでした!
これからもよろしくお願いします。
>ダンキチさん
こんにちは。
ご連絡ありがとうございました。
無事に直ったようで良かったです。
ではでは!
いつもお世話になります。テンプレート快適に使わせていただいております。
ただ、ひとつだけわからないことがあるので質問させていただきます。
ブログ記事を書いて「続きを読む」の書き込みをしてアップして実際の記事から「続きを読む」をクリックすると右カラムが下に落ちた状態で表示されてしまいます。
どうしてでしょうか??直し方があれば教えてください。
いつも素人質問ですみません・・
>家電激安管理人さん
こんばんは。
ご質問の件ですが、まず「続きを読む」をクリックすると、メインページから個別記事ページにジャンプします。
原因は、個別記事ページのテンプレートがメインページと異なるレイアウト(3カラム固定レイアウト)の設定になっているのが原因です。
厳密には異なるレイアウトでも構わないので、もし今のままのレイアウトを希望されているようでしたら、「テンプレートのページ」の後半にある FAQ より「カラムずれ(中央カラムが左カラムの下にくる・右カラムが中央カラムの下にくる)が生じますが?」が参考になれば幸いです。
それではよろしくお願い致します。
はじめまして。
こちらのテンプレートを利用させていただいているのですが、
記事をカテゴリ別で表示させたとき、1ページ30件ごとに分割して表示されるのですが、「次のページへ」のリンクが無いためそれ以降の記事を表示することが出来ないことに気付きました。
1ページに表示する件数はBLOGの設定で変更できますが、最大は50件までのようです。
どうか修正していただけないでしょうか?宜しくお願いします。
>ぞびさん
こんにちは。
ご質問の件ですが、テンプレートの考慮もれのようでした。申し訳ございません。
動作が確認できしだい、記事をエントリーしたいと思います。
すいませんが少々お時間ください。
こういうシンプルな可変のテンプレを探しておりました。
早速ダウンロードしました。ありがとうございます!
***
質問なのですが、
カレンダーの上にも(わざわざ)タイトルとして『カレンダー』と入れたいのですが
それはどのようにしたらいいのでしょうか。
カレンダーを一番上に置いていないので、空間ができてしまい
バランスが悪いのです。
よろしければ教えてください。
21番でコメントを書いたものです。
どうにか解決しました。
お騒がせしてしまい申し訳ありませんでした。
>maさん
こんにちは。
ご質問の件、自己解決されたようで良かったです。
また何かございましたらご連絡ください。
ではでは!
yujiro さん、はじめまして
ワイルドダックと申します。
随分前から、この「小粋空間」というサイトのことは知っていて
こっそりとサイトのチェックをしてました(*^^*ゞ
この度、テンプレートを利用させて頂いたのでご報告に参りました。
不束者ですが、よろしくお願い致します。
>ワイルドダックさん
はじめまして。
テンプレートご利用&ご連絡ありがとうございました。
BlogPeople も登録ありがとうございます。
こちらからも登録させていただきました。
それでは今後ともどうぞよろしくお願い致します。
Livedoorのテンプレート使わせていただいています。
テンプレートの問題なのかは不明なのですが
Livedoorに最初からあるテンプレートを使うと
起きない現象ですので質問させていただきます。
アフィリエイトのため、ASPサイトを利用しているのですが
ASPサイトから、そのままコピーしたテキストリンク(下記のような)
「<a href=・・・・・・・>文字列</a><IMG border=0 width=1 height=1 src=・・・・・・・>」
を記事内に入れると、必ずテキストリンクの右側に全角1文字分くらいのスペースができてしまいます。本当は無いのですが。
アフィリエイトリンクではなく、下記のような、違うページに遷移させるだけのリンクはスペースが出ずにきれいに表示されます。
「<a href=・・・・・・・>文字列</a>」
これは、テンプレートの不具合なのでしょうか?
ちなみに、違うブログでアフィリエイトリンクを記載しても、スペースが出るという現象はおきませんでした。
見た目上、不自然な感じがするので、きれいに表示されるといいのですが…。
私の知識不足、検討違いでしたら申し訳ありません。
>lanlanさん
こんばんは。
テンプレートご利用ありがとうございます。
文言だけでは原因が特定できないため、申し訳ありませんが、サイトのURLをご連絡頂けますでしょうか。
それではよろしくお願い致します。
返信ありがとうございます。
素敵なテンプレートでしたので、はりきって作り始めたら、壁にぶつかってしまいました。
URL入れておきました。よろしくお願いいたします。
>lanlanさん
こんばんは。
分かりました。
スタイルシートの下記の部分を削除してください。
.entry img {
margin-right: 8px;
margin-bottom: 5px;
}
この設定は、ブログ記事に画像を(左寄せで)表示したときに、本文とのマージンをとるためのものです。
配布中の他のテンプレートではこの設定を削除したのですが、livedoorテンプレートでは残ってしまっていました。申し訳ありません。
それではよろしくお願い致します。
ありがとうございまいた。
早速試したところ、無事スペースなしで表示されました。
また何かありましたら、よろしくお願いいたします。
>lanlanさん
こんはんは。
ご連絡ありがとうございました。
無事に直ったようでよかったです。
ではでは!
livedoorブログで、個別記事に、その記事が属するカテゴリの最新記事を表示する機能が追加されているようですが、こちらのテンプレートで対応することは可能でしょうか?
お時間あるときでも、お返事いただけると幸いです。
>tomatoさん
こんにちは。
ご質問の件ですが、今週中を目処に別途エントリーしたいと思います。
それではよろしくお願い致します。
始めまして。
ブログ自体初心者のものです。
先月末ぐらいからライブドアでブログ初めまして、ここのテンプレートがシンプルで気に入ったので使いたいのですが、記事の内容がすべて中央に寄ってしまいました。
プレビューで見た場合ちゃんと左寄せになっているのですが、なぜか投稿後にみてみると記事すべて中央に寄ってしまいます。
間抜けな質問かもしれませんが、何かアドバイスありましたらお願いします。
>ブログ初心者さん
こんばんは。
ご質問の件ですが、記事やテンプレートのどこかに <center> をいれてないでしょうか。
サイトのURLをご連絡いただければ、より適切な回答ができると思います。
それではよろしくお願い致します。
centerがブログパーツのサイドバーのほうにはいってました。
以前サイドの文字が左よりだったので、そのままタグ入れてたのが残っていたようです。
外しましたら、ちゃんと左よりになりました。
お騒がせしました。
>ブログ初心者さん
こんにちは。
ご連絡ありがとうございました。
無事に直ったようで良かったです。
ではでは!
はじめまして。
livedoorブログにて3カラムを利用させていただいてます。
各サイドバーを画像に変更したいのですが、上手く出来ません。よろしければ方法を教えてください。お願い致します。
自己解決しました。
>hikariさん
こんばんは。
ご質問の件、無事に解決したようで良かったです。
ではでは!
はじめまして。
テンプレートをお借りしました。
ありがとうございます。
>トモヤさん
はじめまして。
テンプレートご利用&ご連絡ありがとうございました。
あと、勝手ながらBlogPeopleにも登録させて頂きました。
それでは今後ともどうぞよろしくお願い致します。
はじめまして。
先日からテンプレートを使わせていただいております。
シンプルでクールなデザインがとてもお気に入りです。
で・・・ご質問なのですが
自分が使っている IEのプラウザではきれいに表示されますが、
Firefoxではサイドメニュー部分(通常白)が背景色の青になってます。
これはどの部分を修正すればよくなるものでしょうか?
よろしければ方法をおおしえいただけませんか?
●はじめまして。
先日からテンプレートを使わせていただいております。
シンプルでクールなデザインがとてもお気に入りです。
で・・・ご質問なのですが
自分が使っている IEのプラウザではきれいに表示されますが、
Firefoxではサイドメニュー部分(通常白)が背景色の青になってます。
これはどの部分を修正すればよくなるものでしょうか?
よろしければ方法をおおしえいただけませんか?
>弥音- ひろとさん
こんばんは。
ご返事遅くなりすいません。
ご質問の件ですが、別途ご返事致しますので、すいませんがもうしばらくお待ち頂けますでしょうか(週末は時間がとれないため来週になります)。
それではよろしくお願い致します。
早速ご確認いただいてありがとうございます。
お忙しいところ大変申し訳ありません<(_ _)>
お時間とれます時、いつでもけっこうです。
よろしくおねがいいたします。
>弥音- ひろとさん
こんにちは。
ご質問の件ですが、左サイドバーの「★ご協力感謝します~」の下にある div の終了タグがひとつ余分なのが原因と思われます。
Firefox(IE6以外)ではタグの開始・終了の対応がきちんととれていないとレイアウトが崩れて表示される場合がありますので注意してください。
それではよろしくお願い致します。
お忙しいところ調べていただき大変感謝します。
>左サイドバーの「★ご協力感謝します~」の下にある div の終了タグがひとつ余分なのが原因と思われます。
原因はわかったのですが・・・
どのように修正したらよろしいのでしょうか?
左サイドバーのそのエリアはブログパーツのフリーエリアで作成しており、その部分を見てもdivの終了タグというものは見当たりません。
知識がなくて申し訳ありません。
よろしければ教えていただきたいのですが。
重ね重ねすみません。
>弥音- ひろとさん
こんにちは。
ご返事遅くなってすいません。
フリーエリアに該当のタグが見当たらない場合は、「デザインのカスタマイズ」画面(マイページ→ブログ設定→カスタマイズ)で、
- トップページ
- 個別記事ページ
- カテゴリアーカイブ
- 月別アーカイブ
のテキストエリアを調べてみてください。
それではよろしくお願い致します。
お忙しいところありがとうございました。
おかげさまで解決いたしました^^
すみません・・・あと1つお伺いしたいのが
『TOPバナーを自作のものに変えたいのですが、どこを変更すればよいんでしょうか?』
画像をUPしたURLをどこに記述すればよいかお教え願いませんか?
>弥音- ひろとさん
こんばんは。
ご返事遅くなってすいません。
ご質問の件ですが、スタイルシートの最後に下記の内容を追加してみてください。
#banner {
background: url(画像のURL);
}
それではよろしくお願い致します。
こんにちは。
以前は使えていましたが、最近、ライブドアブログの仕様が変わったのか???新しくブログを作ろうと思いまして、小粋空間様のテンプレートを適用するとトップページが何も表示されず、真っ白になってしまうようです。
お忙しいかと思いますが、ご確認よろしくお願い致します。
はじめまして。
ぞびさんと同じ質問ですが、「次のページへ」はもう解決しているのでしょうか。今日初めてこちらにたどりつき、先ほど設定を終わったところですが、「次のページへ」が見つからなかったので投稿いたしました。
----------------------------
記事をカテゴリ別で表示させたとき、1ページ30件ごとに分割して表示されるのですが、「次のページへ」のリンクが無いためそれ以降の記事を表示することが出来ないことに気付きました。
1ページに表示する件数はBLOGの設定で変更できますが、最大は50件までのようです。
どうか修正していただけないでしょうか?宜しくお願いします。
[19] Posted by ぞび : October 29, 2007 3:27 AM
>bamianさん
こんばんは。
ご返事遅くなってすいません。
以下の内容をカテゴリアーカイブテンプレートの「<!-- Loop Start -->」の直前に追加してください。
<div class="page-nav"><IfPrevPage><a href="<$CurrentUrl$>?p=<$PrevPage$>">< 前のページへ</a></IfPrevPage><IfPrevPage><IfNextPage> | </IfNextPage></IfPrevPage><IfNextPage><a href="<$CurrentUrl$>?p=<$NextPage$>">次のページへ ></a></IfNextPage></div>
それではよろしくお願い致します。
yujiroさま、
次のページへと、表示ぱっちりです!
どうもありがとうございました!
>bamianさん
こんばんは。
ご連絡ありがとうございました。
うまくできたようでよかったです。
ではでは!
livedoorの仕様変更があり、HTMLにlivedoorのヘッダを入れなくても自動的に表示できるようになったようです。
テンプレートをそのまま使用すると、ヘッダの2重表示になってしまいます。
トップページのHTMLですと、18-34行の部分が不要になったようです。