投稿・固定ページに表示される各パーツのカスタマイズ方法

2019 12/09
投稿・固定ページに表示される各パーツのカスタマイズ方法
記事上のウィジェットエリア

SWELLの投稿ページでは、「目次」や「SNSシェアボタン」、「この記事を書いた人」、「関連記事」などのいくつかのパーツがあり、それぞれ自由に表示・非表示を切り替えたり、デザインを変更することができます。

このページでは、それらの設定方法について説明していこうと思います。

ver 1.3.2のアップデートで設定項目の表示順などを整理し直したため、現在この記事の通りの見た目ではなくなってしまっています。
※ 数日以内にリライトします…!

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

カスタマイザーの起動

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

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

あわせて読みたい
【SWELLの設定】「テーマカスタマイザー」の使用方法
【SWELLの設定】「テーマカスタマイザー」の使用方法SWELLの設定やカスタマイズは、ほぼ全て「テーマカスタマイザー」機能で行うことができるように設計しました。「テーマカスタマイザー」機能はリアルタイムで設定が反映...

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

投稿・固定ページの各パーツに関する設定は、カスタマイザー内の「投稿・固定ページ設定」というメニューから設定できます。

投稿・固定ページ設定
投稿・固定ページ設定

投稿・固定ページのタイトル部分に関する設定

SWELLでは、

  • ページのタイトルをページ上部に表示させるか本文の上側に表示するか
  • タイトル横の日付やタイトル下にカテゴリー情報を表示するかどうか

などについて設定することが可能です。詳しくは別ページにまとめていますので、そちらのページをご覧ください。

あわせて読みたい
投稿ページ・固定ページの「タイトル」に関する基本設定
投稿ページ・固定ページの「タイトル」に関する基本設定このページでは、投稿ページ(記事ページ)や、固定ページに表示される「タイトル」周りの基本的な設定方法について説明していきます。【カスタマイザーの起動】投稿リ...

目次の設定

SWELLでは、1つ目のH2タグの直前に目次を自動生成する機能を使用可能です。

この目次に関しては、

  • 表示するかどうか
  • デザインをどうするか
  • 番号をつけるかつけないか

について設定できます。
目次についても、詳しくは別記事でまとめましたのでそちらをご覧ください。

あわせて読みたい
目次の設定方法
目次の設定方法SWELLでは、記事の1つ目のH2タグの直前に「目次を自動生成する」ことができます。このページでは、その目次に関する基本的な設定方法を説明していきます。【カスタマイ...

アイキャッチ画像の表示設定

投稿ページ・固定ページそれぞれについて、投稿本文の直前にアイキャッチ画像を表示するかどうかを選択することができます。

アイキャッチ画像の設定
「投稿・固定ページ設定」 > 「アイキャッチ画像の設定

本文の始めにアイキャッチ画像を表示」のチェックによって、以下のアイキャッチ画像エリアの表示・非表示がが切り替わります。

アイキャッチ画像の位置
アイキャッチ画像の位置

また、投稿ページにのみ「アイキャッチ画像がない場合にNO IMAGE画像を表示する」という設定も用意しています。

こちらにチェックを入れると、アイキャッチ画像を設定していない投稿ではNO IMAGE画像」が代わりに表示されるようになります。

NO IMAGE画像の設定方法については、以下の記事をご覧ください。

あわせて読みたい
NO IMAGE(ノーイメージ)画像の設定方法
NO IMAGE(ノーイメージ)画像の設定方法SWELLでは、各記事のアイキャッチ画像が設定されていない場合に表示するサムネイル画像として、「NO IMAGE画像」を自由に設定することができます!ここでは、その設定方...

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

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

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

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

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

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

SNSシェアボタンに関する設定

投稿ページでは、各種SNSで拡散されやすいようにシェアボタンを設置することが可能になっています。

そのシェアボタンに関する設定は以下の部分になります。

SNSシェアボタンに関する設定
「投稿・固定ページ設定」 > 「SNSシェアボタンに関する設定

3箇所にシェアボタンを設置可能

シェアボタンは 記事の上部記事の下部画面左側に固定 の3箇所に設置することができ、それぞれチェックを外すことで非表示にできます。

ただし、画面左側に固定するシェアボタンはPC表示時にしか表示されません。

シェアボタンのデザインを選択

また、 ボタンのデザインも5種類から選べるようになっています。

シェアボタンのデザイン設定の様子

ボタン個別に表示するかどうかを設定可能

ver.1.3.6 から、各SNS用のシェアボタンを個別に表示・非表示を切り替えることができるようになりました!

SNSアクションエリア設定設定

SNSアクションエリア」というのは、記事の下にある以下のような部分のことです。(なんと呼ぶのが正解なのかわからない…笑)

SNSアクションエリアの画像
SNSアクションエリア

このエリアに関する設定は、以下の部分になります。

SNSアクションエリア設定
「投稿・固定ページ設定」 > 「SNSアクションエリア設定

TwitterのフォローボタンFacebookのいいねボタン を設置するかどうかを選択し、それぞれのボタンに必要な設定を入力してください。

前後記事へのページリンク設定

前後の記事に対するリンクも設置可能で、デザインなどを設定できます。

前後の記事リンクの設定
「投稿・固定ページ設定」 > 「前後記事へのページリンク設定

デザインは、デフォルトで「標準」が選択されており、次のようになっています。

前後記事リンク-デフォルト
前後記事へのリンク

デザインを「シンプル」にし、「サムネイル画像を表示する」にもチェックを入れると、以下のようなデザインに変化します。

前後記事リンク-シンプル

著者情報エリアの設定

その投稿の著者に関する基本情報を表示するエリアも設置可能です。

著者情報エリアの設定
「投稿・固定ページ設定」 > 「著者情報エリアの設定

著者情報エリア というのは、デフォルトで「この記事を書いた人」と書かれている以下のようなエリアのことです。

著者情報エリアの例
著者情報エリアの例

関連記事エリアの設定

関連記事エリアについてもカスタマイズが可能です。

関連記事リストの設定

上記のような設定項目があり、ここではそれぞれ以下の内容に関する設定を変更できます。

  1. 「関連記事」というセクションのタイトルを好きなテキストに編集できます
  2. 投稿リストのレイアウトを選択できます
  3. 同じカテゴリーの記事を表示するか・同じタグを持つ記事を表示するかを選択できます

カード型とリスト型の違い

関連記事-カード型
関連記事-カード型
関連記事-リスト型
関連記事-リスト型

コメントエリアの設定

コメントエリアについては、現状では表示・非表示の設定のみ可能です。

コメントエリアの設定
コメントエリアの設定

記事ごとに表示・非表示を切り替えできるエリアについて

ここまで、カスタマイザーによるサイト全体での共通設定について説明してきましたが、いくつかの項目は個別のページごとに表示・非表示を切り替えることが可能です。

詳しくは以下のページをご覧ください。

あわせて読みたい
記事・固定ページごとにカスタマイズ可能な各パーツの表示設定
記事・固定ページごとにカスタマイズ可能な各パーツの表示設定このページでは、WordPressテーマ「SWELL」にて記事・固定ページごとにカスタマイズ可能な各パーツの表示設定について解説していきます。各パーツのサイト全体での共通...
記事下のウィジェットエリア

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

目次
目次