小粋空間: livedoor ブログテンプレート

Top ＞ livedoorブログ＞テンプレート＞ livedoor ブログテンプレート

2006年9月 1日

livedoor ブログテンプレート

Posted at September 1,2006 12:55 AM
Category：[テンプレート]
Tag：[livedoor, Template]

livedoor ブログ用のテンプレートを作りました。サンプルのスクリーンショットは3カラムですが、2カラム・1カラムも用意しております。またリキッドレイアウトへの変更も可能です。カラムレイアウトの設定方法につきましては本エントリーを参照ください。

１．動作確認環境

動作確認は下記の環境で行っています。

OS：Windows2000/XP
ブラウザ：IE6.0/Firefox1.0.7/Netscape7.1/Netscape8.0.4/Opera8.5

２．利用規定

ご利用の前にテンプレートのページを必ずご覧くださいますよう、よろしくお願い致します。

３．カラムレイアウト変更方法

このテンプレートではカラムレイアウトのバリエーションとして、

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カラムに変更される場合は左右両方のカラムをごっそり削除してください。

４．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="http://www.koikikukan.com/"><img src="{site_parts}koikikukan.gif" alt="小粋空間" width="128" height="22" /></a>
</div>
/for one column -->

の赤色部分を削除してください。

５．その他

タイトルバナー上部に表示されている livedoor のヘッダは削除しないでください（削除は livedoorブログの規約違反となります）。

基本的な動作は確認したつもりですが、Serene Bach の確認を全て理解できていない状態ですので、不具合等ございましたらご連絡ください。

６．ダウンロード

下のリンクからテンプレートをダウンロードできます。

2006.09.01 初版
2006.09.10 IE+リキッドレイアウト対処
2006.09.18 個別記事ページの追記の不具合修正

テンプレートの設定方法については、「livedoor ブログ設定方法」をご覧ください。またアーカイブを解凍した中にある README.txt にも記しております。

Posted by yujiro

« 中央カラムにバナー広告を表示する | Main | Movable Type 3.32日本語版リリース »

人気エントリー

トラックバックURL

このエントリーのトラックバックURL:

このブログは重複トラックバック防止プラグインにより、同一エントリーに対する同一のトラックバックは登録されないようにしています（記事のタイトルまたは記事の概要が異なる場合は登録されます）。

トラックバック

≫ CSS、HTMLすべて変更しました。 from 下を向いて歩こう
えーと、思うところがありCSS、HTMLすべて変更しました。いろいろ、不具合が出ていますがこのテンプレートのせいではなく私の方の問題です。基本的に... [続きを読む]

Tracked on September 14, 2006 6:12 AM

≫ 可変幅から固定幅に変えました。 from 下を向いて歩こう
えー、見ての通り可変幅から固定幅に変更しました。画面を広く使えていいのですがやはり画面によって表示が変わるって事は色々制約がありまして画面によっては間... [続きを読む]

Tracked on October 5, 2006 9:45 PM

≫ ブログのデザインを変更しました from オンラインゲームをはじめよう
小粋空間さんで配布されているlivedoorブログテンプレートを使用させていただきました。 [続きを読む]

Tracked on January 11, 2007 12:57 PM

≫ テンプレートの変更 from セカンドライフ　スタイルLabs（暮しと生活研究室）
テンプレートを小粋空間さんの: livedoor ブログテンプレートに変更してから　驚くほどアクセスをいただいております小粋空間さんに感謝です ... [続きを読む]

Tracked on February 11, 2007 10:42 AM

≫ 小粋空間のテンプレートに変更しました(^_^)V from 在宅ワーク・ブログアフィリエイトで情報起業
心機一転って訳じゃないけど、ブログのテンプレートを livedoor標準テンプレートから「小粋空間」さんのテンプレートに変更しました。 ... [続きを読む]

Tracked on December 4, 2007 3:36 PM

最初のlivedoor ブログのリンクがSerene　Bachになってます。

[1] Posted by oquno : September 1, 2006 3:31 AM

＞oqunoさん
こんばんは。
ご指摘ありがとうございました！

