レスポンシブでアクセシブルなconcrete5のテーマ「Flower」をリリース！

2016/05/07 03:18 JST

HTML5+CSS3で構築したレスポンシブWebデザインのアクセシブルで汎用性のある花をイメージしたconcrete5.7系テーマ「Flower」を作成しました。

テーマFlowerのスクリーンショット画像
PC&iPad&iPhoneのスクリーンショット

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

画像やテキストをご自身のサイトに合うよう置き換えていただければ色んなサイトで使っていただけます。

このテーマは、サンプルコンテンツ入りテーマです。
コンテンツ入りでテーマをインストールしていただき、ご自分のサイトに合った画像とテキストに置き換えるだけで簡単にアクセシブルなサイト構築を可能にします。 (画像がHTMLブロック等HTMLの記述になっている箇所は、src="画像の保存場所" alt="画像の説明"を必ず記入してください。)

横幅1165以下の環境では、WAI-ARIAを使用したドロワーメニューを使用しています。(よりアクセシブルになるよう改良しています)

ドロワーメニューを開いた時は、「×」ボタン又はメニューを選択するまではフォーカスはグローバルナビゲーション内のみの移動になります。

マシンリーダブルな Schema.orgに対応する為、Microdataを使用しています。

グローバルナビゲーション、パンくずリスト、新着情報、F&Qを schema.org の仕様に従って記述しています。

スマートフォンでスクロールした状態でもすぐにナビメニューをタップ出来るようにヘッダを固定しています。
(ページ内リンクを設定される時は、(ヘッダの高さが100pxの場合)例：margin-top:-100px;padding-top:100px;をコンテンツエリア等に設定してください。)

facebookの窓等横幅を絶対値で指定している箇所を追加される場合、その数値(横幅)より小さいサイズのデバイスで閲覧すると横スクロールバーが出てしまうかレイアウトが崩れる可能性があるのでご注意ください。(ご自身で横幅を調整してください)

サイト名の文字数とナビゲーションメニューの文字数と個数に応じてそれぞれの該当箇所の余白や幅をご自身で調整してください。(デザインの仕様上、サイト名の幅とナビゲーションメニューの数は限られます)

Mainエリアには2カラム(Col Twobox)3カラム(Col Threebox)の独自レイアウトを設定出来る様にしています。

デモサイトは、Home | Flowerになります。

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

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

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

WCAG 2.0の1.4.3 最低限のコントラストに関する達成基準(レベルAA)の基準を満たしています。(カラーチェックツール colour contrast Analyser を使用)
WCAG 2.0の2.1.1 キーボード操作に関する達成基準(レベルA)の基準を満たしています。(jQuery UIのアコーディオンとタブメニュー部分は矢印キーで移動します)
ナビゲーションスキップを設置しています。 (ページを表示した後Tabキーを押すと表示されます)
ドロワーメニューを開閉するボタン(アイコン)部分は、視覚的には「menu」「close」とCSSで表示させ、スクリーンリーダーでは「ナビゲーションメニュー」と読み上げる様に設定しています。また、a要素がボタンである事をWAI-ARIAを使用して示しています。
ドロワーメニューの開閉の状態は、aria-expanded属性を使用して示しています。aria-expanded属性に対応しているスクリーンリーダーでは、開閉ボタンにフォーカスした時に「折り畳み」「展開」のように読み上げます。
ドロワーメニュー使用時のグローバルナビゲーションは、閉めている時は視覚的に表示せず、スクリーンリーダーでも読み上げないようにし、aria-hidden="true"を使用して表示していない事を示しています。
ドロワーメニューが閉まっている時は、グローバルナビゲーションを視覚的にも表示させずスクリーンリーダーでも読み上げないようにしているので、下部にクローンを作成しています。クローンは視覚的には表示せずスクリーンリーダーでは読み上げる様にしています。
追記:画面サイズが1165px以上の時、WAI-ARIAを使ったアクセシブルなドロップダウンメニューをグローバルナビゲーションに追加しました。（第2階層（1つのサブメニュー）までの対応）(テーマのversion1.2.0以降)
追記:グローバルメニューの中で選択されているメニューには、aria-current属性を付けています。(テーマのversion1.1.0以降)
また、version1.2.1でパンくずリストにもaria-current属性を付けました。
タブメニューとアコーディオンUIをアクセシブルにする為にWAI-ARIAの記述を加え、要素の役割と状態の情報を伝えています。(jQuery UI - v1.11.4を使用)

