【SWELLマニュアル】6. トップページ

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

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

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

• なし
• ブラー
• グレースケール
• ドット
• ブラシ

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

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

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

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

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

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

ブログパーツの作り方

STEP

ブログパーツを新規作成

STEP

登録したいデザインを作成して公開

STEP

ブログパーツIDを入力

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

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

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

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

ピックアップ対象

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

ピックアップ対象の名前

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

並び順

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

• ランダム
• 投稿日
• 更新日
• 人気順

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

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

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

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

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

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

1. メニュー名に「ピックアップバナー」と入力
2. メニューの位置で「ピックアップバナー」にチェック
3. メニューを作成する

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

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

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

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

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

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

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

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

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