[shone]

＞キタジマさん

 

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

それならば、スライダーを2個入れておいて、Snow Monkey Editor のウィンドウサイズによるブロックの表示・非表示機能で適宜表示状態を設定したほうが簡単な気はします。

こちらの初期コンテンツ作成時であればそのほうがシンプルにやりやすく、私も本来であればそうしたかったのですが…今後知識のあまりないクライアント側が更新作業をすることを考えると同じスライダーを「PC用」「スマホ用」で設置すると混乱したり設定忘れが起こりそうでして…なるべくクライアント側の作業は一工程でも減らしいため、裏側の処理や項目の工夫で四苦八苦しているところでした。。。

 

一応グリッドでブロックで試してみたので記録として残しておきます。

 

こちらサンプルコードありがとうございます！おかげさまで何となくの理解が進みました。

ただ、いただいたコードをカスタムHTMLに貼り付け表示を見つつ、自分で設定したブロックをHTMLに変換して見比べてやってみようかと思ったのですが…『グリッド』ブロックはHTMLに変換できないのでしょうか？うまく中身を見ることができませんでした…

 

なんとか読み取ろうとした感じですが、

・『グリッド』ブロックを用意

・『グリッド』ブロックにcssクラス「hogehoge」を付与

・ブロック設定のGRID-TEMPLATE-COLUMNSは『カラム数』で「2」に設定

・GRID-TEMPLATE-ROWSは『自由入力』で「auto 1fr」に設定

・『グリッド』内には「画像（要素1）」「見出し（要素2）」「段落とボタン（要素3／グループ化）」の3要素

・上記3要素をcssでモバイル時（メディアクエリ）で順序変更

 

のような流れであっていますでしょうか？

この仮定で、同じように自分で

 

・要素１：「スライダー」

・要素２：「見出し」「段落（サブテキスト）」の「グループ」化

・要素３：「ボックス」「表」「ボタン」などのグループ化

 

を用意し配置しようと思ったのですが、うまくいきませんでした。

またそもそも『グリッド』ブロック及びグリッドレイアウトの理解があまり進んでいなく、普通に3つの要素を用意してエディタ内で配置しようとすると、カラム数を2にしているために左、右、左（2列目）…といった順で要素が並んでしまい、最初の要素のみ左に配置し、それ以外を右側に配置するといPC表示時の見た目を作ることもできませんでした。

※繰り返しで恐縮ですが、PC時は左にスライダー、それ以外の要素は右にしたいのですがそれすらできなかったです…

 

モバイル時の順序を入れ替える以前に、まずどうやってエディタ上で、『グリッド』ブロックを使い上記のようなPCレイアウトを作るのか？でつまづいてしまいました。。。

 

ご面倒をおかけし大変恐縮ではございますが、

・どこまでブロックエディタ上で設定し、どこからHTML編集（HTMLに変換など必要？）がいるのか、

など手順のアドバイスをいただけますと幸いです…。

 

何卒よろしくお願いいたします。

♥ 0

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

[shone]

＞キタジマさん

 

アドバイスいただきありがとうございます！

いただいたコードを試して無事に希望の見た目に調整することができました！本当にありがとうございます！

解決しましたのでトピック閉じさせていただきます。

♥ 1

いいねをした人:

[shone]

＞キタジマさん

 

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

またアドバイスいただきありがとうございます。

 

これが「特定のカスタム投稿タイプの記事上に埋め込まれたブログカードのみ」（「特定のカスタム投稿タイプの記事のブログカード」ではない）ということであれば、.single-{投稿タイプの名前} .is-provider-wp-oembed-blog-card をセレクタにして CSS でアイキャッチ画像以外を消せばいけるかもしれません。

 

上記で教えていただいたコードをもとに、productsというスラッグのカスタム投稿タイプ上で表示されるブログカードをカスタマイズするために、

 

.single-{products} .is-provider-wp-oembed-blog-card .wp-oembed-blog-card__body{
display: none;
}

 

