商用サイト等でよく見かけるスマホで閲覧した場合に下の方にぴょんと表示される固定のバナーを作る方法です。さりげなく表示されるとカッコ良いですしクリック率もあがりますね。

固定オーバーラップのポップアップサンプル

実際のスマホで下に出る固定オーバーラップのポップアップバナーのサンプル（動画）です。下の動画を参照してください。

上記のサンプルでは、サイト（画面）を下方向に一定以上スクロールするとオーバーラップポップアップが表れます。また戻ると隠れます。工夫することで以下のようにアイコンを固定表示することもできます。

ポップアップの作り方

Step. 1 ブログパーツで表示部分を作る

ポップアップはサイト全体（サイト内のどのページでも）同じように出ることにしますのでブログパーツを利用して作ります。

Step. 2 JavaScript を設置する

スクロールすることで下から現れる演出は JavaScript で実装します。JavaScript のコードは共通の場所に記載すればよいのですが、今回はブログパーツの中に埋め込んで利用します。

埋め込むコードは以下です。

<script>
document.addEventListener('DOMContentLoaded', function() {
  const fixedSpBottom = document.querySelector('.mySpOverLap-fixed-bottom');
  window.addEventListener('scroll', function() {
    if (window.scrollY > 100) {
      if ( fixedSpBottom ) {
          fixedSpBottom.classList.add('mySpOverLapShow');
      }
    } else {
      if ( fixedSpBottom ) {
          fixedSpBottom.classList.remove('mySpOverLapShow');
      }
    }
  });
});
</script>

ポイントを解説します。

「mySpOverLapShow」は任意のクラス名です。

Step. 3 「公開」してショートコードを保持する

ブログパーツを公開して、ショートコードを保存します。

ポイント

ブログパーツを公開するときに、警告エラーが出る場合があります。

上記エラーが出た場合は、以下の記事で回避できますので参照してください。

どんどん！ブログノウハウ紹介ブロ…

【WordPress】「更新に失敗しました。 返答が正しい JSON レスポンスではありません。」は WAF の設定変更… WordPress で作業し、保存操作をした場合に「更新に失敗しました。 返答が正しい JSON レスポンスではありません。」と表示され保存に失敗するケースがあります。 多くの場…

公開したら、ショートコードをメモしておきます。

Step. 4 フッターウジェットに配置する

作ったブログパーツを全てのページで表示するために、フッターウジェットに埋め込みます。

WordPress の管理画面から「外観」→「カスタマイズ」→「ウィジェット」を選択します。

ブログパーツのショートコードを貼り付けることで、すべてのページの下部にブログパーツの内容が表示されます。

Step. 5 CSSを配置する

CSSを配置して、表示・非表示の切り替えや見た目を整えていきます。

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

埋め込むコードは以下です。

/* ***************************** */
/* オーバーラップ(スマホ) */

.mySpOverLap-fixed-bottom {
  border-top : 1px solid #c0c0c0;
  background-color: #DDEFF8 !important;
  position: fixed;
  bottom: -40px;
  left: 0px;
  width : 100%;
  transition: 0.8s ease;
  transform: translateY(100%);
  z-index: 10; /* 最上面に表示 */
  opacity : 0.8;
}

.mySpOverLapShow {
  transform: translateY(0px);
}

ポイントを解説します。

完成です。

まとめ：スマホで下に出る固定ポップアップ

商用サイト等でよく見かけるスマホで閲覧した場合に下の方にぴょんと表示される固定のバナーを作る方法です。さりげなく表示されるとカッコ良いですしクリック率もあがりますね。

動きのあるカッコイイサイトをどんどん作ってくださいね。

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

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

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

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

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

質問・相談はこちら

質問・相談はこちら

質問・相談はこちら

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

トップページ（Home.）

PR

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

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

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

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

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

