#C15 Content and Structure.

Drupalでページ作成を行うメニューであるコンテンツと設定を行うサイト構築を記事でまとめましたが、両者の関連性と実例をまとめる事でDrupalのサイト構築のルールが見えて来ます。

Summary.

今回の記事は、前の記事で説明した、ページの作成はコンテンツメニュー、ページ作成に使用するコンテンツタイプの作成と編集はサイト構築で行うという、Drupalのルールを実例で見て行きます。この事でページに関わる一通りの作業はページ作成メニューで行うという一般的なイメージではなく、Drupalはページ作成はコンテンツメニュー、設定はサイト構築メニューで行うというルールになっている事を理解し、サイト構築メニューで何を行うかという概念を理解して行きます。

1.Page Creation.

ページの作成の例を見て行きましょう。サイト構築 > コンテンツタイプで実際に作成したコンテンツタイプ / Life Styleの記事を使用して記事を書いた#L02 Lee 101Z 50'sの記事を例に説明して行きます。

1-1.Structure.

ページを見ていただくと、シンプルなページになっています。

#L02 Lee 101Z 50's

本文のページ構成要素は、

  1. タイトル    Lee 101z 50's
  2. Top画像    ジーンズを背後から写した白黒写真
  3. 文章による記事1    Lee 101zに関する記事  IntroductionからExample Photos.まで
  4. サンプル画像    全身を写した白黒写真
  5. 文章による記事2    Ditails.以降の記事のまとめ
  6. 投稿日 : 2024-09-26  |  記事の作成日
  7. 投稿者 : S.Takeda  |  記事を書いた人
  8. タグ : Life Style  |  タクソノミーで設定したターム 
  9. 記事内容 : Old-Clothes Articles.  |  タクソノミーで設定したターム 
  10. パンくずリスト    ホーム / Life Style. / #L02 Lee 101Z 50’s

が表示されています。

全体のページレイアウトは、

  1. ヘッダー    左にサイトロゴとタイトル    右側にナビメニュー
  2. 上記の記事本文
  3. フッター    サイト名とPowerd By Drupal
  4. 右サイドメニュー

という記事の本文を上下右のガイドで挟む形のページが構成されています。

この記事ページの作成を行う為に、記事を書くコンテンツタイプに、上記した画像や記事を書くフィールド、タグや投稿者、日時のフィールドを追加する必要があります。

Drupalのデフォルトテーマとして用意されるOliveroや、当サイト使用テーマであるBootstrap5に、デフォルトで用意されている記事や固定ページのコンテンツタイプの初期状態では、上記のページ構成に必要なフィールドが用意されていません。

Drupalでページを作成する為にDrupalのルールを理解する事がこれまで紹介した記事の目的になっています。一例ですがタグの要素をページに追加したい場合以下のような流れになります。


  1. 記事内に、後のリストページの仕分けを出来るよう、タグ要素を持たせたい
  2. タクソノミーでタグとなるボキャブラリーを作成し、必要なタームを作成。
  3. コンテンツタイプで、ページ要素にタグを持たせる為に、タグのフィールドを追加
  4. タグのフィールドを追加したコンテンツタイプで記事を作成

記事内にタグの要素が必要となった際に、上記のプロセスが必要となります。説明している内容の鍵に、ページ内に、タグ要素が必要となった場合、1.タクソノミーでタグ要素の設定、2.コンテンツタイプでページ内にタグ要素を配置、3.タクソノミーの設定を行なったコンテンツタイプで記事を作成します。

この別メニューに渡り設定を行う必要がある事の理解と、設定をどこで行えば良いかという事を理解する事でデフォルトで用意されるコンテンツタイプで作成する記事のページにはない、目的とする要素を持つ記事のページを作成出来るようになります。

Drupalで記事を書いたりするコンテンツタイプはテンプレートのようなもので、記事はこのコンテンツタイプというテンプレートを使って作成します。このテンプレートであるコンテンツタイプを作成したり設定するのにサイト構築での設定が必要になるというのが今回の記事になります。

