#C22 Block Layout

ビュー機能で作成した関連記事のブロックを任意のページに表示するには、ブロックレイアウトを使い、表示させる任意のページを指定し表示箇所を設定します。

Drupalの優れた機能であるビューの機能は、記事などのコンテンツを所定の条件で抽出し、自由にサイト内に配置し表示することが出来ます。このビューの機能で作成したページやブロックの配置を設定出来る機能がブロックレイアウトになります。

ブロックレイアウトもDrupalらしい機能で設定の自由度が高く、コンテンツごとにナビゲーションメニューやサイドメニューを切り替える事が簡単に出来ます。

当サイトのナビゲーションメニューやサイドメニューが言語で切り替わるのもこのブロックレイアウトの設定で行っています。

ブロックレイアウトの概要

サイトの構成を自由に構築します。
基本はヘッダー、ボディ、左右サイドメニュー、フッターのセクションで構成されています。
ブロックレイアウトの構成は、選択したテーマに依存します。
ブロックレイアウトの各セクションに配置したいエンティティを選び配置します。
選んだエンティティを表示させるコンテンツを選択します。

これまでDrupalの記事でまとめてきた、コンテンツやサイト構築、タクソノミー、ビューで設定し作成した記事やページにナビゲーションメニューやサイドメニュー、フッターなどを構成していく機能になります。

Introduction.

ブロックレイアウトは、サイトの構成を構築していく機能になります。

一般的に、Webサイトは、ヘッダー、ボディ、左右サイドメニュー、フッターというセクションを分けて構成されています。各セクションの使用方法はサイトの目的により異なって行きますが、大半のサイトで採用している形となります。実際にはヘッダーを複数のセクションに分けたり、フッターも3段構成にするなど、サイトを目的の形で構成して行きますが、当サイトは学習の意味も兼ねていますので、シンプルにヘッダー、ボディ、右サイドメニュー、フッターの4つのセクションで構成しています。

ブロックレイアウトで構成出来るセクションは選択したテーマに依存します。私はBootstrap5のテーマを選択し、実際の運用はサブテーマを使用していますので、Bootstrap5のサブテーマが用意するブロックレイアウトのテンプレートを使用してサイトを構成し構築しています。

Block Layout

Bootstlap5 Subtheme Block Layout
|-- ヘッダー
|     |-- Navigation branding region // ページトップのサイト説明など
|     |-- Main navigation region // サイト名やロゴなど
|     |-- Additional navigation region (eg search form, social icons, etc)
|      // ナビゲーションメニューなど     
|
|-- パンくず
|
|-- Main content // 記事などのコンテンツに追加するエンティティ
|
|-- 第１サイドバー // 左サイドメニュー
|
|-- 第２サイドバー // 右サイドメニュー
|
|-- フッター // フッター

この用意されたブロックレイアウトの各セクションに表示したいブロックを設定し、表示するコンテンツを指定することでサイトの構成を構築して行きます。

Block layout settings.

前回の記事 #C21 Views-2 Block の構成を例にブロックレイアウトの設定例をみて行きます。

Home > 管理 >サイト構築 > ブロックレイアウト

Block Layout Setting

|-- ヘッダー
|     |-- Main menu // 日本語ページ用のナビゲーションメニュー
|          
|     |-- Navigation branding region
|           // 使用していない
|     |-- Main navigation region
|           // 使用していない
|     |-- Additional navigation region (eg search form, social icons, etc)
|           // 使用していない
|
|-- パンくず
|           // 使用していない
|
|-- Main content
|           |-- メッセージ // デフォルト設定 | 管理メニュー用
|           |-- ページのタイトル // デフォルト設定 | /Creationで表示
|           |-- タブ // デフォルト設定 | 管理メニュー用
|           |-- ヘルプ // デフォルト設定 | 管理メニュー用
|           |-- プライマリ管理アクション // デフォルト設定 | 管理メニュー用
|           |-- メインページコンテンツ // デフォルト設定 | /Creationで表示
|           |-- パンくず // 設定 | /Creationで表示
|           |-- Creation-Bottom_block // 作成したコンテンツブロック | /Creationで表示
|           // ビューで作成した関連記事のコンテンツブロック
|
|-- 第１サイドバー
|           // 使用していない
|
|-- 第２サイドバー
|           |-- Side Bar 01 // 作成したコンテンツブロック | /Creationで表示
|
|-- フッター
|           |-- Footer01 // 作成したコンテンツブロック |  日本語コンテンツ用のフッター