WordPress の「カラム」ブロック、SWELLの「リッチカラム」ブロックは左右にカラムを分けられる便利なブロックです。ただし、中にコンテンツを配置した場合、左右の高さが揃わず若干見た目が悪くなります。

左右の高さが合わない例

上記サンプルでは、カラムブロックの中のコンテンツについてグループ化して背景色を設定していますが、普通に作ると左右の高さが異なって表示されてしまいます。

左右の高さを揃えたサンプル

左右の高さを揃えたサンプルです。多様なパターンでもそろえることが可能です。

グループの高さを揃えた例

キャプションボックスの高さを揃えた例

左右の高さを揃える方法

左右の高さを揃る方法です。多様なパターンでもそろえることが可能です。

グループで囲った部分で高さを揃える方法

サンプル

STEP

カラム内のブロックをグループ化する

左右のカラム両方とも同じ対応をします。

• カラム内のブロックを選択してグループ化する

• 必要に応じてグループに背景色をつける

• グループの「追加CSSクラス」に任意のクラス名（例：myColumn）を設定する

左右両方のカラムにて同じ設定（同じクラス名）を入れます。

STEP

CSSを設定する

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

• CSSを設定する

設定するCSSは下記です。

.myColumn{
  height : 100%;
}

• 「height」に 100% を設定して高さを揃えます

「追加CSS」はサイト内で共有になるので、記事内の他ブロックや、他記事で同じように高さを揃えたい場合は、対象のブロックにクラス名を設定するだけで反映されます。

キャプションボックスで高さを揃える方法

SWELLでは「キャプションボックス」ブロックという使い勝手の良いボックス表現のブロックがあります。カラムブロックや立地カラムブロックとの相性がよく使えます。こちらで高さを揃える方法です。

サンプル

STEP

キャプションボックスのクラス名をつける

左右のカラム両方とも同じ対応をします。

• キャプションボックスの「追加CSSクラス」に任意のクラス名（例：myColumnCaptionBox）を設定する

STEP

CSSを設定する

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

• CSSを設定する

設定するCSSは下記です。

.myColumnCaptionBox {
  height : 100%;
}

.myColumnCaptionBox .cap_box_content{
  height : 100%;
}

• キャプションボックス全体およびコンテンツ部分を 100% に設定します

「追加CSS」はサイト内で共有になるので、記事内の他ブロックや、他記事で同じように高さを揃えたい場合は、対象のブロックにクラス名を設定するだけで反映されます。

まとめ：カラムブロック・リッチカラムで左右の高さを揃える方法

WordPress の「カラム」ブロック、SWELLの「リッチカラム」ブロックは左右にカラムを分けられる便利なブロックです。ただし、中にコンテンツを配置した場合、左右の高さが揃わず若干見た目が悪くなります。

本記事では、カラム・リッチカラムブロックで高さを揃える方法を解説しました。

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

あわせて読みたい

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

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

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

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

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

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

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

質問・相談はこちら

質問・相談はこちら

質問・相談はこちら

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

トップページ（Home.）

PR

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

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

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

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

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

記事の中やトップページの一部分に、動画を背景にした表現をしたい場合があります。たとえば以下のような感じです。

動画を背景にしたサンプル

ここにコンテンツを表示する

動画を背景にしているので、上に表示しているテキストや画像の下で動画が動いています。

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

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

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

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

動画を背景にする方法

動画を背景にするためには、WordPress 標準の「カバー」ブロックを利用します。

背景とする動画を設定します。

必要に応じてコンテンツ（テキストや画像）などを設定します。画像は背景透過した png 画像にすると良いでしょう。

完成です。

ここにコンテンツを表示する

まとめ：動画を背景にして、埋め込む方法

記事やトップページ内に動画を背景に埋め込んでコンテンツなどを配置する方法を解説しました

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

あわせて読みたい

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

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

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

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

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

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

質問・相談はこちら

質問・相談はこちら

質問・相談はこちら

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

トップページ（Home.）

