ブログテンプレートのスペック

検証済ブラウザとグレード

Bグレード以下にはモバイルブラウザでディスプレイサイズが小さいため “FULL HD 以上最適表示”の確認が出来ていないものも一旦含みます。

1. Safari 3.2 のメディアクエリは閲覧中のリサイズに非対応。
2. 

   IE5.5 以下でコメントの投稿が不可。

   IE8以下でコメントフォームが動かなくなっていました。 2018年9月12日

3. IE5.5 以下で Google Code Pritify が動作しない。
4. Opera12.17 は FULL HD 最適表示のみ。
5. Opera9.50 以降でページロード後の動的メディアクエリに対応 Media queries are now dynamic, allowing them to update when the window size is changed not just when the page loads
6. エミュレーションの IE5 では次のハックで .css が import されないため js で読み込んでいる

検証済ブラウザとグレード

Aグレード

Windows8 Firefox 43, Windows8 Chrome 47, Windows8 IE 10(11エミュレーション)～11, Android 2.3.5 (SBM101SH) Firefox 31.0, Android 4.1.1 (A071-D15A) Chrome 36.0, Android 5.1.1 (A071-D15A) Y!ブラウザ (Chrome WebView) 1.7.33

Bグレード

Windows XP Opera 12.19(*3)

Cグレード

Windows8 IE 9(11エミュレーション), WindowsXP Opera 11.00 10.54 10.10 9.64(*4), iOS4.2.1 (iPod touch 2G) Mobile Safari 4.2.1, Android 2.3.5 (SBM101SH) AOSP 2.3.5, Opera Classic 12.10, Android 4.1.1 (A071-D15A) AOSP 4.1.1

C-グレード

WindowsXP Safari(*1) 3.2.3(525.29), Opera 7 8 9.2-

Dグレード

WindowsXP IE 8, NDSi, Opera 9.2

Eグレード

WindowsXP IE(IETester) 6, 7

Fグレード

WindowsXP IETester 5.0(*5), 5.5(*2)

機能

1. レスポンシブレイアウトと印刷用スタイル
2. サムネイル画像のページ内での拡大表示
3. コードハイライト
4. コメントフォームのリクエスト最適化
5. 人気の記事、ページ一覧のアイテムが現在ページと一致した場合のハイライト
6. タブフォーカス(ie7-以下対応含む)
7. role属性(アクセシビリティ)
8. schema.org
9. The Open Graph protocol
10. そつがないリンクテキストのインタラクション

削り過ぎた機能

1. ソーシャルボタン
2. ブログのクイック編集リンク
3. アクセス解析
4. アドセンス広告

Javascript

次のライブラリを minify して一本化したものを全ページで読み込みます。

PicaThumbnail

クリックをトリガーにオリジナル画像へのリンク付きサムネイル画像を、オリジナル画像に置き換えます。Picasa Web Albumn の画像は表示エリアサイズに縮小したものがロードされます。やる気のない自作ライブラリです。

SidebarFixer

サイドバーをスクロールに合わせていい感じに固定します。オリジナルです。Github でソースを確認できます。

Google Code Pritify

Google 製のコードハイライターです。

メディア別 CSS

印刷用スタイル

検索ボックスやナビゲーションは印刷されません。トナーセーブに配慮し背景の塗りを極力排除します。

レスポンシブレイアウト

以下の情報は古いです。ファブレット用、オーバーフルHD用のレイアウトを追加しています。

デフォルトの“PC・タブレット横向き用”に加えて次のレイアウトを持ちます。

1. FULL HD 用
2. タブレット縦向き用(スマートフォン横向き用)
3. スマートフォン縦向き用
4. スマートウォッチと handheld 用

1. FULL HD 用

メインコンテンツが2段組になります。(非デザイナーがチャチャッと野暮ったいブログを修正してみた)

@media screen and (min-width: 96em) {/* */}

2. タブレット縦向き用(スマートフォン横向き用)

右カラムが下に落ちてシングルカラムになります。ナビゲーションが2段組になります。

@media print, handheld, screen and (max-width: 950px) {/* */}

3. スマートフォン縦向き用

ナビゲーションの段組が解除されます。余白が狭まります。

@media handheld, screen and (max-width: 479px) {/* */}

4. スマートウォッチと handheld 用

背景が黒になり余白が0になります。(Web サイトのスマートウォッチ対応はお済みですか？)

@media handheld, screen and (max-width: 240px) {/* */}

バンドルマークアップ

ブログのテーマに沿って次のバンドルマークアップを用意しています。

1. オブジェクトの整列とテキスト回り込み
2. コードハイライト
3. 引用ブロック
4. リンクリスト
5. aa と AA
6. ノート

通常の要素とバンドルマークアップの包含関係は次のページと記事を確認ください。

1. オブジェクトの整列とテキスト回り込み

オブジェクト(画像, iframe, embed, object, video) の整列とテキスト回りこみには .box を使用します。

オブジェクトの整列

ギャラリーのようにして複数の画像を並べたい場合に使用します。オブジェクトの高さを揃えると綺麗に整列させることができます。

<div class="box">
  <img src="01.jpg">
  <img src="02.jpg">
  <img src="03.jpg">
  <img src="04.jpg">
  <img src="05.jpg">
</div>

テキストの回り込み

オブジェクトに対してテキストを回り込ませます。

またオリジナル画像へのリンク付きのサムネイル画像はクリックでボックス幅まで引き伸ばすことができます。これは PicaThumbnail で実現しています。

<div class="box">
  <a href="original.jpg"><img src="thumbnail.jpg"></a>
  <p>回り込みテキスト1
  <p>回り込みテキスト2
</div>

2. コードハイライト

Google Code Pritify でプログラムコードをハイライトします。

<pre class="prettyprint lang-js"><code>
</code></pre>

3. 引用ブロック

引用箇所と出典は次のように表示・マークアップします。

引用テキスト

<blockquote title="引用元タイトル" cite="//outcloud.blogspot.com/">
<p>引用テキスト
</blockquote>

4. リンクリスト

ハイパーリンクを列挙する際や際立たせる際に使用します。

ブログ内のリンクには +、外部リンクには >、Web アーカイブスへのリンクには * が付与されます。

<div class="links"><a href="/">ホームへ</a>
</div>

5. aaと日本語アスキーアート

ASCII art (aa)

主に図示を簡単に行いたい場合に使用しています。

A-+-B
  |
  +-C

<pre class="aa">A-+-B
  |
  +-C
</pre>

日本語アスキーアート

日本語アスキーアートの例とそのマークアップです。

明日はがんばろう
　∧＿∧
（ ´・ω・`)　 (○)
,( ヽ∩∩ノ),、ヽ|〃,,,
“““ ““ ““ ““ ““ ““ ““ “``““ ““

<pre class="mona">明日はがんばろう
　∧＿∧
（ ´・ω・`)　 (○)
,( ヽ∩∩ノ),、ヽ|〃,,,
“““ ““ ““ ““ ““ ““ ““ “``““ ““
</pre>

6. ノート

寄り道的内容や補足事項に使用します。

<div class="note">
<p>脇道的内容や補足記事です。
</div>