レスポンシブWebデザインでアクセシブルなHTML5のGeeklogテーマ「square」は、「WAIproCSS Ver2.7.1 for Geeklog2.1.0」をベースに作成したテーマです。PCは2カラム、タブレットやスマートフォンでは1カラム(iPadとAndroidのlandscapeは左右ブロック２カラム)レイアウトになります。

テーマ「square」 PC・iPad・iPod touchのキャプチャ画像です。

テーマ「square」のデザインを見ていただく為だけにダウングレードしたテーマsquareをこのサイトに入れております。 (このサイトは、HTML5に対応していないので、XHTML 1.0にしています) テーマのお試しで「square」を選んでいただくとテーマをご覧頂く事ができるので参考にしてください。

尚、このサイトでは見出しとグローバルナビゲーションにWebフォントを使用していますが、 同じフォントをテーマに梱包する事は出来ませんので、Webフォントを利用されたいかたはご自身のサイトで適用してください。

テーマ「square_for_2.1.0」のダウンロードについて

テーマ「square_for_2.1.0」のダウンロードは、GitHub/milk54/geeklog-square又はWhite Stageダウンロードセクションからどうぞ。

レスポンシブWebデザインテーマ「square」の利点

• 管理画面もテーマ側で可能な限りアクセシブルにしている「WAIproCSS」が反映されているので、スマートフォンでも更新が楽に出来ます。
• 横幅の小さいiPhoneサイズでもPCで表示させている情報と同様の情報を表示させているのでiPhoneでアクセスしても情報が欠けることがありません
• デザインの変更があっても(X)HTMLは1つなのでCSSのみの修正だけで済むので作業効率が良いです
• タブレット・スマートフォンでのユーザビリティを考慮し、input(送信等)などのボタンはタッチしやすいよう大きくしています。

テーマ「square」の特徴及び仕様

• 大画面での可読性を考慮し、横幅は1920px以上広がらないよう設定しています。
• jQueryの「jquery.tile.js」プラグインを使用して、PC版トップページメイン部分のブロックの高さを揃えています。
• 横幅785以下の環境ではWAI-ARIAを使用したドロワーメニューを使用しています。(よりアクセシブルになるようほんの少し改良しています)
• ドロワーメニューを開いた時は、「×」ボタン又はメニューを選択するまではフォーカスはグローバルナビゲーション内のみの移動になります。
• テーマ「square」も「WAIproCSS」と同様、アクセシビリティに配慮して作成しています。

テーマ「square」のアクセシビリティについて

• JIS X 8341-3:2010の7.1.4.3 最低限のコントラストに関する達成基準(等級AA)の基準を満たしています。
• 7.1.4.4 テキストのサイズ変更に関する達成基準 (等級AA)の基準を満たしています。(jQueryの「jquery.tile.js」プラグインを使用している為、画面幅を変更した場合再読み込みが必要です)
• 7.2.1.1 キーボード操作に関する達成基準(等級A)の基準を満たしています。
• ナビゲーションスキップを設置しています。 (ページを表示した後Tabキーを押すと表示されます)
  尚、横幅785以下の環境ではドロワーメニューを使用しているので、ナビゲーションスキップは非表示且つスクリーンリーダーで読み上げないように設定してます。
• ドロワーメニューを開閉するボタン(アイコン)部分は、視覚的には「menu」「close」とCSSで表示させ、スクリーンリーダーでは「ナビゲーションメニュー」と読み上げる様に設定しています。また、a要素がボタンである事をWAI-ARIAを使用して示しています。
• ドロワーメニューの開閉の状態は、aria-expanded属性を使用して示しています。aria-expanded属性に対応しているスクリーンリーダーでは、開閉ボタンにフォーカスした時に「折り畳み」「展開」のように読み上げます。
• ドロワーメニュー使用時のグローバルナビゲーションは、閉めている時は視覚的に表示せず、スクリーンリーダーでも読み上げないようにし、aria-hidden="true"を使用して表示していない事を示しています。
• ドロワーメニューが閉まっている時は、グローバルナビゲーションを視覚的にも表示させずスクリーンリーダーでも読み上げないようにしているので、下部にクローンを作成しています。クローンは視覚的には表示せずスクリーンリーダーでは読み上げる様にしています。