PR

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

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

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

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

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

SWELLを使っていると、グローバルナビ（ヘッダーメニュー）のフォントが少し小さいな！と感じることがあります。こちらを大きくする方法です。

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

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

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

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

SWELL のグローバルナビのフォントの大きさ

SWELLはデザイン性が高いとても素晴らしいテーマですが、メニューのフォントが小さいと感じることがあります。

メニュー例

メニューのフォントはCSSで強制的に指定して変えることが可能です、以下がフォントを大きくしたサンプルです。

フォント（およびドロップダウンした際のサブメニューのフォント）の大きさを調整しています。

SWELL のグローバルナビのフォントの変え方

グローバルナビ（通常）のフォントの変え方

SWELLのグローバルナビ（通常表示）のフォントの変え方です。

WordPress の管理画面から「外観」→「追加CSS」を選択します。

入力するCSSは下記です。

/* 通常のグローバルナビ */
#header #gnav .menu-item .ttl {
	/* フォントを大きく */
	font-size : 24px;
	
	/* フォント名 */
	font-family : 'Monotype Corsiva', cursive, sans-serif;;
}

#header #gnav .menu-item .desc {
	/* フォントを大きく */
	font-size : 24px;
	
	/* フォント名 */
	font-family : 'Monotype Corsiva', cursive, sans-serif;;
}

#header #gnav li:hover {
	/* マウスオーバーで色を変える */
  color : #833C0B;
}

追従ヘッダーのフォントの変え方

SWELLには「追従ヘッダー」という、スクロールしてもついてい来るヘッダーがあります。

追従ヘッダーのメニューのフォントも一緒に変えたほうがバランスが良いですね。

WordPress の管理画面から「外観」→「追加CSS」を選択します。

入力するCSSは下記です。

/* 追従ヘッダー */
#fix_header .c-gnav .menu-item .ttl {
	/* フォントを大きく */
	font-size : 24px !important;
	
	/* フォント名 */
	font-family : 'Monotype Corsiva', cursive, sans-serif;;
}

#fix_header .c-gnav .menu-item .desc {
	/* フォントを大きく */
	font-size : 16px !important;
	
	/* フォント名 */
	font-family : 'Monotype Corsiva', cursive, sans-serif;;
}

#fix_header .c-gnav li:hover {
	/* マウスオーバーで色を変える */
  color : #833C0B;
}

完成です。

まとめ：SWELL のグローバルナビのフォントの大きさ

SWELLテーマのグローバルナビのフォント変更の方法です。

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

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

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

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

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

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

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

質問・相談はこちら

質問・相談はこちら

質問・相談はこちら

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

トップページ（Home.）

PR

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

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

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

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

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

SWELLのサイドバーの横幅は決まっており、単純な設定だけでは変えることができません。しかし、サイトに合わせた横幅に変えたいケースは多々あります。

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

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

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

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

サイドバーの横幅

SWELLのサイドバーは、横幅約300px程度を基本としており、アフィリエイトの（300✕250）バナーなどがちょうどよく収まるサイズです。そのままでもすっきりしていますが、サイトによってあ若干幅広と思うこともあるかもしれませんね。

ここ数年流行っているデザインで、全体をフラットに魅せる大きさです。SWELLのセンスの良さが、ここでもよくわかりますね。

サイドバーの横幅を変更する

SWELLのサイドバーの横幅を変更する場合は、CSS を用いて強制的に変更します。

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

以下の CSS を追加します（基本的にはコピペで OK です）。

.-sidebar-on #sidebar {
	width: 100px !important;
}

@media (min-width: 960px) {
	.-sidebar-on .l-mainContent {
		width: calc(100% - 100px - var(--swl-sidebar_margin));
	}
}

サイドバーの幅を変えたい場合は、上記の CSS の 100 数字の部分を適宜変えてください（２か所同時に変えてください）。