1-2.Process.

#L02 Lee 101Z 50'sの記事を書き、ページとして構成するプロセスをまとめてみます。

Contents

コンテンツメニューでコンテンツタイプを選び記事を書きます。

  1. コンテンツメニューでLee 101zという古着のジーンズの記事を書きます。
  2. 古着の記事を書くので古着の記事を書くために用意したLife Styleというコンテンツタイプを選択して記事を書きます。Life Styleには以下で設定したタグや画像を追加出来るフィールドが用意されています。
Taxonomy

サイト構築 > タクソノミーでボキャブラリーとタームを作成します。

  1. タグというボキャブラリーを作成し、タグに属するLife Styleというタームを作成
  2. 記事内容というボキャブラリーを作成し、記事内容に属するOld-Clothes Articles.というタームを作成
Content Type

サイト構築 > コンテンツタイプでページ内に設置する各要素のフィールドを設定します。

  1. コンテンツタイプLife Styleはサイト構築メニューのコンテンツタイプで作成しています。
  2. コンテンツタイプの編集で用意されているデフォルトのフィールドに、1.画像本文、2.本文2、3.投稿日、4.投稿者、5.タグ、6.記事内容のフィールドを追加し設定しています。
Block Layout

サイト構築 > ブロックレイアウトでヘッダー、フッターサイドメニュー、パンくずリストの表示を設定します。

  1. ブロックレイアウトでデフォルトのパンくずリストを非表示にして、ページ最下部にパンくずリストを表示します。
  2. ブロックレイアウトでLife Styleの記事で使用するサイドメニューを選択し表示させます。
  3. ヘッダーは全ページ共通で表示するのでここでの設定は必要ありません。
  4. フッターは全ページ共通で表示するのでここでの設定は必要ありません。
Creating Articles from the Contents menu.

ページの作成はコンテンツ > Life Styleの記事で以下の入力を行い記事を作成しています。

ホーム > 管理 > コンテンツ > コンテンツ > Life Styleの記事

  1. タイトルの入力  |  既存フィールド { #L02 Lee 101Z 50's }
  2. Top画像の挿入  |  既存フィールド { バックから撮影した白黒写真 }
  3. 記事1に記事を書いていく  |  既存フィールド { Introdaction.から4.歴史と機能美までの記事 }
  4. 画像本文に画像の挿入 I 追加フィールド { ページ中央の全身ショットの白黒写真 }
  5. 本文2に記事を書いていく | 追加フィールド{ 5.ディテールから記事最後まで }
  6. 投稿日を挿入  |  追加フィールド {投稿日を指定  2024-09-26 }
  7. 投稿者を挿入  |  追加フィールド {投稿者を指定  S.Takeda }
  8. タグにLife Styleのタームを選択  |  追加フィールド { Life Styleを指定 }
  9. 記事内容にOld-Clothes Articles.のタームを選択  |  { Old-Clothes Articles.を指定 }
  10. URLエイリアスに/lifestyle/fa002を挿入  |  既存フィールド { 実際に使用するURLを指定 }
2.Article Purpose.

以上のプロセスで、#L02 Lee 101Z 50'sの記事のページが出来上がります。実際の作業はここにまとめた文章ほど面倒ではありません。今回3つの記事を費やして長々と説明していますが、ページ作成とDrupalのルールを理解する事は非常に重要な事で、ここを理解出来なかった方がDrupalのインストールはしたが結局利用を諦めてしまう原因になっているのではないかと考えています。

2-1.Conceptual Understanding.

Drupalでページを作成するには、ページを作成するコンテンツメニューだけでなく、

サイト構築のメニューでサイト構成を目的とする形に設定しないと、デフォルトで用意されるページ構成から抜け出せず、自由にページを構成する事が出来ません。

理解すると難しい事ではないので、Drupalに興味を持ちインストールまではしたが、結局利用せず諦めてしまった方が、この事に気がついて折角インストールしたDrupalを利用するきっかけになればと考え記事を書いています。

ページを作成する為のテンプレートがコンテンツタイプであり、このテンプレートを作成したり必要な要素を追加したりするのがサイト構築 > コンテンツになります。

構成要素の基本はフィールドと呼ばれ、このフィールドにタグのフィールドや画像のフィールドなどを追加したり設定を行います。この設定を行うことで、テンプレートに必要な要素が追加され目的とする構成でページを作成する事が出来ます。

ページ作成 < コンテンツタイプの選択  =  ページ作成のテンプレート < 初期設定で用意  |  必要最低限

コンテンツタイプ  =  ページ作成のテンプレート < 必要な要素の追加  |  タグの追加や画像フィールドの追加

サイト構築 > コンテンツタイプ  |  ここで設定

Drupalを利用すると必ず必要になる重要な事であり、目的とするWEBサイトの構築に必須な知識でありながら、私自身がこの知識を得られる場所をDrupalインストール当初見つけられなかった事がこの記事を書いた理由になります。インストール以降、メニューを色々触っているうちに理解しサイトを構築していくのですが、理解出来ずにDrupalを使用する事を諦めてしまう方も多いのではないかと考えています。

3.Conclude.

今回の記事を書いていて考えていたことに、子供の頃読んだ偉人伝にあったフォードを創業したヘンリーフォードの話を思い出します。うる覚えですが、ヘンリーフォードの母が危篤状態で病院に行くのですが、当時の馬車で病院に向かい、結局間に合わず、母は亡くなります。その時ヘンリーフォードは悔やむ中で、馬車より速い乗り物があれば母は助かったのではと考え、自分が直面した不幸を世の中から無くしたいと考え、馬車より速い乗り物を作る事を考えます。それが自動車で、その自動車を作る会社を創業し、世界に名だたるフォードが出来上がります。

私の記事がヘンリーフォードのような偉人の話と直接関係ないのですが、自身が直面した問題と同じ問題に直面する方がいるんじゃないかと考え、同じ問題に直面した方がわずかでも問題解決につながればと考えこの記事を書いています。ボランティアとまでは行きませんが、Drupalというオープンソースを利用させていただいているので、オープンソースの基本精神である互助の精神を持ち、稚拙で微力ながら私が直面し解決出来た物事を提示することで、他の方に少しでも役に立ちDrupalが良い形で普及してほしいと願っています。

長い文章と、読みにくい記事ではありますが、見ていただいた方が、Drupalを利用出来るきっかけとなったら幸いと考えています。

最後にコンテンツタイプとブロックレイアウトの構成をまとめました。

Content type: LifeStyle field structure.

フィールド追加前のDefaltの記事のページ

|-- コンテンツタイプ / 記事
|     |
|     |-- タイトル / Defaultのフィールド
|     |-- 画像 / Defaultのフィールド
|     |-- 本文 / Defaultのフィールド
|     |-- タグ / 追加フィールド {サイト構築 > コンテンツタイプで設定} |
|-- タクソノミー
|     |-- ボキャブラリー / タグ{サイト構築 > タクソノミーで設定}
|     |-- ターム / 設定なし


作成したLife Styleのページ

|-- コンテンツタイプ  /  Life Style
|     |
|     |-- タイトル  /  Defaultのフィールド
|     |-- 画像  /  Defaultのフィールド
|     |-- 本文1  /  Defaultのフィールド
|     |-- 画像本文  /  追加フィールド { サイト構築 > コンテンツタイプで設定 }
|     |-- 本文2  /  追加フィールド { サイト構築 > コンテンツタイプで設定 }
|     |-- 投稿日  /  追加フィールド { サイト構築 > コンテンツタイプで設定 }
|     |-- 投稿者  /  追加フィールド { サイト構築 > コンテンツタイプで設定 }
|     |-- タグ  /  追加フィールド { サイト構築 > コンテンツタイプで設定 }
|     |-- 記事内容  /  追加フィールド { サイト構築 > コンテンツタイプで設定 }
|
|-- タクソノミーの追加項目
|--ボキャブラリー  /  タグ { サイト構築 > タクソノミーで設定 }
|     |-- ターム  /  Life Style{ サイト構築 > タクソノミーで設定 }
|
|-- ボキャブラリー  /  記事内容{ サイト構築 > タクソノミーで設定 }
|     |-- ターム  /  Old-Clothes Articles.{ サイト構築 > タクソノミーで設定 }

Block Layout Composition

ブロックレイアウト

|-- ヘッダー
|         なし
|-- Navigation branding region
|     |-- サイトタイトル
|--  Main navigation region Additional navigation region
|     |-- メニュー
|-- パンくず
|         なし{ サイト構築 > ブロックレイアウトで設定 }
|
|- 第1サイドバー
|         なし
|
|-- メインコンテンツ
|     |-- メッセージ  /  Default
|     |-- ページのタイトル  /  Default
|     |-- タブ  /  Default
|     |-- ヘルプ  /  Default
|     |-- プライマリ管理アクション  /  Default
|     |-- メインページコンテンツ  /  Default 
|     |-- パンくず  /  追加ブロック{ サイト構築 > ブロックレイアウトで設定 }
|
|- 第2サイドバー
|     |-- Sidebar01  /  追加ブロック{サイト構築 > ブロックレイアウトで設定}
|
|- フッター
|     |-- Footer01  /  追加ブロック{ サイト構築 > ブロックレイアウトで設定 }

Drupalの基本概念を理解するというテーマについて、ページ作成を行うという事例を切り口に記事を書き初めて、結局全3記事となってしまい読みにくい記事となってしまいました。Drupalの設定を行うサイト構築のメニューは、非常に柔軟で自由度が高いので、以降このメリットを活かしながらWEBサイトを構築していく記事を書いて行きます。

今回記事をまとめてみて、必要と考える事項を書き出した記事を書いていますが、記事の書き方やまとめ方が難しく、読みにくい記事になってしまうので、今後どうすれば簡潔で明快な記事となるかも一つのテーマとして考えて行きたいと感じています。

Next article.
Basics of creating page

ページ作成に必要なDrupalの基本概念を記事としてまとめていたら複数記事になりわかりにくいので整理します。

投稿日
2024-10-26
投稿者
S.Takeda
タグ
記事内容
Related articles.

DrupalやWebサイト構築の関連記事になります。宜しければご覧ください。

#C05 AWS registration and IAM.

AWSの登録後IAMで、実際にAWSを使用する権限を持つ別アカウントを作成します。

AWS Articles.
#C24 Short break

DrupalでWebサイトを構築するために理解する概念と称して各機能についての記事を書いて来ましたが、なかなか難しく少し行き詰まっているので小休止と題して、今のサイトの状況についてまとめてみます。

Drupal Articles.
#C15 Content and Structure.

Drupalはページ作成するコンテンツメニューと、サイト構築メニューでサイト構成を目的とする形に設定しないとデフォルトで用意されるページ構成から抜け出せず自由にページを構成する事が出来ません。この事についてまとめています。

Drupal Articles.
Side Bar 01

Word Pressで制作したLife StyleのBlogをDrupalに移植し、Drupalの記事を含めて更新中です。

Drupal初学者のBlogです。

DrupalやWEBサイト構築についての記事をまとめています。

  全ての記事

  Drupalに関わること

  WEBサイト構築

  Macの環境

  AWSに関わる事

古着やファッションについての記事をまとめています。

  全ての記事

  古着について

  Fashionについて

  時計について

  写真について

  お勧めのお店

Core Drupal 10.4.0

Theme Bootstrap5 4.0.3

  Drupal

  bootstrap5

  Bootstrap

  Font Awesome

  Amazon Web Service

  Amazon Lightsail

  Bitnami

  Google reCAPTCHA