[2] Posted by yujiro : September 2, 2006 1:10 AM

始めまして。
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とかよく解らないので間違っているかもしれませんがご報告まで。

[3] Posted by スノー : September 16, 2006 9:38 AM

＞スノーさん
はじめまして。
テンプレートご利用ありがとうございます。
ご指摘の部分は配布テンプレートを修正致しました。
ご指摘くださりありがとうございました。

あと勝手ながらBlogPeopleに登録させて頂きました。
それではよろしくお願い致します。

[4] Posted by yujiro : September 19, 2006 1:57 AM

どうも、お世話になっています。
実は3カラム・リキッドレイアウトから３カラム（固定）に切り替えたところ右側のカラムが左側の下に表示されるようになってしまいました。
カラムの中に入ってる物の幅に問題があるかと思ったのですが問題がないようでした。
別IDを作ってプレーンなブログを作って試してみましたがやはり右側のカラムが落ちてしまいます。どうも3カラム固定にしたときのテンプレートに問題がある模様です。
確認していただければ幸いです。

[5] Posted by スノー : October 5, 2006 3:41 AM

何とか自己解決しました。

.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の知識はまったく無いので正しい表示ではないと思われます。
テンプレートの訂正をお願いします。
たびたび、お世話になります。

[6] Posted by スノー : October 5, 2006 5:56 AM

訂正です。
前回の書き込みだとIEだといいのですがFirefoxで見ると思いっきり重なっています。
試行錯誤した結果、下記のようにしてなんとかなりました。

.layout-three-column #links-left-box
{
float: left;
width: 185px;
}
.layout-three-column #links-right-box
{
　　float: left;
}

コメント欄を汚してすいません。

[7] Posted by スノー : October 5, 2006 10:51 AM

＞スノーさん
こんにちは。
ご質問の件ですが、スタイルシートを修正したサンプルを下記に配置しました。

http://www.koikikukan.com/samples/20061005/

当サイトは文字コードを強制的にUTF-8にしているため、上記ページは最初真っ白に表示されます。表示するために、ブラウザの[表示]→[エンコード（文字エンコーディング）]で "日本語（EUC）" を選択してください。

また、修正したスタイルシートは Firefox で

http://www.koikikukan.com/samples/20061005/site.css

と入力すれば見ることができます。修正箇所には

/* 2006.10.05 修正 */

というキーワードを入れてますので、参考になれば幸いです。
それではよろしくお願い致します。

[8] Posted by yujiro : October 5, 2006 11:41 AM

す、素晴らしすぎる…。
迅速な対応ありがとうございます。
ブログも何とがカラムを調整したものの何か文字が寄っていたり微妙に問題があったのですがご提示いただいたCSSで解決しました。
ありがとうございます。感謝感激！

[9] Posted by スノー : October 5, 2006 8:48 PM

＞スノーさん
こんばんは。
ご連絡ありがとうございます。
お役に立てたようで良かったです。
なおカラムが崩れていたのは、右上の画像の幅がサイドバーより若干広かったのが影響していたと思われます。
ではでは！

[10] Posted by yujiro : October 6, 2006 1:52 AM

このテンプレートの出来がすばらしいのでとても気に入ってます。

ところで上のサンプル画像のカレンダーの表示が、(Movable Typeとは言え )今日の日付に黒く枠が入っているのに対し、どうしてもうまく反映してくれません。あと、日付をクリックしてもうまくリンクしてくれない・・・orz

どなたか同症状克服された方いましたらご指摘下さい

[11] Posted by トンボ : October 11, 2006 8:38 AM

＞トンボさん
こんばんは。
ご質問の件ですが、livedoor ブログのご質問と解釈してよろしいでしょうか。
であれば、カレンダーに黒枠をつけるのは、「休日表示付リアルタイムカレンダー for livedoor ブログ」のカスタマイズを行ってください。
また「日付をクリックしてもうまくリンクしてくれない」は具体的にどのような状態でしょうか。ちなみに livedoor のカレンダーとテンプレートは関係ありませんので、カレンダーのリンクはどのテンプレートでも同じように動作するはずです。

