R7cms クリエイティブ・ベーシック
本ドキュメントは、R7cmsを用いてWebサイトを構築される制作者を対象として、アウトプットされるWebサイトの各ページの構造、コンテンツの構造、またこれらの応用利用方法を解説するものです。
サイト
デバイス判定
WebページをリクエストするUserAgentからデバイスをシステムにて判定し、クラス名の付与やブロック表示などの操作を行います。
| 想定デバイス | UserAgent（正規表現） | 判定順列 |
|---|---|---|
| スマートフォン | /ipod|iphone|android.+mobile|windows phone/ |
1 |
| タブレット | /ipad|android/ |
2 |
| フィーチャーフォン（携帯電話機） | /docomo|up\.browser|softbank|j-phone/ |
3 |
| パーソナルコンピューター（レガシーブラウザー） | /msie [678]\./ |
4 |
| パーソナルコンピューター | /msie|gecko|opera/ |
5 |
| その他 | |
6 |
※UserAgentの判定は、UserAgent文字列を小文字に変換したのちに実行されます。
サイトのアクセス制限
Webサイトの基本設定にて、アクセスの制限を指定することができます。指定方法は次の4つです。
- 制限あり（非表示）
- 制限あり（期間限定）
- 制限あり（認証）
- 制限あり（IPアドレス）
制限あり（非表示）
サイトへのアクセスをすべて禁止します。
制限あり（期間限定）
サイトへのアクセスを指定期間（年月日時分による開始点と終了点の指定）のみ許可し、指定期間外のアクセスを禁止します。
制限あり（認証）
サイトへのアクセスには管理者が任意に設定したIDとパスワードによる認証が必要になります。
制限あり（IPアドレス）
サイトへのアクセスには管理者が任意に設定した特定のIPアドレス（IPv4）からの接続が必要になります。
ページ
Webページは、HTML5によって記述され、JavaScriptとCSSによって装飾や振る舞いが与えられます。
レイアウト構造
Webページはlayout-という接頭辞のクラス名要素によって構成され、レイアウトによってその組み合わせが異なります。
| クラス名 | コンテナ | 編集 |
|---|---|---|
.page-body |
レイアウト・コンテナ | - |
.layout-page |
レイアウト・コンテナ | - |
.layout-header |
ブロック・コンテナ | 共通ヘッダーフッター |
.layout-body-header |
ブロック・コンテナ | ページ |
.layout-body |
レイアウト・コンテナ | - |
.layout-main |
レイアウト・コンテナ | - |
.layout-contents |
ブロック・コンテナ | ページ |
.layout-navigations |
ブロック・コンテナ | 共通ヘッダーフッター |
.layout-body-footer |
ブロック・コンテナ | ページ |
.layout-footer |
ブロック・コンテナ | 共通ヘッダーフッター |
Webページは、レイアウト配置用のレイアウト・コンテナとブロック配置用のブロック・コンテナから構成され、画像や文章などのコンテンツはブロック・コンテナ内に記載できます。またブロック・コンテナの編集操作は、複数ページ使用の共通ヘッダーフッター編集と、固有ページ使用のページ編集に分かれます。
1カラム
.page-body.layout-page.layout-header.block
.layout-body-header.block
.layout-body.layout-contents.block
.layout-body-footer.block
.layout-footer.block
2カラム
.page-body.layout-page.layout-header.block
.layout-body-header.block
.layout-body.layout-two-col-a.layout-contents.block
.layout-body-footer.block
.layout-footer.block
.page-body.layout-page.layout-header.block
.layout-body-header.block
.layout-body.layout-two-col-b.layout-contents.block
.layout-body-footer.block
.layout-footer.block
3カラム
.page-body.layout-page.layout-header.block
.layout-body-header.block
.layout-body.layout-main.layout-contents.block
.layout-body-footer.block
.layout-footer.block
レスポンシブ
Webページは、ブラウジングコンテキストの表示横幅により、レイアウトカラム配置の適正化などのレスポンシブ変化が行われます。
レイアウトカラム
独自のJavaScriptによってブラウジングコンテキストの表示横幅が判定され、幅別のクラス名を付与、クラス名をセレクタとするCSSにて配置・装飾されます。
| 横幅範囲 | .page-body等に付与されるクラス名 |
想定デバイス | 体裁 |
|---|---|---|---|
| 767px以下 | .page-body.width-small |
スマートフォン | レイアウトカラムを解除 |
| 768pxから1023pxまで | .page-body.width-medium |
タブレットおよびパーソナルコンピューター | |
| 1024px以上 | .page-body.width-large |
パーソナルコンピューター |
リキッド
ページ内要素は、ブラウジングコンテキストの表示横幅に合わせて表示されます。
デバイスがパーソナルコンピューターの場合は、サイト基本情報:Webページの最大幅選択値の範囲内において表示されます。
| 選択値 | コンテンツ横幅最小値 | コンテンツ横幅最大値 |
|---|---|---|
| 小 | 320px | 950px |
| 大 | 320px | 1280px |
フォントサイズ
CSSのMedia Queriesによってブラウジングコンテキストの表示横幅が判定され、フォントサイズが調整されます。
| 横幅範囲 | フォントサイズ |
|---|---|
| 768pxから819.2pxまで | 90% |
| 819.3pxから1228.7pxまで | 100% |
| 1228.8pxから1279pxまで | 105% |
| 1280px以上 | 110% |
※フォントサイズはアウトプットされるWebサイトでのみ反映されます。
デバイス
WebページをリクエストするUserAgentをシステムにて判定し、デバイス別のクラス名が付与されます。
| 想定デバイス | .page-body等に付与されるクラス名 |
|---|---|
| スマートフォン | .page-body.device-sphone |
| タブレット | .page-body.device-tablet |
| パーソナルコンピューター | .page-body.device-pc |
| その他 | .page-body.device-etc |
レガシーブラウザー
レガシーブラウザーと判定されるUserAgentからのリクエストの際は、表示補助のJavaScriptが記載されたHTML5ページが表示されます。
フィーチャーフォン
フィーチャーフォンと判定されるUserAgentからのリクエストの際は、通常のHTML5ではなく、フィーチャーフォン用のXHTMLページが表示されます。
URL
各Webページには、ページ管理番号に基づくファイル名が自動的に記述され、ドメイン名,ディレクトリ名とあわせてURLとして動作します。ページのファイル名は、各ページの基本設定から任意に変更することができます。
ディレクトリ
管理ツールのページ一覧にて、個ページの配下に個ページを配置した場合、配下ページを持つページのファイル名はディレクトリ名として用いられ、配下ページのURLのパスの一部として動作します。
ページのアクセス制限
各Webページの基本設定にて、アクセスの制限を設定することができます。指定方法は次の4つです。
- 制限あり（非表示）
- 制限あり（期間限定）
- 制限あり（認証）
- 制限あり（IPアドレス）
制限あり（非表示）
ページへのアクセスをすべて禁止します。
メニュー関連のブロックから自動的に参照されているハイパーリンクは解除されます。
制限あり（期間限定）
ページへのアクセスを指定期間（年月日時分による開始点と終了点の指定）のみ許可し、指定期間外のアクセスを禁止します。
制限あり（認証）
ページへのアクセスには管理者が任意に設定したIDとパスワードによる認証が必要になります。
制限あり（IPアドレス）
ページへのアクセスには管理者が任意に設定した特定のIPアドレス（IPv4）からの接続が必要になります。
メタ情報
description
各Webページには、<meta name="description">が自動的に記述されます。この内容は各ページ基本設定から任意に変更することができます。
noindex, nofollow
各Webページの基本設定の検索エンジン設定項目にて、「検索エンジンへのインデックスを許可する」のチェックを外すことで、<meta name="robots" content="noindex,nofollow">を設定することができます。
OGP - Open Graph Protocol
各Webページには、OGPに対応した<meta>が自動的に記述されます。
canonical
各Webページには、<link rel="canonical">が自動的に記述されます。
script
各Webページには、jQuery 1.9.1が自動的に組み込まれます。
ページ固有符号
各Webページの<body>タグには、ページ固有の符号data-page-idが記述されます。
<body data-page-id="0">ブロック
画像や文章などのコンテンツはブロック単位にて、レイアウト構造のブロック・コンテナ内に追加することができます。
ブロック構造
ブロックは、blockというクラス名、およびブロック種類毎のblock-という接頭辞のクラス名要素によって構成されます。
block内部にはpartというクラス名の要素、part内部にはpeaceというクラス名の要素や体裁用の要素が存在します。
.block.b-headh1
.b-body.part.peace
※見出しブロックなど、一部基本構造と異なるブロックがあります。
ブロック操作
ブロック見出し
ブロック毎に、ブロック見出しの表示・非表示を指定することができます。
デバイス別ブロックの表示、非表示
ブロック毎に、表示させるデバイス、表示させないデバイスを指定することができます。指定可能なデバイスは次の3つです。
- スマートフォンおよびフィーチャーフォン
- タブレット
- パーソナルコンピューター
ブロック固有符号
各ブロックには、ブロック固有の符号data-block-idが記述されます。
<div data-block-id="0">ブロック種類
ブロック一覧
| ブロックセレクタ | ブロック名 | 用途 | 挿入可能レイアウト | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 基本 | セット | 画像 | メニュー | コンテンツ | .layout-header |
.layout-body-header |
.layout-contents |
.layout-navigations |
.layout-body-footer |
.layout-footer |
||
.block-BlogList |
最新ブログ一覧 | ✓ | ✓ | ✓ | ||||||||
.block-BlogRichList |
最新ブログ一覧(サムネイル画像) | ✓ | ✓ | |||||||||
.block-Breadcrumb |
パンくずリスト | ✓ | ✓ | ✓ | ||||||||
.block-ButtonList |
ボタン | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ||||
.block-ContactData |
連絡先 | ✓ | ✓ | |||||||||
.block-Copyright |
コピーライト | ✓ | ✓ | |||||||||
.block-EventCalendar |
イベント連動カレンダー | ✓ | ✓ | ✓ | ||||||||
.block-EventList |
イベント一覧 | ✓ | ✓ | |||||||||
.block-GeneralCalendar |
カレンダー | ✓ | ✓ | ✓ | ||||||||
.block-HeaderSet1 |
ヘッダー1 | ✓ | ✓ | ✓ | ||||||||
.block-HeaderSet2 |
ヘッダー2 | ✓ | ✓ | ✓ | ||||||||
.block-HeaderSetSide |
サイドヘッダー | ✓ | ✓ | ✓ | ||||||||
.block-Heading |
見出し | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ||||
.block-HeadingImage |
画像見出し | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | |||||
.block-HorizontalList |
横リスト | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ||||
.block-Hr |
区切り線 | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ||||
.block-Html |
HTML | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ||||
.block-Image |
画像 | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | |||
.block-ImageGallery |
画像ギャラリー | ✓ | ✓ | |||||||||
.block-ImageMenu |
画像メニュー | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ||||
.block-ImageSlideShow |
スライドショー | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | |||||
.block-Interview |
インタビュー | ✓ | ✓ | |||||||||
.block-LevelList |
階層指定リスト | ✓ | ✓ | |||||||||
.block-Map |
地図 | ✓ | ✓ | ✓ | ||||||||
.block-Movie |
動画 | ✓ | ✓ | ✓ | ✓ | |||||||
.block-MultiColor |
多色メニュー | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | |||||
.block-MultiFunction |
多機能ツール | ✓ | ✓ | ✓ | ✓ | |||||||
.block-NewsDoubleList |
最新ニュース・ブログ一覧 | ✓ | ✓ | |||||||||
.block-NewsList |
最新ニュース一覧 | ✓ | ✓ | ✓ | ||||||||
.block-NewsRichList |
最新ニュース一覧(サムネイル画像) | ✓ | ✓ | |||||||||
.block-PageTop |
ページトップ | ✓ | ✓ | ✓ | ||||||||
.block-Qa |
Q&A | ✓ | ✓ | |||||||||
.block-Qr |
QRコード | ✓ | ✓ | ✓ | ✓ | ✓ | ||||||
.block-Review |
レビュー | ✓ | ✓ | |||||||||
.block-RichText |
自由編集 | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ||||
.block-SetA1 |
セットA | ✓ | ✓ | ✓ | ||||||||
.block-SetA2 |
セットA(2分割) | ✓ | ✓ | |||||||||
.block-SetA3 |
セットA(3分割) | ✓ | ✓ | |||||||||
.block-SetA6 |
セットA(6分割) | ✓ | ✓ | |||||||||
.block-SetB1 |
セットB | ✓ | ✓ | ✓ | ||||||||
.block-SetB2 |
セットB(2分割) | ✓ | ✓ | |||||||||
.block-SetC1 |
セットC | ✓ | ✓ | ✓ | ||||||||
.block-SetC2 |
セットC(2分割) | ✓ | ✓ | |||||||||
.block-Sitemap |
サイトマップ | ✓ | ✓ | |||||||||
.block-SitemapFooter |
フッターサイトマップ | ✓ | ✓ | ✓ | ||||||||
.block-SocialButton |
ソーシャルボタン | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ||||
.block-Spacer |
スペーサー | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ||||
.block-Square |
スクエア | ✓ | ✓ | ✓ | ✓ | |||||||
.block-Table |
テーブル | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ||||
.block-TopImageA |
トップ画像A | ✓ | ✓ | ✓ | ||||||||
.block-TopImageB |
トップ画像B | ✓ | ✓ | ✓ | ||||||||
.block-TopImageC |
トップ画像C | ✓ | ✓ | ✓ | ||||||||
.block-VerticalList |
縦リスト | ✓ | ✓ | ✓ | ✓ | ✓ | ||||||
活用と応用
HTMLブロック
HTMLブロックを用いることで、ページレイアウト内に任意のHTMLを記述することができます。
- ソーシャルプラグインの組み込み
- 検索エンジンの組み込み
- JavaScriptの記述
変数
HTMLブロック内で使用可能な編集を用意しております。
| 変数名 | httpページ | httpsページ |
|---|---|---|
{$http_path_prefix} |
（空文字） | サイトTOPのURL |
{$https_path_prefix} |
https://p3.ssl-web.jp/サブドメイン |
/サブドメイン |
{$path_prefix} |
（空文字） | /サブドメイン |
JavaScript
HTMLブロック内にJavaScriptを記述し、Webページに機能を与えることができます。
なお、HTMLブロックに記述できる内容には制限がないため、内容によってはページ編集などの管理機能の表示、挙動を阻害する恐れもあります。もしJavaScript記述後にページ編集機能がご利用頂けなくなりましたらサポートまでお問い合わせください。
カスタムHTML
カスタムHTMLを用いることで、特定の箇所にHTMLを追加することができます。
<head>タグ内<body>タグ内の先頭<body>タグ内の後尾（</body>直前）
カスタムHTMLは、サイト全体、共通ヘッダーフッター、ページそれぞれに設定可能です。
Google Analytics
Google Analyticsトラッキングコードを直接記述してください。
クロスドメイントラッキングには、SSLページ用ドメインp3.ssl-web.jpを付与してください。
カスタムCSS
カスタムCSSを用いることで、サイト全体のスタイルを指定することができます。
セレクター
特定のページやブロックのみに適用するセレクター参照値を用意しています。
特定のページのみ適用する。
属性セレクターにてページ固有符号data-page-idを使用します。
.page-body[data-page-id="0"] { property:value; }特定のページパス（ディレクトリ）下に適用する。
属性セレクターの前方一致にてページURLdata-urlを使用します。
.page-body[data-url ^="/"] { property:value; }特定のページID（ディレクトリ）下に適用する。
属性セレクターの前方一致にてページURLdata-id-pathを使用します。
.page-body[data-id-path ^="/1/2"] { property:value; }特定のブロックのみデザインを指定する。
属性セレクターにてブロック固有符号data-block-idを使用します。
div[data-block-id="0"] { property:value; }ファイルマネージャー
ファイルマネージャーを用いることで、HTMLブロックやカスタムCSSで読み込む画像ファイル等をアップロードできます。
アップロードされるファイルは、HTMLブロックからの読み込み用、カスタムCSSからの読み込み用とファイルのパスが異なります。
- HTMLブロック用
- カスタムHTML用
- 変数{$fm_domain}から始まる絶対パス。
※ {$fm_domain}はサーバ側で適切なプロトコル、ドメインに変換され出力されます。 - カスタムCSS用
/から始まる絶対パス。