上記のような構成になっています。実際には、他のコンテンツタイプのメニューなどを設定していますので今回の例より設定項目が多くなりますが、ブロックレイアウトの構成と設定を理解する為、 #C21 Views-2 Block のブロックレイアウトの構成のみを抜粋しています。

ブロックレイアウトの構成も、管理メニューで表示するセクションが設定されていますので、#C21 Views-2 Block のレイアウト構成を整理してみます。

ヘッダー

日本語コンテンツ用ナビゲーションメニュー // コンテンツ > ブロックで作成したメニュー

Main conntent

ページのタイトル // 記事
メインページコンテンツ // 記事
パンくず // Easy_Breadcrumbモジュールが生成するブロック
関連記事のブロック // ビューで作成した関連記事のブロック

第2 サイドバー

右サイドメニュー // コンテンツ > ブロックで作成したメニュー

フッター

日本語コンテンツ用のフッター // コンテンツ > ブロックで作成したメニュー

以上の構成となっています。

How to set up 01.

ブロックレイアウトの基本的な使い方は

ブロック　配置するブロックなど
カテゴリー　コンテンツタイプやシステムなどエンティティのタイプ
リージョン　配置場所のセクション
操作　表示条件などの設定

上記の4項目を設定して行きます。ブロックなど配置したいエンティティを配置するリージョンを選び、表示条件を設定することでコンテンツのページレイアウトを構成して行きます。

配置したいセクションを選びブロックを配置します。

ヘッダーにナビゲーションを設定

ヘッダー > ブロックを配置 > 表示されるブロック一覧から選択 >ブロックを配置

設定画面が表示されます。

Block Main menu Setting

ブロックの説明
Main menu
タイトル : ラベル名を入れます。
システム内部名称 : b5subtheme_main_menu / 編集
このフィールドはトークンをサポートしています。 利用可能なトークンを表示します。
タイトルを表示 : 表示 / 非表示の設定
閲覧の制限 
Response Code:(active tab)
言語 : 制限なし
Response status : 制限なし
ページ : 制限なし
役割 : 制限なし
コンテンツタイプ : 制限なし

ブロックレイアウトの指定したリージョンに上記の設定画面で指定したブロックを配置して行きます。

ブロックの設定は、どのリージョンに配置し、リージョンに指定したブロックを表示するページの指定を設定して行きます。

指定条件

閲覧の制限

Response Code
言語
Response status
ページ
役割
コンテンツタイプ

以上の6つの指定条件から選択します。（複数組み合わせ可能）

例えば日本語のページ専用のメニューであれば、2.言語のJapaneseを選択すると、日本語メニューは日本語のページのみでの表示とする事が出来ます。

Examples of settings.

#C21 Views-2 Block の設定を見て行きましょう。

Header. / 日本語用メインメニュー
Body. / ページタイトル、メインページコンテンツ、パンくず、関連記事
Side Menu 2. / 日本語用サイドメニュー
Footer. / 日本語用フッターメニュー

以上の4箇所のリージョンに日本語ページの各メニューを配置しています。

Header.

ヘッダー > 日本語コンテンツ用ナビゲーションメニュー

Main menuというナビゲーションメニューのブロックを配置します。

リージョン:ヘッダー
配置するブロック : Main menu
表示条件 : 日本語ページ全て

Header Setting

