記事冒頭にリード文を配置。「ディスクリプション」と同じ内容にするため、100文字程度に納める。この装飾は、段落ブロックのボーダー設定02を使用。背景の色設定はカスタム薄-01。これで大体100文字。
テリオステリオスは右側で固定
- H2見出し単位でポイントをピックアップしていく
基本事項
- 英数字は半角を基本とする。
アイキャッチ画像
- 投稿ページでは、アイキャッチ画像を表示させる。
- 固定ページでは、アイキャッチ画像を表示させない。
H2見出し(投稿ページ)
- H2見出し語尾には「～する」「～行う」などの記載はせず、言い切る。
- 文字数は、スマートフォンでの目次表示が1行に収まっているのが理想。
H3見出し(投稿ページ)
- 追加CSSで、H3見出しの文字色をカスタマイズしている。
- 文字数は、スマートフォンでの目次表示が1行に収まっているのが理想。
H4見出し(投稿ページ)
- 追加CSSで、H4見出しの文字色をカスタマイズしている。
H2見出し(固定ページ)
- H2見出し語尾には「～する」「～行う」などの記載はせず、言い切る。
H3見出し(固定ページ)
- 投稿ページと区別するために、固定ページでのH2・H3見出しの文字色を、それぞれカスタム濃-04,03にする。
文字装飾
文字の色強調
太字にし、テキスト色でカスタム濃の01赤・02青・03緑・04橙を使用する。なお、ハイライトでも同様の効果となる。
例
これは赤太字のサンプル表示です。
これは青太字のサンプル表示です。
これは緑太字のサンプル表示です。
これは橙太字のサンプル表示です。
マーカー
黒太字に対してのみ適用し、マーカーの橙色・黄色・緑色・青色を使用する。
なお、マーカーを使用したときの文字間隔調整のため、均等割付になるよう追加CSSでカスタマイズしている。
例
これが、橙色マーカーのサンプル表示になります。
これが、黄色マーカーのサンプル表示になります。
これが、緑色マーカーのサンプル表示になります。
これが、青色マーカーのサンプル表示になります。➡リード文内のキーワードに使用
文字の濃い背景色
重要キーワード（短い単語）に適用する。
背景色は、カスタム濃の01赤・02青・03緑・04橙とし、太字にはしない。
例
本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。本日は晴天なり。
文字の薄い背景色
カスタム薄-04を、画面操作でのクリック操作表示やボタン操作表示等に使う。
例
良ければお申込み(30日間お試し)をクリックします。
その他の適用
チェックを入れる場合
チェックを入れる項目を黒太字にする。
例
「■投稿ページ」＞「タイトル下に表示する情報」のタイトル下に著者を表示するにチェックを入れます。
入力する場合
入力する内容を黒太字にする。
例
「■投稿ページ」＞「タイトル下に表示する情報」にテリオスと入力します。
キャプションボックス
本記事を読んで分かること
- キャプションボックスのスタイル➡デフォルトを使用
- キャプションボックス内にリストブロックを配置➡デフォルトを使用
用語説明
スタイルは「小」、色はデフォルト、フォントサイズはキャプションがLとする。
アカウントとは、スマホやパソコンを利用してインターネット上の様々なサービスにログインするための権利のことです。アカウントは通常、IDとパスワードの２つがセットになっていて、この２つを入力することで本人確認ができる仕組みになっています。
良いところ・悪いところ・テリオスの推し理由
キャプションボックスのスタイルは「小」、色は下記を参照。フォントサイズはキャプションがLとする。
リンクリストと組み合わせる。項目をクリックすると、H3見出しにジャンプするよう設定。
テリオス自身の購入した理由を記載（客観的な良いところ・悪いところは第三者でも書けるが、購入理由は本人しかわかり得ない）。
アイコン付きボックス
アラート
説明文はこんな感じ。複数行ではこんな感じになる。
バツ印
説明文はこんな感じ。
ポイント
説明文はこんな感じ。
チェック
説明文はこんな感じ。
はてな
説明文はこんな感じ。
メモ
説明文はこんな感じ。
グッド
バッド
インフォ
アナウンス
ペン
本
画像処理と説明文の記載（サイト編）
画像ブロックを挿入し、データをアップロードする。スタイルはブラウザ風、キャプションは入力せず、ALTテキスト（代替テキスト）を入力する。
ALTテキストはスクリーンキャプチャの場合、～画面と末尾に画面という単語を付与する。
クリックなどの操作がある場合
設定や申し込みなど、記事の流れでクリックやその他操作がある場合は、以下の記述スタイルとする。
説明文と画像のセット＝｝がスマホ1画面に収まる場合
画像の上に説明文を配置する。理由は、画像を先に見て、読者が慌ててクリックや誤操作しないよう、先に説明文を読んでもらうため。
説明文と画像のセットがスマホ1画面に収まらない場合
ステップブロックにて対応する。ただし、ステップ名が表記でき且つ画像が少ない（＝ステップ数が多くなりすぎない）場合に適用する。
クリックなどの操作がない場合
画像の下に説明文を配置する。
画像処理と説明文の記載（ブログ編）
画像ブロックを挿入し、データをアップロードする。スタイルはフォトフレーム、キャプション・ALTテキスト（代替テキスト）を入力する。
ALTテキストはスクリーンキャプチャの場合、～画面と末尾に画面という単語を付与する。
画像の下に説明文を配置する。
よくある質問
FAQブロックを使用する。
まとめ
キャプションボックスのスタイル➡浮き出しを使用。箇条書きではなく、（リード文的な）文章記載形式にする。なお、キャプションには入力しない。