のような感じで書いたのですが、どうやら投稿タイプの指定が効いていないのか？（外観＞カスタマイズ＞追加cssで記入したところ、スラッグ名のところが赤字になってしまいました）、全ての投稿上でブログカードのbodyが消えてしまいました。

何か解釈や書き方が間違っているでしょうか？？

 

また、同じブログカードで画像を正方形にしたかったので画像サイズを弄ってみたりしたのですがイマイチうまくいきません。

.wp-oembed-blog-card__figure img{
object-fit: contain;
}

では画像はトリミングされませんが余白が生まれてしまいますので…どのようにサイズ調整すれば良いでしょうか？

 

またブログカードの角丸を解除したく、

.wp-block-embed__wrapperや.wp-block-embed .is-type-rich .is-provider-wp-oembed-blog-card .wp-block-embed-wp-oembed-blog-card、.wp-block-embed

などわかるかぎりでborder-radius: 0を記入してみましたがうまくいきませんでした。。。

 

長くなってしまいましたが、

・特定のカスタム投稿タイプ上で（今回はスラッグ名「products」）
・ブログカードをサムネイル画像のみに
・サムネイルは正方形、余白や角丸、シャドウなどブログカードの効果もなしに

するために、アドバイスをいただけますと幸いです。

何卒よろしくお願いいたします。

♥ 0

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

[shone]

＞GONSYさん

 

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

またカスタムフィールドを使用したアドバイスありがとうございます！

 

カスタム投稿タイプを使用することが前提であれば、私の場合は、カスタムフィールド ＋ 独自のテンプレートを用意するか、該当のカスタム投稿タイプのみカスタムフィールドを表示できるようにフックで挿入します。

 

ただ、まさに今現在がカスタムフィールドで構築された投稿をフルリニューアルしているところでして、現行の投稿がカスタムフィールドを多用しすぎて動作が重くなりがちなこと（＋将来に渡って今後も商品が増えることを考えると今より重くなることはあっても軽くなることは基本的に無いこと）と、カスタムフィールドを使用しすぎて一覧性がかえって悪くなり、入力フォームを制限できること以外のメリットが薄い（デメリットのほうが目立ってきた）という事情がありまして…

 

それならいっそブロックエディタで構築したものをテンプレート化してパターンに登録・いつでも呼び出せるようにしたほうが、見た目ほぼそのままに編集できるので項目ごとの関係や意図を理解しやすく、今まで編集をしたことがない人間でも一度覚えてしまえば編集しやすいかなと思い今回はブロックエディタを再投資ております。

ですので、更新性は担保しつつ極力入力の手間や思考を省いた形式にはおおむねできているのですが、関連商品（関連記事）の設定時をいかにシンプルにするか？が目下の課題と言うことで、URLを直接貼り付けるだけのブログカード（「埋め込み」）形式が楽なのかなと考えた次第です。

そのため、ブログカードの見た目を整えたいというのが要望でした…！

♥ 0

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

[shone]

snow monkeyバージョン等の情報を書き忘れてしまいました、大変失礼しました。

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

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

♥ 0

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

[shone]

＞キタジマさん

 

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

またコードのアドバイスありがとうござます。

 

特に動的に何かをしているようには見えなかったので、動的に項目の増減等が不要なのであればフォームの作成画面で設定してしまうのが簡単だと思います。

 

なるほど、アップデート情報のサンプルコードを元に選択肢を上書きした感じだったのですが、これ自体は必須ではなくフォームのほうでラジオボタンを設定するだけで問題ない感じなんですね。

 

入力画面については、頂いたコードをベースに↑の修正を入れて調整すれば実現できるそうでしたが、そこから管理画面にいって入力画面に戻ったり、バリデーションエラーがあってエラー画面になったりしたときにも選択肢に応じて正しく画像を表示させるのが、どうやったら良いのだろう…という感じでした。

 

やはり簡単にはいかなそうですね…