Movable Type のテンプレートの話でしたら、ブログのURLをご連絡頂いた方が適切な回答ができると思います。
それではよろしくお願い致します。

[12] Posted by yujiro : October 12, 2006 11:19 PM

はじめまして！
Livedoorのテンプレートをはじめて使わせていただきました。やっと自分の探していたテンプレートにめぐり合ったので感激でした。早速テンプレートの入れ替えをしてみたら１箇所どうしてもうまくいきません。３カラムリキッドを使ったのですが右カラムのフレームから内容がずれて本体の中にかぶってしまっています。どうやっても修正できないのですが解決策を伝授していただけますか?お待ちしております。

[13] Posted by ダンキチ : March 15, 2007 7:28 PM

＞ダンキチさん
こんばんは。
テンプレートご利用＆ご連絡ありがとうございます。
先日と同じ回答になりますが、右サイドバーにある横幅の広い画像（FMV-DESKPOWER TX95U/D）を削除すればはみ出さなくなると思います。
それではどうぞよろしくお願い致します。

[14] Posted by yujiro : March 15, 2007 10:36 PM

早速の回答ありがとうございます。
記事の編集がいけなかったんですね?(恥)
削除したらバッチリでした！
これからもよろしくお願いします。

[15] Posted by ダンキチ : March 16, 2007 10:44 AM

＞ダンキチさん
こんにちは。
ご連絡ありがとうございました。
無事に直ったようで良かったです。
ではでは！

[16] Posted by yujiro : March 16, 2007 6:09 PM

いつもお世話になります。テンプレート快適に使わせていただいております。
ただ、ひとつだけわからないことがあるので質問させていただきます。
ブログ記事を書いて｢続きを読む｣の書き込みをしてアップして実際の記事から｢続きを読む｣をクリックすると右カラムが下に落ちた状態で表示されてしまいます。
どうしてでしょうか?？直し方があれば教えてください。
いつも素人質問ですみません・・

[17] Posted by 家電激安管理人 : May 22, 2007 10:50 AM

＞家電激安管理人さん
こんばんは。
ご質問の件ですが、まず「続きを読む」をクリックすると、メインページから個別記事ページにジャンプします。
原因は、個別記事ページのテンプレートがメインページと異なるレイアウト（3カラム固定レイアウト）の設定になっているのが原因です。

厳密には異なるレイアウトでも構わないので、もし今のままのレイアウトを希望されているようでしたら、「テンプレートのページ」の後半にある FAQ より「カラムずれ（中央カラムが左カラムの下にくる・右カラムが中央カラムの下にくる）が生じますが？」が参考になれば幸いです。
それではよろしくお願い致します。

[18] Posted by yujiro : May 26, 2007 12:50 AM

はじめまして。

こちらのテンプレートを利用させていただいているのですが、
記事をカテゴリ別で表示させたとき、1ページ30件ごとに分割して表示されるのですが、「次のページへ」のリンクが無いためそれ以降の記事を表示することが出来ないことに気付きました。
1ページに表示する件数はBLOGの設定で変更できますが、最大は50件までのようです。

どうか修正していただけないでしょうか？宜しくお願いします。

[19] Posted by ぞび : October 29, 2007 3:27 AM

＞ぞびさん
こんにちは。
ご質問の件ですが、テンプレートの考慮もれのようでした。申し訳ございません。
動作が確認できしだい、記事をエントリーしたいと思います。
すいませんが少々お時間ください。

[20] Posted by yujiro

: October 31, 2007 4:30 PM

こういうシンプルな可変のテンプレを探しておりました。
早速ダウンロードしました。ありがとうございます！

***
質問なのですが、
カレンダーの上にも（わざわざ）タイトルとして『カレンダー』と入れたいのですが
それはどのようにしたらいいのでしょうか。
カレンダーを一番上に置いていないので、空間ができてしまい
バランスが悪いのです。

よろしければ教えてください。

[21] Posted by ma : November 25, 2007 8:49 PM

21番でコメントを書いたものです。
どうにか解決しました。
お騒がせしてしまい申し訳ありませんでした。

[22] Posted by ma : November 26, 2007 1:28 AM

