その他のパーツ（component）の配置

TOP（完全版）
パーツ配置
その他のパーツ（component）の配置

その他の各パーツの配置について

1. リッチテキスト
2. テーブル

3. イメージ
4. ボタンパーツ
5. 記事リストパーツ

デフォルトパーツ用に用意しているクラス一覧

その他の各パーツの配置について

各パーツに独自の設定方法や注意点について説明します。

1. リッチテキスト

1.1 - 太字設定

太字設定は必ず編集画面で行ってください。CSSで調整すると顧客が編集画面から設定を変更できなくなります。

1.2 - コピペ入力

コピペで入力する際はコピー元のスタイル（改行や太線など）もコピーされてしまう可能性があります。
ペーストする前にメモ帳アプリなどに一度貼り付けてプレーンテキストにしてから、再度それをコピペすると解決されます。

1.3 - 改行

リッチテキストで改行をする場合、「Shift」+「Enter」で改行をしてください。
Enterのみで改行をすると、1行毎にpタグで分割されます。
また、1つ目以降のpタグの上には余白16px (margin-top) が付きます。
用途によって使い分けてください。

「Shift」+「Enter」の場合

「Enter」のみの場合

テキストパーツの廃止

新CMSからテキストパーツはなくなり、リッチテキストに統一されています。
案件でテキストパーツが残っていた場合は、そのまま使用して問題ありません。
詳細はこちら

1.4 - 下線

リッチテキストは太文字設定の他に下線の設定があり、下線とリンク設定を一緒にする場合は注意してください。
※リッチテキストは設定した情報順にタグで囲われていく為です。

下線もリンクの色と同じにする場合（※参考画像：上）
①下線を設定
②リンク設定をする
下線は通常時の文字色にする場合（※参考画像：下）
①リンク設定をする
②下線を設定

2. テーブル

テーブルを作成するにはリッチテキストを使用します。
手順を間違えると不必要なタグが混入してしまうので注意してください。

おもなテーブル作成時の流れ

手順1：ページ編集画面：左メニューの単体パーツから「テキストのみ」のパーツを配置
手順2：テキストメニューからテーブルを選択し、行と列数・th（ヘッダー）の有無を設定
手順3：テーブル下の文章「リッチテキストを入力してください」とテーブル上下に空の行があれば削除
手順4：行を増やす・列を増やす・セルの統合・セルの分割を必要に合わせて行う
手順5：必要に応じてセルに対し「単語の折り返し」設定を行う。
手順6：テキストの入力

左メニューの単体パーツから「テキストのみ」のパーツを配置する

左メニューの単体パーツから「テキストのみ」のパーツを該当箇所にドラッグ&ドロップします。

※旧CMSでの操作画面ですが操作方法は旧・新共通です。

テキストメニューからテーブルを選択し、行と列数・th（ヘッダー）の有無を設定

リッチテキストの文章「リッチテキストを入力してください」の左側をクリックし、メニューバーを表示します。
テーブルアイコンの「表」を選択し、表のプロパティを表示します。
希望の行数と列数を入力します。
ヘッダ（th）の設定を必要に合わせて設定します。
※ヘッダ（th）は太文字に設定されています。

＊ここまで行った後、「更新ボタンを押す」、「他のパーツをクリック」しないでください！

テーブル下の文章「リッチテキストを入力してください」とテーブル上下に空の行があれば削除する

先ほど作成したテーブル上下にあるいらないテキストと行を「 Delete」ボタンを使って削除。
文章や無駄な余白のないテーブルのみの状態にしてください。

注意事項

不要なテキスト・行を削除する前に更新ボタンや他パーツをクリックし下書き保存すると、Macユーザーは不要な行を削除することができません。
※新規でテーブルを作成し直す必要があります。
各セルには半角スペースがデフォルトで入っているので忘れずに削除してください。

行を増やす・列を増やす・セルの統合・セルの分割を必要に合わせて行う

行の増減・削除方法
該当の行の上で右クリックし、メニューから「行」の上にカーソルを乗せる。
「行を上に挿入」「行を下に挿入」「行の削除」が出てくるので選択。
列の増減・削除方法
該当の列の上で右クリックし、メニューから「列」の上にカーソルを乗せる。
「列を左に挿入」「列に右に挿入」「列の削除」が出てくるので選択。

