HTML5+CSS3で構築したレスポンシブWebデザインの アクセシブル(テーマ内で可能な範囲)な車をイメージした右サイドバー２カラムのテーマ「Car」を作成しました。

concrete5のマーケットプレイスに掲載していただいています。初めてのconcrete5マーケットプレイスへのテーマ掲載でパッケージング方法等のconcrete5の仕様を守る為に開発者の方々から色々と修正のアドバイスいただいたので、認証していただくまでに結構時間がかかったのですが、なんとかマーケットプレイスデビュー出来ました。

テーマ「Car」のダウンロード

テーマ「Car」のダウンロードは、concrete5のマーケットプレイス「concrete5 :: Car」で行ってください。(有料になります)

PC,iPad,iPhone,androidのキャプチャ画像

　
PC　トップページのキャプチャー画像　　　　　　　　　　　 　PC 下層ページのキャプチャ画像

　
iPadのキャプチャ画像

　
iphone　トップページ上部のキャプチャー画像　　　　　iPhone トップページ下部のキャプチャ画像

　
android　トップページ上部のキャプチャー画像　　　　　android トップページ下部のキャプチャ画像

theme 「Car」 のキャプチャ画像のトップページと同じデザインにするためのHTMLのコード集

上記タイトルの内容で日本語版と英語版のファイルを作成したのですが、パッケージングでこのファイルが同梱されているという事でマーケットプレイスに載せていただく事が出来ませんでした。泣く泣くサンプル集のファイル2つ削除したので、ここに内容を記載しますので、活用してください。

下記の操作方法詳細は、 「concrete5 公式活用ガイドブック サンプルデータダウンロード＆サポートページ」の動画をご覧ください。

まず、インストールしたテーマ「car」を有効にし、編集するページを表示し元々あったブロックすべて削除し、その後、トップページを編集する前に編集のデザインのページタイプでホームを選択してください。

ヘッダ部分

• サイト名のブロックを追加で、記事のHTMLエディターに下のコードをコピペして画像のURL(srcの中)とaltのテキスト部分、リンク先のURLを自分のサイトに合うよう修正してください。

  <h1><a href="http://URL/index.php?cID=1"><img src="/index.php/download_file/view_inline/9/" alt="サイト名" width="213" height="38"></a></h1>

• 電話番号部分のブロック追加で記事のHTMLエディターにpにclass="tel"を追記しaltを修正してください。

  <p class="tel"><img src="/index.php/download_file/view_inline/10/" alt="000-222-3456" width="236" height="25">

• ヘッダナビの部分のブロック追加で記事のHTMLエディターに下のコードをコピペして自分のサイトに合うようリンクリストを追加又は修正してください。HTMLエディターに記述したul要素のclass名が消える場合は、作成したブロックを選択しデザインのCSS内のCSSクラス名に「h_nav」を入力して保存してください。

  <ul clas="h_nav"><li><a href="/index.php/about/contact-us/">お問い合わせ</a></li></ul>
  

• グローバルナビ部分は、ブロック追加でオートナビを選択してください。(表示させたくないリンクは管理画面で該当ページを選択しページの設定のカスタム属性でナビに表示しないよう設定してください)

Main部分

• トップページ等の「一覧を見る」のリンク部分のコードは、記事のHTMLエディターに下のコードをコピペしてテキスト部分とリンク先のURLを自分のサイトに合うよう修正してください。

  <p class="to_list"><a href="#">一覧を見る</a></p>

