コンポーネント

CivicThemeが用意する、コンポーネントをまとめて行きます。使用するコンポーネントは、通常のエディタであるコンテンツとブロック単位でまとめたコンポーネントが用意されています。以下にコンテンツで使用出来る機能とコンポーネントで使用出来る機能を書き出してみました。

コンテンツ

[RichText / ベーシックHTML / 制限付HTML / フルHTML / プレーンテキスト] から選択

 > フルHTMLを選択した場合

1. B ボールド
2. I イタリック
3. 取り消し線
4. X2 上付き文字
5. X2 下付き文字
6. リンク
7. 箇条書きリスト
8. 番号付きリスト
9. ブロックオート
10. 画像をアップロード
11. テーブル
12. 区切り線
13. 段落/見出しの切り替え
14. コードブロック
15. ソース

コンポーネント

1. Accordionを追加
2. 添付を追加
3. Automated listを追加
4. Calloutを追加
5. Campaignを追加
6. iFrameを追加
7. Manual Listを追加
8. 地図を追加
9. 次の段階を追加
10. Promoを追加
11. Sliderを追加
12. ウェブフォームを追加

早速実際の表示を見てみましょう。

コンテンツ

コンテンツの使用例を以下に表示します

1. ボールド
2. イタリック
3. 取り消し線
4. ^{X2上付き文字}
5. _{X2 下付き文字}
6. リンク
7. 箇条書きリスト
8. 番号付きリスト

• 箇条書きリスト

1. 番号付きリスト

9. ブロックオート

10. 画像をアップロードしてテーブルのセルに配置 11. テーブル 3列で作成 / このセルは連結しています。 セル１　10. 画像配置 セル２　10. 画像配置 セル３　10. 画像配置

12. 区切り線

13. 段落 / 見出し

• この文字入力が段落になります。

• 見出し2

• 見出し3

• 見出し4

• 見出し5

• 見出し6

14. コードブロック / 15. ソース

// 14. コードブロック
$ php -v
$ composer update "drupal/core-*" --with-all-dependencies

// 15. ソースは以下のような表示
<ol>
    <li>
        <strong>ボールド</strong>
    </li>
    <li>
        <em>イタリック</em>
    </li>
    <li>
        <em><s>取り消し線</s></em>
    </li>
</ol>

以上がコンテンツで使用出来る機能になります。

コンポーネント

以下にCivicThemeが用意するコンポーネントを表示してみます。これまでの文書は全てコンテンツ > 単独のブロックに書いていますがコンポーネントは全て単独のブロックとなっています。

6.iFrame

iFrameは使用していないので割愛します。呼び込むページは専用のページを用意する必要があります。

8.地図

地図をページ内に設置出来ます。ここではGoogleMapを使用し東京タワーの地図を読み込んでいます。

12.Webform

Webformの設定になります。ここでは割愛しますが、この機能を使い、お問い合わせフォームを作成しています。

ナビゲーションメニューのContactがWebformで作成したページになります。

まとめ

今回、CivicThemeが用意するエディタ内のデザインツールと、コンポーネントを全て、ページに表示してみました。ページの内容が無駄に長くなり見にくい記事となっていますが、CivicThemeのデザインコンセプトが理解できると思います。

CivicThemeのコンセプトに記事が読みやすく、情報整理がしやすいデザインと機能を持っています。政府機関や教育機関が使用する前提で構築されたテーマなので膨大な情報を探しやすく且つ見やすく提供する機能に長けており、私が使用する理由にDrupalらしい利点のイメージを感じやすいテーマであります。

4記事に渡り、CivicThemeでページを作る記事を書いて来ましたが、ヘッダーやフッター、サイドメニューを配置するレイアウトの説明がまだ出来ていないので、次回以降レイアウトの記事を進めて行きます。

次回の記事はDrupal Core 10.3.3 > 10.3.4のアップデート通知が来ていましたのでアップデートの記事をまとめます。