1st Green テーマ説明書
Connect-CMSデザインテーマ

1st Greenテーマ説明書 2023.3.31版

1目次
1. テーマの概要 ................................... 3
2. 1st Greenテーマ利用規約／対応バージョン ........ 7
3. テーマのセットアップ ........................... 8
4. プラグインの設定 ............................... 13
5. コンテンツのHTML設定（固定記事プラグイン）...... 27
6. ヘッダーバー ................................... 38
7. 参考資料 ....................................... 40
8. 問合せ先 ....................................... 42

1st Greenテーマ説明書 2023.3.31版

2

1. テーマの概要
1. グリーンを基調としたデザインです。
【ご注意】
ヘッダー部の画像はテーマには含まれていません。

2. フレームとしてどの〈フレームデザイン〉を指定しても、調和の取れた色彩となります。
3. 〈 左 エリア〉や〈 右 エリア〉に 配 置 するメニューではPrimary（で採 用している）色を採用しました。

3.
2.

❏ 〈〉 内 の 用 語 はConnect-CMSで 使 われている用語です。詳細が必要な場合は、Connect-CMSの取り扱い説明書等を参照ください。本説明書
末尾にも多少の解説があります。
❏ 左図上部のツバメ等の画像部は、必要であればご自身でスライドショープラグインなどを配置して実現する必要があります。画像もご自身でご用意ください。有償で作成も承ります。

1st Greenテーマ説明書 2023.3.31版

32.

4. 〈フッターエリア〉のサイトマップにデザインを施しています。
4.

5. 〈フッターエリア〉のCopyright等の表記用にデザインを施してい5.

ます。

1st Greenテーマ説明書 2023.3.31版

46. タブメニューやパンくずリストもグ

6.

リーンを基調としたデザインです。
7. 〈メインエリア〉内の次のHTML要素にデザインを施しています。
7.

● 見出し(h1〜h6)● テーブル● リスト● 画像の回り込み

1st Greenテーマ説明書 2023.3.31版

5テーブルとリストのデザイン

1st Greenテーマ説明書 2023.3.31版

6

2. 1st Greenテーマ利用規約／対応バージョン❖ 利用規約
利用者は「1st Greenテーマ（以下「本テーマ」という）」を利用するにあたり、以下の2点を遵守しなければなりません。遵守できない場合は、本テーマを利用することはできず、ダウンロードしたファイルは全て削除しなくてはなりません。
1. 〈Connect-CMSマーケット〉サイトに掲載されている〈約款〉（https://market.connect-cms.jp ）2. あかざわ工房合同会社サイトの「Connect-CMSテーマ利用規約」（https://www.akazawa.org/connect-cms/theme-rule ）❖ 本テーマの対応バージョン
Connect-CMSマーケットの「テーマ紹介」ページに、動作を確認したバージョンを掲載します。
https://market.connect-cms.jp/theme※掲載ページの名称やURLは変更されることがあります。

1st Greenテーマ説明書 2023.3.31版

7

3. テーマのセットアップ〈管理者メニュー〉↓〈テーマ管理〉↓〈新規作成〉 にて〈ディレクトリ名〉として「1st-green」を、〈テーマ名〉として「1st Green」を入力する。
↓〈新規作成〉をクリック❏ ディレクトリ名は半角文字（ASCII文字）で入力してください。
❏ ディレクトリ名にスペースなどの空白文字を入力してはいけません。

1st Greenテーマ説明書 2023.3.31版

8下図は、「1st Green」テーマが登録された様子です。
次ページでは、〈CSS編集〉と〈画像管理〉をそれぞれクリックして、CSSと画像をセットします。

1st Greenテーマ説明書 2023.3.31版

9❏ 〈CSS編集〉をクリックした様子。

テキストボックスには、themes.css（ダウンロードしたテーマファイル内に入っている）の中身を貼り付ける。
↓「CSSファイル保存」をクリックする。
↓「キャンセル」をクリックするとひとつ前の画面に戻る。

1st Greenテーマ説明書 2023.3.31版

10❏ 〈画像管理〉をクリックした様子。
〈ファイルを選択〉ボタンで、テーマファイルの「images」フォルダに入っている画像を選択する。
↓「画像ファイル保存」をクリックする。

❏ 画像を追加した様子。
〈キャンセル〉ボタンで、ひとつ前の画面に戻る。

1st Greenテーマ説明書 2023.3.31版

11❏ 〈基本テーマ〉の指定〈サイト管理〉画面の〈基本テーマ〉で、「1st Green」を選択する。
↓（画面下端の）〈更新〉ボタンをクリックする。

1st Greenテーマ説明書 2023.3.31版

12