• トップページ等の写真付き説明リストを横並び2カラムの部分は、記事のHTMLエディターに下のコードをコピペしてテキスト部分とリンク先のURLと写真の保存場所(src=""の#)を自分のサイトに合うよう修正・追記してください。

  <ul class="two_column clearfix">
  <li><a href="#"><img src="images/carsapmle_img1.jpg" alt="写真:オデッセイ" width="163" height="100"><span>ホンダ　オデッセイ<br>100万円(税込)</span></a></li>
  <li><a href="#"><img src="images/carsapmle_img2.jpg" alt="写真:スカイライン" width="163" height="100"><span>ニッサン　スカイラインGT<br>80万円(税込)</span></a></li>
  </ul>
  

• トップページ等の最新情報の部分は、まずタイトル部分を記事のHTMLエディターに下のコードをコピペしてテキスト部分を自分のサイトに合うよう修正してください。

  <h2>最新情報・更新情報</h2>

  そして、最新情報のリスト部分は、ページリストのブロックを追加した後、 (サンプルではサイトの中の場所のページを表示する場所で他のページ以下の階層を選択し「ページを選択」をクリックしブログを選択) カスタムテンプレートの「new_info」を選択し保存をクリックしてください。

aside部分

まず、管理画面でスタックを上部・中部・下部と3つ追加してください。(スタックの名前は自分の分かりやすい名前にしてください) 作成した上部部分のスタック名をクリックし、新規ブロック追加で検索ブロックを追加し承認してください。 作成した中部部分のスタック名をクリックし、新規ブロック追加で下層ページ等の表示したいページのリンクをブロックとして追加し承認してください。 作成した下部部分のスタック名をクリックし、新規ブロック追加で記事のHTMLエディターで下のコードをコピペして自分のサイトに合うようテキストを修正しブロックとして追加し承認してください。

<p><strong>エムズオート株式会社</strong><br>〒000-0000<br>東京都港区六本木0-0<br>電話:000-220-0000<br>FAX:000-220-0011</p>

Sidebar Topに上部部分のスタックを追加し、サイドバーに中部部分のスタックを追加し、Sidebar Bottomに下部部分のスッタクを追加してください。

footer部分

フッタナビ部分は、ブロック追加でオートナビを選択してください。(表示させたくないリンクは管理画面で該当ページを選択しページの設定のカスタム属性でナビに表示しないよう設定してください)

確認作業について

concrete5: 5.6.3.1
OS:Windows 7

ブラウザ：

Internet Explorer11.0.12,10,9,8,7

Firefox32.0

GoogleChrome37.0.2062.120

Opera24.0.1558.53

IE11.0.12 ズーム　200% 時と文字サイズ「大」「最大」時

IE10 ズーム　200% 時と文字サイズ「大」「最大」時

IE9 ズーム　200% 時と文字サイズ「大」「最大」時

IE8 ズーム　200% 時と文字サイズ「大」「最大」時

IE7 ズーム　200% 時と文字サイズ「大」「最大」時

Fx32.0 200% 時と文字サイズだけ変更×6 時

GoogleChrome37.0.2062.120 ズーム 200% 時

Opera24.0.1558.53 ズーム200% 時

OS:Mac OS X 10.7.5
ブラウザ:

Firefox32.0.1

Safari6.1.5

Firefox32.0.1 ズーム200% 時と文字サイズだけ変更×6 時

Safari6.1.5 ズーム200% 時と文字サイズだけ変更×4 時

タブレット:

iPad iOS 7.1.2

スマートフォン:

GALAXY Android4.4.2 標準ブラウザ、Firefox

iPhone5s iOS 7.1.2 Safari

キーボードのみでの操作

WCAG 2.0 の2.1.1(レベルA)の基準をクリアしています。

音声読上げ確認に使用した音声読上げソフト

PC-Talker 7 (Internet ExplorerがHTML5のアクセシビリティに対応しきれていないのが原因でブロックごとに2度読みしますが、 PC-Talker側で修正がかかり次のベータ版で不具合は解消される予定です。 詳しくは「HTML5のサイトをIEを使用しPC-Talker7で読み上げた際の不具合見つけたよ」をご覧ください)

NVDA 2013.3jp

Voice Over(iPad使用)

TalkBack

カラーチェックツール

colour contrast Analyser

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

背景色と文字色コントラスト比率は、 WCAG 2.0 の1.4.3(レベルAA)の基準をクリアしています。 また、ナビゲーションスキップを設置しています。 (ページを表示した後Tabキーを押すと表示されます)

テーマ作成内で可能な範囲ですので、テーマ側で出来る範囲は限られています。このテーマを使用してもコンテンツを作成される時にアクセシビリティを考慮せずに作成されますとアクセシブルなサイトにはなりません。このテーマを使用していただき少しでも作業効率が良くなるようにという思いで作成しておりますので、コンテンツを構築していく際にもアクセシビリティを考慮して構築してください。

テーマのインストール方法

ダウンロードしたファイルを解凍し、サーバーにFTPで theme_car/themes/carフォルダをthemes/にアップロードしてください。

theme_car/blocks/page_list/templates/new_info.phpファイルをconcrete/blocks/page_list/templates/ にアップロードしてください。 (マーケットプレイスからの追加テーマのインストール方法は、 http://concrete5-japan.org/help/editing/install_theme_and_blocks/をご覧下さい。)

著作権

テーマ「Car」は、concrete5　マーケットプレイスの標準ライセンスに基づいてます。詳しくはconcrete5 :: Licenseをご覧ください。

concrete5のマーケットプレイス初体験の感想

思っていた以上に承認してもらうまで時間がかかったのですが、concrete5のPRBメンバーの方々が非常に分かりやすく画像やファイルを添付いただいたり、どこをどう修正すればいいか丁寧なコメントをくださったので、修正自体には時間がかかる事はありませんでした。concrete5の開発者の方々とのやり取りで作成意欲が湧き、仕様も頭に入ったのでまた新しいテーマを作りたいという思いになりました。