ブロックの説明
Menu Main
タイトル
[ Main menu ] システム内部名称: b5subtheme_menumain
このフィールドはトークンをサポートしています。 利用可能なトークンを表示します。
タイトルを表示 // チェックボックスで選択 --- メニューなので選択しない
閲覧の制限
Response Code : (active tab)
[指定した値を入れます -- 4xx ]
-- Specify response codes. Enter one per line. This only works for 4xx response codes.
-- 条件を反転する
// Apacheのステータスで選択します
言語 : Japanese
#言語を選択
--  英語
-- Japanese // 日本語を選択
// 強制する言語を選択してください。何も選択しない場合は、すべての言語が利用可能となります。
Response status : 制限なし
-- 成功 (200)
-- アクセスが拒否されました (403)
-- ページが見つかりません (404)
// レスポンスステータスが一致するページにブロックを表示します。何もチェックされていない場合、ブロックはすべてのページに表示されます。その他の応答ステータスは使用されません。
ページ : 特定のページに制限
#ページ
一覧にあるページで表示
一覧にあるページで非表示
// URLで表示させたいさせたくないの条件を指定します。
役割 : 制限なし
#ユーザーが以下の役割を持っている場合
-- 匿名ユーザー
-- 認証済みユーザー
-- Content editor
-- 管理者
// 権限での表示を指定します。
コンテンツタイプ : 制限なし
-- 記事
-- 問い合わせフォーム
-- Creation記事
-- En Creation
-- En Life Style
-- Life Style 記事
-- 基本ページ
-- 写真ギャラリー
// コンテンツタイプでの表示を指定します。
ボキャブラリー
-- Article
-- Shop info
-- 店舗
-- Tag
-- タグ
-- 記事内容
#条件を反転する
// タームでの表示を指定します。 // 表示非表示の切り替えが可能
リージョン
> ヘッダー
このブロックを表示するリージョンを選択してください。
ブロックの保存 / ブロックを削除

ヘッダーに表示するナビゲーションメニューは全サイト共通ですが、日本語メニューなので、日本語のページ全てに表示するように設定しています。英語ページも同様に英語メニューなので英語のページ全てに表示するように設定します。

ここでの設定は、リージョン : ヘッダー > 日本語メニュー : Main menuブロック > 言語 : Japanese の設定を行っています。

Body.

Body. / 記事本文で表示するブロックを設定します。

Main content >

ページのタイトル // System / デフォルトで用意されています。
メインページコンテンツ // System / デフォルトで用意されています。
パンくず // 追加モジュール easy_breadcrumbのブロック
関連記事のブロック // ビューで作成した関連記事のブロック

上記のブロックを配置します。各ブロックの設定項目は上記のMain menuのブロックの設定と同様なので各条件の概要説明は割愛します。

Body. 1-1. Title.

タイトルのブロックはシステムのデフォルトで用意されています。主な用途はタイトルの表示/非表示を設定します。当サイトはタイトルの表示をデフォルトのまま使用していますので、ここでの設定はしていません。今後フルスクリーンのページを作ったりした際にタイトルを非表示とする必要がありますのでその時が来たら設定を行おうと考えています。

Body. Title Setting

ブロックの説明
ページのタイトル
タイトル
[ ページのタイトル ] システム内部名称: b5subtheme_menumain
タイトルを表示 --- メニューなので選択しない
閲覧の制限
Response Code -- 設定なし
言語 : 制限なし
Response status : 制限なし
ページ : 制限なし
役割 : 制限なし
コンテンツタイプ : 制限なし
ボキャブラリー -- 設定なし
リージョン
> Main content
このブロックを表示するリージョンを選択してください。
ブロックの保存 / ブロックを削除

Body. 1-2. Main Page content.

メインページコンテンツのブロックはシステムのデフォルトで用意されています。主な用途は記事やページの表示/非表示を設定します。当サイトはここでの設定をデフォルトのまま使用していますので、ここでの設定はしていません。記事やページ全体の表示に関わる設定なので基本はデフォルトで、用途によって一部のコンテンツタイプを非表示とするような設定を行う際に使用する機能と考えています。

Body. Main Page Content Setting

ブロックの説明
メインページコンテンツ
タイトル
[ メインページコンテンツ ] システム内部名称: b5subtheme_content
タイトルを表示 --- メニューなので選択しない
閲覧の制限
Response Code -- 設定なし
言語 : 制限なし
Response status : 制限なし
ページ : 制限なし
役割 : 制限なし
コンテンツタイプ : 制限なし
ボキャブラリー -- 設定なし
リージョン
> Main content
このブロックを表示するリージョンを選択してください。
ブロックの保存 / ブロックを削除

Body. 1-3. Breadcrumb.

