SWELLでは、メインビジュアルにスクロールボタンをつけることができます。

ただし、SWELLのスクロールボタンは標準仕様で表示されます。このボタンを自分の好きな画像に変更したいケースってありますね。

本記事は、2024/2/25時点（バージョン: 2.9.0）のSWELLを対象としています。

SWELL を使ってオシャレなページを作る方法を特別に解説

＼サンプルを見るだけでも役に立つ／

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

SWELL の メインビジュアルのスクロールボタン

メインビジュアルの SCROLL ボタンとは、メインビジュアルの下の方に表示できる、クリックで記事まで移動できるボタンです。

下向きの画像と「Scroll」の文字は標準の仕様で表示されます。こちらを変更する場合はちょっとした工夫が必要です。

SWELL のスクロールボタン変更方法

SWELL の SCROLL ボタンを変更する場合、functions.php に処理を横取りする（フックする）コードを記載します。

WordPress の管理画面から「外観」→「テーマファイルエディター」を選択し、「functions.php」に以下のコードを記載します。

// ----------------------------------------
function swl_parts__scroll_arrow( $args ) {
    $color = $args['color'] ?? '';
    ?>

        <div class="p-mainVisual__scroll" role="button" data-onclick="scrollToContent" style="color:<?=esc_attr( $color )?>">

            <!-- 画像ファイルを利用する場合はこちらを有効にする -->
            <img class="myScrollArrow" style="text-align=center" src="https://xxx/xxx/xxx.png" width="64" height="64">

			<!-- 文字列を変える場合は、ここの SCROLL 文字を変更する -->
            <span class="p-mainVisual__scrollLabel"><?=esc_html__( 'すくろーる', 'swell' )?></span>

        </div>
    <?php
}

画像は背景透過の png 画像や、アニメーション gif などを用いることで見栄えがよいスクロールボタンに仕上げることができます。

■ Scroll ボタンの差し替え例

ボタンイメージを風船アイコン（横128px、縦128px）に変更したサンプルです。

画像のURLは、メディアライブラリから取得することができます。

WordPress の管理画面から「メディア」→「ライブラリ」を選択し、表示したい画像の詳細から「ファイルのURL」を取得することができます。

■ 上下にフラフラさせる

今回の横取り手法では、SWELLの標準のスクロール画像が上下にフラフラする動きはキャンセルされますので、動かあした場合はCSSで自作します。

上下にフラフラさせる場合は、アニメーション gif で用意するのも一つの方法です。CSSで実施する場合は、以下のようにコードを追加します。

WordPress の管理画面から「外観」→「カスタマイズ」→「追加CSS」を選択し、以下のコードを追加します。

.myScrollArrow {
  animation: fluffy 3s infinite;
}