キタジマさんで良い方法が思いつかないのであれば到底今の私には実現できないと思いますので…ちょっと今々の実装は一旦諦めることとします。。。

選択肢に応じて画像を出さなくても、注釈的にポップアップを添えておくくらいでも同じ目的は果たせそうですので、代替手段で対応してみます。

 

お忙しい中アドバイスいただきありがとうございました！

♥ 0

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

[shone]

＞キタジマさん

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

僕も特にそういうのをつくった経験はないので、試したコードがあるのであればそれを共有してください！（それをもとにやったほうが簡単かなと思うので）

こちらかしこまりました。

ただ私自身がJavaScriptやjQueryの知識に乏しくほとんど何もわからない素人なので、色々検索しつつChatGPTと問答しながら試してみたという状況なのですが…ChatGPTも最初にsnow monkey formsのコードを読み込ませてそれを前提にしているはずが途中でコードを無視したりと、結局うまくいかずじまいでした。。。

ですので参考になるかはわかりませんが、一応、最終的に提示されたコードを共有させていただきます。

・snow monkey formsのコード

add_filter(
	'snow_monkey_forms/checkboxes/options',
	function( $options, $name, $setting ) {
		if ( 'checkboxes-xxxxx' === $name ) {
			return array(
				'option-1' => 'あいうえお',
				'option-2' => 'かきくけこ',
				'option-3' => 'さしすせそ',
			);
		}
		return $options;
	},
	10,
	3
);

・JavaScript

jQuery(document).ready(function($) {
	// チェックボックスの選択状態が変わるたびに実行
	$('[name="checkboxes-xxxxx[]"]').change(function() {
		// すべての関連画像を非表示にする
		$('.image-for-checkbox').hide();

		// 選択されているチェックボックスに応じて画像を表示
		$('[name="checkboxes-xxxxx[]"]:checked').each(function() {
			var selectedValue = $(this).val();
			// 対応する画像のIDに基づいて画像を表示（例: #image-for-option-1）
			$('#image-for-' + selectedValue).show();
		});
	});
});

・画像表示（HTML）

<img id="image-for-option-1" src="画像のURL" style="display:none;" alt="説明">

・画像表示（PHP）

 

<img id="image-for-option-1" src="<?php echo get_template_directory_uri(); ?>/path/to/image.jpg" style="display:none;" alt="説明">

以上になります。
お手数ですがお手すきの際にご確認いただけますと幸いです。

♥ 0

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

[shone]

＞キタジマさん

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

まさにそんな感じです！

たとえば資料請求やサンプル請求のフォームで、A、B、C、Dといった4つの選択肢があって、選択するとそれぞれのイメージが表示されるようにしたい（他のイメージは非選択時は隠しておきたい）といった感じです。

自分なりに調べてもみたのですが、jQueryと連携させてチェック時の条件分岐をする（？）といった方法でできる？ようなところまでは行き着いたのですが、実際に試してみても全くうまくいかず、完全にお手上げ状態でした。。。

アドバイスいただけると大変有難いです…！

何卒よろしくお願いいたします。

♥ 0

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

[shone]

＞キタジマさん

 

ありがとうございます！

今再度確認してみたところ、なぜか自分でCSSに追記しなくてもunderlineが正常に表示されているようでした…？？

 

ただ元々PC時には解除ボタンはファイルをアップしない状態でも表示されていて、今はファイルを一度アップしないと解除ボタンが表示されず、また表示位置もさきほどまではボタンのすぐ近くにあったのが今は右端に寄っているようで…？？

特にプラグイン等更新したわけでもないので何か変更が入ったとも考えにくいのですが、とりあえず原因不明ですがこちら解決しました、ありがとうございました…！

 

こちらのトピックは、とりあえず暫定的にCSSでの対処法を教えていただきましたが正式にアップデートいただくまで閉じないほうがよろしいでしょうか？

♥ 0

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

[shone]

＞キタジマさん

 

早速のご返信ありがとうございます！