Breadcrumb:パンくずリストは、Bootstrap5テーマにデフォルトで用意されています。配置がヘッダーとボディの間になるので、表示箇所がページ上部になってしまいます。私は、パンくずはページ下部に設置したいので、テーマに用意されるコンテンツブロックのパンくずは使用せず、Easy_Breadcrumbのモジュールを使用し、このモジュールが生成するブロックを、ブロックレイアウトでメインコンテンツ下部に配置しています。

Easy_Breadcrumbモジュールも簡易ながら優れたモジュールですので、機会があれば設定方法や使用法などを記事にまとめて行きたいと考えています。

基本全ページに配置するので、表示するページの指定はしていません。

Body. Breadcrumb Setting

ブロックの説明
パンくず
タイトル
[ パンくず ] システム内部名称: b5subtheme_breadcrumbs
タイトルを表示 --- メニューなので選択しない
閲覧の制限
Response Code -- 設定なし
言語 : 制限なし
Response status : 制限なし
ページ : 制限なし
役割 : 制限なし
コンテンツタイプ : 制限なし
ボキャブラリー -- 設定なし
リージョン
> Main content
このブロックを表示するリージョンを選択してください。
ブロックの保存 / ブロックを削除

Body. 1-4. Related articles.

このブロックが、前記事のビュー機能で作成した関連記事のブロックになります。ブロックレイアウトのリージョンでメインコンテンツを選択しページ下部に表示されるようにブロックを配置します。

表示条件は、日本語の記事に表示させるので言語選択をJapaneseに指定
表示させるページはCreation記事に関わる関連記事のブロックなのでコンテンツタイプで : Creation記事を指定
ビューにて設定した表示件数に準ずる、掲載する記事を3記事としています。

上記の設定を行っています。

他のブロックと異なるのは、ビューで作成したブロックなのでタイトルがなく、その代わりにシステム内部名称でブロックの指定をしています。内部名称はb5subtheme_views_block__creation_bottom_block_1の形となっており、b5subtheme_views_blockまでがテーマのビューのブロックになり、以降が作成した関連記事のブロック名となっています。

このブロックの設定を行う事で、/creationのDrupalやAWSの記事内に、関連記事を表示することが出来ます。

Body. Related articles Setting

ブロックの説明
Creation-Bottom_block
ブロックごとの項目
> 3(デフォルト設定)
// ビューで作成したブロックなのでビューに準じた設定が表示されます。
タイトルを表示 --- メニューなので選択しない
閲覧の制限
Response Code -- 設定なし
言語 : Japanese // ブロックが日本語の関連記事なので日本語の記事にのみ表示
Response status : 制限なし
ページ : 制限なし
役割 : 制限なし
コンテンツタイプ : Creation記事 // Creation記事の関連記事なのでここで指定
ボキャブラリー -- 設定なし
システム内部名称
> b5subtheme_views_block__creation_bottom_block_1
このブロックインスタンスに固有の名称。半角英数字とアンダースコアのみを使用することができます。
リージョン
> Main content
このブロックを表示するリージョンを選択してください。
ブロックの保存 / ブロックを削除

Right side menu.

Right side menu. / 右側に表示するサイドメニューのブロックを設定します。

当サイトは4種類のサイドメニューを使い分けています。

日本語 /基本ページ / Creation / 写真バックが黄色のサイドバー
日本語 / Life Style / 写真バックが青色のサイドバー
英語 /基本ページ / Creation / 写真バックが黄色のサイドバー
英語 / Life Style / 写真バックが青色のサイドバー

今回の設定は /creationのページになるので

日本語 /基本ページ / Creation / 写真バックが黄色のサイドバー

の設定になります。※他のサイドメニューも同様の設定をしています。

Right side menu Setting

