管理人ブログ
無料ブログ「rentafree.net」の管理人ブログ

1-2-3カラム・ハイブリッド

PCでもモバイル端末でも閲覧しやすいレイアウトに変化するテンプレートです。

幅可変で、
960px未満: 1カラム
960px-1200px: 2カラム
1200px以上: 3カラム
とレイアウトが変化します。

1440pxを超える場合は全体が1440pxで中央寄せとなります。

記事領域等、領域ごとに枠が付く感じになります。

プラグイン
位置番号
表示位置
備考
0
<head>内
メタデータやスクリプトを埋め込むのに使用してください。
1
左サイドバー
サイドバーは300pxで、あふれる部分は非表示となります。見出しが設定されている場合は見出しが表示されます。960px未満の場合は上部にタブ表示となります。
2
右サイドバー
サイドバーは300pxで、あふれる部分は非表示となります。見出しが設定されている場合は見出しが表示されます。1200px未満の場合は左に表示されます。960px未満の場合は上部にタブ表示となります。
3
中央上部記事のある中央領域の上部に表示されます。
4
記事下追記とフッタの間に表示されます。一番目の記事のみ表示。
5
記事下追記とフッタの間に表示されます。
6
中央下部記事のある中央領域の下部に表示されます。
7
右上ブログ全体の右上に表示されます。
8
左下ブログ全体の左下に表示されます。
9
記事上記事タイトル下で記事本文より上に表示されます。

[注意事項]
CSS Media Queriesに対応していないブラウザ（IE8以下）の場合、画面サイズに関係なく1カラムで表示されます。
画面サイズによりレイアウトが大きく変化するので使用する場合はWindowサイズを変更してどのように表示されるかよく確認してください。
タブ型プラグインはJavaScriptが無効のブラウザでは利用できません。
タブ型プラグインは見出しがタブになるので、見出しの設定されていないプラグインは表示できません。
このテンプレートはモバイル端末の自動ズームを無効にしています。（手動ズームは有効）
１カラムでタブを操作してからwindowサイズを変更して２カラムにした場合、DOM MediaQueryListに対応していないブラウザ（IE9）では、操作済みタブの内容が異常な位置に表示されます。