Interest.CivicTheme / Drupal
メニュー

テーマから探す

構築し、試し、学んだ記録。

CIVICTHEME JOURNAL 27

Civic Theme コンポーネント

·DrupalDrupal PostCivic Theme

約3,200文字 読了目安：約7分

この記事の目次

コンポーネント

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. 番号付きリスト
  1. ブロックオート
10. 画像をアップロードしてテーブルのセルに配置

11. テーブル

3列で作成 / このセルは連結しています。

セル１　10. 画像配置

セル1画像

セル２　10. 画像配置

セル2画像

セル３　10. 画像配置

セル3画像
 

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

  • 1.Accordion panel

    これがアコーディオンパネルになります。

    文書や画像をコンテンツ同様にエディタを使用して作成出来ます。

2.添付

以下が添付になります。サンプルなので

// Drupal-UpDate
$ composer update “drupal/core-*” –with-all-dependencies

と記載しています。

3.Automated list

Automated listになります。呼び込むページはDrupalの記事となっています。

4.Callout

Calloutになります。コンテンツ同様、エディタで作成出来ます。URLとテキスト入力が必須となっています。リンクが不要の場合URLにと入力します。

  • リンクは設置していません。

  • 写真に関連する記事

5.Campaign

Campaignになります。ここもコンテンツ同様エディタで作成出来ます。タイトルと画像が必須項目となります。リンクを設置します。リンクとリンクテキストは必須ではありませんが、機能は記事紹介が目的なので実際の使用はリンクを設置します。トピックで指定したタームはボタン表示のみとなります。

  • リンクは設置していません

Leica M3

6.iFrame

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

上段ボタン

7.Manual list

コンテンツ同様ここにエディタで文書を作成出来ます。上下にボタン式のリンクを設置出来ます。今回はサンプルでの作成なのでリンクは設置していません

Drupalの記事とCivicThemeの記事を呼び込んでいます。読み込みは一つのブロックに集約されます。ここでは2列の表示にしています。

Drupal.

Drupalについて記事を書いています。このWEBサイトを構築していく上でのトピックになります。プログラミングやソースコードなどエンジニア的な記事ではなく、プログラミング経験がない個人がDrupalでパーソナルなWEBサイトを構築するという観点での記事になります。

  • Drupal記事まとめ

Civic Theme.

このWeb SiteはDrupalのThemeであるCivic Themeで構成されています。Civic Themeはオーストラリア政府関連機関に採用されるGovCMSと言われる情報整理に優れたテーマです。

  • Drupal記事まとめ
  • Civic Theme

下段ボタン

8.地図

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

東京タワー 〒105-0011 東京都港区芝公園４丁目２−８

9.次の段階

この機能は4.Calloutと似た用途の機能で、外部リンクをタイトルと記事付きでブロック化して表示する機能となります。ここではリンクを設置していませんが、通常はリンクのURLを設置すると、タイトル矢印にリンクが設置されます。

私は、この機能をページ末に、次の記事のガイドとして使用しています。

10.Promo

この機能は、上記のCalloutや次の段階同様、タイトルと内容付きでブロック化しページ内にリンクを設置する機能となります。ブロックの外枠を持たないシンプルなデザインとなっています。

機能単体ではビュー機能は持たず、単独のリンクの設置のみとなります。ここではリンクは設置していません。

リンクは設置していません。

11.Slider

  • Life Style記事まとめ

Life Style.

5 7月 2026

ライフスタイルの記事になります。Drupalに触れる目的でこのWEBサイトを立ち上げています。元はWord Pressで作成した記事をこちらのWEBサイトに再構築しています。Word Pressも学習目的で利用したのですが記事をしっかり作る事を目的としていたので、テーマに興味があればそれなりに楽しめると思います。

Leica M3

  • 写真に関連する記事

写真の記事

Leica

ライカM3やSL2-Sの記事をまとめています。購入店情報もまとめていますので興味がございましたらご覧ください。

前へ

次へ

Slide 1

12.Webform

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

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

まとめ

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

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

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

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

すべての記事を見る ↗