MENU
お知らせ内容をここに入力できます。 詳しくはこちら

SWELLで記事を書く際のマイルール

  • URLをコピーしました!

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

テリオス

テリオスは右側で固定

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

見出し(記事)

見出し(記事)

追加CSSで、H3見出しの文字色をカスタマイズしている。

見出し(固定ページ)

見出し(固定ページ)

記事と区別するために、固定ページでのH2・H3見出しの文字色を、それぞれカスタム濃-04,03にする。

インライン

文字の色協調

太字にし、SWELL装飾➡テキスト色でカスタム濃の01赤・02青・03緑・04橙を使用する。

なお、ハイライトでも同様である。

表示例

これは赤太字のサンプル表示です。
これは青太字のサンプル表示です。
これは緑太字のサンプル表示です。
これは橙太字のサンプル表示です。

マーカー

黒太字に対してのみ適用し、マーカーの橙色・黄色・緑色・青色を使用する。

なお、マーカーを使用したときの文字間隔調整のため、均等割付になるようCSS追加を施している。

表示例

これが、橙色マーカーのサンプル表示になります。
これが、黄色マーカーのサンプル表示になります。
これが、緑色マーカーのサンプル表示になります。
これが、青色マーカーのサンプル表示になります。➡リード文にのみ使用

文字の濃い背景色

重要キーワード(短い単語)に適用する。

背景色は、カスタム濃の01赤・02青・03緑・04橙とし、太字にはしない。

表示例

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

本日はお日柄も良く、この度の良き祝いの日に多数ご参加くださりありがとうございます。

文字の薄い背景色

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

表示例

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

リストブロック

デフォルト

  • 数字も可
  • 数字も可

目次風

  • 数字も可
  • 数字も可

チェック

  • ulのみ
  • ulのみ

注意

2段組にする、1段より文字が小さくなる

Good

  • ulのみ
  • ulのみ

Bad

  • ulのみ
  • ulのみ

丸数字

  1. olのみ
  2. olのみ

デフォルト

  • ulのみ
  • ulのみ

リストを枠等で囲う方法

リストブロックで詳細設定の【グループ化】を選択してクリック後、編集可能。

  • リストを枠等で囲う
  • リストを枠等で囲う

キャプションボックス

記事を読んで分かること

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

用語説明

スタイルは「小」、色はデフォルト、フォントサイズはキャプションがL、説明文はS

アカウントとは?

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

段落のアイコン付きボックス

アラート

説明文のフォントサイズはS。複数行になるとこんな感じ。小さい文字の方が引き締まって見える。

バツ印

説明文のフォントサイズはS。

ポイント

説明文のフォントサイズはS。

チェック

説明文のフォントサイズはS。

はてな

説明文のフォントサイズはS。

メモ

説明文のフォントサイズはS。

グッド

説明文のフォントサイズはS。複数行になるとこんな感じ。小さい文字の方が引き締まって見える。

バッド

説明文のフォントサイズはS。

インフォ

説明文のフォントサイズはS。

アナウンス

説明文のフォントサイズはS。

ペン

説明文のフォントサイズはS。

説明文のフォントサイズはS。

キャプチャ画像や図の処理

画像ブロックを挿入し、データをアップロードする。設定は以下のとおり。

スタイル:ブラウザ風
Altテキストを入力:キャプションを入力
画像サイズ:自動で選択されるサイズ
画像の表示サイズ:指定しない

キャプションを設定できる

画像・図の上に説明記事を置く。

キャプションを入力できる

総括

結論 & まとめ

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

この記事が気に入ったら
いいねしてね!

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