まとめ：サイドバーの横幅を変更する

SWELL でサイドバーの横幅を変更する場合は、CSS で強制指定します。

サイドバーだけではなく、メインコンテンツの横幅も合わせて変更が必要です。

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

あわせて読みたい

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

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

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

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

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

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

質問・相談はこちら

質問・相談はこちら

質問・相談はこちら

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

トップページ（Home.）

PR

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

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

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

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

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

SWELLのフッターでは、フッターウィジェットが用意されておりフッターの上部（フッターメニューの上側）にコンテンツを配置することはできます。

しかし、フッターメニューとコピーライトの間に（ロゴなどを）表示するのはフッターウィジェットなどではできません。特別な方法（コツ）が必要です。

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

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

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

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

フッターメニューとコピーライトの間に表示

フッターメニューとコピーライトの間に表示したサンプルです。ペンギンのロゴ画像を表示してみました。（背景透過の png 画像を使っています）

ここ（フッターメニューとコピーライトの間）にはフッターウィジェットではコンテンツを表示することができません。特別な手法を用いる必要があります。

作成方法（フッターメニューとコピーライトの間に表示）

コンテンツを配置する

フッターメニューとコピーライトの間に表示する場合、コンテンツは通常の方法では配置できません。そのため、functions.php に処理を横取りする（フックする）コードを記載し、表示したいコンテンツを HTML 形式で記述します。

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

// ----------------------------------------
add_action('swell_after_copyright', function() {
	?>
<p class="my-footer-link" style="text-align:center">
	<a href="https://www.xxxxxxxxxxxxxxxx.co.jp">
		<img src="https://xxxxxxxxxxxxxxxx/LOGO.png">
	</a>
</p>
	<?php 
});

サンプルコードではロゴ画像をリンク付きで配置していますが、テキストのみでも、長文のコンテンツでも構いません。

「swell_after_copyright」は、コピーライトの後にコンテンツを配置するフックのため、このままでは、コピーライトの下に表示されます。次のCSSで上下を入れ替えます。

CSSで位置を入れ替える

「swell_after_copyright」でコンテンツを入れただけでは、コピーライトの下に表示されます。そのため、CSSを用いて上下の位置を入れ替えます。

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

最初は、作成したコンテンツがコピーライトの下に表示されています。次のコードを入力して上下を入れ替えます。

以下のコードを記載します。

.l-footer .l-container {
    display: flex;
    flex-direction: column;
}

.copyright {
    order: 2;
}

.my-footer-link {
    order: 1;
}

完成です。

まとめ：（フッターメニューとコピーライトの間に表示）

SWELLテーマのフッターメニューとコピーライトの間にコンテンツを表示する場合は、functions.php に処理を横取りする（フックする）コードを記載します。

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

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

あわせて読みたい

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

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

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

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

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

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

質問・相談はこちら

質問・相談はこちら

質問・相談はこちら

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

トップページ（Home.）

PR

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

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

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

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

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

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では、LP（ランディングページ）を作るための機能が提供されています。

ただし、SWELLのLP用機能は使い方が若干特殊です。コツがありますので、具体的にSWELLテーマでのLP機能の使い方（LPページの作り方）を解説します。

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

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

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

SWELL で作ったサンプル LP （デモ LP）

SWELL で作ったサンプル LP（デモ LP）、および、作り方（ note で公開中 ）です。

サンプル LP（麗しいデザイン）

デモサイト

麗しい桜をイメージしたコスメ商品をアピールする LP ページです。

実際のサイトはこちら

https://wpdemopresents.com/lpsample02/lp/lpsample002/

このデザインの作り方は note（こちら） で公開しています。

（有料記事：１９８０円）

お得な値段設定です。

作り方はこちら

サンプル LP（標準型サンプル「英会話教室」）

デモサイト

画面全体にアピール感を出している英会話教室 デモ LP

実際のサイトはこちら

