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

新しい公式テンプレートを微調整

昨日新しく作成した画面サイズによりレイアウトが変化する公式テンプレートですが、
800px未満で1カラムになるようにしていましたが、
中央の記事領域は、できれば468px以上確保したいと考えていますが、
再計算してみましたら、1280x800のタブレットで縦表示したら横800pxとなりますが、
その際に2カラムになると記事領域が若干足りない感じでしたので、
800px未満ではなく850px未満で1カラムになるように変更しました。

その他に、昨日の時点で行なっていますが、
最初の公開時は1カラム時のタブ型プラグインの枠線が1px blackでコンテンツ表示領域の背景がghostwhiteとなっていましたが、
タブ以外の部分の配色に合わせて、枠線を2px silver、コンテンツ表示領域の背景をwhiteに変更しました。


まだ微調整は入れるかもしれません。

新しい公式テンプレートを用意しました。

スマートフォンやタブレットが無視できないほど普及していますので、
以前から少画面タッチパネル端末を考慮した1カラムの公式テンプレートを用意していましたが、
PCを考慮すると1カラムテンプレートを使用するのはどうかと思いますので、
画面サイズにより1,2,3カラムに変化する公式テンプレートを用意しました。

その他に、

標準テンプレート → 2カラム・フルサイズ
標準3カラム → 3カラム・フルサイズ
に名称を変更しました。

管理人ブログに公式テンプレートの一覧と各テンプレートの詳細な仕様を説明したページを用意しました。


新しいテンプレートは注意事項がありますので、
使用する前に詳細説明ページを確認してください。

公式テンプレート一覧

ブログの公式テンプレートの仕様の詳細説明です。
公式テンプレートは、個人テンプレート作成の際のベースにしやすいように、全てシンプルな配色でレイアウトの違うものを用意しています。


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

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

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

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

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

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

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

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が無効のブラウザでは利用できません。
タブ型プラグインは見出しがタブになるので、見出しの設定されていないプラグインは表示できません。
このテンプレートはモバイル端末の自動ズームを無効にしています。(手動ズームは有効)
1カラムでタブを操作してからwindowサイズを変更して2カラムにした場合、DOM MediaQueryListに対応していないブラウザ(IE9)では、操作済みタブの内容が異常な位置に表示されます。

記事枠付き右サイドバー

幅可変ですが、最大横幅1000pxで、余る場合は中央寄せとなります。
右サイドバーの2カラムテンプレートです。

記事領域等、領域ごとに枠が付く感じのテンプレートです。

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

記事枠付き左サイドバー

幅可変ですが、最大横幅1000pxで、余る場合は中央寄せとなります。
左サイドバーの2カラムテンプレートです。

記事領域等、領域ごとに枠が付く感じのテンプレートです。

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

モバイル最適化1カラム

注: このテンプレートは公式テンプレートから外されました。


幅可変ですが、最大横幅1000pxで、余る場合は中央寄せとなります。
サイドバーのない1カラムテンプレートです。

プラグインはサイドバーの代わりに上部にタブ表示します。

横幅999px以下の場合は記事本文が表示されずに、タッチパネルを考慮した見出しクリックで展開されるタイプに変化します。
ただし、このタイプのUIがタッチパネルに適しているのか疑問です。

プラグイン
位置番号
表示位置
備考
0
<head>内
メタデータやスクリプトを埋め込むのに使用してください。
1
上部タブ
タブ型ですのでクリックするまで表示されません。
2
-
表示されません。
3
中央上部記事のある中央領域の上部に表示されます。
4
記事下追記とフッタの間に表示されます。一番目の記事のみ表示。
5
記事下追記とフッタの間に表示されます。
6
中央下部記事のある中央領域の下部に表示されます。
7
-表示されません。
8
-
表示されません。
9
記事上記事タイトル下で記事本文より上に表示されます。

[注意事項]
タブ型プラグインはJavaScriptが無効のブラウザでは利用できません。
タブ型プラグインは見出しがタブになるので、見出しの設定されていないプラグインは表示できません。
JavaScriptが無効で999px未満のブラウザでは見出しクリックで展開されずリンクとなります。
このテンプレートはモバイル端末の自動ズームを無効にしています。(手動ズームは有効)

中央寄せ1カラム

幅可変ですが、最大横幅1000pxで、余る場合は中央寄せとなります。
サイドバーのない1カラムテンプレートです。

プラグインはサイドバーの代わりに上部にタブ表示します。

プラグイン
位置番号
表示位置
備考
0
<head>内
メタデータやスクリプトを埋め込むのに使用してください。
1
上部タブ
タブ型ですのでクリックするまで表示されません。
2
-
表示されません。
3
中央上部記事のある中央領域の上部に表示されます。
4
記事下追記とフッタの間に表示されます。一番目の記事のみ表示。
5
記事下追記とフッタの間に表示されます。
6
中央下部記事のある中央領域の下部に表示されます。
7
-表示されません。
8
-
表示されません。
9
記事上記事タイトル下で記事本文より上に表示されます。

[注意事項]
タブ型プラグインはJavaScriptが無効のブラウザでは利用できません。
タブ型プラグインは見出しがタブになるので、見出しの設定されていないプラグインは表示できません。
このテンプレートはモバイル端末の自動ズームを無効にしています。(手動ズームは有効)

中央寄せ右サイドバー

幅可変ですが、最大横幅1000pxで、余る場合は中央寄せとなります。
右サイドバーの2カラム。

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