1-3.その他デザイン

【611】コンテンツブロックの説明【クリエイティブモード】

レイアウト

コンテナボックスの作成

ページ・コンテンツの親となるコンテナスペースを作成できます。

ページ上に新しいコンテナを作成します。
デフォルトの横幅(width)は1140pxになります。
これで作成したコンテナは自動的に中央寄せになります。
クラス(container)がタグに自動的に挿入されます。
ページ上に新しいボックスを作成します。
デフォルトでは横幅の指定がありませんので、親のコンテンツの横幅に自動的に調整されます。
クラス(乱数で自動生成)が自動的に挿入されます。

カラムの作成

横2列(■■)や横3列(■■■)のカラムボックスをページに挿入できます。
横2列の場合、左側に画像、右側にテキストといったコンテンツの作成が可能です。
スマホサイトで見た場合はデフォルト設定では自動的に1列に整形されて表示されます。
※カラムは「コンテナ」が追加されたスペース内でしか挿入できません。

横2列のカラムボックスを作成します。
挿入すると以下のタグが自動的に挿入されます。
・ボックス
・カラムを囲っているタグとクラス(row)
・カラムのタグとクラス(col-md-6)
横3列のカラムボックスを作成します。
挿入すると以下のタグが自動的に挿入されます。
・ボックス
・カラムを囲っているタグとクラス(row)
・カラムのタグとクラス(col-md-4)
横4列のカラムボックスを作成します。
挿入すると以下のタグが自動的に挿入されます。
・ボックス
・カラムを囲っているタグとクラス(row)
・カラムのタグとクラス(col-md-3)
横2列のカラムボックスを作成します。
カラムの幅は
右:12/4 クラス
左:12/8 クラス
で生成されます。
挿入すると以下のタグが自動的に挿入されます。
・ボックス
・カラムを囲っているタグとクラス(row)
・カラムのタグとクラス(左:col-md-4)(右:col-md-8)
横2列のカラムボックスを作成します。
カラムの幅は
右:12/8
左:12/4
で生成されます。
挿入すると以下のタグが自動的に挿入されます。
・ボックス
・カラムを囲っているタグとクラス(row)
・カラムのタグとクラス(左:col-md-8)(右:col-md-4)
カラムの行を作成します。
挿入すると以下のタグが自動的に挿入されます。
・カラムを囲っているタグとクラス(row)
カラムの列を作成します。
挿入すると以下のタグが自動的に挿入されます。
・挿入する行のカラムに合わせたタグ(col)

 

基本・文字組

テキストを挿入する

見出し
見出しの文書を挿入するブロックを作成します。
見出しのレベルは(H1〜H6)までの6段階あります。
こちらで挿入されたテキストはエリア内で色やサイズの変更、装飾を行うことができます。
クラスは挿入されません。

 

本文
本文をの文書を挿入するブロックを作成します。
クラスは挿入されません。
本文の文書を挿入するブロックを作成します
こちらで挿入されたテキストはエリア内で色やサイズの変更、装飾を行うことができます。
クラス(乱数で自動生成)が自動的に挿入されます。
背景と外枠線が入った文書を挿入するブロックを作成します
ボックス設定(歯車)から色の変更が可能です。
背景と外枠線が入った文書を挿入するブロックを作成します
(小サイズ)
ボックス設定(歯車)から色の変更が可能です。
アイコンフォントを挿入します。
挿入できるアイコンはFont Awesomeのものから選択できます

 

ボタン(リンク)を設置

ページリンクを設定できるブロックを作成します。
※リンクを設定するコンテンツが必要になるため、このブロック内には「段落」や「画像」などのブロックを入れる必要があります。
クラス(乱数で自動生成)が自動的に挿入されます。
ページリンクを設定できるブロックを作成します。
生成されたボタンには自動的に文字色と背景色が設定されています。
ボックス設定(歯車)から色の変更が可能です。
「ボタン」のブロックを囲うブロックを作成します。
ボタン同士を隣り合わせに掲載したい場合などに使用します。
(例:ページャー)
「ボタングループ」や「ボタン」を囲うブロックを作成します
検索フォーム+ボタンリンク等の異なるリンク同士を隣り合わせに並べる時に使用します。
(例:グローバルナビ)

画像を設置

画像を挿入するブロックを作成します。
画像のアップロードもこのブロックから行えます。
クラス(乱数で自動生成)が自動的に挿入されます。

 

動画(Youtube)を設置

Youtube等の動画をiframeで挿入するブロックを作成します
クラス(乱数で自動生成)が自動的に挿入されます。

 

【590】HPに動画を掲載する【クリエイティブモード】ホームページに動画(Youtube等)を掲載する方法をご紹介します。 ①編集モードをクリエイティブモードに変更してください。 ...

 

地図(GoogleMap)を設置

GoogleMapを挿入するブロックを作成します。
クラス(乱数で自動生成)が自動的に挿入されます。

 

【706】GoogleMapを追加する【クリエイティブモード】ページ内に地図(GoogleMap)を組み込む方法をご紹介します。 地図コンポーネントの配置 ①編集モードをクリエイティブモードに変...

 

特殊

複数の画像をスライドで表示させるブロックを作成します。
クラス(乱数で自動生成)が自動的に挿入されます。
※スライダー導入にはjavascriptの調整が必要になりますので、設置の際にはサポートまでご依頼ください。
記事(ブログ等)の一覧を表示させるブロックを作成します
記事(ブログ等)の詳細(本文)を表示させるブロックを作成します
記事(ブログ等)で公開されている記事を検索できるフォームを表示させるブロックを作成します

 

フォーム

お問合せフォームのブロックを作成します
挿入した段階ではデフォルトの入力フォームが自動的に設置されます。
テキストを入力できるエリア(1行)を作成します
※フォーム内でのみ利用できます。
テキストを入力できるエリア(改行あり)を作成します
※フォーム内でのみ利用できます。
選択式(都道府県など)で情報を入力するエリアを作成します
※フォーム内でのみ利用できます。
送信ボタンを追加するブロックを作成します
※フォーム内でのみ利用できます。
チェックボックス・ラジオボックスでテキスト選択可能になるブロックを作成します
※フォーム内でのみ利用できます。
クリックで選択できる選択式(複数)のエリアを追加するブロックを作成します
※フォーム内でのみ利用できます。
クリックで選択できる選択式(一つのみ)のエリアを追加するブロックを作成します
※フォーム内でのみ利用できます。

 

セット

特定のレイアウトがすでに完成した状態のテンプレートのデザインを挿入できます。
セットは1~7まであります。

セットの表示サンプル

セット1

セット2

セット3

セット4

セット5

セット6

セット7