[かながわゆたか]

【お使いの Snow Monkey のバージョン】17.0.5
【お使いの Snow Monkey Blocks のバージョン】16.0.1
【お使いの Snow Monkey Editor のバージョン】8.0.1
【お使いのブラウザ】FireFox
【当該サイトのURL】（参考サイト）https://www.nzu-risana.com/

お世話になります。
追従ボタンを設置したく思い、フォーラム過去記事を確認しましたが、該当するものが見つけられなかったので質問させてください。

### 実現したいこと

すべてのページを１カラムで構成しているサイトで追従ボタンを設置したいです。

【PCでは】
・スクリーン右端に追従ボタンを固定表示
・設置したいボタンは２つ

＊オマージュしたい参考サイトの例

【スマホでは】
・スクリーン下端に追従ボタンを固定表示
・設置したいボタンは２つ
・トップへ戻るボタンと重ならないように

＊オマージュしたい参考サイトの例

【その他】
・可能ならプラグイン利用で実現したい

### 発生している問題＆試したこと

・追尾サイドバーウィジェットは１カラムでは使えない
・プラグインをあれこれ調べたが少し違う感じ
Blog Floating Button
Q2W3 Fixed Widget　など
PHPなどほとんど素人なので、どうすれば良いか困っております。
お力添えいただけると大変ありがたいです。

♥ 0

いいねをした人: 居ません

[Olein_jp]

・プラグインをあれこれ調べたが少し違う感じ
Blog Floating Button
Q2W3 Fixed Widget　など
PHPなどほとんど素人なので、どうすれば良いか困っております。

ご存知の通り、１カラムレイアウトではサイドバーはないのでウィジェットエリアの追従サイドバーは利用できませんね。仮に利用できるレイアウトを採用したとしても、サイドバー部分になるので目指しているサイトのような表示にはなりにくいでしょう。

目指されているサイトを拝見すると、スマホでは下部、PC等では右端にボタンが追従する形になっているようですね。

プラグインで解決できるものが他にあるか僕はわかりませんが、僕自身が実装するとなるとPHPでフックで構造を差し込んで作る方が早いとなってしまいます。ですので、必然的にPHPを使わざるを得ない形になってしまいます。

参考までに流れを簡単にご紹介すると、

1. wp_footer などにフックで差し込みたいHTML構造を出力する
2. 各デバイス向けにCSSスタイリングする

となります。上記の流れはボタンを押したらアンカーリンクが動作するということを想定しています。ですので、クリックしたら何かしら動作をするようなことをしたい場合（右側から左に向けてアニメーションさせながら何かしら表示させるとか）には、加えてJSを書く必要があるかと思います。

参考までにどうぞ。

♥ 2

いいねをした人:

[かながわゆたか]

Olein_jpさま

詳しくご教示いただきありがとうございます！

＞必然的にPHPを使わざるを得ない形になってしまいます。

やはりそうなんですね。
ある程度覚悟はしていたのですが、学習に要する労力を考えて躊躇しておりました。

今回の課題が一歩進むための良い機会なのかもしれません。
PHP、JSともに勉強してみようと思います！

＞wp_footer などにフックで差し込みたいHTML構造を出力する
＞各デバイス向けにCSSスタイリングする

なんとなくイメージできるかな？というレベルですが、がんばってみます。
大変ありがとうございました！

♥ 0

いいねをした人: 居ません

[まーちゅう]

こんにちは。
CSSさえ書ければ、PHPは使わなくても大丈夫です。
スマホの方は、管理画面の「外観」>「メニュー」を開いて「位置を管理」のタブの一番下に「フッター固定ナビゲーション（モバイル用）」というのがあるので「新規メニューを使用」をクリックして、メニューを作成します。
このメニューは、名前の通りスマホ表示の時に画面の下端に固定表示されます。CSSで背景色を付けるなどしてやれば、参考サイトのようになります。
PCの方は、ウィジェットの「コンテンツの下」「ホームページ下部」を利用すれば1カラムでも表示されますので、ボタンブロックなどでコンテンツを作成して参考サイトと同様のスタイルをあててやれば、追従ボタンとして表示できます。

♥ 1

いいねをした人:

[まーちゅう]

参考CSS（サイトに合わせて書き換えてください・#block-idはデベロッパーツール等で確認してください）`

#block-id {
	position: fixed;
	top: 190px;
	right: -2px;
	z-index: 1;
}

#block-id .c-container {
	padding: 0;
}

#block-id .smb-buttons {
	flex-direction: column;
}

#block-id .smb-btn {
	writing-mode: vertical-rl;
	text-orientation: upright;
}

♥ 1

いいねをした人:

[かながわゆたか]

まーちゅう様

考え方と具体的な方法を教えていただいたおかげで、やりたいことが100％実現できてしまいました！

ほんとうに心から感謝いたします(^^)

CSSコードも教えていただき、遠回りせずに済みました。
というかコードを教えていただいてなかったら、実現できていたかどうか怪しかったです（苦笑）

たいへん貴重な勉強をさせていただき、ありがとうございました！

♥ 0

いいねをした人: 居ません

[投稿者]

投稿