ブロック、レイアウト、エリアのデザイン設定方法について
デザイン&ブロックテンプレート設定とは Concrete CMSでは、テーマで用意されたデザインでページを作成していきます。 用意されている色とは別な色にしたい 背景色や背景画像をつけたい ブロックやエリアの周りに枠線やマージンをつけたい 独自のCSSをあてたい 上記のような要望にも応えられるようにブラウザ上で設定できるのが、デザイン&ブロックテンプレート機能です。 ※ 従来は「デザイン&カスタムテンプレート」というメニュー名でした これらはエリア、コンテナー、レイアウト、ブロック単位で設定することができます。 設定メニューの詳細な内容については、ログインしてご確認ください。 設定方法 メニューは、エリア、コンテナー、レイアウト、ブロックいずれかをクリックしたときに表示されるメニューから表示できます。 基本的なメニュー内容は同じです。 エリア コンテナー レイアウト ブロック 各メニューの紹介 ブロックテンプレート(ブロックとレイアウトのみ表示) テーマで用意されているブロックのテンプレートを切り替えることができます。 ブロックテンプレートのプルダウンメニューをクリックすると、対象ブロックに適用できるテンプレート一覧が表示されます。 テンプレートが用意されていない場合は「デフォルト」のみが表示されます。 設定後は [保存] ボタンをクリックします。 テキストとサイズと色 ブロック内のテキストの文字色、フォントサイズ、位置合わせを設定できます。 「A」アイコンをクリックします。 文字色 リンク色 基本フォントサイズ 位置合わせ ※上記設定はCSSのテキスト関連項目の設定に該当します。 設定後は「保存」をクリックします。 背景色と背景画像 ブロックの背景色と背景画像を設定できます。 「画像」アイコンをクリックします。 色 画像 「画像を選択」をクリックするとファイルマネージャーが開きますので、ファイルを選択します。 繰り返し(繰り返しなし、水平、垂直、水平&垂直、から選択します) サイズ(オート、含める()、カバー、10%、25%、50%、75%、100%、から選択します) ポジション(上下左右中央、の組み合わせで設定します) ※上記設定はCSSのbackground関連項目の設定に該当します。 設定後は「保存」をクリックします。 枠線 ブロックに枠線を表示します。 四角枠アイコンをクリックします。 色 スタイル 幅 半径 ※上記設定はCSSのborder関連項目の設定に該当します。 枠線を表示する場合は、色・スタイル・幅の3項目を全て設定する必要があります。 設定後は「保存」をクリックします マージンとパディング ブロックに余白を設定することができます。 左右矢印アイコンをクリックします。 パディング 上下左右(入力コンテンツとボーダーの間に余白を作ります) マージン 上下左右(ボーダーの外側に余白を作ります) ※上記設定はCSSのpadding、marginの設定に該当します。 設定後は「保存」をクリックします シャドウと回転 ブロックにシャドウ効果を設定したり、回転して表示することができます。 ペンアイコンをクリックします。 シャドウ 水平位置 垂直位置ぼかし 広がり 色 回転角度(ブロックの幅・高さによっては、他のブロックに重なって表示される場合があります) ※上記設定はCSSのbox-shadow,transformの設定に該当します。 設定後は「保存」をクリックします カスタム設定 テーマで用意されているクラス・IDを設定することができます。こちらを使用すると、前述の細かな設定を一括で指定できたり、テーマに合ったデザインに統一させることできます。 ギアアイコンをクリックします。 カスタムクラス ブロック種別ごとに、テーマやで用意されているクラスを設定できます。 カスタムクラスは複数設定することができます。 独自で作成したCSSのクラス名を追加することもできます。 ブロックの親要素のdivにクラスが追加されます。 カスタムID ブロックIDを設定できます。ID名は1つのみです。 ブロックの親要素のdivにIDが追加されます。 カスタムエレメント属性 ブロックにカスタムエレメント属性を設定します。 JSなどからブロックに対して処理したい場合などに使用します。 ブロックの親要素のdivにカスタムエレメント属性が追加されます。 ブロックコンテナクラス ブロックコンテナの有効・無効を設定します。 ※テンプレートの種類やクラス、IDはサイトやテーマによって異なります。
https://concretecms-help.macareux.co.jp/editor/block-area-design