忍者ブログ用 共有テンプレート http://template001.blog.shinobi.jp/ 忍者ブログ用の共有テンプレートのページです。 Thu, 01 Aug 2013 10:52:49 GMT ja © Ninja Tools Inc. テンプレートについて 共有テンプレートに登録していますので、ぜひつかってください。

あなたのブログ、
WUXGA(1920x1200)などの大きい画面で見たことありますか？
VGA(640x480)などの小さい画面で見たことありますか？
固定幅のブログテンプレートを使用していると、
大きい画面で見たら、左右又はどちらかになにも置かれてない空間ができ、
小さい画面で見たら、どこかの領域がウインドウに収まらずにはみ出したり、下に落ちたり、複数の領域が重なってしまいます。
場合によっては閲覧不可能であったり、閲覧可能でも閲覧者を不快にさせてしまうかもしれません。

大きい画面や小さい画面を用意して確認することは難しいと思いますが、
ウインドウサイズを大きくしたり小さくしてブログを表示してみると、固定幅のテンプレートか可変幅のテンプレートかわかります。

ここで使用しているテンプレートは、
指定しないとバランスが悪くなる可能性があるため、左右のサイドバーのwidth（横幅）
忍者ブログのテンプレートのプレビューがプラグインを大量に入れてくるため、上下領域のmax-height（最大の縦幅）
を指定していますが、それ以外の領域サイズは可変です。
横幅640pxもあれば閲覧不可能なほど大きく崩れることは無いと思いますし、（640pxじゃ見にくいと思いますが）
大きい画面で閲覧しても全領域を有効に使えます。

また、領域サイズの固定だけでなく、フォントのサイズを固定（px値などで指定）しているテンプレートもありますが、
フォントサイズを固定すると、大きい画面で閲覧する人や視力の悪い人には見づらかったり見ることが不可能なこともあるかもしれません。
ここで使用しているテンプレートはフォントサイズの指定には相対サイズ以外使用していません。


ブラウザは
Firefox 3.0
MSIE 7.0
Google Chrome 0.4
Opera 9.6
にて確認しています。
確認できませんが、
SafariはWebKitなんでGoogle Chromeと同じように表示されると思うんで問題ないはずです。
一部テンプレートではposition:fixedを使用しているため、MSIE 7未満は他のブラウザと表示が変わりますが、
MSIE 7未満でも閲覧に支障がないようにしています。


]]> 未選択 http://template001.blog.shinobi.jp/%E6%9C%AA%E9%81%B8%E6%8A%9E/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6 Tue, 11 Dec 2018 14:50:41 GMT template001.blog.shinobi.jp://entry/2 幅可変2カラム（白）
プレビュー

幅可変の２カラムレイアウトのテンプレートです。
白系の色です。

プラグインカテゴリーについて
プラグインカテゴリー１：左サイドバー
プラグインカテゴリー２：中央上部
プラグインカテゴリー３：記事下
プラグインカテゴリー４：右上
プラグインカテゴリー５：左下
です。

左サイドバーの横幅は336pxとなっています。（左右マージン10px）
右サイドバーは、AdSenseのレクタングル（大）サイズ（336x280）がフィットするようにするために336pxとなっています。
左右マージンが10pxあるので、フィットさせるには
<div style="margin:0px -10px;">プラグインのタグ</div>
のように内部に-10pxでmargin指定するとフィットします。（マージンにマイナス値を指定する場合はIE６に気をつけてください。）

]]> 未選択 http://template001.blog.shinobi.jp/%E6%9C%AA%E9%81%B8%E6%8A%9E/%E5%B9%85%E5%8F%AF%E5%A4%892%E3%82%AB%E3%83%A9%E3%83%A0%EF%BC%88%E7%99%BD%EF%BC%89 Sun, 17 Oct 2010 00:50:46 GMT template001.blog.shinobi.jp://entry/15 全テンプレートを修正し、更新申請しました。 幅可変３カラム - 002
幅可変３カラム - 003
幅可変３カラム - 004
を修正し、更新申請しました。
審査を通ったら新しいものが共有テンプレートに公開されます。

