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

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

記事冒頭にリード文を配置。「ディスクリプション」と同じ内容にするため、100文字程度に納める。この装飾は、段落ブロックのボーダー設定04とスタイルの浮き出しを使用。背景の色設定はカスタム薄-04。これで大体100文字。

テリオス

テリオスは右側で固定

記事を読んで分かること =【 結論 】
  • H2見出し単位でポイントをピックアップしていく
  • 場合により、ポイントを疑問形式で記述する場合もある
  • 長文化せず、パソコンで1行、スマホで2行以内に納める
  • 結論を先に記載した方が効果的
目次

基本事項

英数字は半角を基本とする。

アイキャッチ画像

サイトの記事の場合、アイキャッチ画像は表示させない。

ブログの記事の場合、アイキャッチ画像は表示させる。

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橙とし、太字にはしない。

表示例

本日晴天なり。本日は晴天なり。本日は晴天なり本日は晴天なり。本日は晴天なり。

文字の薄い背景色

カスタム薄-01を、画面操作でのクリック操作表示やボタン操作表示等に使う。

表示例

良ければお申込み(30日間お試し)をクリックします。

その他の適用

チェックを入れる場合

チェックを入れる項目を黒太字にする。

表示例

「■投稿ページ」>「タイトル下に表示する情報」のタイトル下に著者を表示するにチェックを入れます。

入力する場合

入力する内容を黒太字にする。

表示例

「■投稿ページ」>「タイトル下に表示する情報」にテリオスと入力します。

キャプションボックス

記事を読んで分かること

記事を読んで分かること =【 結論 】
  • キャプションボックスのスタイル➡デフォルトを使用
  • キャプションボックス内にリスト➡目次風を追加

用語説明

スタイルは「小」、色はデフォルト、フォントサイズはキャプションがLとする。

アカウント

アカウントとは、スマホやパソコンを利用してインターネット上の様々なサービスにログインするための権利のことです。アカウントは通常、IDとパスワードの2つがセットになっていて、この2つを入力することで本人確認ができる仕組みになっています。

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

リンクリストと組み合わせる。

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

項目をクリックすると、H3見出しにジャンプするよう設定。

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

アイコン付きボックス

アラート

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

バツ印

説明文はこんな感じ。

ポイント

説明文はこんな感じ。

チェック

説明文はこんな感じ。

はてな

説明文はこんな感じ。

メモ

説明文はこんな感じ。

グッド

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

バッド

説明文はこんな感じ。

インフォ

説明文はこんな感じ。

アナウンス

説明文はこんな感じ。

ペン

説明文はこんな感じ。

説明文はこんな感じ。

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

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

TERIOSNET-MONETIZEトップ画面

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

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

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

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

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

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

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

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

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

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

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

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

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

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

よくある質問

FAQブロックを使用する。

質問1

回答1

質問2

回答2

総括

結論 & まとめ

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

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

この記事を書いた人

目次