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

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

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

YouTube版

6-1. メインビジュアル

6-1-1. メインビジュアルの表示内容

STEP
メインビジュアルに何を表示させるかの設定
設定できること
  • 表示しない
  • 画像
  • 動画

メインビジュアルを非表示にすることができます。画像ですと無機質に感じますが、トップページ用の固定ページで自由にデザインすることが可能です。

6-1-2. 表示設定

STEP
周りに余白をつける

チェックを入れると指定した画像や動画の周りに白い枠が入ります。

STEP
Scrollボタンを表示する

チェックを入れると下にスクロールできる案内アイコンが表示されます。

STEP
メインビジュアルの高さ設定
設定できること
  • 画像・動画サイズのまま
  • コンテンツに応じる
  • 数値で指定する
  • ウィンドウサイズにフィットさせる

指定した画像や動画のサイズがそのまま表示されます。

STEP
画像(動画)の上に表示されるボタンの丸み
設定できること
  • なし
  • 少し丸める
  • 丸める
STEP
フィルター処理

コンテンツヘッダーの設定と同じく画像にフィルターをかけることができます。

設定できること
  • なし
  • ブラー
  • グレースケール
  • ドット
  • ブラシ
STEP
オーバーレイカラー

ここも同じくオーバーレイカラーと不透明度を設定できます。

ブラシ+青フィルター(0.4)
ドット+黒フィルター(0.6)

6-1-3. 画像スライダー設定

STEP
スライドの切り替えアニメーション
設定できること
  • フェード
  • スライド
STEP
スライドの表示中アニメーション
設定できること
  • なし
  • ズームイン
  • 左から右へ
アニメーションなし
STEP
スライドの切り替わり速度と切り替わる感覚

画像がどれぐらいの時間をかけて切り替わっていくのか、1枚の画像をどれぐらい表示させるのかを設定できます。

6-1-4. 各スライドの設定

STEP
スライド画像(PC)
STEP
スライド画像(SP)

未設定であればPC用の画像が表示されますが、画像によっては見切れてしまうこともあります。

そんなときにスマホ用の画像を設定することができます。

STEP
テキストの設定

メインテキストとサブテキスト、ボタンを表示する場合はリンク先のURLとボタンのテキストを入力します。

STEP
ブログパーツ

SWELL独自の機能でブログパーツを作って呼び出すことができます。

ブログパーツの作り方

STEP
ブログパーツを新規作成
STEP
登録したいデザインを作成して公開
STEP
ブログパーツIDを入力

作成したブログパーツを簡単に呼び出すことができます。

これは非常に便利で、ABテストをしたいときや、キャンペーン情報を一時的に表示させたり非表示にさせたりしたいときなどで重宝します。

STEP
ナビゲーションの表示設定

左右の矢印ナビやページネーションを表示することができます。

6-2. 記事スライダー

STEP
記事スライダーを設置するかどうか
設定できること
  • 設置しない
  • 設置する

不要であれば非表示できます。

STEP
記事のピックアップ方法
ピックアップ対象

スライダーに表示させる記事を選定する場合、カテゴリーからなのかタグからなのか選択できます。

ピックアップ対象の名前

さらに選定するカテゴリーやタグを選択できます。設定しない場合は全記事が対象となります。

並び順

スライダーの並び順を選択できます。

  • ランダム
  • 投稿日
  • 更新日
  • 人気順
STEP
タイトルや日付などの表示位置
設定できること
  • 画像の下側
  • 画像に被せる
STEP
カテゴリー表示位置
設定できること
  • 表示しない
  • サムネイル画像の上
  • タイトルの下
STEP
日付・著者の表示設定

公開日・更新日・著者名の表示有無を選択できます。

STEP
スライド設定
設定できること
  • PCでのスライドの表示枚数
  • スマホでのスライドの表示枚数
  • スライドのアニメーション速度
  • スライドが切り替わる速度
  • 矢印ナビゲーションの表示の有無
  • ページネーションの表示の有無
  • スライド同士の余白をなくすかどうか
STEP
記事スライダーエリアのタイトル

たとえば「制作実績」といったタイトルをつけ、ピックアップ対象の設定で表示カテゴリーを絞り込むといった設定が可能です。

STEP
上下の余白量
設定できること
  • なし
STEP
左右の幅
設定できること
  • フルワイド
  • 左右に少し余白あり
  • コンテンツ幅に収める
STEP
記事スライダーエリアの文字色と背景色

記事スライダーエリアの背景色を設定できます。ダーク系の背景にする場合は文字色を白などにすることで可読性を上げられます。

バナー系のアイキャッチの場合は画像にかぶせたり余計な情報を非表示にすることですっきりとさせられます。

STEP
記事スライダーエリアの背景画像と不透明度の設定

背景は画像を設定することもできます。不透明度の調整も可能です。

6-3. ピックアップバナー

6-3-1. ピックアップバナー用のメニューの作成

STEP
ピックアップバナー用のメニューを作成する

新規メニュー作成で「ピックアップバナー」のメニューを作成します。

  1. メニュー名に「ピックアップバナー」と入力
  2. メニューの位置で「ピックアップバナー」にチェック
  3. メニューを作成する
STEP
ピックアップバナーに設定したい項目を3〜4つ選ぶ
STEP
ピックアップバナーとして表示される

選択したページのアイキャッチ画像がバナーリンクとして表示されます。

ページに設定したアイキャッチの画像サイズで表示されてしまいます。アイキャッチ画像のサイズを統一しましょう。

アイキャッチ画像のサイズを統一することできれいに表示できます。

アイキャッチ画像のサイズは16:9がおすすめです。

6-3-2. バナーレイアウト

STEP
バナーレイアウト(PC)
設定できること
  • 固定幅 4列
  • 固定幅 3列
  • 固定幅 2列
  • フレックス(横一列に全て並べる)

バナーの表示カラムを設定できます。メニューが3つの場合は3列にすることで綺麗に表示できます。

STEP
バナーレイアウト(SP)
設定できること
  • 固定幅 2列
  • 固定幅 1列
  • スライド(横スクロール可能に)

スマホの場合も設定できます。

6-3-3. バナーデザイン

STEP
バナータイトルのデザイン
設定できること
  • 表示しない
  • 左上に表示
  • 右下に表示
  • 中央(シンプル)
  • 中央(ボタン風)
  • 下にワイド表示

文字つきのアイキャッチ画像の場合は非表示がすっきりします。

STEP
内側に白線を
設定できること
  • つけない
  • つける
STEP
バナー画像を少し明るく
設定できること
  • しない
  • する

6-3-4. その他

STEP
トップページ以外の下層ページにも表示する

チェックを入れると投稿ページや固定ページなど、トップページ以外にも表示させられます。

特定のページのみ非表示にさせたい場合は個別に設定もできます。

STEP
Lazyloadを強制オフにする

Lazyloadとはページを表示するときに画像の読み込みをあえて遅らせることで、コンテンツの表示を早める設定です。基本的にLazyloadはオンにしておくべきですが、クローラーによるSEO的デメリットが気になるなどどうしても外したい場合はオフにできます。

6-4. その他

STEP
コンテンツ上の余白量
設定できること
  • なし
  • 狭め
  • 標準
  • 広め