いただいたCSSでひとまず折り返しが入ること確認できました、ありがとうございます。

アップデートでもご対応いただけるとのことで、正式リリースお待ちしております。

 

※ボタンの真下ではなくやや右に配置されているのはこういうものでしょうか？

 

これはこちらの環境では下線が表示されているっぽいです。もし独自に CSS を追加されているのであれば、その影響がないか確認してみてください。

 

こちらもご確認ありがとうございます！
私もCSS関連かなと思い見てみたのですが該当するような記述は見当たらず、試しに追加CSSに記述しているものを全て削除してプレーンな状態にしてみたのですが、変わらず下線は表示されずでした…

 

とりあえずsmf-file-control__clearにtext-decoration: underlineで下線表示させましたが、根本解決していないのでどこか別のところでも影響出ていないかな～と思っています…
何か導入しているプラグインでCSS当たっていて、その影響とかも考えられるでしょうか。

♥ 0

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

[shone]

＞キタジマさん

 

ご回答ありがとうございます！

返信遅くなりまして申し訳ございません。

 

んー PHP 自体ではできないと思うので、PHP で style タグを突っ込むみたいなことですかね？

 

『メディアクエリ』という書き方が悪かったかもしれません、自分でPHPでの内容出し分けの方法を検索したときにそういった表現が出てきたのでそのまま描いたのですが、実際にはメディアクエリというか、PHPでの条件分岐の書き方の情報だったのかなと思いました。

PHPでメディアクエリ｜スマホ・タブレット・PCの切り分け

CSSやjQueryでは、よくやるメディアクエリの指定。 PHPでも同じことができる！ PHPでメディアクエリする時、いい点はブラウザでソースを表示した時、他のコードがソースに…

hajimete.org

スマホ・タブレット・PCをPHPで条件分岐する方法

スマホ・タブレット・PC(ユーザーエージェント)によって条件分岐する方法のメモ。読み込むCSSやJSなどの外部ファイルをユーザーの端末ごとに切り替えることで別々のレイア…

bambooworks.co

 

いずれにせよ、PHPでデバイス毎出し分けするよりCSSで出し分けたほうが良いとのことで、アドバイスいただいたようにクラスを付与してCSSで出し分けできました！

またアニメーションも、追加でCSSでやろうと思うとうまくいかなかったのですが、『Blocks Animation: CSS Animations for Gutenberg Blocks』プラグインを別で入れているので、こちらを使い別ページのブロック内で仮にアニメーションを付与したバナー画像を作り、ブロックをHTML化することでCSSへの追加記述無く簡単なアニメーションまで実装できました。

同プラグインのアニメーション設定はけっこう細かいので、これだけで色々と動きは付けられそうです。

 

色々試行錯誤しましたが、結果的に想定通りの実装ができかつ今後にも応用が効きそうな内容になりました。

この度はアドバイスありがとうございました！

♥ 0

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

[shone]

＞キタジマさん

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

「PCやタブレットなど」は CSS でメディアクエリを使って出し分けるのが無難です。

アドバイスありがとうございます！

phpでもメディアクエリが使えると聞いていたので（自身でやったことはないのですが）今回の場合はphp内で分岐したほうが良いのかな？と思ったのですが別にcssでも問題ないのですね。

「トップページや特定のページのみ」については、WordPress の条件分岐タグを使えば良いです。下記は公式ドキュメント（英語）のページですが、ぐぐったらいろいろでてくるかなと思います！

ありがとうございます！分岐条件の書き方がいまいち自信なかったのですが、なんとなく理解できました。

丁寧にアドバイスいただきありがとうございます。

またわからないことが出てきた際にはご相談させていただくと思いますが、何卒よろしくお願い致します。

♥ 0

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

[shone]

＞キタジマさん

ご回答いただきありがとうございます！

