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

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

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

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

ポップアップの作り方

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 が提供するサービスを利用し、広告、適格販売により収入を得ています。

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

SWELLの記事一覧はカード型のアイキャッチを並べて表示してくれる良いデザインですね。標準の場合、アイキャッチの上にマウスを運んだ場合、画像が青くなる演出があります。

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

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

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

記事一覧のサンプル

カテゴリーページなどでは、記事がカード型で一覧表示します。

各記事のアイキャッチ画像が並びます。

マウスポインターが画像に重なると、画像が若干大きくなり、全体的に青っぽくなります。

マウスホバー時の演出（配色）を変える方法

青くなる演出を別の色に変える方法です。

WordPress の管理画面から「外観」→「記事一覧リスト」を選択します。

■ 白系に変える（色がほのかに薄くなります）

グラデーション色に「白（#ffffff）」を設定すると色は変わりません。

■ 赤系に変える

グラデーション色に「赤（#f4b4d0）」を設定するとマウスホバーで赤色になります。

まとめ

SWELLでは記事一覧で画像にマウスホバーしたときに画像全体の色を青っぽくする演出があります。設定で色を変えることができます。

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

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

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

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

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

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

質問・相談はこちら

質問・相談はこちら

質問・相談はこちら

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

トップページ（Home.）

PR

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

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

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

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

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

SWELLのカテゴリーページやアーカイブなどに表示する記事一覧の表件数の初期値は 10 記事です。若干少ないですね。10記事よりも多くの記事がある場合、ページング（１，２，３……）表示となります。

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

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

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

記事一覧の表示数の変更方法

記事一覧の初期値

記事一覧の初期値は 10 です。ちょっと少なく感じます。

表示数１０の例

記事一覧の表示数の変更方法

記事一覧の表示数は一か所設定を変更するだけです。

WordPress の管理画面から「設定」→「表示設定」を選択します。

• 「1ページに表示する最大投稿数」の数値を変更する

完了です。

記事一覧の適切な数値

記事一覧の表示数の正解（適切な数値）の決まりはありません。サイトの雰囲気や情報量の過多、表示形式（カード型、リスト型）などで一番見やすい数字にするのが良いでしょう。

ただし、あまりにも１ページに表示する量が多くなると読み込み速度が低下します。そのため、一般的には 10～30程度（おすすめは 20）が良いですね。

適切な数値を設定して素敵なサイトを作ってくださいね。

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

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

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

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

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

質問・相談はこちら

質問・相談はこちら

質問・相談はこちら

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

トップページ（Home.）

PR

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

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

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

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

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

ブログのトップページの URL をツイッターなどで張り付けた場合に表示されるサイト全体のアイキャッチ画像の設定方法です。

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

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

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

サイト全体のアイキャッチ画像の設定方法

SWELLの固定記事や投稿記事では記事編集画面右側にアイキャッチ画像設定箇所がありますが、SWELL全体（ブログのトップページの URL）を対象にした場合は、「SEO SIMPLE PACK」プラグインを用いて設定します。

WordPress の管理画面から「プラグイン」を選択し、「SEO SIMPLE PACK」プラグインをインストール（有効化）します。

WordPress の管理画面から「SEO PACK」→「OGP設定」を選択します。

• “og:image”の画像 でサイトのアイキャッチ画像を設定する

トップページを固定記事にしている場合

トップページを固定記事にしている場合は、上述の「SEO SIMPLE PACK」の利用に合わせて、固定記事でもアイキャッチ画像を設定しておいたほうが安全です。（どちらも実施します）

トップページに設定している固定ページの右側で「アイキャッチ画像」を指定します。

まとめ：サイト全体のアイキャッチ画像の設定方法

WordPress のテーマ「SWELL」を利用している場合の、サイト全体のアイキャッチ画像の設定方法です。

• SEO SIMPLE PACK の機能を用いて設定する
• トップページを固定記事にしている場合は、固定記事でも設定する

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

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

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

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

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

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

質問・相談はこちら

質問・相談はこちら

質問・相談はこちら

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

トップページ（Home.）

PR

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

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

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

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

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

SWELL では、インストール後の初期状態ではリンクにアンダーラインが引かれません。

一般的な HTML（WEBページ）のリンクはアンダーラインが引かれており読者が「リンク」と認識しやすいポイントとなっています。SWELL を使っていてもリンクにはアンダーラインを引きたいと思う方もいますね。

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

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

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

SWELL でリンクにアンダーラインを引く方法

WordPress の管理画面から「外観」→「カスタマイズ」→「投稿・固定ページ」→「コンテンツのデザイン」を選択します。

アンダーラインの有無イメージ

アンダーラインが無い場合のイメージです。

アンダーラインがある場合のイメージです。

本サイトでは、リンクにアンダーラインを付ける設定を採用しています。

リンクにアンダーラインが無い場合は、以下のようになります。（強制的にアンダーラインを消しています）

サイトのデザインに合わせて、より良い方を採用してください。

まとめ：SWELL のリンクのアンダーラインの付け方

SWELL は初期状態ではリンクにアンダーラインが付きません。

アンダーラインを付ける場合は、設定の「テキストリンクにアンダーラインを付ける」をチェックします。

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

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

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

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

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

質問・相談はこちら

質問・相談はこちら

質問・相談はこちら

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

トップページ（Home.）

PR

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

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

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

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

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