【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 おしゃれサイト作り方

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

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

PR

PR

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

トップページ(Home.)

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

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

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

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

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

目次