トップページや下層メニューがある固定ページ、ブログのカテゴリーアーカイブへのリンクなどで活用することを想定して、グリッドレイアウトを使ったカードタイプのナビゲーションメニューのブロックパターンをいくつか作りました。
ブロックエディタに不慣れな方でも操作しやすいように、できるだけシンプルなブロック構成にしてあります。
今回は介護・福祉系のサイトをイメージして作ってみましたが、最後のブロックパターンはこの業種には向かないかもしれません。
タイトルのみのシンプルなタイプ①
- マウスホバーで画像が拡大します。
- カード全体がリンクエリアになっています。
- カードに box-shadow を設定してあります。
- 編集画面でテキストの背景・文字色を変更可能です。(CSS による指定を行っていません)
- クラス名 ujs-grid-card-01
- スマホでは画面幅によって1列表示・2列表示の違いが出ます。
タイトルのみのシンプルなタイプ②
- マウスホバーで画像が拡大します。
- カード全体がリンクエリアになっています。
- CSS 的には、①から box-shadow と border-radius を削除しただけです。
- 編集画面でテキストの背景・文字色を変更可能です。(CSS による指定を行っていません)
- クラス名 ujs-grid-card-01 ujs-grid-card-01-square
- スマホでは画面幅によって1列表示・2列表示の違いが出ます。
説明が表示されるタイプ①
- マウスホバーで説明が表示されます。
- カード全体がリンクエリアになっています。
- 編集画面でテキストの背景・文字色を変更可能です。(CSS による指定を行っていません)
- 編集画面でオーバーレイの色・文字色を変更可能です。(CSS による指定を行っていません)
- クラス名 ujs-grid-card-01 ujs-grid-card-01-description
- スマホでは画面幅によって1列表示・2列表示の違いが出ます。
ここに施設の説明が表示されます。ここに施設の説明が表示されます。ここに施設の説明が表示されます。
ここに施設の説明が表示されます。ここに施設の説明が表示されます。ここに施設の説明が表示されます。
ここに施設の説明が表示されます。ここに施設の説明が表示されます。ここに施設の説明が表示されます。
ここに施設の説明が表示されます。ここに施設の説明が表示されます。ここに施設の説明が表示されます。
ここに施設の説明が表示されます。ここに施設の説明が表示されます。ここに施設の説明が表示されます。
ここに施設の説明が表示されます。ここに施設の説明が表示されます。ここに施設の説明が表示されます。
説明が表示されるタイプ②
- マウスホバーで説明が表示されます。
- カード全体がリンクエリアになっています。
- 編集画面でオーバーレイの色・文字色を変更可能です。(CSS による指定を行っていません)
- スマホでは画面幅によって1列表示・2列表示の違いが出ます。
ここに施設の説明が表示されます。ここに施設の説明が表示されます。ここに施設の説明が表示されます。
ここに施設の説明が表示されます。ここに施設の説明が表示されます。ここに施設の説明が表示されます。
ここに施設の説明が表示されます。ここに施設の説明が表示されます。ここに施設の説明が表示されます。
ここに施設の説明が表示されます。ここに施設の説明が表示されます。ここに施設の説明が表示されます。
ここに施設の説明が表示されます。ここに施設の説明が表示されます。ここに施設の説明が表示されます。
ここに施設の説明が表示されます。ここに施設の説明が表示されます。ここに施設の説明が表示されます。
CSS を使っていないことによるメリット
テキストとオーバーレイの部分のスタイルに CSS を使っていないので、お客様が編集画面で以下の例のように色を自由に変えていただくことが可能です。
ここに施設の説明が表示されます。ここに施設の説明が表示されます。ここに施設の説明が表示されます。
ここに施設の説明が表示されます。ここに施設の説明が表示されます。ここに施設の説明が表示されます。
ここに施設の説明が表示されます。ここに施設の説明が表示されます。ここに施設の説明が表示されます。
ここに施設の説明が表示されます。ここに施設の説明が表示されます。ここに施設の説明が表示されます。
ここに施設の説明が表示されます。ここに施設の説明が表示されます。ここに施設の説明が表示されます。
ここに施設の説明が表示されます。ここに施設の説明が表示されます。ここに施設の説明が表示されます。
大きさに変化をつけた組み合わせ
グリッドアイテムが2つのグリッド の下に グリッドアイテムが4つのグリッド を配置しています。
- 両方のグリッドは同じものですが、カバー画像の最小の高さ だけ変えて大きさに変化を持たせてあります。
ひとつめ：240px ふたつめ:180px
こういうのをかんたんに作ることができるのも、グリッドレイアウトのメリットのひとつです。 - 間に 15px にスペーサーを入れてあります。
アイコン表示もできます
- クラス名 ujs-grid-card-01 ujs-grid-card-01-icon
- 矢印の分だけテキスト部分が狭くなるので、スマホでは1列表示にしています。
- ujs-grid-card-01 ujs-grid-card-01-square ujs-grid-card-01-icon
- ujs-grid-card-01-square を指定すると、アイコン色が白になります。
- スマホでは画面幅によって1列表示・2列表示の違いが出ます。
