見出しやマーカーなど、記事内コンテンツのデザイン切り替え方法

2019 10/26
見出しやマーカーなど、記事内コンテンツのデザイン切り替え方法
記事上のウィジェットエリア

このページでは、WordPressテーマ『SWELL』の記事内で利用できるコンテンツのデザインを切り替える方法を解説していきます。

SWELLでは、エディターから好きなデザインを選択して、簡単に装飾ブロックなどを設置できますが、
これとは別に、「見出し」などのサイト全体で統一はされるが何パターンからかデザインを選択できる要素 というものを用意しています。

それらは、管理メニューの「外観」>「カスタマイズ」>「投稿・固定ページ設定」というところから設定できます。

SWELL ver.1.3.2より、「記事コンテンツデザイン」という新規メニューとして分離させました。

カスタマイザーの「記事コンテンツデザイン」
「記事コンテンツデザイン」

ここからは、全てこの「記事コンテンツデザイン」というメニューにある設定項目について説明していきます。

カスタマイザーの基本的な使い方についてはこちらを参考にしてください。

目次前広告表示エリア
目次

見出しのデザイン設定

SWELLでは、見出し2・見出し3・見出し4が本文中にて利用できますが、これら3種類の見出しそれぞれにデザインを設定でき、自分に合うデザインの組み合わせを自由に考えることができます。

見出しのデザインセット例

見出しデザインセット01
見出しデザインセット01
見出しデザインセット02
見出しデザインセット02
見出しデザインセット03
見出しデザインセット03
見出しデザインセット04
見出しデザインセット04

見出し2のデザインを選ぶ

「投稿・固定ページ設定」の中にある「見出し2のデザイン」という設定欄から好きなデザインを選択してください。

選択できる項目と、実際の表示例は次のとおりです。

見出し2のデザイン設定
見出し2のデザイン設定
見出し2のデザイン一覧
見出し2のデザイン一覧

見出し3のデザインを選ぶ

「投稿・固定ページ設定」の中にある「見出し3のデザイン」という設定欄から好きなデザインを選択してください。

選択できる項目と、実際の表示例は次のとおりです。

見出し3のデザイン設定
見出し3のデザイン設定
見出し3のデザイン一覧
見出し3のデザイン一覧

見出し4のデザインを選ぶ

「投稿・固定ページ設定」の中にある「見出し4のデザイン」という設定欄から好きなデザインを選択してください。

選択できる項目と、実際の表示例は次のとおりです。

見出し4のデザイン設定
見出し4のデザイン設定
見出し4のデザイン一覧
見出し4のデザイン一覧

ブログカードのデザイン設定

ver. 1.2.5より、ブログカードのデザインを選択できるようになりました。

ブログカードのデザイン設定
ブログカードのデザイン設定

それぞれ、次のような違いがあります。
違いがわかりやすくなるように背景色をグレーに設定しています。)

ブログカードのデザイン1
ブログカードのデザイン1
ブログカードのデザイン2
ブログカードのデザイン2

ボタンのデザイン設定

SWELLで使える装飾ボタンは、カスタマイザーから「丸み」と「」を設定できます。

丸みは3種類から選ぶことができ、色は「赤」「青」「緑」をそれぞれ好みの色合いに設定可能です。

ボタンのデザイン設定
ボタンのデザイン設定
「丸み」の設定による見た目の変化
「丸み」の設定による見た目の変化

装飾ボタンの使い方については、こちらをご覧ください

マーカー線のデザイン設定

マーカーのデザイン」という設定項目があり、「線の種類」と「」について設定できます。

マーカー線の選択
カスタマイザー >「投稿・固定ページ設定」
マーカーの色の設定
カスタマイザー >「投稿・固定ページ設定」

詳しくは以下をご覧ください。

あわせて読みたい
SWELLで使える「マーカー線」のカスタマイズ方法
SWELLで使える「マーカー線」のカスタマイズ方法この記事では、SWELLで使える「マーカー線」機能のカスタマイズ方法について解説していきます。【カスタマイザーの起動】マーカー線に関する設定はカスタマイザー内の「...

インライン文字色のカラー設定

ver. 1.2.5より、インラインで文字色を変更できる機能が追加されました。

その変更可能な文字色、「」・「」・「」の色味を設定することができます。

文字色の設定
文字色の設定

アイコン付きボックス(大)のデザイン設定

SWELLで使用可能な装飾ブロックのうち、「アイコン付きボックス(大)」は2パターンからデザインを選択することができます。

アイコンボックス(大)の設定
アイコンボックス(大)の設定
アイコンボックス:フラット
アイコンボックス:フラット
アイコンボックス:立体
アイコンボックス:立体

テーブルのデザイン設定

テーブル(表)のデフォルトのデザインを2種類から選ぶことができます。

SWELL ver.1.3.2より廃止しました。
テーブルのデザイン選択は、各ブロックのスタイルパネルから行うことができます。

引用文のデザイン設定

引用文(blockquoteタグ)のデザインは、2種類から選ぶことができます。

引用文のデザイン設定
引用文のデザイン設定
引用文デザイン:シンプル
引用文デザイン:シンプル
引用文デザイン:マーク表示
引用文デザイン:マーク表示

太字のデザイン設定

太字の下に点線をつけてより強調するかどうかを選べます。(当サイトでは下線ありのデザインを選択しています。)

太字のデザイン設定
太字のデザイン設定

テキストリンクのアンダーラインをつけるかどうか

記事内のテキストリンクにアンダーラインをつけるかどうかを選択することができます。

テキストリンクのアンダーラインの表示設定
テキストリンクのアンダーラインの表示設定

SWELL ver.1.3.2 で追加された項目です。

記事下のウィジェットエリア

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

目次
目次