　3.セルの統合・分割・削除
　該当セルの上で右クリックし、メニューから「セル」の上にカーソルを乗せる。
　「セルを前に挿入」「セルを後に挿入」「セルを削除」「右に結合」「下に結合」「セルを水平方向に分割」
　「セルを垂直方向に分割」の中から必要に応じて選択。

注意事項

セルの挿入・削除を使用するとテーブルの表示が崩れる場合があります。
編集後は、PC / TAB / SPの公開画面を確認するようにしましょう。
セルの統合は、ヘッダ（th）とヘッダ以外（td）を跨いで統合することはできません。
分割したセルを削除するとテーブルの表示が崩れます。
分割したセルは「セルの結合」を使って、セルの数を調整するようにしましょう。

必要に応じてセルに対し「単語の折り返し」設定を行う

幅を合わせたいセルの上で右クリックをし、メニューから「セル」にマウスホバーします。
メニューから「セルのプロパティ」を選択し、「単語の折り返し」を「はい」から「いいえ」に変更します。
文字の増減に合わせて、列の横幅も変動します。

テキストを入力する

テキストの入力は「直打ち」と他からテキストを持ってくる「コピー&ペースト（コピペ）」の2種類があります。
直打ち・コピペのどちらも、公開画面で意図しない「」タグが入らないように注意してください。

意図しないタグとは

コピペと改行の方法によって、テーブルテキストに タグが入ります。
（仕様によりタグにはデフォルトで margin-top:16px が入ります。）
改行する際に shift を押さずに Enterを押した際や、既存サイトなどのテキストをドラッグ選択せずにダブルクリックでコピーした文章をペーストすると タグが入ってしまうことがあります。

タグが入ることを認識した上で、行間を確保するために を入れるのは問題ありませんが、意図せず タグが入ってしまい、同じテーブル内で行間がバラバラになってしまうことは「意図しない タグ」とし、避ける必要があります。

3. イメージパーツ

イメージパーツは必ずライブラリのメディアからALTをつけてください。
編集画面内の画像に対してALTをつけると、その画像に対してではなく設定したページの画像のみにしかALTが効かないので注意してください。

4. ボタンパーツ

ボタンパーツのリンクの初期は「設定しない」になっています。
リンク設定していない場合は、公開画面ではボタンが表示されないので必ずリンク設定をお願いします。
※複合パーツ・セクションパーツの中にはボタンパーツがセットになっているものがあるのでリンクの付け忘れに注意してください。

ボタン（component）の配置

ボタンパーツの配置方法について
詳細はこちらのページをご参照ください。

ボタン（component）の配置

5. 記事リストパーツ

記事リストパーツは設定項目が多いですが、デザインに応じて「記事の表示件数」「ディスクリプション」「タグ表示」などの表示 / 非表示設定をお願いします。

記事選択
タグ選択
カテゴリ選択
記事一覧のスタイル
記事の並び順
表示件数

見出しの表示/非表示
ディスクリプションの表示/非表示
タグの表示/非表示
サムネイルの表示/非表示
カテゴリの表示/非表示

日付の表示/非表示
時刻の表示/非表示
更新日の表示/非表示
下層ページの表示/非表示
ページネーションの表示/非表示

記事リストパーツの各種設定を行うパネル

デフォルトパーツ用に用意しているクラス一覧

記事リストはデザインパーツとカスタム用に用意されているデフォルトパーツがあります。
デザインによってはデフォルトパーツを利用してカスタムCSSで調整してください。

クラス名	使用方法
caseContent_style	カスタム用記事リストには必ずこのクラスをあててください。初期のスタイルがあたります。 ※場合によって調整してください。
option_padding_none	画像の周りの余白をなくすことができます。
option_shadow_none	各記事のシャドウを消すことができます。
option_img_fit	画像の比率を維持しながら記事のテキスト側の高さに合わせて高さを揃えます。
option_text_limit	見出し・ディスクリプションの行数を指定し制限できます。
news_list	お知らせ用の初期スタイルがあたります。

パーツ配置一覧に戻る

編集画面の崩れについて