LPや1カラム時に追従スクロールするコンテンツを表示したい

0
いいねをした人: 居ません
  • このトピックには10件の返信、3人の参加者があり、最後にshoneにより11時間、 37分前に更新されました。
11件の投稿を表示中 - 1 - 11件目 (全11件中)
  • 投稿者
    投稿
  • #92624
    shone
    参加者
    10

    【お使いの Snow Monkey のバージョン】
    【お使いの Snow Monkey Blocks のバージョン】
    【お使いの Snow Monkey Editor のバージョン】
    【お使いのブラウザ】
    【当該サイトのURL】

     

    いつもお世話になっております。

    タイトルの通り、固定ページで1カラムやランディングページを選択した際にスクロールしても追従してくるコンテンツを表示させたいです。

     

    表示させる内容は未定ですが、画像で作成したバナーだったりボタンだったり、たとえばメルマガへの登録や資料請求、問い合わせフォームへ誘導するCTAとして利用したいです。

    イメージとしては下記のトピックのボタンのようなもので、トップページ以外でも任意の場所に出せたらと思っています。

     

     

    1カラムじゃない場合は追従サイドバーのウィジェットエリアに表示させたいものを入れれば解決すると思いますが、1カラムやランディングページを選択した場合は当然追従サイドバーは表示されないので、専用のウィジェットエリアを作成するのか?何か使いやすいプラグインがあるか?と色々考えましたが、実装方法に悩んでいます。

    何か良い方法はありますでしょうか?

     

    またこちらは要望になってしまいますが、snow monkeyはブログ形式よりもコーポレートサイトやサービスサイトとして利用されるシーンも多いと思いますので、機能(ウィジェット?)として実装されたら嬉しいなと思いました。

     

    よろしくお願い致します。

    0
    いいねをした人: 居ません
    #92633
    キタジマ タカシ
    参加者
    1318

    どういうふうに表示させたいのかがわからないので、思われているものとは違うかもしれませんが、上記のトピックで共有されているコードの中にある if ( is_front_page() ) { //トップページのみ を消せば全ページにでるようになります。

    0
    いいねをした人: 居ません
    #92641
    GONSY
    参加者
    464

    こんにちは。
    shoneさんの質問されている“追従”ではなく、“固定”になりますが、比較的簡単にCTAを設置できるものがあります。

    1つめは、先日発売されたSnow Monkey専用ブロックパターンプラグイン「類人猿」(有料)。
    こちらにCTAを設置する機能があるようです。


    画像は設置イメージ

    2つめは、公式ディレクトリで公開されているプラグイン「LIQUID CONNECT」。
    こちらも同じような機能を持っています。

    いずれも日本の方がつくっているので、扱いやすいのではないかと思います。

    0
    いいねをした人: 居ません
    #92680
    shone
    参加者
    10

    >キタジマさん

     

    返信ありがとうございます。

    試しにコードをmy snow monkeyに記述し、デベロッパーツールでcssもそのまま拝借して追記してみたのですが、トピックと同じバナーは表示されませんでした。

     

    私に知識が無く理解が追い付いていないのですが、単純に要素を追従スクロールしたい場合にはCSSでposition: sticky;を利用して、指定したHTMLなどの要素を追従スクロールにできるものだと思っています。

    ただその場合、ブロックエディタなどであらかじめコンテンツを設置できる場所にしか指定できないため、今回はmy snow monkeyに追加したコードでエディタの縛りに関係なく、より自由度高く任意の場所に任意のコンテンツを表示、CSSでそれを装飾…といった具合になっているのかと思うのですが、ここまで合っていますでしょうか?

    そうなると、my snow monkeyに追加したコードとそれを装飾するCSSで完結するのかと思ったのですが実際に記述してみると表示されないので…何をどうすれば良いか見当もつかなくなってしまいました…

    何を、どこに指定すれば任意の場所に追従スクロールするコンテンツを表示させることができるでしょうか?

     

    >GONSYさん

     

    ありがとうございます!たしかにプラグインでも似たような挙動はできるので、共有いただいたものなど導入するのも手っ取り早いですね。

    プラグインのほうが使い勝手が良い場合そちらも検討してみます。

    0
    いいねをした人: 居ません
    #92756
    キタジマ タカシ
    参加者
    1318

    私に知識が無く理解が追い付いていないのですが、単純に要素を追従スクロールしたい場合にはCSSでposition: sticky;を利用して、指定したHTMLなどの要素を追従スクロールにできるものだと思っています。

    「追従」について僕と shone さんで思っているものが違うのかも?と思いました。先のトピックのものだと「初回体験」という丸バナーの部分のことだと思いますがあっていますでしょうか? その場合、これは position: fixed で実現されています。なので厳密に言うと「追従」ではなく「固定」になりますかね。position: sticky は「画面端まではスクロールするけど画面端までいったら固定される」というような挙動になります。

    <div class="sticky">
    	<span class="web_rsv">...</span>
    /div>

    .sticky の部分で固定表示が実現されています。

    何を、どこに指定すれば任意の場所に追従スクロールするコンテンツを表示させることができるでしょうか?

    この丸バナーと同じものを表示したいということであれば、先のトピックにあったコードを My Snow Monkey に追加して、あとはそれに対して CSS を適用することで同じ表示にはできます。「デベロッパーツールでcssもそのまま拝借して追記してみたのですが、トピックと同じバナーは表示されませんでした。」とのことですが、どのような CSS を追記されてなぜそれで実現できていないのかがわからないので、実際にやってみられたページを見せてもらえると原因がわかるかもしれません。

    0
    いいねをした人: 居ません
    #93245
    shone
    参加者
    10

    >キタジマさん

     

    返信いただきありがとうございます。

    私の解釈が間違いで、キタジマさんの仰るようにposition: fixedでバナー等を固定表示させたいです。

     

    この丸バナーと同じものを表示したいということであれば、先のトピックにあったコードを My Snow Monkey に追加して、あとはそれに対して CSS を適用することで同じ表示にはできます。

     

    ローカル環境でテストしているためサイト公開することができないのですが、先のトピックにあったコードをMy Snow Monkeyの最下部に追記して、CSSには同じくサンプルサイトを拝見し

     

    .sticky {
    display: block;
    position: fixed;
    z-index: 100;
    top: 29em;
    left: calc(97vw - 150px);
    padding: 0;
    width: 150px;
    height: 150px;
    text-align: center;
    border-radius: 100px;
    background: #6CC7CD !important;
    }

     

    と、丸々同じものを記述してみましたがどこにも丸いバナーは表示されませんでした。

    何か見当違いをしていますでしょうか。。。

    0
    いいねをした人: 居ません
    #93248
    shone
    参加者
    10

    何度も連投失礼致します。

    GONSYさんに紹介いただいた「LIQUID CONNECT」プラグインでの実装も検討してみたのですが、任意のウィジェットエリアに設置する形なので、結局のところそのままではLPや1カラムを選んだ際には表示できないようでした。

    わりと自由のきくプラグインのようなので、細かい機能実装はプラグインを利用して1カラム時(トップページ専用等?)のウィジェットエリアだけでも作成できたら解決できるのかなとも思ったのですが…

     

    ※こちらのトピックにあるプラグインに「フロントページ」項目があるのでトップページだけなら併用でもできそうでしょうか…?

     

    my snow monkey等でいちからカスタマイズするか、プラグインを使いつつウィジェットエリアをカスタマイズするか…何か良い解決策ありましたらアドバイスいただけると嬉しいです。。

    0
    いいねをした人: 居ません
    #93271
    キタジマ タカシ
    参加者
    1318

    どこにも丸いバナーは表示されませんでした

    どこにも表示されないということは、そもそも .sticky な要素の追加自体がされていない可能性はないですかね?

    add_action(
    	'snow_monkey_before_contents_inner',
    	function() {
    		?>
    		<div class="sticky">
    			<span class="web_rsv">
    				<a href="https://sample01.glasscoope.com/syokaitaiken/"><p class="font-size-large font-weight-bold">初回体験</p><p class="font-size-small">予約は<br>こちらから!</p></a>
    			</span>
    		</div>
    		<?php
    	}
    );

    を My Snow Monkey プラグインに追加すると、表示場所は置いておいて、「予約はこちらから!」という文字がページ上に追加されるはずです。まずそれは追加されていますか? ページ上を眺めても確認できない場合はブラウザから HTML ソースを開いてページ内検索をして存在を確認してみてください。

    もし目視でも HTML ソースにも存在しないということであれば追加に失敗しています。その場合は My Snow Monkey プラグインが有効化されていないというのが一番可能性が高いと思います。

    0
    いいねをした人: 居ません
    #93293
    shone
    参加者
    10

    >キタジマさん

     

    ご返信ありがとうございます。

    ソースを覗いて検索してみたところ、ご指摘の通りソースが出力されていませんでした。

     

    ちなみにMy Snow Monkeyプラグインは有効化されていて、WordPressのプラグインエディターからmy-snow-monkey.phpを確認してみても、php内には問題なくコード記述されているように見えます。

     

     

    コードを追加するときもこのWordPressのプラグインエディターから編集しているのですが、それがまずかったりしますでしょうか…?

    0
    いいねをした人: 居ません
    #93322
    キタジマ タカシ
    参加者
    1318
    if ( is_front_page() ) { // トップページのみ
    

    の上の行に1行コードを追加して、下記のようにしてみてもらえますか?

    var_dump( 'あいうえお' );
    if ( is_front_page() ) { // トップページのみ
    

    これで画面上(HTML ソース上)に「あいうえお」が表示されるようであればフック自体は正しく動いていて、条件分岐の問題になります。「あいうえお」が表示されないようであればプラグインの読み込みかフック自体が効いていないのどちらかになりますかね。

    コードを追加するときもこのWordPressのプラグインエディターから編集しているのですが、それがまずかったりしますでしょうか…?

    それ自体が今回の問題の原因となる可能性は無いと思いますが、プラグインエディターから編集するとシンタックスエラーになったときに編集中のコードが全部飛んでしまうことがありますしなにかあったときにもとに戻しにくくなるので個人的には推奨できません。テキストエディター等でで編集するのが良いと思います。

    0
    いいねをした人: 居ません
    #93657
    shone
    参加者
    10

    >キタジマさん

     

    お世話になっております。

    いただいたコードを追記後、デベロッパーツールでトップページ内のソースも検索してみたのですが、文字等表示されていないようです。。

    My Snow Monkey自体は有効になっているのですが、何か原因わかりそうでしょうか。。。

    0
    いいねをした人: 居ません
11件の投稿を表示中 - 1 - 11件目 (全11件中)
  • このトピックに返信するにはログインが必要です。

ドキュメント

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

ドキュメント

フォーラム

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

サポートフォーラム

よくあるご質問

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

よくあるご質問

お問い合わせ

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

お問い合わせ