フォーラムへの返信
-
少しメンテナンス性は落ちますが、頻繁に画像などを変更することがなければ、Snow Monkey Editor の 表示設定（ウィンドウサイズ）には、ブロック単位でデバイスごとに表示・非表示を切り替える機能があります。
それを利用することを前提に、レイアウトや画像の異なるセクションブロック（PC用、タブレット用、スマホ用）を3つ設置して、各デバイスのみで表示するようにすれば、意図した感じに近づけることができそうです。
アイデアの1つとしてご参考にしていただければと思います。いいねをした人:
便乗になりますが、横から失礼します。
自分も、こんなブロックがあったらいいなぁと思いました。
ブロックのイメージとしては、段落ブロックだけでなく、複数の要素を包括したグループブロックに適用できるのが使い勝手が良い気がします。
↓編集画面イメージ
ブロックとして独立するなら、セクションブロックやコンテナブロックのようにあとから要素を追加しやすいようなブロックだといいかもしれませんね。
名称は単純ですが、「折りたたみブロック」（Foldable Block）なんていうのはどうでしょうか？いいねをした人:
自分がもし実装するとしたら、再利用ブロックを使ってフッターの作成、あとで編集しやすいように考えます。
前提として…
外観→カスタマイズ（カスタマイザー）→デザイン→フッターを以下のように設定します。- PC 時のフッターウィジェットエリアのカラム数：1
- タブレット時のフッターウィジェットエリアのカラム数：1
- □フッターを全幅にする にチェックを入れる
※フッターをコンテンツ幅にするなら不要
以下のいずれかのプラグインを有効化して『再利用ブロック』を左メニューに表示＆ショートコードを利用できるようにします。
再利用ブロック内でフッターのレイアウトを作成→保存します。
そしてショートコードをコピー。
ウィジェットメニューの「フッター」にショートコードブロックを置き、ショートコードをペーストします。
フッター内の上下のpaddingが不要ならCSSを追記.l-footer .l-footer-widget-area { padding: 0 !important; }
こんな流れで独自のフッターを設置できると思います。
参考サイトのフッターだと 再利用ブロック内でカラムブロック（全幅）を利用すれば近いイメージになると思います。カラムの調整はしていませんが、10分程度で以下のフッターができました。
よかったら1つの方法として参考にしてください。いいねをした人:
メンテナンス性が悪いうえに、強引な方法なので不具合出るかもしれませんが、以下で実装可能かと思います。
@media screen and ( max-width: 768px ) { /* 【カバー】ブロックの「高度な設定」で指定したクラス名 */ .fixed_bg { overflow: hidden; } /* Snow Monkey Blocksで指定した画像は使用しない */ .fixed_bg .has-parallax { display: none; } /* 都合が悪いのでブロック設定で設定したオーバーレイの数値を戻す */ .fixed_bg .wp-block-cover__background { opacity: 1 !important; } /* 新たにスマホ用にオーバーレイを指定 */ .fixed_bg .wp-block-cover__background::before { background-color: #CD162C; /*任意*/ content:""; display:block; position:fixed; top:0; left:0; z-index:0; opacity: .7; /*オーバーレイの不透明度*/ width:100%; height:100%; } /* 新たに背景画像を指定 */ .fixed_bg .wp-block-cover__background::after { content:""; display:block; position:fixed; top:0; left:0; z-index:-1; width:100%; height:100vh; background-repeat: no-repeat; /* 位置は任意で調整 */ background-position: 20% center; /* 画像はPC用と同じものを使用 */ background-image:url('https://demo.gonsy.net/wp-content/uploads/2022/12/david-maunsell-nVRxhLH74iw-unsplash.jpg'); /* 適宜調整 */ background-size: 1200px; } }
実装したページ1つのCSSですべてのカバーブロックに適用させることはできませんが、参考になれば幸いです。
いいねをした人:フローティングメニューを表示
完成イメージがわからないのですが、メニューということはナビゲーション機能ですか？
PCもスマートフォンにもフロートしたメニュー（ナビゲーション）を設置したいということでしょうか？ちょうどこのスノーモンキーのサイト下部に表示されている『試用を申し込む』ボタンのようなものです。
『試用申し込みのボタン』なら、このアドオンになります。
手間をかけずに設置したいなら妥当だと思います。ワードプレスの無料プラグインを片っ端から調べました。アイコンを入れられるものはあっても文字まで入れられるものが見当たりませんでした。
メニューではありませんが、過去にこのフォーラムでも紹介した下記のプラグインであれば文字や画像の挿入が可能です。
一からオリジナルで作成したいのですがコードをどこに記述すれば良いのかわかりません。
サイトで使用していないウィジェットエリアを使い、ブロックでレイアウト、（Classic WidgetならHTML）したあと、CSSで
position: fixedなどを当ててフロート化／装飾する方法もあると思います。またsnow monkeyの場合、挿入するフックがあるのかと思い
挿入する場所を可視化した素晴らしいサイトがありますので、ご参照ください。
フックは、My Snow Monkeyの利用を推奨します。
いずれも完成イメージを提示してもらえれば、より具体的なアイデアも出せると思います。
いいねをした人:
