Pageの作成 2
前項で、Drupalに備わるコンテンツの機能の概要をまとめていますのでこの項で、実際にコンテンツ機能を使いページを作成して行きます。題材はLifeStyleの古着の記事、Lee 101Z 50’s Center Black tagを使ってみます。この記事を選んだのは、写真を2枚使い、コンテンツエリアで記事を書き、コンポーネントで選択した次の段階機能を使い購入店を紹介するシンプルな構成になっています。
記事作成のルール
ルールと言うほど厳密ではないのですが、通常のページを作る際、Googleが推奨している構造化ルールに則る形で構成しているケースがほとんどだと思います。その特徴にHタグ<見出しタグ>を使うことが推奨されています。この見出しとPタグ<段落タグ>を使い記事を書いていくケースがほとんどかと思います。
実際には、スタイルシートの装飾やDivタグを組み合わせていたり、コンテナ構造と言われる入れ子構造でレイアウトをコントロールしながらページのデザインが作られているケースが多いと思います。CMSのテーマを使うとこの辺りはデフォルトで用意されていますので、特に意識せずページを作成しているケースがほとんどだと思います。
Hタグの利点は、h1からh6まで6段階の見出しが用意されており、大見出し、中見出し、小見出しのような形で、見出しを階層化し、閲覧者に記事の意味合いを提示したり、大きな効果として、検索エンジンがページを判断する際に、ページ構成をHTMLのソースコードから判断する際にHタグで構造を理解する事があります。
Hタグは非常に便利なのですが、唯一弱点があります。元々、英語のページを前提に考えられておりH1タグを英語で表示したら問題ないのですが、H1タグで、日本語のタイトルを表示したりすると、かなり不恰好となり、せっかくのページデザインが台無しになってしまいます。
私はそれが嫌なので、当ページの見出しはブロックオートタグを使っています。なぜブロックオートタグなのかは、CivicThemeが用意するブロックオートタグが非常に洗練されたデザインとなっており見やすい事があります。
見出し：ブロックオートタグ
これがCivicThemeが用意するブロックオートタグになります。ブロックオートタグ<引用タグ>
この何気なく書いている文章は段落タグになります。Pタグ<段落タグ>
基本はこの2つで記事を書いています。
画像を選択すれば記事のほとんどの部分は完成します。
早速作成してみましょう。
/admin/content
|
|- [1]コンテンツ
|
|---- [1.1]コンテンツ追加 ※ここをクリックします。
// 新規のコンテンツを追加
|
/node/add
|
|- > [1] Page ※ここをクリックします。
// これでCivicThemeのページを作る準備が揃います。
|
|- > 新しいコンテンツの編集画面が開きます。
|
----header情報----
// タイトルに記事名を入れます。 > Lee 101Z 50's center Black tag と入力
// 概要に記事の説明を入れます。> 作成例なのでLee 101Z 50's center Black tag の記事と入力
// メタデータはタクソノミーの設定がまだなので、別項で設定した後入力します。
|
----body情報 ここからが記事作成----
|- コンテンツを追加
// コンテンツを追加を選択します。
|
// サイドバーのURLエイリアスやメタタグは別項で入力します。
|以上でページを編集する準備が整いましたので、実際のページを作成して行きます。
// 段落を選択します。 > ここから記事を書いて行きます。
// "ブロックオートを選択します。" > Lee 101Z 50's center Black tag と入力
Lee 101Z 50’s Center Black tag
// 画像をアップロードします。>
// "ブロックオートを選択します。" > はじめに と入力
はじめに
// ブロックオートをオフにします。> ここから記事を書いて行きます。
ジーンズといえばボタンフライのLevi’s501と考えていた私に、ジッパーフライの魅力と、よりトラウザーズのようなスタイリングの魅力を教えてくれたLee 101Z、非常に履きやすいモデルで501XXほど気を使わずに使える優れたジーンズです。
// "ブロックオートを選択します。" > ゆったりしたシルエットと便利なジッパーフライ と入力
ゆったりしたシルエットと便利なジッパーフライ
// ブロックオートをオフにします。 > ここから記事を書いて行きます。
Lee101Zは興味がありながらも、Levi’sに比べると個体数が少なく情報も余りないのでなかなか手にすることがなかったジーンズです。私の101Zはセンター黒タグと言われる50年代のモデルになります。ライダースと言われ元々カウボーイの為に作られたジーンズで、501と比べると、股上が深く、少しゆったりしたシルエットで、ジーンズながらシルエットの綺麗なストレートのトラウザーズのような形ですのでどんな服にも合わせやすく、使い勝手の良い優れたジーンズです。
現代だと、そのシルエットから、バイクに乗る方（ハーレーなんかのアメリカンスタイルやクラシックなトライアンフなんかに乗るバイク乗り）が選んでいるイメージがあり、実際、友人のハーレー乗りは、Lee101Zを愛用しています。
// 区切り<セパレーター：罫線>を選択します。 > 記事を一旦区切ります。
> ここから記事を書いて行きます。
私の101Zの購入のきっかけは、ジッパーフライのジーンズが欲しくて、501ZXXを探しに原宿のFake-aさんに行った際、自分のジャストサイズがなく、店長さんに101Zを勧められて、履いてみたら良かったので、購入したのがきっかけです。
わたりが太く裾までストレートになるシルエットのおかげで、ゴツめのブーツとも相性が良く、ハードでかっこ良いスタイルになります。
サイズがウエスト30inch、レングスが33inchと少し長めですが、踵のある靴を合わせると、裾が地面に付かず履けるので、ロールアップせずに履いています。
// 区切り<セパレーター：罫線>を選択します。 > 記事を一旦区切ります。
> ここから記事を書いて行きます。
Lee101Zというと、ジェームスディーンが映画”理由なき反抗”で履いていたので、50年代のアメリカの若者や不良のイメージがあります。そのイメージが強過ぎて、癖の強いジーンズだと思っていたのですが、手に入れて履いてみると、非常に履きやすく、合わせる服を選ばない寛容さがあり、そのゆったりしたシルエットとジッパーフライのおかげで、履き心地が良く、何も考えず手に取り履いてしまう良さがあります。
LeeのジーンズはLevi’sに比べ、生地や染色の関係で退色が進み難く色が残った個体が多いです。Levi’sの魅力がこの色落ちですが、Leeは逆に色落ちの無さが魅力でもあります。膝やお尻のあたりだけが擦れて色落ちしてるような個体が多いのですが、この色落ちも使いこんで出来上がったエイジングで、非常に魅力的です。
501同様、元々は作業着として作られていて優れた機能美があり、長年変わらぬ作りで今も作られている優れたジーンズです。50年代に作られた個体で相応にエイジングし、私の体にあっているため、使用頻度の高いジーンズになります。冬は、A2やJ100などのレザージャンパーと合わせ、White’sのブーツを履いたちょっとハードな感じの合わせがメインで、春夏は、Tシャツ一枚でスエードローファーなどと軽やかに合わせて楽しんでいます。
// "ブロックオートを選択します。" > 着用例 と入力
着用例
// 画像をアップロードします。>
// "ブロックオートを選択します。" > ディテール と入力
ディテール
// ブロックオートをオフにします。> ここから記事を書いて行きます。
> 箇条書きリストを選択します。
- センター黒タグ(50s)
- 6本ベルトループ
- ウエスト30inch レングス33inch
- 後ろポケットにたたきの修復あり
- 色は濃く残っています。
// "ブロックオートを選択します。" > 組み合わせ と入力
組み合わせ
// ブロックオートをオフにします。> ここから記事を書いて行きます。
> 箇条書きリストを選択します。
- フィールドジャケット : M47 サイズ44
- Tシャツ風ヘンリーネックのニット : TOM FORD サイズ46
- Denim : Lee 101Z 1950s ウエスト30inch:レングス33inch
- 靴 : ロロピアーナ : White Sole
- 帽子 : Borsalino
- 時計 : IWC Mark11 1940s
- サングラス : Ray-ban WAYFARER 90’s(BAUSCH+LAMB)
// "ブロックオートを選択します。" > おわりに と入力
おわりに
// ブロックオートをオフにします。> ここから記事を書いて行きます。
501ZXXを探していたら辿り着いた形で手に入れたLee 101Z 50s。実際に手に入れ履いていくうちに101Zの良さが見えて来て、使用頻度が高く愛着のあるものになっています。501XXのようなディテールや魅力的な色落ちなどアイコンとしての魅力的な派手さはないのですが、その主張しない事こそがLee101Z最大の魅力かなと感じています。
作りがトラウザーズ的なので、Levi’sのジーンズ的な履き心地よりゆったりしてより楽に履ける事も使用頻度が高くなる理由でもあります。スペアに一本別の個体を探しているのですが、元々個体が少なくまだ見つかっていませんが、自分にあったものを気長に探すのもヴィンテージジーンズの楽しみです。
// ここから購入店の紹介になります。
|
// 上記のコンテンツを一旦抜け、パラグラフから
|---- 次の段階を追加
// 次の段階を追加を選択します。
|
|-次の段階を開きます。
|
|---- タイトル
// お店の名前を入れます。ここにリンクが貼られます
// ベルベルジン公式サイト
|
|---- コンテンツ
// お店のコメントを入れます。
// 私のLee 101Z 50sは、東京原宿にあるFake-a(フェイクアルファ)さんで購入しています。
-----------------以下省略-----------------
|
|---- リンク
// お店のホームページへのリンクを貼ります。
// https://webstore.berberjin.com
|
|
//コンテンツや次の段階の編集画面を折りたたむと
|- コンテンツ
|---- コンテンツ
|---- 次の段階
// のように表示されています。
|
// 保存します。
|
|---- 下書き
|---- Published ※ここを選択で公開となります。
|---- アーカイブ済み
|- 保存 保存をクリックしてください。以上でページが出来上がります。
要約します。
- コンテンツ機能から > 新しいコンテンツ作成を選択
- CivicThemeが用意する > Pageを選択
- ページの編集画面が表示されます。
- header項目であるタイトルなどの情報を入力
- サイドバーのメタタグやエイリアスなどを入力 ※ 今回は省略
- コンテンツブロックを選択し > 記事を作成
- 見出しは > ブロックオートタグを使う
- 記事は > 段落タグを使う
- 画像は、> 画像のアップロード機能を使いアップロード
- 引き続き、> 見出しはブロックオートタグを使う
- 記事は> 段落タグを使う
- 記事で > 箇条書きリストを使う
- 記事が完了したら、一旦、コンテンツブロックを抜ける
- お店紹介を作成 > 新しいブロックを作成 > パラグラフから > 次の段階を追加ブロックを選択
- パラグラフ所定の [1] タイトルを入力
- パラグラフ所定の [2] コンテンツに記事を入力
- パラグラフ所定の [3] リンクにお店のURLを入力
- 一通りページが出来ていますので、内容を確認します。
- Publishedを選択して保存すると公開します。
- ※ この記事では公開としていますが実際は下書きで記事を作成し、確認しながらページを作り、公開状態になった段階で公開して行きます。
のステップを踏んでページが作成されています。
優秀さが際立つCivicTheme
記事を書いたり、タイトルを考えたり、画像を選択する手間はありますが、ページの構成や見た目を整える作業は必要ありません。これはCivicThemeのユーザーインターフェースとデフォルトで用意されたデザインが優れておりデザインやページ構成を意識せず用意されたツールを好みで選択し配置するだけで、クォリティーが高く見やすい記事を書けてしまいます。
私がDrupalで使うテーマとしてCivicThemeを選んだ理由がそこにあります。本来、デザインを整える為CSSをいじったり、場合によってはJavaScriptやPHPの設定ファイルをいじる必要が出てきますがCivicThemeが用意するデフォルトの機能を使うだけでこのページのようなデザインと購読しやすいページが出来上がります。
私が書いた記事や用意した写真は稚拙であっても、出来上がり公開されているものがページ単体としてもWEBサイト全体としても一定のクォリティーが保てている事からCivicThemeが用意する環境が優れている事が伝わるのではないでしょうか。
今回は、単純なページのみの作成を駆け足で記事にしています。実際記事として作成したページを説明付きで再度構築しているので記事のボリュームが多くなっています。説明は単純で機能の説明のみとなっていますが、説明なしでもページが作れるくらい簡単にページが出来上がっています。
Drupalの流儀
2つの記事を使い、最初の記事で機能や構成を説明し、次項で実際の構築を書いていますが、実際の作業は非常に簡単で、勘の良い方なら、説明が必要ないくらい簡単にページが作成出来ます。Drupalが持つ機能の構成を記事でまとめた理由は、私自身が初めてDrupalに触れ、機能と用語の関連の理解が浅く、まずそこを調べる必要があった事や、機能を実際に動かしてみて検証を行い理解する事に時間を割いた事があります。
まだDrupalに触れていない方や、初めてDrupalを使用する方の大半が、機能と用語の理解と必要な機能が配置された場所を探す事が一つの障壁になるのではないかと思い、機能の構成を記事としてまとめた理由となります。
また、この記事をまとめる事が私自身の備忘録となり、後々見直し事が出来る事も理由の一つとなります。
最初はDrupalの用語や、機能の配置が独特で、WordPressのような視覚面で分かる要素が少なく、実際に使ってみて、動作を検証し、実際に使用したり、公式サイトやヘルプを見ながら動かして来ましたが、慣れてくると、この機能やこの配置というのが非常にわかりやすく、使いやすい構成であることが理解出来てきます。
まだDrupalを使い始めて日が浅いのですが、必要に応じて細かな設定ができる事や、設定を触る際に必要な順序などDrupalの流儀のようなものを感じ、その流儀が使い勝手の良さにつながっています。
タクソノミー
話が脱線してしまいましたが、今回の記事でページとして作成出来ましたが、このままではWEBサイト内に配置出来ていません。WEBサイト内の配置とは、新着記事としてTOPページに抜粋とリンクを設置したり、Drupalの記事を書いたら、Drupalの記事一覧に同様に抜粋とリンクを設置したりすることで、この事でWEBサイトを訪れた方が初めて作成した記事をみてくれます。
該当ページ一覧への配置を何を基準に行うか？という問題ですが、一般にはカテゴリー分けを行い、一致するジャンルでまとめた箇所に表示される事が望ましいです。このカテゴリーを分け、ページの用途をシステムが判断できるようにする機能としてタクソノミーという機能があります。
簡単に言えば、ページのカテゴリーやジャンルを分ける事ですが、Drupalはこのタクソノミーを柔軟に扱う事が出来ます。この機能も私がDrupalを使う大きな理由です。私は情報の整理に長けているという言葉で表現しています。
次項はこのタクソノミーの説明をしたいと考えています。
Drupalの記事
関連するDrupalでWEBサイトを構築する為の環境構築の記事やDrupalについて書いた記事になります。
記事は全てナンバリングしています。Drupalを初めて使う為の準備から始まる最初の記事から読む事もできます
Civic Themeの記事
Drupal記事
最新の記事
Drupalについて書いた最新の記事になります。
#D30 Civic Theme 1.9.0 UpDate
#D29 Drupal Core Update
Life Styleの記事
Drupalとは関係ないのですがLife Styleの記事も書いていますのでよろしければ購読ください。