-名称の変更
わかりにくいんで、
幅可変３カラム （白）
幅可変３カラム （灰）
幅可変３カラム （桃）
幅可変３カラム （青）
と、色が分かるようにしました。

-ナビゲートリンクの表示位置の変更
ナビゲートリンク（次のページとかのリンク）を、今までは上に表示していましたが、下に表示するようにしました。
特にカテゴリーページですが、次のページを見る際は、
通常、ページの内容をすべて見た後で次のページにいこうすると思います。
ですので、下に次のページへのリンクがあった方がいいと考えました。
また、ブログの場合は上についていてもいいとおもいますが、
サイトの構造によっては上にあると見栄えが悪くなると考えました。

-コメントフォームを初期状態で非表示に
記事ページを開いた際、
コメント入力フォームがコメントの下に表示されますが、
これを初期状態で非表示にし、
「コメントを書く」リンクをクリックした場合に表示するようにしました。
サイトの構造によっては、コメントフォームが表示されると見栄えが悪くなると考え、変更しました。

-右サイドバーの横幅を変更
左右サイドバーの横幅は200pxでしたが、
右サイドバーのみ300pxにしました。
AdSenseのレクタングル（中）サイズが300x250ですが、
同等のサイズのコンテンツを右サイドバーに設置できるようにしました。
右サイドバーは300pxですが、内部にプラグインを設置する場合、
横marginが3px確保されます。
したがいまして、
フリーエリアプラグインで300pxのコンテンツを設置する場合は
<div style="margin:0px -3px">コンテンツ</div>
のように<div>タグで囲んで、横マージンに-3pxを指定するときっちり収まります。
左右のサイドバーの合計幅が500pxですので、横サイズ640pxのブラウザでの閲覧は厳しくなったと思います。

]]> 未選択 http://template001.blog.shinobi.jp/%E6%9C%AA%E9%81%B8%E6%8A%9E/%E5%85%A8%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%92%E4%BF%AE%E6%AD%A3%E3%81%97%E3%80%81%E6%9B%B4%E6%96%B0%E7%94%B3%E8%AB%8B%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F%E3%80%82 Wed, 07 Oct 2009 22:56:20 GMT template001.blog.shinobi.jp://entry/7 幅可変３カラム （青）
プレビュー

幅可変の3カラムレイアウトのテンプレートです。
青系の色です。

忍者ブログの共有テンプレートには、
レイアウト：3ブロック（左右メニュー）
テクニカル：SEO向け
で登録しています。

プラグインカテゴリーについて
プラグインカテゴリー１：左サイドバー
プラグインカテゴリー２：左サイドバー
プラグインカテゴリー３：右上（468x60のバナー程度の大きさの物の設置を想定）
プラグインカテゴリー４：中央上部（468x60のバナー程度の大きさの物の設置を想定）
プラグインカテゴリー５：左下（テキストの設置を想定）
です。

左サイドバーの横幅は200pxとなっています。（左右マージン3px）
右サイドバーの横幅は300pxとなっています。（左右マージン3px）
右サイドバーは、AdSenseのレクタングル（中）サイズ（300x250）がフィットするようにするために300pxとなっています。
左右マージンが3pxあるので、フィットさせるには
<div style="margin:0px -3px;">プラグインのタグ</div>
のように内部に-3pxでmargin指定するとフィットします。


注意点
フッターに「position:fixed;」を使用しています。IE6では他のブラウザとかなり表示が違ってくると思います。（おかしな表示にはならないようにしたつもりです）
右サイドバーは「position:absolute」です。フッターが「position:fixed」なため、「position:fixed」に対応していないブラウザの場合「position:fixed」が無効になり、
左及び中央より右サイドバーの方が高さがある場合に右サイドバーとフッターが重なるかもしれません。
右サイドバーよりも常に左又は中の方が高くなるようにすることをおすすめします。
左サイドバーは「float:left」です。「width:200px」ですが、はみ出して200pxを越えた場合中央ブロックが下に落ちるかもしれません。
右サイドバーは「width:300px」ですが、300pxを越えた場合は中央と重なると思われます。
フッターとヘッダーに「max-height」を指定しています。はみ出したら表示されません。]]> 未選択 http://template001.blog.shinobi.jp/%E6%9C%AA%E9%81%B8%E6%8A%9E/%E5%B9%85%E5%8F%AF%E5%A4%89%EF%BC%93%E3%82%AB%E3%83%A9%E3%83%A0%20%EF%BC%88%E9%9D%92%EF%BC%89 Sat, 14 Feb 2009 18:13:14 GMT template001.blog.shinobi.jp://entry/6 幅可変３カラム （桃）
プレビュー