テーマ「square」の注意点

• 管理画面のコンフィギュレーション > テーマの拡張設定タブにある"右ブロックを常に表示する"を「いいえ」にして使用してください。
  (「はい」にするとレイアウトが崩れてしまいますのでご注意ください！)
• Geeklog 2.1.0日本語パッケージ拡張版に梱包されているプラグインの表示確認はしておりますが、tableで構成されている又はCSSでfloatを使用しているプラグインについては、 スマートフォンのサイズには対応していない事ご了承ください。(情報が欠けたり動作しないという事はありませんが、レイアウトは崩れはご自身で調整してください)
• facebookの窓 等 横幅を絶対値で指定している箇所がある場合、その数値(横幅)より小さいサイズのデバイスで閲覧すると横スクロールバーが出てしまうかレイアウトが崩れる可能性があるのでご注意ください。(ご自身で横幅を調整してください)

トップページのみイメージ画像を表示する方法

静的ページでIDを「site_image」、話題を「ホームページのみ」、投稿モードを「HTML」にし、センターエリアやブロックで囲むにはチェックを入れず、 内容を

<div  class="top-image"><img src="/layout/square/images/custom/site_image.png" alt="" width="1541" height="91"></div>

と記述し、表示エリアを「ページの最上部」として(後は変更なしです。タイトルは分かりやすいものであれば何でも良いです。)保存してください。

画像を変更される場合は、幅1541px高さ91pxの独自画像を用意し、ファイル名「site_image.png」とした画像を テーマフォルダのimages/custom/ に上書き保存してください。

ロゴ画像を変更する方法

幅285px高さ38px、ファイル名「logo.png」のロゴ画像をテーマフォルダのimages/custom/ に上書き保存してください。

ロゴ画像をテキストに変更する方法

header.thtmlファイルの31行目

<h1 class="site_name"><a href="{site_url}"><img src="{layout_url}/images/custom/logo.png" width="285" height="38" alt="{site_name}"{xhtml}><!-- {site_name} --></a></h1>

を下記のように変更して下さい。↓

<h1 class="site_name"><a href="{site_url}"><!-- <img src="{layout_url}/images/custom/logo.png" width="285" height="38" alt="{site_name}"{xhtml}> -->{site_name}</a></h1>

表示と読み上げ確認について

次の環境で表示確認しております。

• Windows 7 / Firefox39.0.3,Google Chrome44.0.2403.130,Internet Explorer 11 10 9
• Mac OS X 10.10.4 / Firefox 39.0.3,Google Chrome44.0.2403.130,Safari 8.0.7
• iPod touch / iOS 8.4 Safari,iPad2 / iOS 8.4 Safari,GALAXY SC-04E / Android4.4.2 標準ブラウザ・Chrome44.2.2403.133

次の環境で読み上げ確認しております。

• Windows 7 / Internet Explorer 11 PC-Talker7(Internet ExplorerがHTML5のアクセシビリティに対応しきれていないのが原因でブロックごとに2度読みしますが、 PC-Talker側で修正がかかり次のベータ版で不具合は解消される予定です。 詳しくは「HTML5のサイトをIEを使用しPC-Talker7で読み上げた際の不具合見つけたよ」をご覧ください),Firefox39.0.3 NVDA2015.1jp
• iPad2 / iOS 8.4 Safari VoiceOver,GALAXY SC-04E / Android4.4.2 標準ブラウザ Talkback

ライセンスについて

テーマ「square」のライセンスは、WAIproCSSのライセンスに準じます。WAIproCSSのライセンスは下記の通りになります。

This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software　Foundation; either version 2 of the License, or (at your option) any laterversion.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

--日本語訳--

このプログラムは、フリーソフトウェアです。フリーソフトウェア財団が発表しているようにGNU一般向けライセンスの条件の下で。再配布するか、修正する事が出来ます。

ライセンスのバージョン2.0、もしくは(オプションによっては)それ以降のバージョンをご使用下さい。

このプログラムは、お役に立てる事を願って配布されていますが、何の保証もないプログラムです。特定の目的の為に販売または他のプログラムに適合させるという保障は含まれておりません。詳細は、GNU一般向けライセンスをご覧下さい。