MENU
カテゴリー
【新年度応援セール!】期間限定で 20%OFF!

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

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

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

見出しなどの、どの記事でもデザインが統一される部分の設定になります。

これとは別に、SWELLではブロックごとに好きなデザインを選択して適用させることもできます。

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

カスタマイザーの起動

SWELLでは基本的にテーマカスタマイザーから全ての設定を行うことができます。

カスタマイザーの起動方法については以下の記事を参考にして下さい。

以下では、カスタマイザー上での操作について説明していきます。

投稿タイトルに関してはカスタマイザー内の「投稿・固定ページ」>「コンテンツのデザイン」から設定できます。

カスタマイザーの「投稿・固定ページ」
カスタマイザーの「投稿・固定ページ」
「投稿・固定ページ」>「コンテンツのデザイン」
「投稿・固定ページ」>「コンテンツのデザイン」

見出しのデザイン設定

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種類から選ぶことができ、色は「赤」「青」「緑」をそれぞれ好みの色合いに設定可能です。

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

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

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

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

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

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

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

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

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

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

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

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

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

テーブルのデザイン設定

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

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

投稿内画像への追加処理設定

SWELLでは、投稿内の画像に対して以下の2つの処理を自動的に追加しています。

  • 遅延読み込み機能(Lazyload)
  • クリックして拡大表示する機能(Lightbox)

これらの機能が不要な場合は、以下のチェックを外してください。

LazyloadとLightbox機能のオン・オフ設定
LazyloadとLightbox機能のオン・オフ設定

それぞれ、LazysizesLuminous というスクリプトを採用して実装しています。

引用文のデザイン設定

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

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

太字のデザイン設定

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

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

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

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

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

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

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

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

目次
閉じる