幅可変の3カラムレイアウトのテンプレートです。
ピンク系の色です。

忍者ブログの共有テンプレートには、
レイアウト：3ブロック（左右メニュー）
テクニカル：SEO向け
で登録しています。

プラグインカテゴリーについて
プラグインカテゴリー１：左サイドバー
プラグインカテゴリー２：左サイドバー
プラグインカテゴリー３：右上（468x60のバナー程度の大きさの物の設置を想定）
プラグインカテゴリー４：中央上部（468x60のバナー程度の大きさの物の設置を想定）
プラグインカテゴリー５：左下（テキストの設置を想定）
です。

左サイドバーの横幅は200pxとなっています。（左右マージン3px）
右サイドバーの横幅は300pxとなっています。（左右マージン3px）
右サイドバーは、AdSenseのレクタングル（中）サイズ（300x250）がフィットするようにするために300pxとなっています。
左右マージンが3pxあるので、フィットさせるには
<div style="margin:0px -3px;">プラグインのタグ</div>
のように内部に-3pxでmargin指定するとフィットします。


注意点
フッターに「position:fixed;」を使用しています。IE6では他のブラウザとかなり表示が違ってくると思います。（おかしな表示にはならないようにしたつもりです）
右サイドバーは「position:absolute」です。フッターが「position:fixed」なため、「position:fixed」に対応していないブラウザの場合「position:fixed」が無効になり、
左及び中央より右サイドバーの方が高さがある場合に右サイドバーとフッターが重なるかもしれません。
右サイドバーよりも常に左又は中の方が高くなるようにすることをおすすめします。
左サイドバーは「float:left」です。「width:200px」ですが、はみ出して200pxを越えた場合中央ブロックが下に落ちるかもしれません。
右サイドバーは「width:300px」ですが、300pxを越えた場合は中央と重なると思われます。
フッターとヘッダーに「max-height」を指定しています。はみ出したら表示されません。]]> 未選択 http://template001.blog.shinobi.jp/%E6%9C%AA%E9%81%B8%E6%8A%9E/%E5%B9%85%E5%8F%AF%E5%A4%89%EF%BC%93%E3%82%AB%E3%83%A9%E3%83%A0%20%EF%BC%88%E6%A1%83%EF%BC%89 Sun, 08 Feb 2009 15:59:28 GMT template001.blog.shinobi.jp://entry/5 幅可変３カラム （灰）
プレビュー

幅可変の3カラムレイアウトのテンプレートです。
グレイ系の色です。

忍者ブログの共有テンプレートには、
レイアウト：3ブロック（左右メニュー）
テクニカル：SEO向け
で登録しています。

プラグインカテゴリーについて
プラグインカテゴリー１：左サイドバー
プラグインカテゴリー２：左サイドバー
プラグインカテゴリー３：右上（468x60のバナー程度の大きさの物の設置を想定）
プラグインカテゴリー４：中央上部（468x60のバナー程度の大きさの物の設置を想定）
プラグインカテゴリー５：左下（テキストの設置を想定）
です。

左サイドバーの横幅は200pxとなっています。（左右マージン3px）
右サイドバーの横幅は300pxとなっています。（左右マージン3px）
右サイドバーは、AdSenseのレクタングル（中）サイズ（300x250）がフィットするようにするために300pxとなっています。
左右マージンが3pxあるので、フィットさせるには
<div style="margin:0px -3px;">プラグインのタグ</div>
のように内部に-3pxでmargin指定するとフィットします。


