こんにちは。銀河(@ginga_noguchi)です。

WordPressテーマ『SWELL』の設定マニュアルです。この記事ではカスタマイザーによるサイトのデザイン・設定をおこなっていきます。

このマニュアルはSWELLのカスタマイザーマニュアルの第7回になります。第6回の「トップページ」がまだの場合は先にこちらの設定を終わらせてください。

YouTube版

7-1. タイトル

7-1-1. 投稿ページ

STEP
タイトルの表示位置
設定できること
  • コンテンツ上
  • コンテンツ内
STEP
タイトル横に表示する日付や情報
設定できること
  • タイトル横に表示する日付
  • タイトル下に表示する情報

スマホでの表示も確認しましょう。詰め込みすぎると見栄えが悪くなることもあります。

スマホのみタイトル横の日付を非表示

7-1-2. 固定ページ

STEP
タイトルの表示位置
設定できること
  • コンテンツ上
  • コンテンツ内

7-2. アイキャッチ画像

7-2-1. 固定ページ

STEP
本文の始めにアイキャッチ画像を表示

アイキャッチ画像は非表示の状態。タイトルの背景はコンテンツヘッダーで設定した画像です。

アイキャッチ画像を表示させた状態。ページ上部に設定したアイキャッチ画像が挿入されます。

7-2-2. 投稿ページ

STEP
本文の始めにアイキャッチ画像を表示

固定ページ同様に先頭に自動でアイキャッチ画像が入ります。

STEP
アイキャッチ画像なければ「NO IMAGE画像」を代わりに表示する

表示確認のためアイキャッチ画像の指定を外しました。「NO IMAGE画像を表示する」にチェックを入れない場合はアイキャッチ画像が非表示となります。

チェックを入れるとアイキャッチ画像が表示されます。この画像はNO IMAGE画像で設定した画像が表示されます。

7-3. コンテンツのデザイン

7-3-1. 見出しのデザイン設定

STEP
見出しのキーカラー

すべての見出しに共通するキーカラーを設定できます。デフォルトでは基本カラーで設定したメインカラーになっています。

STEP
見出し2のデザイン
設定できること
  • 塗り潰し
  • 左に縦線
  • 左に2色のブロック
  • 付箋風
  • 付箋風(ストライプ)
  • ステッチ
  • ステッチ(薄)
  • ふきだし風
  • 上下に線
  • 1文字目にアクセント
  • 装飾なし

見出し2のデザインはなんと12種類から選択可能です。

塗り潰し
左に縦線
左に2色のブロック
付箋風
付箋風(ストライプ)
ステッチ
ステッチ(薄)
ふきだし風
上下に線
1文字目にアクセント
装飾なし
STEP
見出し3のデザイン
設定できること
  • 2色の下線(メイン・グレー)
  • 2色の下線(メイン・薄メイン)
  • 下線(メインカラー)
  • 下線(グラデーション)
  • 下線(ストライプ)
  • 左に縦線
  • 左に2色のブロック
  • 装飾なし

見出し3のデザインも8種類から選択可能です。

2色の下線(メイン・グレー)
2色の下線(メイン・薄メイン)
下線(メインカラー)
下線(グラデーション)
下線(ストライプ)
左に縦線
左に2色のブロック
装飾なし
STEP
見出し4のデザイン
設定できること
  • 左に縦線
  • チェックアイコン
  • 装飾なし

見出し4のデザインも3種類から選択可能です。

左に縦線
チェックアイコン
装飾なし

7-3-2. セクション見出しのデザイン設定

セクション見出しはおもに固定ページで使用する見出しです。もちろんデフォルトでもかまいませんが、たとえば

  • サイドバーのあったり、長文の多い投稿ページは基本左寄せ
  • 1カラムでレイアウト重視の固定ページは中央寄せ

などしたい場合がありますので、投稿ページ用と固定ページ用で2種類の見出しを設定できるのはありがたいですね。

STEP
セクション見出しのキーカラー
STEP
セクション用見出し2のデザイン
設定できること
  • 装飾なし
  • 下に線
  • 左右に線

セクション用見出し2のデザインも3種類から選択可能です。

装飾なし
下に線
左右に線

7-3-3. 太字

STEP
太字の下に点線をつける

太字をテスト入力してみました。「太字の下に点線をつける」のチェックは外れています。

チェックを入れると点線のアンダーラインが入ります。太文字は強調したいときに使用することが多いのでより目立たせることができますね。

「<p>タグ直下のみ」というのは、本文の太文字だけ有効で、見出しなどは太文字でも点線は入らないということです。

7-3-4. テキストリンク

STEP
テキストリンクにアンダーラインをつける

テキストリンクをテスト入力してみました。「テキストリンクにアンダーラインをつける」のチェックは外れています。

チェックを入れるとアンダーラインが入ります。下線はリンクのイメージが強いので「クリックできるテキストですよ」とわからせやすくなります。

リンクではないテキストに強調のために下線を入れると、リンクに見えてまぎらわしいのでおすすめしません。

7-4. 目次

STEP
目次を表示するかどうか

目次は投稿ページと固定ページそれぞれに表示の有無を設定できます。

STEP
目次のタイトル

「目次」の部分は好きなテキストに変更可能です。

