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

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

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

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

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

この記事で紹介されている一部の設定は、カスタマイザーではなく「SWELL設定」>「エディター設定」へ移動されました!

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

カスタマイザーの起動

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

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

見出しのデザイン設定

SWELLでは 見出し2~4(h2~h4)のデザイン をそれぞれ設定でき、自分に合うデザインの組み合わせを自由に考えることができるようなっています。

投稿・固定ページ」>「コンテンツのデザイン」の中に、以下のような設定エリアがありますので、自由に設定してみてください。

見出しのデザイン設定

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

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

見出し2のデザイン一覧

見出し2のデザイン」という設定欄から好きなデザインを選択してください。

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

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

見出し3のデザイン」という設定欄から好きなデザインを選択してください。

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

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

見出し4のデザイン」という設定欄から好きなデザインを選択してください。

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

「セクション用見出し」のデザイン設定

SWELLには、通常の見出しとは別に、トップページや固定ページを構築する時に便利な「セクション用見出し」というものがあります。

この セクション用見出し に関する設定も、上記で説明した見出し設定のすぐ下にありますので、キーカラーとデザインを好きに選択してご利用ください。

セクション用見出しの設定

太字のデザイン設定

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

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

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

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

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

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

「SWELL設定」内でカスタマイズできる項目

カスタマイザーではく、「SWELL設定」の「エディター設定」からデザインや色などをカスタマイズできる要素について紹介していきます。

ボタンのデザイン設定

SWELLボタンのデザインは、「」と「丸み」をそれぞれ設定できます。

「SWELL設定」>「エディター設定」内の、「ボタン」タブの中にある以下のエリアで設定してください。

ボタンに関する設定エリア

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

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

「SWELL設定」>「エディター設定」内の、「カラーセット」タブの中で、「線の種類」と「」について設定できます。

マーカーに関する設定エリア

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

SWELLで使用できるブロック装飾の「アイコン付きボックス」に関しては、
「SWELL設定」>「エディター設定」内の、「デザイン切り替え」タブの中にある以下のエリアでデザインを選択することができます。

アイコン付きボックスの設定エリア

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

ブログカードのデザインを3種類から選択することができ、内部リンクと外部リンクでそれぞれ個別に設定できます。

「SWELL設定」>「エディター設定」内の、「デザイン切り替え」タブの中にある以下のエリアで設定してください。

ブログカード関する設定エリア

引用文のデザイン設定

引用文(blockquoteタグ)のデザインは、2種類から選ぶことができます。
「SWELL設定」>「エディター設定」内の、「デザイン切り替え」タブで設定できます。

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

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

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

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

これらの機能が不要な場合は、カスタマイザーから以下のチェックを外してください。

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

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

画像の遅延読み込みについての設定項目は、「SWELL設定」の「高速化」タブへ、
拡大表示する機能については、「SWELL設定」の「機能停止」タブへ移動しました。

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

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

よかったらシェアしてね!
目次
閉じる