注意点
フッターに「position:fixed;」を使用しています。IE6では他のブラウザとかなり表示が違ってくると思います。（おかしな表示にはならないようにしたつもりです）
右サイドバーは「position:absolute」です。フッターが「position:fixed」なため、「position:fixed」に対応していないブラウザの場合「position:fixed」が無効になり、
左及び中央より右サイドバーの方が高さがある場合に右サイドバーとフッターが重なるかもしれません。
右サイドバーよりも常に左又は中の方が高くなるようにすることをおすすめします。
左サイドバーは「float:left」です。「width:200px」ですが、はみ出して200pxを越えた場合中央ブロックが下に落ちるかもしれません。
右サイドバーは「width:300px」ですが、300pxを越えた場合は中央と重なると思われます。
フッターとヘッダーに「max-height」を指定しています。はみ出したら表示されません。]]> 未選択 http://template001.blog.shinobi.jp/%E6%9C%AA%E9%81%B8%E6%8A%9E/%E5%B9%85%E5%8F%AF%E5%A4%89%EF%BC%93%E3%82%AB%E3%83%A9%E3%83%A0%20%EF%BC%88%E7%81%B0%EF%BC%89 Sun, 08 Feb 2009 15:58:17 GMT template001.blog.shinobi.jp://entry/4 幅可変３カラム （白）
プレビュー

幅可変の3カラムレイアウトのテンプレートです。
白系の色です。（背景色指定なし）

忍者ブログの共有テンプレートには、
レイアウト：3ブロック（左右メニュー）
テクニカル：SEO向け
で登録しています。

プラグインカテゴリーについて
プラグインカテゴリー１：左サイドバー
プラグインカテゴリー２：左サイドバー
プラグインカテゴリー３：右上（468x60のバナー程度の大きさの物の設置を想定）
プラグインカテゴリー４：中央上部（468x60のバナー程度の大きさの物の設置を想定）
プラグインカテゴリー５：左下（テキストの設置を想定）
です。

左サイドバーの横幅は200pxとなっています。（左右マージン3px）
右サイドバーの横幅は300pxとなっています。（左右マージン3px）
右サイドバーは、AdSenseのレクタングル（中）サイズ（300x250）がフィットするようにするために300pxとなっています。
左右マージンが3pxあるので、フィットさせるには
<div style="margin:0px -3px;">プラグインのタグ</div>
のように内部に-3pxでmargin指定するとフィットします。


注意点
フッターに「position:fixed;」を使用しています。IE6では他のブラウザとかなり表示が違ってくると思います。（おかしな表示にはならないようにしたつもりです）
右サイドバーは「position:absolute」です。フッターが「position:fixed」なため、「position:fixed」に対応していないブラウザの場合「position:fixed」が無効になり、
左及び中央より右サイドバーの方が高さがある場合に右サイドバーとフッターが重なるかもしれません。
右サイドバーよりも常に左又は中の方が高くなるようにすることをおすすめします。
左サイドバーは「float:left」です。「width:200px」ですが、はみ出して200pxを越えた場合中央ブロックが下に落ちるかもしれません。
右サイドバーは「width:300px」ですが、300pxを越えた場合は中央と重なると思われます。
フッターとヘッダーに「max-height」を指定しています。はみ出したら表示されません。]]> 未選択 http://template001.blog.shinobi.jp/%E6%9C%AA%E9%81%B8%E6%8A%9E/%E5%B9%85%E5%8F%AF%E5%A4%89%EF%BC%93%E3%82%AB%E3%83%A9%E3%83%A0%20%EF%BC%88%E7%99%BD%EF%BC%89 Sun, 08 Feb 2009 15:55:48 GMT template001.blog.shinobi.jp://entry/3 2番目の記事 ]]> 未選択 http://template001.blog.shinobi.jp/%E6%9C%AA%E9%81%B8%E6%8A%9E/2%E7%95%AA%E7%9B%AE%E3%81%AE%E8%A8%98%E4%BA%8B Thu, 11 Dec 2008 11:33:47 GMT template001.blog.shinobi.jp://entry/1 更新 ]]> 未選択 http://template001.blog.shinobi.jp/%E6%9C%AA%E9%81%B8%E6%8A%9E/%E6%9B%B4%E6%96%B0 Sun, 05 Nov 2000 00:02:58 GMT template001.blog.shinobi.jp://entry/8