https://wpdemopresents.com/lpsample/lp/lpsample001/

このデザインの作り方は note（こちら） で公開しています。

（有料記事：２９８０円）

お得な値段設定です。

作り方はこちら

SWELL の LPページ作成機能

SWELL で作る LP ページ

SWELLはLPページを作る特別な機能を持っています。WordPressの管理画面から「LP」メニューがありますのでここから作成します。

基本的には、「固定ページ」や「投稿記事」と同じ感覚でページを作ることができますが、若干特別な機能があります。LP として SWELL で作成する主な違いは以下です。

要するに、SWELLの標準設定によらずベタな単独のページを作ることができる機能です。

■ 「ヘッダー」と「フッター」をサイトのものを使わないことができる

SWELLで作ったサイトではおおむね「ヘッダー」と「フッター」が設定されていますが、LPページは単独のページなのでサイトのヘッダーやフッターを使わないで作りたいですね。

設定があります。

各々「SWELLのヘッダーを使用する」、「SWELLのフッターを使用する」のチェックを外すことで、独自でヘッダー・フッターを作成することができます。

■ タイトルを表示しない（ことができる）

LPページでは「ページのタイトルを表示しない」設定が可能です。

「タイトルの表示設定」を「非表示」にすることで、タイトルが非表示になります。

■ SWELLのスタイルを使わない（ことができる）

SWELL自体のスタイルを無効にすることができます。しかし、特別な事情が無い限り無効にした場合、自身でスタイルを定義していくのは難しいため、そのまま利用することをおすすめします。

「SWELLのスタイルを適用するか」を「適用する」「適用しない」で設定します。「適用する」をおすすめします。

■ LP として管理できる（URL に “lp” が付きます）

SWELLでは、「固定ページ」「投稿記事」「LP」を分けて管理することが可能です。

LPという独自メニューがありますのでこちらで管理されます。ただし、LPを作った場合、URLに必ず独自の単語が付きますので注意してください。

SWELL の LPページ作成方法

■ ヘッダーを作る

SWELLの標準ヘッダーを利用しない場合、LPページではヘッダーを自作しなくてはいけません。

ヘッダーの自作はいくつかの方法がありますが、SWELLで比較的簡単に作成できる方法を紹介します。

ヘッダーサンプル

ヘッダー部分は通常のコンテンツ幅よりも幅広（左右一杯）に配置したほうが見栄えがいいですね。左右一杯に表示するために、SWELLの「フルワイドブロック」を用います。

「フルワイド」ブロックを配置して、コンテンツの横幅を「フルワイド」に設定します。合わせて、上下の PADDING幅を20に設定すると比較的見栄えが良くなります。

左側にロゴ、右側に電話番号（やメールはこちらまど）を配置するにはカラムブロックを用います。

「カラム」ブロックを配置して、左右に画像やテキストなどヘッダーに配置したいオブジェクトを設定します。

左端に配置する画像は左寄せ、右端に配置する画像は右寄せを指定することで、ブラウザの横幅一杯にヘッダーが広がっているように表現できます。

■ メッセージバーを作る

LPページであれば、ヘッダーの下にメッセージバーを表示すると見栄えが良くなりますね。

メッセージバーサンプル

背景色はヘッダーと同じくコンテンツ幅よりも幅広（左右一杯）に配置したほうが見栄えがいいですね。ただしメッセージはコンテンツ幅に合わせたほうがすっきりします。左右一杯に表示するために、SWELLの「フルワイドブロック」を用います。

「フルワイド」ブロックを配置して、コンテンツの横幅を「記事」に設定します。合わせて、上下の PADDING幅を0に設定すると比較的見栄えが良くなります。「フルワイド」ブロックの中に文章を入力し、太字、文字色を白色に設定します。

■ コンテンツを配置する

実際にLPページ内のコンテンツを配置します。

コンテンツサンプル