4. プラグインの設定
このテーマを活かすために、関係するプラグインをどのように設定したらよいか解説します。
ここに記載した以外の設定の場合、本テーマが想定するデザインにはなりません。

(0) プラグインをConnect-CMSサイトに追加する※プラグインの追加はConnect-CMSの操作方法です。本テーマとは直接の関係はありません。

1) 管理者権限を持つユーザでサイトにログインします。
2) 〈ヘッダーバー〉の〈管理機能〉→〈プラグイン追加〉とクリックします。

1st Greenテーマ説明書 2023.3.31版

133) 上図のように〈プラグイン追加〉窓が開くので、プラグインを配置したい〈エリア〉のプルダウンメニューをクリックします。
4) 右図のようにプラグインが一覧表示されるので、配置したいプラグインをクリックします。
5) 指定したプラグインが指定した〈エリア〉に配置されます。
❏ 〈エリア〉はConnect-CMSの画面上の領域です。「7.参考資料」を参照してください。

1st Greenテーマ説明書 2023.3.31版

14

(1) グローバルメニュー(2) パンくずリスト(1)、(2)ともに以下のように配置してください。
❏ プラグイン名：メニュー❏ 配置エリア：ヘッダーエリア❏ 設定：次ページ以降のとおり※〈home〉ページに配置してください。 ❏〈home〉ページに配置すると、全てのページでそのプラグインが表示されます。（Connect-CMSの仕様です）

1st Greenテーマ説明書 2023.3.31版

15

(1) グローバルメニュー〈フレーム編集〉画面で以下のように設定してください。
〈フレームタイトル〉空欄〈フレームデザイン〉None〈フレーム幅〉

100%〈テンプレート〉

タブ〈フレーム表示設定〉左図のようにチェックを設定

1st Greenテーマ説明書 2023.3.31版

16

(2) パンくずリスト〈フレーム編集〉画面で以下のように設定してください。
〈フレームタイトル〉空欄〈フレームデザイン〉None〈フレーム幅〉

100%〈テンプレート〉

パンくず〈フレーム表示設定〉左図のようにチェックを設定

1st Greenテーマ説明書 2023.3.31版

17

(3) 左エリアまたは右エリアのメニュー❏ プラグイン名：メニュー❏ 配置エリア：左エリア または 右エリア※〈左カラム〉〈右カラム〉と言うこともあります。

❏ 設定：次ページのとおり

例：左エリアに配置したメニュー❏ 色調は上記のようなグリーンです。

1st Greenテーマ説明書 2023.3.31版

181) メニュープラグインを左または右のエリアに追加します。
2) ハンバーガーメニューから〈フレーム編集〉を選びます（図1）。
3) 図2のように設定し、下部にある〈更新〉ボタンをクリックします。
図1〈フレームタイトル〉空欄〈フレームデザイン〉None〈フレーム幅〉

100%〈テンプレート〉

default〈フレーム表示設定〉図2のようにチェックボックスを設定❏ メニューに表示させる項目は〈ハンバーガー〉→〈メニュー選択〉の画面で設定できます。Connect-CMSの操作ですので、試してみてください。

図2

1st Greenテーマ説明書 2023.3.31版

19

(4) フレーム
Connect-CMSでは、画面に追加したプラグインは〈フレーム〉という「囲み」の中に配置されます。
本テーマでは､〈フレームデザイン〉の設定（次ページ参照）により、〈フレーム〉が下図のように表示されるよう、デザインしてあります。

1st Greenテーマ説明書 2023.3.31版

20❏ プラグイン ：任意のプラグイン❏ 配置エリア ：任意のエリア❏ 設定：以下のとおり

1) プラグインの「歯車」アイコン →〈フレーム編集〉を選択。
2) 左図のように設定し、「更新」をクリックします。
〈フレームタイトル〉任意〈フレームデザイン〉任意（選択したものにより、色などが変わります）〈フレーム幅〉

100%〈テンプレート〉

デフォルト〈フレーム表示設定〉左図のようにチェックボックスを設定

1st Greenテーマ説明書 2023.3.31版

21

(5) フッターエリアでのサイトマップ
フッターエリアにサイトマップを配置できます。
❏ プラグイン名：メニュー❏ 配置エリア：フッターエリア❏ 設定：次ページのとおり

1st Greenテーマ説明書 2023.3.31版

221) 〈home〉ページにてメニュープラグインをフッターエリアに追加します。
2) 「歯車」アイコンから〈フレーム編集〉を選びます。
3) 左図のように設定し、〈更新〉ボタンをクリックします。
〈フレームタイトル〉空欄〈フレームデザイン〉None〈フレーム幅〉

100%〈テンプレート〉

フッター用サイトマップ〈フレーム表示設定〉左図のようにチェックボックスを設定

