レスポンシブWebデザインの新テーマ「newspaper」をリリースしました。
- 2012/03/05 14:30 JST
新テーマ「newspaper」は、「WAIproCSS Ver2.5.1 for Geeklog1.8.1」をベースにCSS3のMedia Queriesを使用したレスポンシブWebデザインのテーマです。PCは2カラム、iPad&iPod touchは中央ブロック1カラム&左右ブロック２カラムレイアウトになります。
テーマ「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に対応していないブラウザでは左右ブロックのリンク部分に付いている三角のアイコンが表示されないという感じになります。ですが、全体的イメージはそんなに変わりませんし、情報は正しく得られます。
また、IE8以下はMedia Queriesをサポートしていないので、対応させたいかたは「css3-mediaqueries-js」などのスクリプトを追加してください。
テーマ「newspaper」 Internet Explorer7のキャプチャ画像です。
また、サイトロゴのフォントは、Google Font APIを使って表示してます。
(Google Font APIについては、@yhassyさんのサイト「could」のGoogle Font API で手軽に始めるフォント遊びで詳しく説明されてます。)
テーマ「newspaper」も「WAIproCSS」と同様、アクセシビリティに配慮して作成しています。
このサイトはGeeklog1.7.1ですが、テーマ「newspaper」のデザインを見ていただく為に1.7.1仕様のテーマnewspaperをこのサイトに入れております。 テーマのお試しで「newspaper」を選んでいただくとテーマをご覧頂く事ができるので、参考にしてください。
表示と読み上げ確認について
次の環境で表示確認しております。
- Windows XP / Firefox 10.0.2,Google Chrome 17.0.936.56,Safari 5.1.2,Opera 11.61,Internet Explorer 6, 7, 8
- Windows 7 / Internet Explorer 9
- Mac OS X 10.7.2 / Firefox 9.0.1,Safari 5.1.2
- iPod touch iOS 5.0.1,iPad2 iOS 5.0.1
次の環境で読み上げ確認しております。
- Windows XP / PC-Talker XP,NVDA
- Mac OS X 10.7.2,iPod touch iOS 5.0.1,iPad2 iOS 5.0.1 / VoiceOver
新テーマ「newspaper」作成時に修正及び追加したファイルについて
この新テーマ作成時に修正した「WAIproCSS Ver2.5.1 for Geeklog1.8.1」のファイルは以下の7ファイルになります。
- header.thtml
- submit/submitstory_advanced.thtml
- comment/commentform_advanced.thtml
- admin/story/storystoryeditor_advanced.thtml
- admin/story/storystoryeditor_advanced.japanese_utf-8.thtml
- css/layout.css(40行目のmin-width: 37.5emを削除してます。)
- custom.css
追加ファイルは、以下の画像ファイル4枚とJavascript2ファイルになります。
- images/custom/bg_main_h2.gif
- images/custom/bg_side_h2.gif
- images/custom/blockquote_b.gif
- images/custom/blockquote_t.gif
- javascript/jquery-1.4.2.min.js
- javascript/jquery.flickable-1.0b3.js
テーマ「WAIproCSS」がバージョンアップした時の対処方法
バージョンアップした「WAIprCSS」をベースにし、custom.css以外のファイルはバージョンアップしたファイルとテーマ「newspaper」のファイルを見比べていただき、必要な箇所を修正してください。custom.cssは上書き保存し、上記追加ファイルを追加してください。
ご注意
バージョンアップした「WAIprCSS」の変更点(修正ファイル)が上記ファイルを含まない場合は、テーマ「newspaper」にバージョンアップした「WAIprCSS」の修正ファイルを上書き保存してください。
テーマ「newspaper」の注意点
Geeklog 1.8.1日本語パッケージ拡張版に梱包されているプラグインの表示確認はしておりますが、tableで構成されているプラグインの掲示板とカレンダーはテーマ側で横幅を修正出来ない為、iPod touchのサイズには対応していない事ご了承ください。(レイアウトは崩れますが、情報が欠けたり動作しないという事はありません)
また、ツールバー部分が入れ子のtableで構成されているアドバンストエディタは、iPod touchのサイズに対応させるのに(どうしても右端が見切れてしまう)CSSの修正では無理だったのでこのテーマはリリースできない…と諦めかけていたところiPhoneのようにフリック操作でスクロールできるjQueryプラグインつくったに辿り着きこちらの｢Default｣を使用させていただきましてiPod touchのサイズではアドバンストエディタ領域をドラッグとフリック操作でなんとか全部表示させる事が出来ました。
が、静的ページはプラグインなので私が(X)HTMLを修正する事が出来ず非対応になってます。こちらもご了承ください。(iPod touchのサイズではアドバンストエディタ以外の投稿モードで投稿ください)
このテーマを使用されるサイトの中で大き目の横幅(width)の値をpxで指定されている箇所がある場合レイアウトが崩れてしまう可能性が高いので、%かautoに変更してください。
ページネーションの｢最初｣や｢最後｣にスタイルを設定しないようにする場合、custom.cssに数字部分と同じデザインを消すスタイルを設定していますので、lib-common.phpを以下のように修正していただくと｢最初｣や｢最後｣の周りを囲う線等消えます。 マークアップは下記のように修正して欲しいとGeeklog Bugtrackerに要望を出しています。
＄retval .= '<span>' . COM_createLink(＄LANG05[7], ＄first_url . ＄last_url ) . '</span> ' . ' | ';
＄pg = '';
if( ( ＄curpage - 1 ) > 1 )
{
＄pg = ＄sep . ＄page_str . ( ＄curpage - 1 );
}
＄retval .= '<span>' . COM_createLink(＄LANG05[6], ＄first_url . ＄pg . ＄last_url ) . '</span> ' . ' | ';
}
else
{
＄retval .= '<span>' . ＄LANG05[7] . '</span> ' . ' | ';
＄retval .= '<span>' . ＄LANG05[6] . '</span> ' . ' | ';
}
for( ＄pgcount = ( ＄curpage - 10 ); ( ＄pgcount <= ( ＄curpage + 9 )) AND ( ＄pgcount <= ＄num_pages ); ＄pgcount++ )
{
if( ＄pgcount <= 0 )
{
＄pgcount = 1;
}
if( ＄pgcount == ＄curpage )
{
＄retval .= '' . ＄pgcount . ' ';
}
else
{
＄pg = '';
if( ＄pgcount > 1 )
{
＄pg = ＄sep . ＄page_str . ＄pgcount;
}
＄retval .= COM_createLink(＄pgcount, ＄first_url . ＄pg . ＄last_url) . ' ';
}
}
if( !empty( ＄open_ended ))
{
＄retval .= '| ' . ＄open_ended;
}
else if( ＄curpage == ＄num_pages )
{
＄retval .= '| ' . '<span>' . ＄LANG05[5] . '</span> ' . ' ';
＄retval .= '| ' . '<span>' . ＄LANG05[8] . '</span> ';
}
else
{
＄retval .= '| ' . '<span>' . COM_createLink(＄LANG05[5], ＄first_url . ＄sep
. ＄page_str . (＄curpage + 1) . ＄last_url) . '</span> ';
＄retval .= ' | ' . '<span>' . COM_createLink(＄LANG05[8], ＄first_url . ＄sep
. ＄page_str . ＄num_pages . ＄last_url) . '</span> ';
}
if( !empty( ＄retval ))
{
if( !empty( ＄msg ))
{
＄msg .= ' ';
}
＄retval = '<div class="pagenav">' . ＄msg . ＄retval . '</div>';ライセンスについて
新テーマ「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一般向けライセンスをご覧下さい。
テーマ「newspaper」のダウンロードについて
テーマ「newspaper」のダウンロードは、 Geeklog Japanese か White Stageダウンロードセクションからどうぞ。
テーマのインストールは、ひろろんさんが開発されたwkyGeeklogインストーラーの使用をお勧めします。
テーマが超簡単にインストール出来るwkyGeeklogインストーラーは、Hiroron Labsで配布されています。
そして、Hiroron Labsで「newspaper for geeklog1.8.1」のレシピをダウンロードし、そのファイルを wkyGeeklogインストーラー にドラックアンドドロップすれば簡単にテーマのインストールができます。