@keyframes fluffy {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

CSSを使って上下にフラフラ揺らしています。

■ 文字を脚色する

文字（Scroll文字列）のフォントを大きくしたり色を変えたりと、脚色することも可能です。

上サンプルでは、文字を大きくして見た目を変えています。

文字に対しては、「p-mainVisual__scrollLabel」名の SWELL の標準クラス名を残しているので、こちらに対してCSSを当てて脚色します。

WordPress の管理画面から「外観」→「カスタマイズ」→「追加CSS」を選択し、以下のコードを追加します。文字に対するCSSを追加していきます。サンプルで指定したCSSは下記です。

.p-mainVisual__scrollLabel {
	/* フォントサイズ */
	font-size : 24px !important;

	/* ボールド */
	font-weight : bold;

	/* 文字色 */
	color : #c0c0c0;
	
	/* フォント */
	font-family : 'メイリオ';
		
	/* 影をつける */
	text-shadow: 1px 1px 2px #ffffff;
	text-shadow: -1px 1px 2px #ffffff;
	text-shadow: 1px -1px 2px #ffffff;
	text-shadow: -1px -1px 2px #ffffff;
}

フォントサイズを変えたりボールド（太字）にするなど見た目を変えることが可能です。

まとめ：メインビジュアルのスクロールボタンを変える方法

SWELLテーマのメインビジュアルのスクロールボタンを変える場合は、functions.php に処理を横取りする（フックする）コードを記載します。

うまく利用して、より良いサイト、よりよいページを作ってくださいね。

おしゃれなサイトを作るコツを知りたい方は以下の記事を参照してください。

あわせて読みたい

【デモサイト・サンプルあり】SWELL でおしゃれなサイトを作る方法！ SWELL はデザインセンス抜群のテーマです。ひとつ手を加えることでさらに一段上のおしゃれデザインのサイトを作れます。本記事ではSWELLで作ったサンプルとおしゃれサイトを作るポイントを解説します。

SWELL を使ってオシャレなページを作る方法を特別に解説

＼サンプルを見るだけでも役に立つ／

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

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

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

質問・相談はこちら

質問・相談はこちら

質問・相談はこちら

一番上に戻る（Back to the initial position on click.）

トップページ（Home.）

PR

広告の設置・収入について

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

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

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

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

SWELL には「投稿リスト」という、記事一覧を表示する便利な機能があります。ただし、画面上からの設定では、記事を表示できる最大数が 24 までとなっています。

もっとたくさん表示したいときもありますね。

SWELL を使ってオシャレなページを作る方法を特別に解説

＼サンプルを見るだけでも役に立つ／

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

投稿リストの表示最大数の設定とは

SWELLの「投稿リスト」ブロックの設定では、「表示する記事数」の設定最大数は「24」になっています。

設定するバーは 24 より右にはいきません。24でも十分な数字ですが、特別にもっとたくさん表示したい場合もあります。

24 よりも大きく設定する方法

■ ショートコードを利用する

投稿リストは「ショートコード」で設置することができます。ショートコードであれば投稿記事数の上限を 24 を超えて設定可能です。

ショートコード（例）

[post_list post_type="page" count="300"]

この「count=”300″」が最大記事数です。300を変えることで 24 以上に設定できます。

ショートコードの詳細については、SWELL の公式ページにて紹介していますので、そちらを参照してください。

SWELL

投稿リストを簡単に呼び出せるショートコードの使い方 | WordPressテーマ SWELL このページでは、WordPressテーマ『SWELL』で投稿リストを簡単に呼び出せるショートコードの使い方を解説していきます。 カテゴリーやタグ・表示件数・レイアウトなどを指…

まとめ：24 よりも大きく設定する方法

SWELL の投稿リストで、最大記事数を 24 よりも大きく設定する場合は、ショートコードの利用になります。

ショートコードも便利ですが、見た目で想像できないので、できれば 24 以下で済むようなページデザインにしたいですね。

おしゃれなサイトを作るコツを知りたい方は以下の記事を参照してください。

あわせて読みたい

【デモサイト・サンプルあり】SWELL でおしゃれなサイトを作る方法！ SWELL はデザインセンス抜群のテーマです。ひとつ手を加えることでさらに一段上のおしゃれデザインのサイトを作れます。本記事ではSWELLで作ったサンプルとおしゃれサイトを作るポイントを解説します。

素敵なサイトを作ってくださいね！

SWELL を使ってオシャレなページを作る方法を特別に解説

＼サンプルを見るだけでも役に立つ／

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

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

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

質問・相談はこちら

質問・相談はこちら

質問・相談はこちら

一番上に戻る（Back to the initial position on click.）

トップページ（Home.）

PR

広告の設置・収入について

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

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

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

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

SWELLの素晴らしい機能の一つにピックアップバナー（ヘッダーカード）があります。

素敵な機能ですが、必ず「影」が付きます。影自体はオシャレですが消したいときもありますね。

本記事の情報は SWELL（バージョン: 2.7.6.2）にて確認しています。今後のバージョンアップなどで動作が変わる可能性があります。

SWELL を使ってオシャレなページを作る方法を特別に解説

＼サンプルを見るだけでも役に立つ／

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

ピックアップバナー（ヘッダーカード）の影とは

ピックアップバナー（ヘッダーカード）を使った場合、画像の周りにグレイの影が付きます。

とてもオシャレで良いのですが、必ずついてしまうので、不要な時にSWELL上の設定では消せません。

CSSを使って強制的に消すことが可能です。

ピックアップバナー（ヘッダーカード）の影の消し方

ピックアップバナー（ヘッダーカード）の影を CSS で無効にします。

WordPress の管理画面から「外観」→「カスタマイズ」→「追加CSS」を選択します。

• CSSを追加する

追加する CSS は以下です。（コピーして使ってください）

.c-bannerLink {
    box-shadow:none !important;
}

ポイントを解説します。

ピックアップバナー（ヘッダーカード）の影を消すことができました。

まとめ：ピックアップバナー（ヘッダーカード）の影（枠線）を消す方法

SWELL のピックアップバナー（ヘッダーカード）の影（枠線）を消す場合は、CSS でもともとの定義を無効化します。

いろいろな表現を工夫して、ぜひ、おしゃれなサイトを作ってくださいね。

SWELL を使ってオシャレなページを作る方法を特別に解説

＼サンプルを見るだけでも役に立つ／

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

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

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

質問・相談はこちら

質問・相談はこちら

質問・相談はこちら

一番上に戻る（Back to the initial position on click.）

トップページ（Home.）

PR

広告の設置・収入について

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

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

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

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

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

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

SWELL を使ってオシャレなページを作る方法を特別に解説

＼サンプルを見るだけでも役に立つ／

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

ピックアップバナー（ヘッダーカード）とは？

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

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

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

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

STEP

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

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

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

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

• カテゴリの詳細でアイキャッチ画像を設定する

STEP

【事前準備】メニューに説明を表示

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

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

• 「表示オプション」をクリックし「説明」をチェックする

STEP

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

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

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

• ピックアップバナーメニューを作成する
• メニューに項目を設定する

STEP

（アイキャッチではない）画像を表示したい場合

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

• 「説明」に画像のURLを指定する

ポイント

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

STEP

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

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

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

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

STEP

完成

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

まとめ：ピックアップバナー（ヘッダーカード）の配置方法

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

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

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

SWELL を使ってオシャレなページを作る方法を特別に解説

＼サンプルを見るだけでも役に立つ／

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

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

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

質問・相談はこちら

質問・相談はこちら

質問・相談はこちら

一番上に戻る（Back to the initial position on click.）

トップページ（Home.）

PR

広告の設置・収入について

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

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

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

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