/*============================================================================== タイトル : Geeklog用WAIproCSSテーマ バージョン: 2.7.0 for Geeklog2.1.0 著者 : Hisakatsu Katoh as ネット素浪人 (contact is katoq.AT.b-lines.DOT.jp) Masuko koeda as みるく(http://white-stage.com/) 説明 : Geeklog用のテーマ「ProfessionalCSS」を基本に, アクセシィビリティに配慮した「WAIproCSS」です。 　　　　　　　音声でのネットサーフを考慮し、左右ブロックより先にメインコンテンツ（中央ブロック）を読み上げさせる（認識させる）ため、ヘッダ領域に記述されていた左ブロックをフッタ領域に移動させ記事(中央ブロック)を先読みさせています。 　 音声で読み上げないようにする記述をしている部分があります（ホームページリーダー3.02では未対応の様子です）。現今、ＯＳでの音声読み上げが普及の兆しを見せているため記述しておきます。 　CSSで視覚上は左ブロック→中央ブロックー右ブロックの順にしています。 　レイアウトは、エラスティックレイアウト(em指定)を使用しているので、テキストズームで拡大された時でもレイアウトの崩れはほとんどないので、文字が読みやすくなっています。 ==============================================================================*/ /*============================================================================== 目次: *謝辞 *概要 *ライセンス *インストール方法 *ファイル・ディレクトリ構成 *テンプレートファイル: コメント *CSS: CSSファイル構成・カスケード順序 *CSS: プロパティ記述順序 *カスタマイズ方法 *バージョン履歴 ==============================================================================*/ /*============================================================================== 謝辞 ==============================================================================*/ 　壮大な夢に応えてくださる みるくさんと、開発に協力いただいている視覚障がい者の仲間へ。 　そして、本WAIproCSSテーマを開発するにあたり、その基本となるProfessionalCSSを開発されたFumito Arakawa(Phize)さんに、感謝申し上げます。ウェブサイト作成にあたって、重要な要件となる文書の論理構造と表示（デザイン）手段について、完全な分離を行っていただいていることによって、よりユニバーサルでバリアフルなテーマ開発を行う決意を持たせていただいたことは我々にとっても障害を持った方々のあらゆる意味での社会参加に繋がっています。 　Geeklogが今後も続けてオープンソースであり続けることを期待し、またここから新たなテーマ開発を試みていただけることを希望し、Fumito Arakawaさんへの謝辞とさせていただきます。 　　　　　　　　b-lines.jp（Ｂ-Ｌｉｎｅ事業）担当　加藤　久勝 テーマ「WAIproCSS」発表後にフィードバックしていただいたPhizeさんaugeさん、発表前からアドバイスしていただいたkinoさんaugeさんには心から感謝いたします。 そして、B-Lineの音声読み上げソフト利用者であるリリーズ姉さんとIT講師をされているk先生に、テーマ「WAIproCSS」を評価していただけた事でバージョンアップさせる事が出来ました。 リリーズ姉さんとIT講師のk先生にも心から感謝申し上げます。また、音声読み上げソフト利用者の方の生の声を聞く機会を作ってくださった加藤さん、市田さんにもお礼申し上げます。 　　　　　　　 Geeklog1.5.0、Geeklog1.5.1に対応させるにあたり、大変お世話になりましたひろろんさんには心からお礼申し上げます。 WAIproCSS Ver.2.3、Ver.2.4をリリースするにあたり、Geeklog開発者の皆様とGeeklogメンバーのかたがたに多大なご協力をいただきましたことを心より感謝申し上げます。 　　　　　　　Masuko koeda as みるく(http://white-stage.com/) /*============================================================================== 概要 ==============================================================================*/ Geeklog用のテーマ「WAIproCSS」です。 Geeklogのテーマである「ProfessionalCSS」のデザインを元に、 音声でのネットサーフ（音声読み上げ）を考慮し、ヘッダ領域に含まれていた左ブロックをフッタ領域に移動させ記事(中央ブロック)を先読みするようになっています。 CSSでの表示（視覚上）は左ブロック→中央ブロックー右ブロックの順にしています。 また、グローバルナビゲーションと左右ブロックの聞き飛ばしが出来るようページ内リンクを設定しています。聞き飛ばしの部分はCSSで視覚上は見えないように設定しています。 (音声の読上げを確認するのにホームページリーダー3.04を使用、Ver.2.4.0からPC-Talker XP、その後PC-Talker7を使用) 音声で読み上げないようにする記述をしている部分があります（ホームページリーダー3.02では反映されません）。今後ＯＳ標準でスクリーンリーダー（画面読み上げ）が普及の兆しであるので記述しておきます。 音声読上げソフトを利用されている方が、メニューなどを聞き飛ばした後、現在地がわかるよう「ここから記事」のようなテキストを入れてあります。 レイアウトのサイズ指定方法は、エラスティックレイアウト(em指定)を使用しているので、テキストズームで拡大・縮小された時でもレイアウトの崩れはほとんどないので、文字が読みやすくなっています。 (「Windows 7 Internet Explorer8,9,10,11の拡大レベル200%、Opera21.0のズーム200%、 Firefox30.0の文字サイズだけ変更拡大×３及び拡大×４、Google Chrome36.0.1985.125のText Zoom拡大×４」「Mac OS X バージョン10.7.5 Safari6.1.5のテキストのみ拡大×４及び拡大×４、Firefox30.0の文字サイズだけ変更拡大×３及び拡大×４」で確認) 配色は、コントラストや色差、明度差に配慮しています。 聴覚障害の方が情報を理解しやすいように、レイアウトが解りやすいデザインにしています。 (Jun [Wrong HTML] & スティーブン・フォルナー[AIS]開発のカラー・コントラスト・アナライザー、IBMのaDesigner、富士通のColorSelector5.1使用) アクセスキーも導入しております。 accesskey属性は、アンカーにその属性として任意の文字を指定する事によって、 Altキー（MacであればCtrlキー）とその任意の文字との組み合わせを押す事でアンカーのリンク先への移動を マウスを用いることなく出来るようにする属性です。 リンク先とアクセスキーの対応は以下の通りです。なお，ブラウザごとのアクセスキーの利用方法と併せてご覧ください。 キー：英語のt　リンク先：ホーム キー：英語のj　リンク先：Geeklog Japanese ブラウザごとのアクセスキーの利用方法 Windows Alt+アクセスキー Mac Ctrl+アクセスキー 記事が１件もない場合は、中央ブロックに設定している左右の縦線が表示されないという事と、左カラムの内容が長すぎる時にセンターブロック用の分離線が途中切れになってしまのは仕様です。 新しいテーマを制作する際のベーステーマとしてもご利用いただけます。 なお、システムとの整合性を保つため、マークアップ、命名規則等はGeeklog側に合わせている部分があります。 /*============================================================================== ライセンス ==============================================================================*/ 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. /*============================================================================== インストール方法 ==============================================================================*/ 「WAIproCSS」テーマのlayoutフォルダをGeeklogの公開ディレクトリにコピーします。 +Geeklog(公開ディレクトリ) +layout -- コピー --> +layout +WAIproCSS /*============================================================================== ファイル・ディレクトリ構成 ==============================================================================*/ +layout ------------ Geeklogテーマディレクトリ +WAIproCSS ------ 「WAIproCSS」テーマディレクトリ +admin +article +breadcrumbs +comment +custommenu +lists +navbar +preferences ---- テンプレートファイル・ディレクトリ +profiles +search +stats +submit +trackback +users +css ----------- CSSディレクトリ | | ディレクトリ構造はテンプレートファイルのディレクトリと対応しています。 | | | +plugin ------ プラグイン用CSSディレクトリ | | プラグイン用のCSSファイルが入っています。 | +forum.css 掲示板プラグイン用CSSファイル | Geeklog Japaneseパッケージのものを修正して使用しています。 | +images -------- 画像ディレクトリ | | | +css --------- CSSファイル用画像ディレクトリ | CSSで使用する画像ファイルが入っています。 | +javascript ---- JavaScriptディレクトリ | | | +fix_html.js - Geeklogのカラム数に応じてbody要素のclass属性を書き換えます。 | +jquery_ui | +README -------- 「WAIproCSS」テーマのドキュメント(このファイル) | +style.css ------------ CSSファイルのインポート用CSSファイル | +custom.css ----------- カスタマイズ用CSSファイル | +custom.sample.css ---- カスタマイズ用CSSファイル(サンプル) /*============================================================================== テンプレートファイル: コメント ==============================================================================*/ テンプレート(.thtml)ファイルには下記のコメントを挿入しています。 ・テンプレートファイル名 全てのテンプレートファイルの先頭と末尾にテンプレートファイル名を挿入しています。 (内容) 特定バージョンのGeeklog用に記述されている箇所には、下記の形式でコメントを挿入しています。 　・Geeklog Japanese または、 ～ 　・Ver.x.x.xより大きい または、 ～ 　・Ver.x.x.x以上 または、 ～ 　・Ver.x.x.x または、 ～ 　・Ver.x.x.x以下 または、 ～ 　・Ver.x.x.xより小さい または、 ～ /*============================================================================== CSS: CSSファイル構成・カスケード順序 ==============================================================================*/ +style.css -------------------------- header.thtml内のlink要素によって読み込まれます。 +css/default.css ------------------ デフォルトスタイル W3CによるCSS 2.1 仕様書 Appendix Dの推奨デフォルトスタイルで上書きします(一部を除く)。 URI: http://www.w3.org/TR/2004/CR-CSS21-20040225/sample.html +css/common.css ------------------- 共通スタイル サイト全体のスタイルです。 +css/layout.css ------------------- 基本レイアウトスタイル +css/block.css -------------------- ブロックスタイル +css/option.css ------------------- オプションメニュースタイル +css/form.css --------------------- フォームスタイル +css/story.css -------------------- 記事スタイル +css/article/article.css ---------- 個別記事ページスタイル +css/comment/comment.css ---------- コメントスタイル +css/navbar/navbar.css ------------ ナビゲーションスタイル +css/preferences/preferences.css -- 設定ページスタイル +css/search/search.css ------------ 検索ページスタイル +css/stats/stats.css -------------- アクセス情報ページスタイル +css/submit/submit.css ------------ 投稿ページスタイル +css/trackback/trackback.css ------ トラックバックスタイル +css/users/users.css -------------- アカウント情報ページスタイル 管理者ページスタイルシート +css/admin.css -------------------- インポート用スタイルシート(管理者ページ) +css/admin/common.css ----------- 共通スタイル(管理者ページ) +css/admin/block.css ------------ ブロックエディタスタイル(管理者ページ) +css/admin/group.css ------------ グループエディタスタイル(管理者ページ) +css/admin/lists.css ------------ リストスタイル(管理者ページ) +css/admin/commandcontrol.css --- 管理画面スタイル(管理者ページ) +css/admin/plugins.css ---------- プラグインページスタイル(管理者ページ) +css/admin/story.css ------------ 記事エディタスタイル(管理者ページ) +css/admin/topic.css ------------ 話題エディタスタイル(管理者ページ) +css/admin/trackback.css -------- トラックバックページスタイル(管理者ページ) +css/admin/user.css ------------- ユーザエディタスタイル(管理者ページ) +css/admin/configuration.css ---- コンフィギュレーションページスタイル(管理者ページ) プラグインスタイルシート +css/plugin.css ------------------- インポート用スタイルシート(プラグイン) +css/plugin/sitecalendar.css ---- サイトカレンダスタイル(プラグイン) +css/plugin/japanize.css ----------- Japanizeスタイル(プラグイン) カスタムテーマスタイルシート +custom.css ----------------------- カスタムテーマスタイルシート サンプルとして、custom.sample.cssを同梱しています。 /*============================================================================== CSS: プロパティ記述順序 ==============================================================================*/ 一部の例外を除き、CSSのプロパティは下記の順序で記述されています。 *display *visibility *overflow *list-style *position *float *clear *top right bottom left *width *height *margin *padding *border *background color image repeat position attachement *color *font style variant weight size line-height family *text-decoration *text-align *vertical-align *white-space *other text *quotes *content /*============================================================================== カスタマイズ方法 ==============================================================================*/ WAIproCSSテーマでは、表現に関する制御をCSSで行っているため、テンプレートファイルに手を加えることなく、簡単にテーマをカスタマイズすることができます。 基本的なレイアウト・デザインは、下記のCSSファイル内で定義されたスタイルを変更するだけでカスタマイズが行えるようになっています。 +css ------------- CSSディレクトリ +common.css ---- 共通スタイル +layout.css ---- 基本レイアウトスタイル +block.css ----- ブロックスタイル +option.css ---- オプションメニュースタイル +form.css ------ フォームスタイル +story.css ----- 記事スタイル WAIproCSSテーマをベースにしたカスタマイズを行うには、上記や「CSS: CSSファイル構成・カスケード順序」のCSSファイルを直接、編集するほかに、別途、専用のCSSファイルを用意してカスタマイズする方法があります。 特に理由がない場合には、WAIproCSSテーマのバージョンアップにも対応できるように、専用のCSSファイル(custom.css)を利用する方法をおすすめいたします。 ・専用のCSSファイル(custom.css)を利用したカスタマイズ この方法は、カスタマイズ部分を専用のCSSファイル(custom.css)に分離するため、WAIproCSSテーマに変更があった場合でも柔軟に対応できるとともに、カスタマイズしたテーマの保守・管理性も高まります。 CSSの特徴であるカスケードを活かしたカスタマイズ方法です。 1. 各CSSファイルからカスタマイズする箇所をcustom.css内にコピー&ペーストします。 2. セレクタのみを残し、宣言(プロパティと値)を削除したあと、上書きしたいスタイルを記述していきます。 サンプルとして、custom.sample.cssを同梱しています。 既存のcustom.cssを削除して、ファイル名をcustom.sample.cssからcustom.cssへ変更すれば、そのままカスタマイズのベースとして利用できます。 なお、custom.cssから呼ばれる画像はimages/css/ではなく、images/custom/に置くことをおすすめします。 カスタマイズにあたっては、下記の方法でカスタマイズするファイルを特定することができます。 ・ブラウザ等に表示されたページからカスタマイズ箇所を知りたい場合 ブラウザから「ソースを表示」に該当するメニューを選択してください。 あるいは、対象となる範囲をドラッグで選択した後、「選択範囲のソースを表示」に該当するメニューを選択してください。 表示されたソース内に、使用されているテンプレート(.thtml)ファイル名がコメントとして挿入されています。 ・テンプレートファイルに関連するCSSファイルを知りたい場合 CSSファイル内の冒頭にあるコメントの「適用先」をご覧下さい。 スタイルの適用先となるテンプレート(.thtml)ファイルを記述しています。 /*============================================================================== バージョン履歴 ==============================================================================*/ 「WAIproCSS」テーマのバージョン履歴です。 更新・追加・削除対象となったディレクトリ・ファイルは丸括弧内に記載しています。 ディレクトリ・ファイル名の前に記載された記号の意味は下記の通りです。 * 更新 + 追加 - 削除 ■Ver.2.7.0(2014-07-19) 　・Geeklog 2.1.0に合わせて、ファイルを追加・修正・削除しました。 ・ヘッダ、フッタ、ナビ、サーチの部分に今後必要と思われるrole属性を追記しました。(*header.thtml,footer.thtml,leftblocks.thtml) ■Ver.2.6.0(2012-10-07) 　・Geeklog 2.0.0に合わせて、ファイルを追加・修正しました。 ■Ver.2.5.1(2011-11-19) 　・ベーステーマprofessional_cssに合わせて、ファイルを修正しました。 　・音声読み上げを考慮し、管理画面で説明文をテキストボックスの前に移動させました。 　・Windows7 Internet Explorer9 で文字サイズが変更できないのでCSSでbodyに指定しているフォントサイズを変更しました。 　(*/css/common.css,*/css/admin/configuration.css,*/css/admin/group.css,*/admin/block/blockeditor.thtml,*/admin/block/defaultblockeditor.thtml,*/admin/group/groupeditor.thtml, 　 */admin/group/groupmembers.thtml,*/admin/mail/mailform.thtml,*/admin/plugins/editor.thtml,*/admin/story/storyeditor.japanese_utf-8.thtml,*/admin/story/storyeditor.thtml, 　 */admin/story/storyeditor_advanced.japanese_utf-8.thtml,*/admin/story/storyeditor_advanced.thtml,*/admin/syndication/feededitor.thtml,*/admin/topic/topiceditor.thtml, 　 */admin/trackback/pingbackform.thtml,*/admin/trackback/serviceeditor.thtml,*/admin/trackback/trackbackeditor.thtml,*/admin/user/edituser.thtml,*/admin/user/groupedit.thtml) ■Ver.2.5.0(2011-05-20) 　・Geeklog 1.8.0に合わせて、ファイルを追加・修正・削除しました。 　・ヘッダー上部とフッター下部に設定していた余白を削除しました。。(*/css/layout.css,*/css/common.css) 　・記事のブロックに設定している下線色を変更しました。(*/css/story.css) 　・左右ブロック内に上線を追加し余白を調整しました。(*/css/block.css,*/css/form.css,*/css/layout.css) 　・グローバルナビゲーションが2行になっもレイアウトが崩れないようにしました。(*/css/layout.css) ■Ver.2.4.4(2011-02-28) 　・記事編集ページでフォーム内でforとidで関連付けられない箇所にtitle属性を追記しました。(*/admin/story/storyeditor.japanese_utf-8.thtml,*/admin/story/storyeditor.thtml,*/admin/story/storyeditor_advanced.japanese_utf-8.thtml,*/admin/story/storyeditor_advanced.thtml) 　・使用していない背景画像を削除しました。(-/images/css/bg_header.gif,-/images/css/bg_navigation.gif,-images/css/bg_wrapper_center-right.gif,-images/css/bg_wrapper_center.gif,-images/css/bg_wrapper_left-center-right.gif,-images/css/bg_wrapper_left-center.gif) ・話題アイコンが右固定されていた不具合を修正しました。(*/css/story.css) ■Ver.2.4.3(2010-11-14) 　・Geeklog1.7.1に対応させました。(*/admin/group/groupeditor.thtml,*/comment/commentform.thtml,*/comment/commentform_advanced.thtml) ・JIS X 8341-3:2010の7.2.4.1 ブロック・スキップに関する達成基準 (達成等級 A)を満たすよう　また　キーボードで操作されているかたにも情報が得られるようフォーカス時にスキップナビゲーションが表示されるようにしました。(*/header.thtml,*/footer.thtml,*/rightblocks.thtml,/*leftblocks.thtml,*/css/common.css) ・ブロック、話題、グループ管理画面のレイアウトの変更及びスタイルを追加・修正しました。(*/admin/topic/topiceditor.thtml,*/css/admin/group.css,*/admin/block/blockeditor.thtml,*/admin/block/defaultblockeditor.thtml) ■Ver.2.4.2(2010-8-12) 　・Geeklog 1.7.0に合わせて、ファイルを追加・修正しました。 ・プラグインの事を考慮し(汎用性を高める為)fieldset legendに標準的なスタイルを追加し、タイトルが2度読みになる箇所(class="basic"が指定された箇所)のfieldset,legendのスタイルをすべて非表示に設定しました。(*/css/common.css) ・OpenID用のフォーム出力用のテンプレート変数を追加しました。(*/users/loginform.thtml) ・カスタムメニュー有効時にグローバルナビの文字色が基本色になってしまうのを修正しました。(*/css/layout.css) ・パーミッション部分がわかりやすい様にProfessionalのスタイルと同じように背景色とセル間の区切り線のスタイルを追加しました。(*/css/admin/common.css) ・commentform_advanced.thtmlに{cid}変数が抜けていたバグを修正しました。(*/comment/commentform_advanced.thtml) ・compatible.cssにスタイルを大幅に追加し、style.cssで、compatible.cssを最初に呼んで、優先順位を下げました。(*/css/compatible.css,*/style.css) ・サイズを２倍にしたアイコン画像の調整をし、使用されていない(使用不可)2つのアイコン画像を削除しました。 (*/images/addchild.gif,*/images/addchild.png,*/images/bararrowdown.gif,*/images/bararrowdown.png,*/images/bararrowup.gif, */images/bararrowup.png,*/images/button_help.gif,*/images/button_help.png,*/images/collapse.gif,*/images/collapse.png, */images/copy.gif,*/images/copy.png,*/images/deleteitem.gif,*/images/deleteitem.png,*/images/edit.gif,*/images/edit.png, */images/expand.gif,*/images/expand.png,*/images/external.gif,*/images/external.png,*/images/feed.gif,*/images/feed.png, */images/icon_info.gif,*/images/icon_info.png,*/images/list.gif,*/images/list.png,*/images/mail.gif,*/images/mail.png, */images/person.gif,*/images/person.png,*/images/print.gif,*/images/print.png,*/images/sendping.gif,*/images/sendping.png, */images/smallcamera.gif,*/images/smallcamera.png,*/images/sysmessage.gif,*/images/sysmessage.png,-/images/block-left.gif -/images/block-right.gif) ■Ver.2.4.1(2009-11-22) ・Internet Explorer6で記事にblockquote要素とpre要素がある場合に横スクロールバーが出ていたので、スタイルを修正しました。(*/css/default.css) ・"絞込み検索"でタイトルのみのモードの状態を維持しなかったバグ修正への取り込み漏れがあったので追加しました。(*/search/searchform.thtml) ・professionalコンパチブルスタイルで足りないスタイル(general formatting classes)とセキュリティートークンの警告メッセージ表示のスタイルとマイアカウントのコンテンツ設定のスタイルを追加し、背景色と文字色のコンストラストを考慮し文字色或いは背景色の修正をしました。(*/css/compatible.css) ・友だちに記事を送信するページとユーザーへのメール送信ページで「自分宛にコピーを送信」のラベル部分をクリックしてもチェックが入るように修正しました。(*/profiles/contactauthorform.thtml,*/profiles/contactuserform.thtml) 　・記事編集すべてと話題変種に，メタタグ編集フォームを追加しました。(*/admin/story/storyeditor.japanese_utf-8.thtml,*/admin/story/storyeditor.thtml,*/admin/story/storyeditor_advanced.japanese_utf-8.thtml,*/admin/story/storyeditor_advanced.thtml,*/admin/topic/topiceditor.thtml) ・メール送信フォームで1.6.0から1.6.1への変更を加えました。(*/profiles/contactauthorform.thtml,*/profiles/contactuserform.thtml) ・話題に記事数表示を追加・ユーザ名にremoteserviceを表示追加しました。(1.6.1への変更)(*/admin/topic/topiceditor.thtml,*/admin/user/edituser.thtml) 　/*----- テーマ以外での変更箇所　言語ファイル /language/japanese_utf-8.phpを修正して下さい。 -----*/ 　・音声読み上げソフト利用者の方が解りやすいように、記事の中にある｢続きを読む｣という表現を「全文表示」、「友達に記事を送信する」ページでの「名前」「送信先名」という表現を、「名前」を「あなたの名前」、「送信先名」を「送信先名前」に変更してください。(*/language/japanese_utf-8.phpの54行目の「続きを読む」を消し「全文表示」と記述、444行目の「送信先名」を消し「送信先名前」と記述、437行目の「名前」を消し「あなたの名前」と記述する) ■Ver.2.4.0(2009-9-11) 　・Geeklog 1.6.0に合わせて、ファイルを追加・修正・削除しました。 ・要素にjapanizeプラグインで生成されるテーマ変数を挿入して lang属性を反映させました。(*/header.thtml) 　・アーカイブされた記事のスタイルを通常記事と同じになるよう修正しました。(*/css/story.css) 　・記事(管理者ページ)の公開オプションでボタンの上に余白を追加しました。(*/css/admin/story.css) 　・通常画面と管理画面でのフォームのボタン間(左右)の余白を広くしました。(*/css/admin/configuration.css,*/css/admin/plugins.css,*/css/common.css) ・音声読み上げソフト利用者の方が解りやすいように、ログインユーザーのコメント投稿で「返信があったらメールで通知」のチェックボックスがプレビューボタンの前に読上げられるよう位置の修正しました。(*/comment/commentform.thtml,*/comment/commentform_advanced.thtml) ・