【SWELL】ピックアップバナー(ヘッダーカード)を設置する方法

広告:ページ内にてアフィリエイト広告を利用しています。

ピックアップバナーを設置する方法

ピックアップバナー(ヘッダーカード)はカテゴリーなどのリンクを視覚的にアピールすることができます。グローバルナビ(ヘッダー上部のメニュー)よりも読者へのファーストインパクトに優れています。

SWELLでピックアップバナー(ヘッダーカード)を配置する方法を解説します。

SWELL おすすめサンプルページ

\サンプルを見るだけでも役に立つ/

おしゃれサイト

\SWELL でオシャレサイトを作る方法は こちら をクリックしてください/

目次
PR

ピックアップバナー(ヘッダーカード)とは?

ピックアップバナー(ヘッダーカード)は、サイトの上部に表示する画像のリンクカードです。

各カテゴリーへのリンクを画像(アイキャッチ画像)で表示しています。サイトに訪れた読者に、サイトの分類分けをアピールしたり、特筆するべき記事をアピールすることができるおススメの機能です。

ピックアップバナー(ヘッダーカード)の配置方法

ピックアップバナー(ヘッダーカード)の配置方法です。

STEP
【事前準備】カテゴリーにアイキャッチ画像を設定する

ピックアップバナー(ヘッダーカード)で使う画像はアイキャッチ画像になります。

カテゴリーを使う場合は、カテゴリーの詳細でアイキャッチ画像を設定しておきます。

アイキャッチ画像をカテゴリに設定する

WordPress の管理画面から「投稿」→「カテゴリー」を選択します。

  • カテゴリの詳細でアイキャッチ画像を設定する
STEP
【事前準備】メニューに説明を表示

ピックアップバナーで子輝の画像を設定する場合に必要となるため、「説明」欄を表示しておきます。

説明の表示方法

WordPress の管理画面から「外観」→「メニュー」を選択します。

  • 「表示オプション」をクリックし「説明」をチェックする
STEP
ピックアップバナー(メニュー)を作成する

(グローバルナビやフッターメニューと同様に)メニューでピックアップバナーメニューを作成する。

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

WordPress の管理画面から「外観」→「メニュー」を選択します。

  • ピックアップバナーメニューを作成する
  • メニューに項目を設定する
STEP
(アイキャッチではない)画像を表示したい場合

アイキャッチではない画像を表示する場合は、説明欄に画像のURLを入力します。

画像の指定方法
  • 「説明」に画像のURLを指定する
ポイント

画像のURLは WordPress の管理画面から「メディア」を選択し、目的の画像の詳細で、右下の「ファイルのURL」から取得することができます。

STEP
ピックアップバナー(ヘッダーカード)の表示を設定する

ピックアップバナーの表示設定を行います。

WordPress の管理画面から「外観」→「カスタマイズ」→「トップページ」→「ピックアップバナー」を選択します。

  • ピックアップバナーの表示設定を行う
STEP
完成

ピックアップバナー(ヘッダーカード)の完成です。

PR

まとめ:ピックアップバナー(ヘッダーカード)の配置方法

ピックアップバナー(ヘッダーカード)は以下の手順で配置します。

  • カテゴリーにアイキャッチ画像を設定する
  • メニューの説明欄を表示する
  • ピックアップバナー(メニュー)を作成する
  • アイキャッチではない画像を表示したい場合は、別途説明欄にURLを設定する
  • ピックアップバナー(ヘッダーカード)の表示を設定する

SWELLを使って素敵なサイトを作ってくださいね。

SWELL おしゃれサイト作り方

SWELL の利用方法などについてココナラにて「支援作業」を販売しております。

よかったらご利用くださいませ。

PR

PR

一番上に戻る(Back to the initial position on click.)

トップページ(Home.)

PR
Amazon でお買い物
楽天市場でお買い物
広告の設置・収入について

当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。

当サイトは Google アドセンスを利用し、広告により収入を得ています。

当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。

電気通信事業法改正に伴う表記

目次