MENU
テリオス
古代ギリシャ語で〈願いを叶える〉を意味する TERIOS をハンドルネームに冠し、様々な有益な情報を発信するサイト『TERIOS.info』を2024年1月から運営しています。
当サイトは【 SWELL 】で作成しています 導入はこちら

テリオスの記事作成ルール by SWELL

記事冒頭にリード文を配置。「ディスクリプション」と同じ内容にするため、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とパスワードの2つがセットになっていて、この2つを入力することで本人確認ができる仕組みになっています。

良いところ・悪いところ・テリオスの推し理由

キャプションボックスのスタイルは「小」、色は下記を参照。フォントサイズはキャプションがLとする。

リンクリストと組み合わせる。項目をクリックすると、H3見出しにジャンプするよう設定。

テリオス自身の購入した理由を記載(客観的な良いところ・悪いところは第三者でも書けるが、購入理由は本人しかわかり得ない)。

アイコン付きボックス

アラート

説明文はこんな感じ。複数行ではこんな感じになる。

バツ印

説明文はこんな感じ。

ポイント

説明文はこんな感じ。

チェック

説明文はこんな感じ。

はてな

説明文はこんな感じ。

メモ

説明文はこんな感じ。

グッド

説明文はこんな感じ。複数行ではこんな感じになる。

バッド

説明文はこんな感じ。

インフォ

説明文はこんな感じ。

アナウンス

説明文はこんな感じ。

ペン

説明文はこんな感じ。

説明文はこんな感じ。

画像処理と説明文の記載(サイト編)

画像ブロックを挿入し、データをアップロードする。スタイルはブラウザ風、キャプションは入力せず、ALTテキスト(代替テキスト)を入力する。

ALTテキストはスクリーンキャプチャの場合、~画面と末尾に画面という単語を付与する。

TERIOSNET-MONETIZEトップ画面

クリックなどの操作がある場合

設定や申し込みなど、記事の流れでクリックやその他操作がある場合は、以下の記述スタイルとする。

説明文と画像のセット=}がスマホ1画面に収まる場合

画像の上に説明文を配置する。理由は、画像を先に見て、読者が慌ててクリックや誤操作しないよう、先に説明文を読んでもらうため。

スマートフォンのスクリーンショット

説明文と画像のセットがスマホ1画面に収まらない場合

ステップブロックにて対応する。ただし、ステップ名が表記でき且つ画像が少ない(=ステップ数が多くなりすぎない)場合に適用する。

スマートフォンのスクリーンショット

クリックなどの操作がない場合

画像の下に説明文を配置する。

画像処理と説明文の記載(ブログ編)

画像ブロックを挿入し、データをアップロードする。スタイルはフォトフレーム、キャプション・ALTテキスト(代替テキスト)を入力する。

ALTテキストはスクリーンキャプチャの場合、~画面と末尾に画面という単語を付与する。

積丹町神威岬
積丹町神威岬

画像の下に説明文を配置する。

よくある質問

FAQブロックを使用する。

質問1

回答1

質問2

回答2

まとめ

キャプションボックスのスタイル➡浮き出しを使用。箇条書きではなく、(リード文的な)文章記載形式にする。なお、キャプションには入力しない。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次