テーマ以外の修正必須箇所

デフォルトのままだとtitle要素がサイト名 :: ページ名なので、ページ名 | サイト名に変更してください。修正方法は下記の通りです。

concrete5/config/concrete.phpの868行目を 'title_format' => '%1$s :: %2$s',から''title_format' => '%2$s :: %1$s',に変更してください。
参照：設定ファイルの使い方 :: concrete5 Japan 日本語公式サイト

concrete5 Ver.8から[ページタイトル] :: [サイト名]がデフォルトになるので、上記の修正は必要なくなりました。参照：title要素について質問及び要望です。 :: concrete5 Japan 日本語公式サイト

テーマFlowerを使用する際注意すべき事柄

サイト名の文字数やグローバルナビゲーションの文字数によって文字が重なる場合がありますが、その時はmain.cssの421行目のmargin-leftの値(サイト名の幅分のネガティブマージン)と853行目のmargin-leftの値(グローバルナビゲーションの3番目の左の余白)を調整してください。
また、グローバルナビゲーションの数は5個まででご使用ください。もし、グローバルナビゲーションの数は6個になる場合は、837行目のmargin-leftを削除し、843行目のwidthの値(グローバルナビゲーションの個々のリストの幅)を調整し、853行目の.ccm-responsive-navigation li:nth-child(3)を.ccm-responsive-navigation li:nth-child(4)に変更して値を調整してください。
トップページのMain Topエリアの緑枠のスタイルの部分では、説明文の文字数(行数)によって高さが揃わない場合があります。その時は、main.cssの480行目付近のmin-heightの値を調整してください。
下層ページでMainエリアが上に上がってしまっている場合は、body直下のdiv要素に振られているそのページ独自のclassをmain.cssの648行目付近に該当のclass+#main(例：.hoge #main)を追記してください。
トップページのMain Topエリアの緑枠のスタイルの部分の使用は3つまでにしてください。
3つ以上(2行)になる場合は、1行目のdiv要素に独自classを追記し、そのclassにmargin-bottom:130px;をmain.cssで設定してください。

テーマ以外の注意事項

concrete5 7.5.6と5 7.5.7で確認している事になります。