作り方は通常の投稿記事や固定ページのコンテンツと同じです。画像なりテキストなりを配置します。

■ フッターを作る

SWELLの標準フッターを利用しない場合、LPページではヘッダーを自作しなくてはいけません。

フッターの自作はいくつかの方法がありますが、SWELLで比較的簡単に作成できる方法を紹介します。

フッターサンプル

フッター部分は通常のコンテンツ幅よりも幅広（左右一杯）に配置したほうが見栄えがいいですね。左右一杯に表示するために、SWELLの「フルワイドブロック」を用います。

「フルワイド」ブロックを配置して、コンテンツの横幅を「記事」に設定します。合わせて、上下の PADDING幅を0に設定すると比較的見栄えが良くなります。「フルワイド」ブロックの中に文章を入力し、太字、文字色を白色に設定します。文字は中央寄せにすると見栄えが良くなります。

■ 「トップへ戻る」ボタンを表示する

SWELLのLPページでは「トップへ戻る」ボタンが表示されませんので、必要に応じて強制的に表示します。

「トップへ戻る」ボタンサンプル

トップへ戻るボタンはHTMLで強制的にSWELLの標準ボタンを表示してあげることで、SWELLの設定に従って表示・動作します。具体的には「カスタムHTML」ブロックを用いて固定の HTML を表記します。

「カスタムHTML」ブロックを配置して、以下の固定の html 文を入力・保存します。

<!-- トップへ戻るボタンを強制的に出す -->
<div class="p-fixBtnWrap">
  <button id="pagetop" class="c-fixBtn c-plainBtn hov-bg-main" data-onclick="pageTop" aria-label="ページトップボタン" data-has-text="">
    <i class="c-fixBtn__icon icon-chevron-up" role="presentation"></i>
  </button>
</div>

完成です。

まとめ：SWELLで作る「LPページ」の作り方

SWELLではLPページを個別に作ることができる機能が提供されています。

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

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

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

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

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

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

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

質問・相談はこちら

質問・相談はこちら

質問・相談はこちら

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

トップページ（Home.）

PR

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

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

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

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

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

SWELLでは記事編集画面でブロック（またはグループ）に対して「PC（のみで）表示」、「スマホのみで表示」を指定することができます。

これを利用することで、レスポンシブ（PCならPCならではの、スマホならスマホならではの）デザインを実現できます。

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

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

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

PCとスマホで表示を分ける例

PCとスマホで表示を分ける場合、画面の大きさに合わせて表示を切り替えることができます。

たとえば、PCでは長い文字列を含めた大きめの画像を、スマホでは少ない文章での画像を表示すると、読者に対して親切な表現になりますね。

SWELLでは、以下のように分けて表示することが可能です。

上図のように、PCでは、「PC用の画像」を、スマホでは「スマホ用の画像（左右にカメさんが書かれている画像）」を表示することができ、アクセスしている人のデバイスによって自動で表示する画像を変えることができます。

PCでスマホで表示を変えるサンプル

こちらの画像は、PCとスマホで別々の画像を表示しています。お持ちのデバイス（PCやスマホ）で表示してみてください。

PCとスマホで表示を分ける方法

PCでのみ表示する方法

SWELLでは簡単に「PCでのみ表示する設定」をすることができます。

PCでのみ表示したい画像（テキスト文字やテーブルでも可能）を選択して、「デバイス制限」から「PC」を選択します。

スマホでのみ表示する方法

SWELLでは簡単に「PCでのみ表示する設定」をすることができます。

PCでのみ表示したい画像（テキスト文字やテーブルでも可能）を選択して、「デバイス制限」から「SP」を選択します。

まとめ

SWELLでは、「デバイス設定」からPC、SPを選ぶことで、PCのみ表示、スマホのみ表示を設定することができます。

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

あわせて読みたい

【デモサイト・サンプルあり】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 が提供するサービスを利用し、広告、適格販売により収入を得ています。

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