記事デザイン詳細まとめ

  • URLをコピーしました!

こちらのサンプル記事内では、記事(投稿)ページまたは固定ページで使える様々なデザイン設定を紹介します。

編集ページを開いて中身を見ていただければ、どんな設定をしているのか詳しくご覧いただけますし、他の記事にコピーして使っても大丈夫です。

早速紹介していきます。

このようにマーカーを追加することが可能です。編集画面のツールバー内のマーカーマークをクリックすると使用する色を選べますが、黄色がおすすめです。

マーカーと太字を合わせて使うとさらに目立ちます。

目次

これは一番大きな見出しのデザイン(h2)です

見出しを使って文章を区切ると読みやすくなります。
見出しはさらに小さく分けることができ、h1〜h6があり、数字が1に近いほど見出しが大きく(最も重要な見出し)、順番に小さくなっていきます。

ただし、h1は記事のタイトルなど全体を通して一番大きい箇所に使用するので、記事の中では基本選択せず、h2から使用していきます。

これはh2の次に使う見出しのデザイン(h3)です

見出しはh2〜h6の中で数字の順番通りに使います。(h2→h3→h4…)
h6までありますが、基本的に使うのはh2とh3がメインで、h4を使う場合もありますが、見出しも増やしすぎないように注意しましょう。

これはh3の次に使う見出しのデザイン(h4)です

見出しを増やしすぎても逆にわかりづらくなるので、h2とh3でできるだけまとめるようにしましょう。

記事•固定ページで使えるデザイン

記事及び固定ページで使える様々なデザインを紹介します。

吹き出しデザイン

かなん

こんなふうに吹き出しを使って表現することができます。

吹き出しは複数登録可能で背景色や画像の位置(左右)、デザインも変えられます。

吹き出しはダッシュボードの左側縦に並んでいるメニューの中から「ふきだし」をクリックして、ふきだしのデザインを登録しておくと便利です。

ブログカードデザイン

関連する記事を記載したい時に便利なのがブログカードです。

ダッシュボードの「Swell設定」内の「その他」タブをクリックすると、スタイルを変更することができます。

内部リンクの場合はIDまたは記事のタイトルで、外部リンクの場合はURLを入力するだけで自動で読み込んでくれます。

ボタンデザイン

リストデザイン

  • 箇条書きのデザイン
  • 箇条書きのデザイン
  • 箇条書きのデザイン

ボックスデザイン

このようなボーダーを設定することもできます

キャプションボックス

キャプションボックスは7つのスタイルと3つのカラーからお選びいただけます。

ここにタイトルが入ります

ここにテキストが入ります。

ステップデザイン

STEP
ステップごとに解説するのに便利なデザインです

ここに説明文を入れることができます。

STEP
ステップ2のタイトル

ここに説明文を入れることができます。

ここに説明文を入れることができます。

STEP
ステップ3のタイトル

ここに説明文を入れることができます。

STEP
ステップ4のタイトル

ここに説明文を入れることができます。

FAQデザイン

質問の文章がここに入ります

答えの文章が入ります

FAQデザインも変えることができますか?

はい、色や「Q」「A」のアイコンの形などスタイルも変更できます。

まとめ

記事の文章をよりわかりやすく伝える手段として使える各種デザインを紹介しました。
何か確認されたいことなどあればお気軽にご相談ください。

この記事が気に入ったら
フォローしてね!

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