全ページ(1カラム構成)にPC・スマホともに追従ボタンを表示させたい

0
Who liked: No user
6件の投稿を表示中 - 1 - 6件目 (全6件中)
  • 投稿者
    投稿
  • #106241
    かながわゆたか
    閲覧者
    2

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

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

    ### 実現したいこと

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

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

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

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

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

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

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

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

    0
    Who liked: No user
    #106244
    Olein_jp
    参加者
    565

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

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

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

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

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

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

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

    参考までにどうぞ。

    2
    Who liked:
    #106247
    かながわゆたか
    閲覧者
    2

    Olein_jpさま

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

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

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

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

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

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

    0
    Who liked: No user
    #106274
    まーちゅう
    参加者
    367

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

    1
    Who liked:
    #106277
    まーちゅう
    参加者
    367

    参考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
    Who liked:
    #106328
    かながわゆたか
    閲覧者
    2

    まーちゅう様

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

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

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

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

    0
    Who liked: No user
6件の投稿を表示中 - 1 - 6件目 (全6件中)
  • トピック「全ページ(1カラム構成)にPC・スマホともに追従ボタンを表示させたい」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。