Connect-CMS勉強会#3

2021-03-17

株式会社オープンソース・ワークショップ - https://opensource-workshop.jp/

1

目次
デザインカスタマイズの会• すでに用意されているもの• 標準テーマ• 背景色、ヘッダーの背景色• テーマの作成• 管理画面で作成• ファイル配置• 配置によるもの• Bootstrap4
株式会社オープンソース・ワークショップ - https://opensource-workshop.jp/2

標準テーマ株式会社オープンソース・ワークショップ - https://opensource-workshop.jp/

3

標準テーマ• Connect-CMSでは、テーマを複数、用意しています。
• 現在は、「Default」シリーズで、26色が用意されています。
• 「Default」シリーズ以外も用意したいと思っていますが、今のところ、時間が取れていない状況です。
• 構想としては、丸みのない「flat」とかも作りたいと思ってるのですが。。

株式会社オープンソース・ワークショップ - https://opensource-workshop.jp/

4

テーマチェンジャー
• テーマチェンジャー・プラグインを使うことで、セッション内ですが、テーマを切り替えて使うことができます。
• アクセシビリティの関係から、ユーザ毎に設定を保存（セッションではなく、ログインしてのユーザ属性）すべきかどうか、検討しなきゃ。という感じです。

株式会社オープンソース・ワークショップ - https://opensource-workshop.jp/

5

テーマの設定• 管理者はサイト管理内で初期表示のテーマを設定できます。

株式会社オープンソース・ワークショップ - https://opensource-workshop.jp/

6背景色、ヘッダーの背景色

株式会社オープンソース・ワークショップ - https://opensource-workshop.jp/

7背景色、ヘッダーの背景色• 管理者はサイト管理内でサイトの背景色とヘッダーの背景色を設定できます。

株式会社オープンソース・ワークショップ - https://opensource-workshop.jp/

8背景色、ヘッダーの背景色

株式会社オープンソース・ワークショップ - https://opensource-workshop.jp/

9背景色、ヘッダーの背景色（ページ）• ページ毎に、サイトの基本として設定した背景色とヘッダーの背景色を変更できます。
• ここで設定した値は、下層ページに継承します。

株式会社オープンソース・ワークショップ - https://opensource-workshop.jp/

10テーマの作成～管理画面で作成～

株式会社オープンソース・ワークショップ - https://opensource-workshop.jp/

11

テーマ管理（作成方法）•

管理画面のテーマ管理でテーマが作成できます。

•CSS、JavaScript、画像が管理できます。

•

以下はTestとTest2の複数のテーマを作成した状態。

•

画面のセレクタ設計については、まだ資料がないので、開発者ツールなどで調べながらCSSを作ってください。

株式会社オープンソース・ワークショップ - https://opensource-workshop.jp/

12

テーマ管理（指定方法）

作成したテーマは、サイト管理やページ管理の各ページのテーマの設定で選択することができます。

株式会社オープンソース・ワークショップ - https://opensource-workshop.jp/

13テーマの作成～ファイル配置～株式会社オープンソース・ワークショップ - https://opensource-workshop.jp/

14

オリジナルテーマ（ファイル）public¥themes¥Originals の下にテーマごとのフォルダを作って、そこに必要なファイルを配置。
【必須】• themes.css• themes.ini【任意】• themes.js（あれば読み込みます）【その他】• その他は自由に作成していただけます。

株式会社オープンソース・ワークショップ - https://opensource-workshop.jp/

15

オリジナルテーマ（CSS）【theme.ini】
テーマ名を記載【theme.css】
CSSを記載【theme.js】
JavaScriptを記載

株式会社オープンソース・ワークショップ - https://opensource-workshop.jp/

16

配置によるもの

株式会社オープンソース・ワークショップ - https://opensource-workshop.jp/

17

フレーム幅横に配置したフレームについて
タブレット表示とスマートフォン表示

株式会社オープンソース・ワークショップ - https://opensource-workshop.jp/

18

フレーム幅（設定）

フレーム幅は12で100％です。
画面を12等分します（12は美しい！）メインエリアにフレームを2つ置き、幅を6、6で指定しているため、半分ずつに表示される。という設定になります。

株式会社オープンソース・ワークショップ - https://opensource-workshop.jp/

19

Bootstrap4

株式会社オープンソース・ワークショップ - https://opensource-workshop.jp/

20

Bootstrap4• CSS（サイトのデザイン要素）について。

• Connect-CMSでは、CSSフレームワークにTwitter社から生まれたBootstrap（ブートストラップ）を使用しています。
• そのため、画面上の様々な場所で、Bootstrapの記述方法が有効になります。
• ここでは、Bootstrapの記述を使った例を見てみましょう。

株式会社オープンソース・ワークショップ - https://opensource-workshop.jp/

21

フレーム編集 – class名フレーム編集 - class名「mb-5」を指定
マージン・ボトムを5開けなさい。の指定。

フレームの下が5（Bootstrapの単位）空きました。

株式会社オープンソース・ワークショップ - https://opensource-workshop.jp/22端末の幅でのカラムの変化
幅いっぱいで4カラム

２カラム

１カラム狭めて、３カラム

株式会社オープンソース・ワーク
ショップのトップページの例

株式会社オープンソース・ワークショップ - https://opensource-workshop.jp/

23

HTML
<div class="row"><div class="card mx-auto"><h1 class="card-header">タイトル１</h1><div class="card-body">画像１</div></div><div class="card mx-auto"><h1 class="card-header">タイトル２</h1><div class="card-body">画像２</div></div><div class="card mx-auto"><h1 class="card-header">タイトル３</h1><div class="card-body">画像３</div></div><div class="card mx-auto"><h1 class="card-header">タイトル４</h1><div class="card-body">画像４</div></div><div class="card mx-auto"><h1 class="card-header">タイトル５</h1><div class="card-body">画像５</div></div><div class="card mx-auto"><h1 class="card-header">タイトル６</h1><div class="card-body">画像６</div></div><div class="card mx-auto"><h1 class="card-header">タイトル７</h1><div class="card-body">画像７</div></div></div>

できるだけ端折った例• rowクラスで囲む（全部を1つの行とする）• cardクラスを等分配置（mx-auto）• タイトルと画像をセットで配置
実際には、体裁を整えるために、もう少しクラス指定などありますが、基本の考え方は左の通り。

株式会社オープンソース・ワークショップ - https://opensource-workshop.jp/24カルーセル（スライダー）

画像がスライドする部分
Bootstrapの機能を利用しています。
Bootstrapでは、カルーセルと呼びます。

右は実際のHTMLタグ（固定記事に書いています）
Bootstrapのカルーセルのルールで記述します。

株式会社オープンソース・ワークショップ - https://opensource-workshop.jp/

25

お問い合わせ先
株式会社オープンソース・ワークショップ
住所 ： 〒104-0031
東京都中央区京橋2丁目8番4号
オックスフォードビル2F
電話番号 ： 03-5534-8088
F A X ： 03-5534-8188
メ ー ル ： info@opensource-workshop.jp

株式会社オープンソース・ワークショップ - https://opensource-workshop.jp/

26