ブロックの説明
Side Bar 01
タイトル
Side Bar 01 : システム内部名称: b5subtheme_sidebar01
タイトルを表示 --- メニューなので選択しない
閲覧の制限
Response Code -- 設定なし
言語 : Japanese // ブロックが日本語の関連記事なので日本語の記事にのみ表示
Response status : 制限なし
ページ : 特定の記事に制限
-- /lifestyle/*
-- /en-creation/*
# 一覧にあるページで非表示
役割 : 制限なし
コンテンツタイプ : 制限なし
ボキャブラリー -- 設定なし
リージョン
> 第2サイドバー
このブロックを表示するリージョンを選択してください。
ブロックの保存 / ブロックを削除

サイドメニューは、4種類あり、表示されるページの候補が複数あります。言語とLifeStyleの可否が選定条件となりますので、今回日本語の基本ページと、Creationの記事に表示させ、Life Styleの記事と英語の記事は非表示に設定します。

言語 : Japanese // ブロックが日本語の関連記事なので日本語の記事にのみ表示
ページ : 特定の記事に制限を選択します。
-- /lifestyle/*
-- /en-creation/*
# 一覧にあるURLのページで非表示となります。

URLの後ろにワイルドカード/*を入れると、/lifestyle以下の記事は全て非表示となります。

Footer menu.

Footer menu. / ページ最下部に表示するフッターのブロックを設定します。

当サイトは日本語/英語のコンテンツがあるので2種類のフッターメニューを使い分けています。

日本語 / リンク先が日本語コンテンツになるフッターブロック
英語 / リンク先が英語コンテンツになるフッターブロック

今回、日本語のコンテンツに表示させるフッターブロックの設定を行います。

Footer menu Setting

ブロックの説明
Footer01
タイトル
Footer01: システム内部名称: b5subtheme_footer01
タイトルを表示 --- メニューなので選択しない
閲覧の制限
Response Code -- 設定なし
言語 : Japanese // ブロックが日本語の関連記事なので日本語の記事にのみ表示
Response status : 制限なし
ページ : 制限なし
役割 : 制限なし
コンテンツタイプ : 制限なし
ボキャブラリー -- 設定なし
リージョン
> フッター
このブロックを表示するリージョンを選択してください。
ブロックの保存 / ブロックを削除

Explanation.

ブロックレイアウトの機能を使い、ヘッダー、ボデイ、左サイドメニュー、フッターにブロックを配置する設定をまとめています。

ブロックレイアウトの設定を行う事で、記事 #C21 Views-2 Block のページの構成になります。

ヘッダー

メインナビゲーション // 日本語ページナビゲーション

ボディ

タイトル // 記事タイトル #C21 Views-2 Block
記事 // #C21 Views-2 Blockの記事本文
パンくず // 全てのページに表示
関連記事 // 日本語 /creationページに関連するブロック

右サイドメニュー

右サイドナビゲーション // 日本語ページサイドメニュー

フッター

フッター // 日本語ページフッター

ブロックレイアウトの設定は、テーマが用意する各リージョンに表示したいブロックを指定し、どのページに表示するかを、言語やコンテンツタイプやURLなどの所定の条件を指定することで配置することが出来る機能になります。

Drupalの利点でもあり、面白さである構成の自由度の高さを実感できる機能であります。条件指定の考え方などはパズルのようなもので条件を変えても結果は同様の表示になるケースもありますが他の要素が絡むと条件指定に無理が生じ自ずと条件が決まってきます。ブロックレイアウトは最終的なWebサイトの表示項目を決定する機能でもあるのでサイト構成を考える大きな起点にもなる機能です。

ブロックレイアウトを理解すると、サイト構成の大まかな設計図と、コンテンツタイプの構成や、記事、ビューやタクソノミーなど構成要素をどうするかを考えられるようになります。この事でWebサイトを目的の形で構成する為に、単独ページの作成だけでなく、サイト内の機能分布や巡回路など、より具体的な完成系をイメージしながら構築していけるようになります。

Conclude.

Drupalの記事を書く難しさに、複数の機能にまたがる設定をしないとサイト構築そのものが成り立たない事があります。コアプログラムのインストールを行いデフォルトの状態でもWebサイトは構成されていますが、これをそのまま使用して運営する方はいないと思います。

Drupalを利用し目的に応じてレイアウトやデザインを変更してイメージするWebサイトを構築していくにはDrupalの概念やルールをある程度理解しないと成り立たないので、概念を説明するために記事を書き進めています。最低限理解した方が良いと考える項目を挙げて記事を書き進めていますが、私自身の力不足で、まとまりが悪く理解し難い記事ばかりになっています。書き進めた記事を一旦まとめて、もう少し簡潔で実践的な形の記事を書き進められるように考えています。