【サンプル】装飾スタイル一覧

【サンプル】装飾スタイル一覧

１）見出し・テキスト表示

  1. バリエーション（４種類）
    1. h1
    2. h2
    3. h3
    4. 通常テキスト

見出し表示 (h2)

見出し表示 (h3)

通常テキスト通常テキスト リンクテキスト 通常テキスト
通常テキスト通常テキスト





２）アクセント表現

通常テキスト + 背景色の組み合わせ例

通常テキスト通常テキスト通常テキスト通常テキスト通常テキスト通常テキスト通常テキスト通常テキスト通常テキスト
通常テキスト通常テキスト通常テキスト通常テキスト通常テキスト通常テキスト通常テキスト
  1. オススメの色設定
    1. 青：お知らせ・ポイントなど を少し目立たせたい場合
    2. 橙：注意してほしいこと を強めに伝えたい場合
    3. 赤：危険・取り返しのつかないこと をかなり強く伝えたい場合

カード色の組み合わせ例

    カードタイトル（お知らせ・ご案内・ポイント）
    カードの内容テキストテキストテキストテキストテキストテキストテキスト
    テキストテキストテキストテキストテキストテキスト
    カードタイトル（注意してほしいこと）
    カードの内容テキストテキストテキストテキストテキストテキストテキスト
    テキストテキストテキストテキストテキストテキスト
    カードタイトル（危険なこと・取り返しのつかないこと）
    カードの内容テキストテキストテキストテキストテキストテキストテキスト
    テキストテキストテキストテキストテキストテキスト
    引用したい場合に使えそうなカード
    カードの内容テキストテキストテキストテキストテキストテキストテキスト
    テキストテキストテキストテキストテキストテキスト




    ３）リスト表示

    1. 箇条書きリスト（親）
      1. 箇条書きリスト（子）
    2. 箇条書きリスト（親）
      1. 箇条書きリスト（子）
      2. 箇条書きリスト（子）
    1. 番号付きリスト（親）
      1. 番号付きリスト（子）
    2. 番号付きリスト（親）
      1. 番号付きリスト（子）
      2. 番号付きリスト（子）




    ４）画像設置

    1. 設置手法：
      1. アップロード ｜ 直接アップロード（ギャラリーにも格納される）
      2. ギャラリー ｜ ギャラリーから読み込み
      3. 画像URL指定 ｜ いわゆる直リンク（非推奨）
    2. 設定できるもの：
      1. altタグ ｜ 画像が読み込めない場合に大体表示するテキスト
      2. 説明 ｜ 画像のキャプションテキスト（使う場面ないかも）
      3. リンク先 ｜ リンク画像として設定できる、新規ウインドウで開く
    3. おすすめ設定：
      1. 画像サイズは基本 original で良さそう
      2. 最大750px幅になるように調整されるのでコンテンツ幅からもはみ出ない
      3. 画像をクリックで拡大できる（ダイアログで表示）
      （ ▼画像サイズ：best ）+ リンク設定イメージ













      （ ▼画像サイズ：original ）







      ５）テーブルレイアウト

      1. Insert > Insert tableで追加できる
      2. カスタムCSSでモバイル表示でもはみ出ないように対策済
      3. セルごとで自由に着色、のようなことはできない
        1. 列見出しは一番上の行にしか着色されない
        2. 行見出しは太字等で表現することになりそう
      4. オススメの装飾方法
        1. 表のテーマ：「グレー」を選択
        2. 色のテーマ：「#D9DEE4」を設定

      列見出し
      列見出し
      列見出し
      列見出し
      行見出し
      テキスト
      テキスト
      テキスト
      テキスト
      行見出し
      テキスト
      テキスト
      テキスト
      テキスト
      行見出し
      テキスト
      テキスト
      テキスト
      テキスト
      行見出し
      テキスト
      テキスト
      テキスト
      テキスト
      行見出し
      テキスト
      テキスト
      テキスト
      テキスト





      ６）コンテンツの開閉表現

      1. Insert > Insert accordionで追加できる
        1. 開閉コンテンツを作ることができる
      クリックで開閉できるアコーディオン（カード型）

      1.  リスト型にもできる
      クリックで開閉できるアコーディオン（リスト型）
      1.  編集画面の「add accordion item」ボタンでグループ化のようにできる
        1. 単体を複数並べた場合と大きく見た目は変わらない、ひとまとまりにできる程度
      グループ化もできる（１）
      グループ化もできる（２）
      グループ化もできる（３）
      ​
      ​
       


      ７）コンテンツのタブ表現

      1. Insert > Insert tabで追加できる
      2. 情報がかなり多くなるページに使うとまとめやすくなる
        1. タブの存在に気づけず見逃す人もいるので、使い所は要検討
      3. タブが3つ以上の場合はモバイルで「...」と省略される
      タブコンテンツ（１）
      タブコンテンツ（２）
      タブコンテンツの内容（１）
       




      ８）動画埋め込み

      1. URLで埋め込む形式のみ対応
      2. カスタムCSSでモバイル表示でもはみ出ないように対策済






      ９）コード表示

      1. 基本は使わない気がします
      2. 執筆担当向けにカスタムCSSやコードを書く場面など？
      1. /* フォローボタン削除 */
      2. .ListHeader__dottedPopup {
      3. display: none;
      4. }