記事ブロックで画像を追加すると、どの画像にも「id="image-marker"」が付いてしまうので(1ページ内に2つ以上同じidの値は使えないので)、記事ブロックのHTMLを使って削除してください。尚、記事ブロックで追加する画像が1ページに1つの場合は削除しなくても大丈夫です。
記事ブロックで画像を追加しそのまま保存するとaltの値がファイル名になってしまうので(画像を追加して記事ブロックのHTMLでソースを見るとalt属性の記述自体がない状態になります)、記事ブロックのHTMLを使ってaltの値を適切な値に必ず修正してください。
(この現象は、日本語を選んでインストールしたサイトの場合で、American English(United States)を選んでインストールしたサイトの場合は、altの値がファイル名ではなく#(alt="#")になってしまいます。)
尚、記事ブロックのHTMLでalt属性を追記する時に値を空にすると追加したalt属性が反映されないので、値には画像を表す内容を必ず記述してください。altの値を空にしたい場合は、記事ブロックを使わずHTMLブロックを使ってください。
(この問題は、次のバージュンで解消されると思います。参照：Content and Image blocks add alt="#" to image tags with null values - concrete5)

カスタムスタイルについて

image-circle - 画像等を丸型にする
imagelink-circle - 画像等を丸型にし、hover時に透過赤色を付ける
imagelink-circle-s - imagelink-circleの小さいバージョン(フッタにあるFacebookのアイコンのサイズ)
imagelink-square - hover時に透過赤色を付ける
image-frame - 画像等にフレームのような枠線を付ける
left-justify - 記事等で左揃えにする(文字が回り込みタイプ)
'flower-title - 下層ページのh1のスタイル

エリア　カスタムスタイル

Main AREA: list-mark - トップページの新着情報のリストのようなアイコンを付ける; flower-btn - ピンク色のボタンスタイル
Footer　Nav: subnav-link - リストを横並びにする; list-mark - トップページの新着情報のリストのようなアイコンを付ける; flower-btn - ピンク色のボタンスタイル

カスタムテンプレートについて

グローバルナビゲーションは、autonavオートナビのカスタムテンプレートのflower_responsive_header_navigation」を使用してください。
パンくずナビゲーションは、autonavオートナビのカスタムテンプレートの「flower_breadcrumb」を使用してください。
新着情報は、page_listページリストのカスタムテンプレートの「flower_new_info」を使用してください。
F&Qのaccordionアコーディオン部分は、faqのカスタムテンプレートの「flower_faq」を使用してください。
ページのタイトル部分は、page_titleのカスタムテンプレートの「flower_page_title」をまた、Blogタイトル部分は、page_titleのカスタムテンプレートの「flower_blog_title」を使用してください。
Blog用ページタイプの右2カラムページのサイドに設置するブロックの検索部分は、searchのカスタムテンプレートの「flower_search」を使用してください。
同じくサイドに設置するブロックのArchives部分は、date_navigationのカスタムテンプレートの「flower_date_navigation」を使用してください。
同じくサイドに設置するブロックの「次へ」「前へ」ナビ部分は、next_previousのカスタムテンプレートの「flower_next_previous」を使用してください
同じくサイドに設置するブロックのサムネイル付きのページリスト部分は、page_listのカスタムテンプレートの「flower_thumbnail」を使用してください。(サムネイル画像は、管理画面のブログ記事ページのコンポーザーでサムネイルを設定してください)
同じくサイドに設置するブロックのページリスト部分は、page_listのカスタムテンプレートの「flower_list」を使用してください。(デフォルトのままだと見出しレベルが違う為)
同じくサイドに設置するブロックのトピックリスト部分は、topic_listのカスタムテンプレートの「flower_topic_list」を使用してください。

カスタムレイアウトについて

編集ページの該当のエリアでレイアウトを追加を選びプリセットの「Col Twobox」(2カラムの場合)又は「Col Threebox」(3カラムの場合)独自レイアウトを選択し、レイアウト追加をクリックしてください。

デザインを再現するマークアップについて

トップページ編

トップページのMain Topエリアの緑枠のスタイルを使用される場合は下記のようにマークアップしてください。

<div class="ornament-frame">
  <dl>
    <dt>make you feel better</dt>
    <dd>The flowers creates a comforting environment, Because the flowers is very beautiful.</dd>
  </dl>
</div>

Main Middleエリアの丸い画像の部分は、記事ブロックのHTMLで(画像は)下記のように記述してください。

<a href="#"><img width="350" height="350" src="category-arrange.png" alt="Flower arrangement's photo"><br>Flower arrangement
</a>

その後、要素すべてを選択しその状態でブロックの編集でカスタムスタイルの「imagelink-circle」を設定するとテーマ画像と同じスタイルが適用されます。(画像を四角のままにしたい場合は、カスタムスタイルの「imagelink-square」を選んでください。)

下層ページ編

ブロックの編集エリアをクリックし、デサイン＆カスタムテンプレートをクリックする。一番右のアイコン(titleがカスタムCSSクラス、ブロック名、カスタムテンプレートやスタイルのリセット)をクリックし、カスタムテンプレートから「flower_page_title」を選択します。最後に保存をクリックします。

デモサイトの下層ページで使用しているタブUIを使用する場合は、下記のようにマークアップしてください。
※デモサイトのProductsを参考にしてください。

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Fresh-cut flowers</a></li>
    <li><a href="#tabs-2">bouquet of flowers</a></li>
  </ul>
  <div id="tabs-1">
    <ul tabindex="0">
      <li><a href="#"><img src="/application/files/5114/6062/0853/cut01.jpg" alt="Cut flowers of white" width="300" height="225" class="image-frame"></a></li>
      <li><a href="#"><img src="/application/files/2314/6062/0850/cut02.jpg" alt="Cut flowers of orange" width="300" height="225" class="image-frame"></a></li>
    </ul>
  </div>                         
  <div id="tabs-2">
    <ul tabindex="0">
      <li><img src="/application/files/8914/6062/0848/bouquet01.jpg" alt="Red -based bouquet" width="300" height="225" class="image-frame"></li>
      <li><img src="/application/files/9214/6062/0841/bouquet02.jpg" alt="Orange -based bouquet" width="300" height="225" class="image-frame"></li>
    </ul>
  </div>
</div>

また、デモサイトの下層ページで使用しているアコーディオンUIを使用する場合は、下記のようにマークアップしてください。
※デモサイトのF&Qを参考にしてください、

<div id="accordion" class="ccm-faq-container" itemscope itemtype="http://schema.org/Question">
  <h2 itemprop="name">What is the best way to take care of a flowers ?</h2>
    <div itemprop="suggestedAnswer" itemscope itemtype="http://schema.org/Answer">
      <div itemprop="text">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. </p>
      </div>
    </div>
  <h2 itemprop="name">How do I add the water ?</h2>
    <div itemprop="suggestedAnswer" itemscope itemtype="http://schema.org/Answer">
      <div itemprop="text">
       <ul>
         <li>Lorem ipsum dolor sit amet consectetuer.</li>
         <li>Aenean commodo ligula eget dolor.</li>
         <li>Aenean massa cum sociis natoque penatibus.</li>
       </ul>
     </div>
   </div>
</div>

カスタムテンプレートの設定方法

Main Bottomエリアのページリストブロックの新着情報は、カスタムテンプレートの「flower_new_info」を適用しブログ記事の「タイトル」、「日付」、「説明文」を表示させてます。(ページ名を含めるとページの説明を含めるは「はい」に設定してください。)(カスタムスタイルの「flower_new_info」を適用するとデモサイトと同じスタイルになります)

ブログ記事以外のタイトル部分と同じスタイルにしたい場合は、ブロックの編集エリアをクリックし、デサイン＆カスタムテンプレートをクリックする一番右のアイコン(titleがカスタムCSSクラス、ブロック名、カスタムテンプレートやスタイルのリセット)をクリックする。カスタムテンプレートから「flower_page_title」を選択します。最後に保存をクリックして設定完了です。

すべてのカスタムテンプレートについて

カスタムテンプレートを適用したい箇所をクリックする。
デザインとテンプレートをクリックする。
一番右のアイコン(カスタムCSSクラス、ブロック名、カスタムテンプレートやスタイルのリセット)をクリックする。
適用したいカスタムテンプレートを選択する。
保存をクリックする。

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

concrete5.7.5.6, 追記:concrete5.7.5.7
OS:Windows 7

ブラウザ：: Internet Explorer11,10,9　200% 時と文字サイズ「大」「最大」とハイコントラスト時; Firefox46.0 200% 時と文字サイズだけ変更×5 とハイコントラスト時; GoogleChrome50.0.2661.94 ズーム 200% とハイコントラスト時; Opera36.0.2130.65 ズーム 200% とハイコントラスト時

OS:Windows 10 ブラウザ:: Edge ズーム　200% 時; Firefox46.0.0 200% 時と文字サイズだけ変更×5 時; GoogleChrome50.0.2661.75 ズーム 200% 時

OS:Mac OS X 10.10.5 ブラウザ:: Safari9.0.3 ズーム200% 時と文字サイズだけ変更×3 時; Firefox46.0 ズーム200% 時と文字サイズだけ変更×5 時; GoogleChrome50.0.2661.94 ズーム 200% 時

タブレット:: iPad iOS 9.3.1 Safari
スマートフォン:: GALAXY Android5.0.1 標準ブラウザ、GoogleChrome50.0.2661.89; iPhone5s iOS 9.3.1 Safari

音声読上げ確認に使用した音声読上げソフトとブラウザ: PC-Talker 7 + Win7 Internet Explorer11; NVDA 2015.4jp + Win7 Firefox46.0; Voice Over + iPad iOS 9.3.1; TalkBack4.4.1 + GALAXY Android5.0.1
カラーチェックツール: colour contrast Analyser

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

ダウンロードしたファイルを解凍し、サーバーにFTPで packages/ にアップロードしてください。管理画面の「concrete5を拡張」の中の「機能追加」をクリックすると「インストール待ち」にテーマFlowerの表示が出るのでインストールをクリックしコンテンツ入りインストールかテーマのみインストールかを選んでインストールしてください。(マーケットプレイスからの追加テーマのインストール方法は、マーケットプレイスの使い方 :: concrete5 Japan 日本語公式サイトをご覧下さい。)

著作権

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

日	月	火	水	木	金	土
2024年 11月					«	»
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30