本文へ


レスポンシブでアクセシブルなGeeklogのテーマ「newspaper1.2 for 2.1.0」をリリースしました。

  • 2014/12/27 21:15 JST

レスポンシブでアクセシブルなGeeklogのテーマ「newspaper」は、「WAIproCSS Ver2.7.1 for Geeklog2.1.0」をベースに作成したテーマです。PCは2カラム、iPad&iPod touchは中央ブロック1カラム&左右ブロック2カラムレイアウトになります。

キャプチャ画像:テーマnewspaper3種のデバイス表示例
テーマ「newspaper」 PC・iPad・iPod touchのキャプチャ画像です。

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

  • リキッドレイアウトは大画面で閲覧すると横幅が伸びてしまい文章が読みにくくなってしまいますが、このテーマは、コンテンツの幅が一定の数値を超えるとそれ以上広がらないように設定しているので可読性を保てます
  • どのデバイスで見てもデザインに大きな違いがないのでイメージが変わらずユーザーが迷う事もありません
  • 横幅の小さいiPhoneサイズでもPCで表示させている情報と同様の情報を表示させているのでiPhoneでアクセスしても情報が欠けることがありません
  • デザインの変更があっても(X)HTMLは1つなのでCSSのみの修正だけで済むので作業効率が良いです
  • <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> と記述すればiPad等で解像度を最大限にいかせるのですが、デフォルトでのピンチアウト・ピンチイン(拡大・縮小)の操作が出来なくなるので(設定のアクセシビリティズーム機能をオンにすれば拡大可能)デフォルトでのピンチアウト・ピンチインが出来るようあえて <meta name="viewport" content="width=device-width" /> としています。
  • iPad・iPod touchでのユーザビリティを考慮し、input(送信等)などのボタンはタッチしやすいよう大きくしています。

テーマ「newspaper」の特徴

  • このテーマもMedia Queries以外のCSS3を使用しており「プログレッシブ エンハンスメント」を取り入れてます。
    ですので、CSS3に対応していないブラウザでは左右ブロックのリンク部分に付いている三角のアイコンが表示されないという感じになります。ですが、全体的イメージはそんなに変わりませんし、情報は正しく得られます。

    キャプチャ画像:IE7でテーマnewspaperを表示した場合
    テーマ「newspaper」 Internet Explorer7のキャプチャ画像です。

  • サイトロゴのフォントは、Google Font APIを使って表示してます。
  • テーマ「newspaper」も「WAIproCSS」と同様、アクセシビリティに配慮して作成しています。

テーマ「newspaper」の注意点

  • Geeklog 2.1.0日本語パッケージ拡張版に梱包されているプラグインの表示確認はしておりますが、tableで構成されているプラグインでテーマ側で横幅を修正出来ないものについては、 iPhoneのサイズには対応していない事ご了承ください。(レイアウトは崩れますが、情報が欠けたり動作しないという事はありません)
  • facebookの窓 等 横幅を絶対値で指定している箇所がある場合、その数値(横幅)より小さいサイズのデバイスで閲覧すると横スクロールバーが出てしまうかレイアウトが崩れる可能性があるのでご注意ください。(ご自身で横幅を調整してください)

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

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

  • Windows 7 / Firefox34.0.5,Google Chrome39.0.2171.95,Opera26.0,Internet Explorer 11
  • Mac OS X 10.7.5 / Firefox 34.0.5,Safari 6.1.6
  • iPod touch iOS 5.0.1,iPad2 iOS 8.1.2,Android4.4.2

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

  • Windows 7 / PC-Talker 7,NVDA
  • Mac OS X 10.7.5,iPod touch iOS 5.0.1,iPad2 iOS 8.1.2 / VoiceOver,Android4.4.2 / Talkback

ライセンスについて

テーマ「newspaper」のライセンスは、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一般向けライセンスをご覧下さい。

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

テーマ「newspaper1.2_for_2.1.0」のダウンロードは、White Stageダウンロードセクションからどうぞ。