ウェブサイトによくある「ホームに戻る」「ページ上部に戻る」ボタン、ページの右下などに常時表示させておくと、制作側のエゴかも知れないけど、簡単に移動できて訪問してくれた方の利便性が向上しますね。
でもこれ、大抵は自身の環境で最適化されているだけで、画面サイズによっては遠く離れた場所に表示されて意味をなさなかったりするんです。
良く使われているのが以下のようなスタイルコード。
.CSSクラス{
position:fixed;
bottom:15px;
right:15px;
}確かにこれで、位置が固定（fixed）になり、下から15px、右から15pxの位置に固定表示されます。
が、この位置の基準は画面の隅からということになるため、例えばよくアクセスされる一般的なノートPCの画面解像度である1366×768で最適化すると、デスクトップPCで一般的となった1920×1080(Full HD)ではコンテンツから結構遠く離れた場所に表示されてしまうんです。
自身でこのボタンを設置している方は「Responsive Viewer」などの拡張機能を使っていろいろな画面解像度での表示を確認してみるとわかります
これを解消して、ある程度の画面サイズでいい感じにコンテンツ右側ピッタリに表示しようと、本サイトで配布している「Hima Art Utility」の「ホーム・トップへ戻る」ボタンで調整してみたところ、ある程度の結論的なコードが書けましたので、参考として公開しておきます。
ある程度と書いたのは、アクセス解析すると実にたくさんの画面解像度があり、完全にうまくいくとは限らないという意味で、ひょっとしたらもっといい方法があるかも知れません
実際にアクセスのあった画面解像度
まずはどんな解像度のPCからアクセスされるのかを調べることからスタート。私の管理するいくつかのサイトでまとめるとこの辺りがメジャーっぽい感じでした。
| 解像度 | Windows | Mac |
|---|---|---|
| 1280 x 720 | 〇 | |
| 1366 x 768 | 〇 | |
| 1440 x 900 | 〇 | |
| 1512 x 982 | 〇 | |
| 1536 x 864 | 〇 | |
| 1600 x 900 | 〇 | |
| 1680 x 1050 | 〇 | |
| 1746 x 982 | 〇 | |
| 1792 x 1120 | 〇 | |
| 1920 x 1080 | 〇 | 〇 |
| 1920 x 1200 | 〇 | 〇 |
| 2048 x 1152 | 〇 | |
| 2560 x 1440 | 〇 |
とはいえ横幅だけでもいろいろなサイズがあるんですね。まずはこれらをすべて「Responsive Viewer」に登録して検証。
いい感じになったコード
まずは「Hima Art Utility」において現在で採用したのが以下のコード。
.side-button-wrapper.is_flow{
position: fixed;
bottom: 20px;
z-index:999;
}
@media screen and (max-width: 1365px) {
.side-button-wrapper.is_flow{
right: calc( (100vw - var(--wp--style--global--wide-size)) / 2);
}
}
@media only screen and (min-width: 1366px) and (max-width: 1439px) {
.side-button-wrapper.is_flow{
right: calc( (100vw - var(--wp--style--global--wide-size)) / 2 - 2.5rem);
}
}
@media only screen and (min-width: 1440px) {
.side-button-wrapper.is_flow{
right: calc( (100vw - var(--wp--style--global--wide-size)) / 2 - 4rem);
}
}ボタン外側の要素に追加したCSSクラスである「side-button-wrapper」に対して設定したものです。
いろいろやってみてブレイクポイントが1280px以下と1440px以上、そしてその間にあるようでしたので、まずは「position:fixed」で固定し、メディアクエリで調整、後は以下の流れで適用させました。
- 「right」で右からの位置を指定し、「calc」で計算させる
- 「(100vw – var(–wp–style–global–wide-size)) / 2」で画面幅からコンテンツ幅を引いた値を計算
- メディアクエリでそれぞれに合った横の調整値を指定
ブロックテーマでは「var(–wp–style–global–wide-size)」で、グローバルスタイルの「幅広」に指定した値、または「theme.json」の「wideSize」で指定した値を引っ張り出せるのでそのようにしていますが、クラシックテーマの場合には、「〇〇px」といった絶対値で指定すればいいでしょう。
ひとまずこれでコンテンツの右側にいい感じで張り付くボタンが設置できました。
イマイチだったコード
上のコードにたどり着く前、つまりはどんな解像度があってどこがブレークポイントなのかに訪ね当たる前に作成したのが以下のコード。
.side-button-wrapper.is_flow{
position: fixed;
bottom: 20px;
z-index:999;
left: calc( 50vw + var(--wp--style--global--wide-size) / 2 - 1rem + clamp(0rem, -2.466rem + 2.89vw, 1rem));
}「left」指定にして、画面の半分から右にコンテンツ幅の1/2移動、「clamp」を使って画面サイズに応じて段階的に微調整するというものです。
これでも一応何となくうまくいくのですが、幅「1280」と「1440」のところ（つまりはブレークポイント）付近の幅になるとコンテンツの右端とギリギリか、ちょっとかぶり気味な感じになってしまいました。
個人的にあまりメディアクエリは使いたくなかったのですが、しっくりきたので今回は前者のコードにしました。
やってみたよ～という方、こんな方法もあるよという方など、コメントで意見交換できたらなぁと感じる今日この頃です．．。
コメントを残す