固定メニューとブログパーツの使い分け
メニュー項目をスマホの下部へ固定するだけなら、SWELL標準の固定フッターメニューから検討します。ブログパーツでボタンや文章を自由に組みたい場合は、この記事のCSSによる方法が選択肢になります。
この記事のCSS例には閉じるボタンがなく、本文末尾の余白も固定値です。表示内容の高さが変わる場合や閉じる操作が必要な場合は、高さを計測する閉じるボタン付き固定バナーを選んでください。同じ場所へ複数の方式を重ねて配置しないでください。
CSSは「外観 → カスタマイズ → 追加CSS」へ追加できます。style.cssを使う場合は子テーマ側を編集し、親テーマを直接変更しないでください。既存CSSとウィジェットの配置は変更前に控えます。
SWELLにはスマホ用の固定フッターメニューというものがあり、メニューと紐づいているのですが、
ブログパーツと紐づいている固定フッターメニューがほしくはないでしょうか？
ブログパーツの場合はデザインの自由度が上がります。
またフッターだけでなく、サイドバーにも固定追従バナーを配置したいこともあると思います。
本記事では自作でスマホ画面下とサイドバーに固定追従バナーを設置する方法を紹介します。
サンプル
SWELLでスマホ画面下に固定追従バナーを設置する方法
やり方は簡単です、CSSだけで完結します。
ブログパーツの作成
ブログパーツでスマホ画面下に設置したいパーツを作成します。
今回はリッチカラムとSWELLボタンを組み合わせました。
最後にリッチカラムのところにID（HTMLアンカー）fixed-bottom-menuを追加してあげます。
最後にブログパーツのIDをメモしましょう。
例：[blog_parts id="249"]
CSSの挿入
追加CSSはまたStyle.cssあたりにcssを挿入します。
細かい見た目はデザインに合わせて調整しましょう。
@media screen and (max-width: 959px) {
body {
padding-bottom: 60px; /* 実際のバナー高さに合わせて変更。60pxは例 */
}
.p-fixBtnWrap {
bottom: 5.5em; /* 上に戻るボタンの位置を上に */
}
#fixed-bottom-menu {
display: block;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
z-index: 99;
background-color: #000;
padding: .3em .3em;
}
#fixed-bottom-menu .swell-block-column {
padding: .5em;
}
#fixed-bottom-menu .swell-block-button__link[data-has-icon] {
padding: 1em 1em;
}
}
@media screen and (min-width: 960px) {
#fixed-bottom-menu {
display: none; /* PCでは非表示にする */
}
}ウィジェットにショートコードを挿入
最後に先ほど控えたブログパーツのショートコードをウィジェットのフッター直前に挿入します。
<!-- スマホ画面下に使われるショートコード -->
[blog_parts id="249"]※ID番号部分は変えてください。
スマホ表示で確認
最後にスマホ表示で確認しましょう。
ブログパーツがフッター下に固定追従で表示されました！
以上です。
SWELLでサイドに固定追従バナーを設置する方法
こちらもやり方は簡単です、CSSだけで完結します。
ブログパーツの作成
ブログパーツでスマホ画面下に設置したいパーツを作成します。
今回はテキストを入れました。リンクも忘れずに入れましょう。
最後にテキストのところにID（HTMLアンカー）fixed-sidebar-menuを追加してあげます。
最後にブログパーツのIDをメモしましょう。
例：[blog_parts id="251"]
CSSの挿入
追加CSSはまたStyle.cssあたりにcssを挿入します。
細かい見た目はデザインに合わせて調整しましょう。
#fixed-sidebar-menu {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
position: fixed;
right: 0;
top: 50%;
transform: translateY(-50%);
z-index: 99;
background-color: #000;
color: #fff;
padding: 1em .5em;
border-radius: 10px 0 0 10px;
writing-mode: vertical-rl; /* 縦書きモード */
text-align: center;
}
#fixed-sidebar-menu .swl-inline-icon {
width: 15px;
height: 24px;
margin-bottom: 2px;
}
#fixed-sidebar-menu a {
color: #fff;
}ウィジェットにショートコードを挿入
最後に先ほど控えたブログパーツのショートコードをウィジェットのフッター直前に挿入します。
<!-- サイド部分に使われるショートコード -->
[blog_parts id="251"]※ID番号部分は変えてください。
スマホ表示で確認
最後に表示を確認しましょう。
ブログパーツがサイドに固定追従で表示されました！
以上です。
ほかのカスタマイズはSWELLカスタマイズまとめ｜目的別の一覧からご覧いただけます。
表示範囲・重なり・元に戻す方法
画面下の例は959px以下で表示し、960px以上では非表示にします。サイドの例は画面幅の条件を付けていないため、両方の幅で表示されます。必要な方だけを追加し、サイドの表示をPCだけにする場合は、そのCSSを960px以上のメディアクエリ内へまとめてください。
画面下の例では、表示するバナーが60pxより高ければ、bodyの下余白も実際の高さへ合わせます。複数行の文章・端末の横向き表示・文字サイズ変更で高さが変わる場合は、固定値による調整だけでは足りません。ページ末尾のリンクまで操作できるか、ほかの固定ボタンや広告と重ならないか確認してください。
ブログパーツのHTMLアンカーは同じページで重複させず、ショートコードも同じ表示場所へ一度だけ挿入します。ウィジェットへ入れると、そのウィジェットが表示されるほかのページにも出るため、導入予定のページ以外でも確認してください。
元に戻すときは、追加したウィジェット内のショートコードと今回のCSSを取り外します。bodyの下余白やページ上部へ戻るボタンの位置指定も戻し、ブログパーツ自体は再利用する場合に残せます。