2つ目以外は（多分）技術的には可能ですが、経験上 PC だけじゃなくてモバイルでも表示できるようにしたいとか、正常に動作しない前提としていても正常に動作していませんとクレームが入る、といったことは確実にあるので、Snow Monkey 標準の機能として入れるのはどうかなという感じですね…。

たしかに、割り切って実装していただいたとしても今後流れを知らない方からクレームなど来る可能性もありますし、制作サイドに立って考えると難しいところではありますね。。。

上記承知致しました。

確かにこれも技術的には可能です。空の使用していないウィジェットエリアでもできるとは思いますが、独自にウィジェットエリアを追加してやるほうがわかりやすいかなとは思います。ただ、ご自身でやるにしても、それなりに複雑なことになるので、バナーの表示くらいであればそこまでするのは大変そうかなとは個人的には思います。

またこちらもアドバイスありがとうございます！

参考情報も教えていただいたので余裕があれば挑戦してみたいところですが、たしかに画像や単純なリンク程度なら最初にいただいたコードでやるのが無難ですかね…。

ちなみに上記コードまだ試せていないのですが、特に条件分岐など無さそうなので上記コードですと全ての閲覧環境・全てのページで表示されるという理解でよろしいでしょうか？

PCやタブレットなどデバイス別（メディアクエリ別？）で表示したり、トップページや特定のページのみ（ページidで指定でしょうか）表示させたいときの条件分岐の書き方など教えていただけると大変有難いです……

お手数おかけしますがお手すきの際にご確認いただけますと幸いです。

何卒よろしくお願いいたします。

♥ 0

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

[shone]

キタジマさん

早速ご返信いただきありがとうございます！

なるほど…素人考えですと他のウィジェットと同じ形で箱を用意して位置だけ変えれば良いのかな～と思ったのですが、色々と複雑に考慮する事情があるのですね。

イメージとしては、右サイドバーウィジェットをそのまま最前面に表示し、1カラム時もメインエリアの幅に干渉しないように表示する…みたいなイメージだったのですが、そんな単純な話ではなかったですね…

ちなみに今回の機能を実装するにあたって自分なりにも調べたところ、空の使用していないウィジェットを使って、それをpositionなどで任意の位置に無理矢理置いて表示させる…みたいなやり方もみたので（生憎ソース元を再度探しても見つからなかったのですが）そういったことができるなら、あまり工数かからず既存の機能を利用する形で実装できるのかな～とも思ったのですが…（そもそも本来の表示場所じゃないところに無理矢理表示するのは不可能か、できても不具合が多くなりますかね？）

たとえば、

・PC限定（メディアクエリで一定のサイズ以上限定）、
・ブロックあるいはクラシックウィジェットどちらか限定、
・最大幅固定でサイズ以上のものは正常に動作しない（レスポンシブ対応や綺麗な拡縮などの制御は無視）前提

…みたいな、極めて限定的な条件であればできる…といった感じでしょうか？それだと汎用的じゃないのでsnow monkey的には微妙そうですが。。

それならたしかにキタジマさんにご紹介いただいたコードで、単純に画像など表示するほうが無駄が無いでしょうかね。。。

♥ 0

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

[shone]

＞まーちゅうさん

 

返信遅くなりまして申し訳ございません。

またカスタマイズのサンプルコードもありがとうございます！

 

教えていただいたコードでバリエーションを追加することができました。

ただそのまま貼り付けたところカスタマイザーでの背景色が反映されず全て白色になってしまったのですが、何か背景色の指定方法間違っていますでしょうか？

CSS変数で書かれているのでそのままコピペすればボタンブロックの設定で背景色を変えられると思ったのですが…（文字色の変更は可能でした）。

詳細度の問題かと思い全部に無理矢理!importantを振ってみましたが、そうすると今度は背景色は設定できるようになったのですが、矢印が表示されなくなったりと各ボタンのエフェクトが正常に機能していないようです。

 

自力で解決を試みたのですが思うようにいかず…お手すきの際にアドバイスいただけますと幸いです。

♥ 0

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

[投稿者]

投稿