＞maさん
こんにちは。
ご質問の件、自己解決されたようで良かったです。
また何かございましたらご連絡ください。
ではでは！

[23] Posted by yujiro

: November 27, 2007 10:45 AM

yujiro さん、はじめまして
ワイルドダックと申します。

随分前から、この「小粋空間」というサイトのことは知っていて
こっそりとサイトのチェックをしてました(*^^*ゞ

この度、テンプレートを利用させて頂いたのでご報告に参りました。

不束者ですが、よろしくお願い致します。

[24] Posted by ワイルドダック

: December 4, 2007 4:03 PM

＞ワイルドダックさん
はじめまして。
テンプレートご利用＆ご連絡ありがとうございました。

BlogPeople も登録ありがとうございます。
こちらからも登録させていただきました。
それでは今後ともどうぞよろしくお願い致します。

[25] Posted by yujiro

: December 4, 2007 4:16 PM

Livedoorのテンプレート使わせていただいています。
テンプレートの問題なのかは不明なのですが
Livedoorに最初からあるテンプレートを使うと
起きない現象ですので質問させていただきます。

アフィリエイトのため、ASPサイトを利用しているのですが
ASPサイトから、そのままコピーしたテキストリンク（下記のような）

「＜a href=･･･････＞文字列＜/a＞＜IMG border=0 width=1 height=1 src=・･･････＞」

を記事内に入れると、必ずテキストリンクの右側に全角１文字分くらいのスペースができてしまいます。本当は無いのですが。

アフィリエイトリンクではなく、下記のような、違うページに遷移させるだけのリンクはスペースが出ずにきれいに表示されます。

「＜a href=･･･････＞文字列＜/a＞」

これは、テンプレートの不具合なのでしょうか？
ちなみに、違うブログでアフィリエイトリンクを記載しても、スペースが出るという現象はおきませんでした。

見た目上、不自然な感じがするので、きれいに表示されるといいのですが…。

私の知識不足、検討違いでしたら申し訳ありません。

[26] Posted by lanlan : March 20, 2008 10:09 PM

＞lanlanさん
こんばんは。
テンプレートご利用ありがとうございます。
文言だけでは原因が特定できないため、申し訳ありませんが、サイトのURLをご連絡頂けますでしょうか。
それではよろしくお願い致します。

[27] Posted by yujiro

: March 20, 2008 11:03 PM

返信ありがとうございます。
素敵なテンプレートでしたので、はりきって作り始めたら、壁にぶつかってしまいました。
URL入れておきました。よろしくお願いいたします。

[28] Posted by lanlan : March 21, 2008 10:35 AM

＞lanlanさん
こんばんは。
分かりました。
スタイルシートの下記の部分を削除してください。

.entry img {
    margin-right: 8px;
    margin-bottom: 5px;
}

この設定は、ブログ記事に画像を（左寄せで）表示したときに、本文とのマージンをとるためのものです。
配布中の他のテンプレートではこの設定を削除したのですが、livedoorテンプレートでは残ってしまっていました。申し訳ありません。
それではよろしくお願い致します。

[29] Posted by yujiro

: March 22, 2008 8:50 PM

ありがとうございまいた。
早速試したところ、無事スペースなしで表示されました。
また何かありましたら、よろしくお願いいたします。

[30] Posted by lanlan : March 22, 2008 10:03 PM

＞lanlanさん
こんはんは。
ご連絡ありがとうございました。
無事に直ったようでよかったです。
ではでは！

[31] Posted by yujiro

: March 25, 2008 2:11 AM

コメントする

名前（N）: *必須

メールアドレス（M）:

URL（U）:

情報を保存する？

お知らせ：2008年5月現在、多忙のため、7月頃までコメントを速やかに回答できない状態が続きます。ご質問の内容によっては回答が7月以降になる可能性がありますので、予めご了承ください。

コメント（C）:

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り（プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り）、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「<」、「>」は「>」と入力してください。例えば「<$MTBlogURL$>」は「<$MTBlogURL$>」となります（全て半角文字）

小粋空間 - a cheap joke and a play on words site