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

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

concrete5のマーケットプレイスに掲載していただいています。

テーマ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」のアクセシビリティについて

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

デフォルトのままだと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を使用する際注意すべき事柄

テーマ以外の注意事項

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

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

エリア カスタムスタイル

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

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

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

編集ページの該当のエリアでレイアウトを追加を選びプリセットの「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」を選択します。最後に保存をクリックして設定完了です。

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

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

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

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をご覧ください。

コメント (0件)


White Stage
https://white-stage.com/article.php/concrete5-themeflower