1st Greenテーマ説明書 2023.3.31版

23

(6) フッターエリアでのcopyright等の表記
フッターエリアにcopyright等を表記できます。
❏ プラグイン名：固定記事❏ 配置エリア：フッターエリア❏ 設定：次ページ以降のとおり

1st Greenテーマ説明書 2023.3.31版

24

1) 〈home〉ページにて固定記事プラグインをフッターエリアに追加します。
2) 「歯車」アイコンから〈フレーム編集〉を選びます。
3) 左図のように設定し、〈更新〉ボタンをクリックします。
〈フレームタイトル〉空欄〈フレームデザイン〉Default〈フレーム幅〉

100%〈テンプレート〉

デフォルト〈フレーム表示設定〉左図のようにチェックボックスを設定

1st Greenテーマ説明書 2023.3.31版

25

4) 〈編集〉ボタンをクリック。
5) Wysiwygエディタで表示したい内容を入力し、〈変更確定〉ボタンをクリックします。

1st Greenテーマ説明書 2023.3.31版

26

(7) ヘッダーエリアとフッターエリア横幅指定〈管理者メニュー〉→〈サイト管理〉→〈レイアウト設定〉で、「フッター」にのみチェックを入れます。
※この設定は任意です。「フッター」にチェックを入れない場合、センターエリアと同じ幅で表示されます。

1st Greenテーマ説明書 2023.3.31版

27

5. コンテンツのHTML設定（固定記事プラグイン）
固定記事プラグインで記事を本項のとおりに記述すると、本テーマのデザインが適用されます。
CSSの記載箇所も示します。当該箇所に手を加えて自分の好みのデザインに変更したり、本テーマでのコンテンツへのCSS指定が不要であれば削除してください。

❏ プラグイン名：固定記事❏ 配置エリア：メインエリア（センターエリアの中央部のカラム：本説明書の「7.参考資料」を参照）❏ 設定：次ページ以降のとおり❏ テーマの修正にはHTMLとCSSの知識が必要です。サポートが必要な場合は有料となります。
❏ 改良により、最新版の画面やCSSコードは、本説明書のスクリーンショットと多少異なる場合があります。

1st Greenテーマ説明書 2023.3.31版

28

(1) 見出し（h1, h2, 〜, h6タグ）

1) 見出しは、見出しにしたい文字列を<h1>などのタグで囲むと実現できます。
❏ 図1では「ウイルスの構造と増殖の仕方」と「1.遺伝物質」が見出しです。

図1「ウイルスの構造と増殖のしかた」の記事は赤沢年一の著作物です。https://note.com/akazawa_studio/n/n851ac0df6df2

1st Greenテーマ説明書 2023.3.31版

292) 固定記事プラグインで「編集」ボタンをクリックすると図2のようになります。
3) 赤矢印の「<>」アイコンをクリックすると、図3の窓が開きます。赤枠内のようにタグを書くとよいことがわかります。

図2

図3

1st Greenテーマ説明書 2023.3.31版

30❏ <h1>〜<h6>タグのデザインは、本テーマの〈CSS編集〉では、図4のように定義してあります。
❏ 「/*** フレーム内コンテンツ ***/」以降が固定記事プラグインの記事に対するスタイル指定のため、この行以降に手を加えることで記事のデザインを変更できます。
❏ 〈CSS編集〉については、本説明書「3. テーマのセットアップ」を参照してください。

図4

1st Greenテーマ説明書 2023.3.31版

31

(2) リスト❖ 番号付きリスト

リスト部は下のようにタグを書いてください。
CSSは図5のように定義してあります。

図5

1st Greenテーマ説明書 2023.3.31版

32❖ 番号無しリスト

リスト部は下のようにタグを書いてください。 ❏ 各項目の前に表示している▶の画像は、図5でCSSは図5のように定義してあります。
list-style: url(/themes/Users/1st-green/images/arrow-green.gif);と指定しています。
❏ 「3.テーマのセットアップ」→〈画像管理〉で登録した画像
arrow-gray.gif を指定すると▶の画像に変わります。
❏ 別の画像を表示させたい場合は、〈画像管理〉で画像をアップロードし、上のスタイルシートで指定すればよいです。

1st Greenテーマ説明書 2023.3.31版

33❖ 定義リスト

リスト部は下のようにタグを書いてください（class名はConnect-CMS固有のもので、本テーマとは無関係です）。
本テーマで定義リストのCSS指定は行っておらず、Connect-CMSのデフォルトのCSSによって描画されています。

1st Greenテーマ説明書 2023.3.31版

34

