【Cocoon】スマホ固定フッターにSNSシェアボタンを表示する方法

Cocoonカスタマイズ

WordPress用無料テーマCocoonでスマホ表示時にSNSシェアボタンをフッター固定する方法をご紹介します。

読んでる途中にいつでもシェアしやすくなるのでSNS流入の増加が見込めそうです。

スポンサーリンク

Cocoonでスマホ表示時にSNSシェアボタンをフッター固定する方法

まず設定を変えます

元々表示されているモバイルフッターを解除します。

Cocoon設定→モバイル→モバイルボタンレイアウトから、「ボタンを表示しない」にしましょう。

今回はモバイル表示時に投稿下部のSNSシェアボタンをフッターに移動させます。

なので、もし投稿下部にSNSシェアボタンを表示させていない方はCocoon設定画面内の「SNSシェア」タブから本文下シェアボタンの表示をONにしておきましょう。

この時、表示させるボタン数・カラム数が多いとレイアウトが崩れるので、最大4つ程度・4カラムまでにしておきましょう。

また、4つ表示時のロゴ・キャプション表示は上下がオススメです(左右にするとFacebookが長くなり、見切れるため)。

CSSをいじります。

下記コードを子テーマのstyle.cssに追加してください。


@media screen and (max-width: 480px){
  .sns-share-message{ display: none; }
  .ss-bottom{
    position: fixed;
    bottom: -7px;
    right: 60px;
    z-index: 99999;
    width: calc(100vw - 70px);
    height: 40px;
    transform: translatey(100px);
    animation: fadeIn 1s ease-out 4s 1 normal both;
  }
}
@keyframes fadeIn {
  from {transform: translatey(10%); opacity: 0;}
  100% {transform: translatey(0%); opacity: 1;}
}

これで、SNSシェアボタンがスマホ表示時のみフッター固定されるようになります。

また、ページが表示されてから4秒後に下からスライドインしてくるので、煩わしさも少なめです。

AMP表示時のCSS

AMPをONにしている場合は、子テーマのamp.cssに下記CSSを追加してください。

@keyframes fadeIn {
    from {transform: translatey(10%); opacity: 0;}
    100% {transform: translatey(0%); opacity: 1;}
}

.sns-share-message{ display: none; }

.ss-bottom{
    position: fixed;
    bottom: -7px;
    right: 60px;
    z-index: 99999;
    width: calc(100vw - 70px);
    height: 40px;
    transform: translatey(100px);
    animation: fadeIn 1s ease-out 4s 1 normal both;
}

いかがだっただろうか。

他のCocoonカスタマイズ方法は下記ページから!

【支援お待ちしております!】

当サイトが役に立ったと思ったら投げ銭サービスpolcaで支援していただけたら幸いです!(300円単位での投げ銭が可能です)

継続的な更新・サポートのためにご支援お願いいたします……!

▶支援先:サイトに掲載するCSSカスタマイズの支援をお待ちしています!

サイトに掲載するCSSカスタマイズの支援をお待ちしています! - polca(ポルカ)
"今後の記事執筆の励みになります!"を支援のおかえしとして受け取ることができます。

その他のカスタマイズは下記ボタンから。

コメント