STEP
目次のデザイン
設定できること
  • シンプル
  • ボックス
  • 上下ボーダー
  • ストライプ背景

目次は4種類のデザインから選択できます。

STEP
目次のリストタグ
設定できること
  • olタグ
  • ulタグ

タグについての細かな説明は省略しますが、「番号リスト」か「箇条書き」かという選択になります。

STEP
擬似要素(ドット・数字部分)のカラー
設定できること
  • テキストカラー
  • メインカラー
  • カスタムカラー
STEP
どの階層の見出しまで抽出するか
設定できること
  • h2
  • h3
STEP
見出しが何個以上あれば表示するか

見出しが最低いくつあれば目次を表示するかの設定です。あまりにも短い記事であれば目次は不要の場合もありますのでサイトの状況に合わせて設定してください。

7-5. 目次広告の表示設定

STEP
目次広告を作成する

ダッシュボード > SWELL設定 > 広告コード > 目次広告

に、アフィリエイトコードをコピペします。

STEP
広告が自動で表示される
STEP
目次広告の位置
設定できること
  • 目次の前に設置する
  • 目次の後に設置する
STEP
目次がなくても広告を表示するかどうか
設定できること
  • 投稿ページで表示する
  • 固定ページで表示する

目次広告の表示設定の見出しの最低数に達していないと目次が表示されません。「目次は表示しないけど広告は表示させたい」といった場合の設定です。

7-6. SNSシェアボタン

7-6-1. 表示設定

STEP
シェアボタンを表示する位置
設定できること
  • 記事上部に表示する
  • 記事下部に表示する
  • 画面端に固定表示する

全部表示させることも可能です。

STEP
表示するボタンの種類
設定できること
  • Facebook
  • Twitter
  • はてブ
  • Pocket
  • Pinterest
  • LINE

サイトのコンセプトや、ユーザー層、自分の使用しているSNSなどに合わせて選択できます。

STEP
シェアボタンのデザイン
設定できること
  • ブロック
  • ボタン
  • ボタン(小)
  • アイコン
  • ボックス
STEP
URLコピーボタン
設定できること
  • 表示しない
  • 小さく表示
  • 大きく表示
STEP
「記事下部シェアボタン」の上に表示するメッセージ

デフォルトでは「よかったらシェアしてね!」となっています。

任意のテキストに変更可能です。

7-6-2. Twitter用の追加設定

STEP
シェアされた時のハッシュタグとvia設定(メンション先)

Twitterシェアボタンからシェアされたときにハッシュタグや自分へのメンションなどを入れることができます。

7-7. 記事下エリア

STEP
SNSアクションエリア設定
設定できること
  • Twitterフォローボタン
  • Instagramフォローボタン
  • Facebookいいねボタン

【Facebookいいねボタンに使用するappID】に入力するIDの取得方法は『FacebookのアプリIDの取得手順』で解説しています。

STEP
前後記事へのページリンク設定
設定できること
  • 前後記事へのページリンクを表示
  • ページリンクにサムネイル画像を表示する
  • 同じカテゴリーの記事を取得する
前後記事へのページリンクを表示

チェックを入れると記事の前後へのリンクが表示されます。

ページリンクにサムネイル画像を表示する

チェックを入れると前後のページのアイキャッチ画像が表示されます。

同じカテゴリーの記事を取得する

デフォルトでの前後記事はカテゴリーに関係なく公開日順ですが、チェックを入れると同じカテゴリーの投稿順になります。

STEP
前後記事へのページリンクのデザイン
設定できること
  • 標準
  • シンプル

7-7-1. 著者情報エリアの設定

STEP
著者情報を表示
STEP
ユーザー情報の入力

ダッシュボード > ユーザー >プロフィール

ページ中央に項目があるので必要に応じて入力します。プロフィール写真はここで設定すると面倒なのでしなくてOKです。

STEP
SWELL追加データの入力

SWELL独自の設定項目があるので入力します。プロフィール写真は【カスタムアバター】で設定するのが圧倒的に楽です。

STEP
著者情報に反映される

設定した情報が「この記事を書いた人」に反映されます。

STEP
著者ページへのリンクを表示する

【この著者の記事一覧へ】というリンクボタンが表示されます社内スタッフ複数でブログを書いたり、外注ライターに寄稿してもらったときなどに便利です。

STEP
著者情報エリアのタイトル

著者紹介部分のタイトルは変更も可能です。

7-7-2. 関連記事エリアの設定

STEP
関連記事を表示

関連記事を表示させるかどうかの設定です。

チェックを外せば非表示になります。

STEP
公開日・更新日を表示する

記事の公開日・更新日それぞれを表示させるかどうかの設定です。

STEP
関連記事エリアのタイトル

関連記事エリアのタイトルは変更可能です。

STEP
関連記事のレイアウト
設定できること
  • カード型
  • リスト型
STEP
並び順
設定できること
  • 新着順
  • 更新順
  • ランダム
STEP
関連記事の取得方法
設定できること
  • カテゴリー
  • タグ

7-7-3. コメントエリアの設定

STEP
コメントエリアを表示

コメントエリアを表示させるかどうかの設定です。

チェックを外せば非表示になります。

STEP
コメントエリアのタイトル

コメントエリアのタイトルは変更可能です。