【解説】定義リストのclass名について<dt class="col-sm-1">RNA</dt><dd class="col-sm-11">日本語ではリボ核酸と言う。リボ核酸は「リボース」という糖とリン酸が連鎖して紐状分子となり、これに塩基分子が鉛直方向に結合した物質である。これが単位となって、連結してできた分子がRNAである。</dd>❏ class名の col-sm-1 や col-sm-11 の最後の数字は、親要素の幅を12分割したうちの「何個」を幅として確保するのかを表しています（図6）。

親要素の全幅を12分割❏ <dt class=”col-sm-1”>RNA</dt> の場合は、親要素 <dl class=”row”> </dl> の全幅の1/12の幅とする、という意味になります。
❏ 以上は、Connect-CMSの仕様ですので、本テーマとは直接の関係はありません。

図6

1st Greenテーマ説明書 2023.3.31版

35(3) 画像への回り込み

画像の回りに文字列を回り込ませることができます。
HTMLタグは下図のように指定してください。
このとき画像ファイルは、固定記事プラグインのWysiwygエディタで先にアップロードし、次にHTMLタグエディタで、<img>要素のclass名に 半角スペースを空けて col-sm-4 などと追記してください。col-sm-4 については、「(2)リスト」で解説しています。

1st Greenテーマ説明書 2023.3.31版

36

CSSは図7のように指定してあります。
float: left; を float: right; に変えると、画像は文字列の右側に配置されます。
画像の幅指定は、図7の img タグに幅指定をしてもよいでしょう。（この場合、前ページでしたような、<img>タグに class名として col-sm-4 を書かないでください）
なお、スマートフォンでは図8のように表示されます。

図7
図8

1st Greenテーマ説明書 2023.3.31版

37

(4) 引用

引用文は、<blockquote>タグで囲むと実現できます。CSSは図9にように指定してあります。

図9

1st Greenテーマ説明書 2023.3.31版

38

6. ヘッダーバー
Connect-CMS画面上端に配置されているヘッダーバー（ナビゲーションバーと言うこともあります）のデザインを、本テーマで設定しています。

〈管理者メニュー〉→〈サイト管理〉→〈サイト基本設定〉の設定画面で、〈ヘッダーバーの文字色〉として「暗めの文字色」か「明るめの文字色」のいずれかを選択し、〈更新〉ボタンをクリックしてください。

1st Greenテーマ説明書 2023.3.31版

39❏ 明るめの文字色の場合❏ 暗めの文字色の場合❏ スライドショーとの関係
Connect-CMSのデフォルトでは、ヘッダーバーとスライドショーの画像がくっついてしまいます。本テーマでは画面の横幅が992px以上の場合は、隙間を空けるようにしてあります（赤矢印部）。

【注意】スライドショー用の画像は本テーマには付属していません。

1st Greenテーマ説明書 2023.3.31版

40

7. 参考資料「デザイン・テーマの作り方について_2022-05-18勉強会資料」(c)株式会社オープンソース・ワークショップ より引用。
★画面の領域と id属性およびclass属性

ヘッダーバーclass=”navbar”

ヘッダーエリア

id=”ccHeaderArea”

センターエリア id=”ccCenterArea”
左エリア

メインエリア

右エリア

id=”ccLeftArea”

id=”ccMainArea”

id=”ccRightArea”

フッターエリア id=”ccFooterArea”

1st Greenテーマ説明書 2023.3.31版

41

「デザイン・テーマの作り方について_2022-05-18勉強会資料」(c)株式会社オープンソース・ワークショップ より引用。
★フレームと id属性およびclass属性★数値（この例では39）はフレーム固有の番号です。

id=”frame-39”
class=”card” id=”frame-card-39”
class=”card-header”

class=”card-body”

1st Greenテーマ説明書 2023.3.31版

428. 問合せ先
以下のようなご要望に対応いたします（有料）。まずはお気軽にお問合せください。
➢➢➢➢➢➢➢

緑系統ではなく、青系統のものが欲しい。
このテーマを購入しました。ピンク系統のテーマも欲しい。
このテーマの一部を変えた形のものが欲しい。
オプションとして画像（アイコン等）が欲しい。
Connect-CMSのサイトを構築して欲しい。
Connect-CMSの運用をサポートして欲しい。
業務の改善／効率化／情報共有／情報セキュリティなどについて相談したい。

❖ 1st Greenテーマそのものについては、オープンソー
ス・ワークショップ社にお問合せください。

❏ 窓口：あかざわ工房合同会社❏ WEB

https://www.akazawa.org/contact/❏ メール

info@akazawa.org❏ ヘッダー画像・アイコン・イラスト：Faneg factory❏ WEB

https://www.facebook.com/fanegfactory❏ メール

faneg2006@gmail.com

イラストACSUZURI

1st Greenテーマ説明書 2023.3.31版

43