concrete5のマーケットプレイスに掲載していただいています。
PC&iPad&iPhoneのスクリーンショット
画像やテキストをご自身のサイトに合うよう置き換えていただければ色んなサイトで使っていただけます。
このテーマは、サンプルコンテンツ入りテーマです。
コンテンツ入りでテーマをインストールしていただき、ご自分のサイトに合った画像とテキストに置き換えるだけで簡単にアクセシブルなサイト構築を可能にします。
(画像が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」のダウンロードは、concrete5のマーケットプレイス「Flower - concrete5」で行ってください。(有料になります)
デフォルトのままだと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 日本語公式サイト
concrete5 7.5.6と5 7.5.7で確認している事になります。
編集ページの該当のエリアでレイアウトを追加を選びプリセットの「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」を選択します。最後に保存をクリックして設定完了です。
すべてのカスタムテンプレートについて
concrete5.7.5.6, 追記:concrete5.7.5.7
OS:Windows 7
ダウンロードしたファイルを解凍し、サーバーにFTPで packages/ にアップロードしてください。管理画面の「concrete5を拡張」の中の「機能追加」をクリックすると「インストール待ち」にテーマFlowerの表示が出るのでインストールをクリックしコンテンツ入りインストールかテーマのみインストールかを選んでインストールしてください。(マーケットプレイスからの追加テーマのインストール方法は、マーケットプレイスの使い方 :: concrete5 Japan 日本語公式サイトをご覧下さい。)
テーマ「Flower」は、concrete5 マーケットプレイスの標準ライセンスに基づいてます。詳しくはconcrete5 :: Licenseをご覧ください。
コメント (0件)