width・height が指定されていない画像に、width・height を指定するとどうなりますか？
【お使いの Snow Monkey のバージョン】5.2.6
【お使いの Snow Monkey Blocks のバージョン】20.3.5
【お使いの Snow Monkey Editor のバージョン】9.3.2
【お使いの PHP のバージョン】8.2.15
### 発生している問題
u-smooth-scrollを設定し、複数のページ内リンクをしているのですが。
スマホ(android、iphone)、パソコン(edge、opera、firefox)にて、新しいタブや、シークレットウィンドウ等で該当URLにアクセスし、ボタンをクリックすると、「初回クリック時」のみ途中で動きが止まってしまいます。
※一つ前の投稿と類似しているかなと思ったのですが、内容が微妙に異なっていたので新たにトピックをたてました。
### 試したこと
①パソコンではchromeのみシークレットウィンドウ等でも正常に動作いたしました。
②アンカーへの距離が近いと正常に動作し、距離が長いとアンカーまで到達せずに途中で止まってしまいました。
### 確認したいこと
改善する方法はありますでしょうか？
＞キタジマさん
ご回答いただきありがとうございます！
2つ目以外は（多分）技術的には可能ですが、経験上 PC だけじゃなくてモバイルでも表示できるようにしたいとか、正常に動作しない前提としていても正常に動作していませんとクレームが入る、といったことは確実にあるので、Snow Monkey 標準の機能として入れるのはどうかなという感じですね…。
たしかに、割り切って実装していただいたとしても今後流れを知らない方からクレームなど来る可能性もありますし、制作サイドに立って考えると難しいところではありますね。。。
上記承知致しました。
確かにこれも技術的には可能です。空の使用していないウィジェットエリアでもできるとは思いますが、独自にウィジェットエリアを追加してやるほうがわかりやすいかなとは思います。ただ、ご自身でやるにしても、それなりに複雑なことになるので、バナーの表示くらいであればそこまでするのは大変そうかなとは個人的には思います。
またこちらもアドバイスありがとうございます！
参考情報も教えていただいたので余裕があれば挑戦してみたいところですが、たしかに画像や単純なリンク程度なら最初にいただいたコードでやるのが無難ですかね…。
ちなみに上記コードまだ試せていないのですが、特に条件分岐など無さそうなので上記コードですと全ての閲覧環境・全てのページで表示されるという理解でよろしいでしょうか？
PCやタブレットなどデバイス別（メディアクエリ別？）で表示したり、トップページや特定のページのみ（ページidで指定でしょうか）表示させたいときの条件分岐の書き方など教えていただけると大変有難いです……
お手数おかけしますがお手すきの際にご確認いただけますと幸いです。
何卒よろしくお願いいたします。
・PC限定（メディアクエリで一定のサイズ以上限定）、
・ブロックあるいはクラシックウィジェットどちらか限定、
・最大幅固定でサイズ以上のものは正常に動作しない（レスポンシブ対応や綺麗な拡縮などの制御は無視）前提
…みたいな、極めて限定的な条件であればできる…といった感じでしょうか？それだと汎用的じゃないのでsnow monkey的には微妙そうですが。。
2つ目以外は（多分）技術的には可能ですが、経験上 PC だけじゃなくてモバイルでも表示できるようにしたいとか、正常に動作しない前提としていても正常に動作していませんとクレームが入る、といったことは確実にあるので、Snow Monkey 標準の機能として入れるのはどうかなという感じですね…。
自分なりにも調べたところ、空の使用していないウィジェットを使って、それをpositionなどで任意の位置に無理矢理置いて表示させる…みたいなやり方もみたので
確かにこれも技術的には可能です。空の使用していないウィジェットエリアでもできるとは思いますが、独自にウィジェットエリアを追加してやるほうがわかりやすいかなとは思います。ただ、ご自身でやるにしても、それなりに複雑なことになるので、バナーの表示くらいであればそこまでするのは大変そうかなとは個人的には思います。
参考：
キタジマさん
早速ご返信いただきありがとうございます！
なるほど…素人考えですと他のウィジェットと同じ形で箱を用意して位置だけ変えれば良いのかな～と思ったのですが、色々と複雑に考慮する事情があるのですね。
イメージとしては、右サイドバーウィジェットをそのまま最前面に表示し、1カラム時もメインエリアの幅に干渉しないように表示する…みたいなイメージだったのですが、そんな単純な話ではなかったですね…
ちなみに今回の機能を実装するにあたって自分なりにも調べたところ、空の使用していないウィジェットを使って、それをpositionなどで任意の位置に無理矢理置いて表示させる…みたいなやり方もみたので（生憎ソース元を再度探しても見つからなかったのですが）そういったことができるなら、あまり工数かからず既存の機能を利用する形で実装できるのかな～とも思ったのですが…（そもそも本来の表示場所じゃないところに無理矢理表示するのは不可能か、できても不具合が多くなりますかね？）
たとえば、
・PC限定（メディアクエリで一定のサイズ以上限定）、
・ブロックあるいはクラシックウィジェットどちらか限定、
・最大幅固定でサイズ以上のものは正常に動作しない（レスポンシブ対応や綺麗な拡縮などの制御は無視）前提
…みたいな、極めて限定的な条件であればできる…といった感じでしょうか？それだと汎用的じゃないのでsnow monkey的には微妙そうですが。。
それならたしかにキタジマさんにご紹介いただいたコードで、単純に画像など表示するほうが無駄が無いでしょうかね。。。
デフォルトページヘッダー画像登録をしたら 全画像が入らず、上下・左右が切れてしまうので、
ページヘッダー画像は、どのような画像（縦長等）がきてもある程度それなりに表示するために、高さの制御がされており、はみでる部分はトリミングされるようになっています。CSS を追加することで高さの制御とトリミングを無効化できます。
.c-page-header[data-has-image=true] {
height: auto;
padding: 0;
}
.c-page-header[data-has-image=true] .c-page-header__bgimage,
.c-page-header[data-has-image=true] .c-page-header__bgimage > picture {
position: static;
}
.c-page-header[data-has-image=true] .c-page-header__bgimage > img,
.c-page-header[data-has-image=true] .c-page-header__bgimage > picture > img {
position: static;
height: auto;
}
ページヘッダー画像を使わない場合は↑は入れなくて大丈夫です。
固定ページで画像挿入、フル画面にして トップページヘッダー画像としています。
画像はそのまま入っていますが、メニューバーと画像の上の間に結構な大きさの空白が生じています。
レイアウトまわりがどのような設定になっているかで変わってくるので、実際に見てみないと正しい答えを提示できるかわからないのですが、とりあえず、下記の CSS を試してみると良いかもしれません。
.l-contents__inner {
padding-top: 0;
}
こちらこそ、お忙しい中ありがとうございます！
スクショをみた感じだと、「ソース」に new_image.js があるので、読み込みはできているのかなと思いましたがどうでしょうか？ 読み込みに失敗してたら多分「ソース」には表示されないと思うので。
なるほどです。「ソース」に表示されている時点で、読み込みはできているのですね…！
上記はどういう意味でしょうか？「ソース」では console.log(“test”); とでているけど、「コンソール」には test と出力されないということですかね？
出力結果を確認する時に、「コンソール」ではなく「ソース」を見ていたようです。
こちらの見間違いだとわかったので、解決いたしました。
トピックを閉じさせて頂きます。対応して下さり、ありがとうございました。
遅くなりすみません、教えていただたコードおよび少しのCSSで再現しました。
demoサイトです。
「投稿ページテンプレートを変更できません。」は、ちょっとわからないですねｗ
Xserverの設定を変更されていませんか？
Xserverのキャッシュはオフになっていましたか？
認識の確認です。再現したいのは、3カラムでしょうか？
テンプレートの1カラムとはサイドバーがないことです。
中のブロックを1カラムにしたい場合は、以下の方法でできると思います。
すみません。ご対応いただき、ありがとうございます。
「任意のタクソノミー」はブロックがいつまでも読み込み待ち状態で動きません。
Simple Local Avatars というプラグインを使っています！
お世話になっております。
アドバイスいただいた件ですが、Google Apps Scriptの設定後、下記コードを入力してみましたが、
フォームの送信ボタンが押せなくなってしまいました。
add_action(
'snow_monkey_forms/administrator_mailer/after_send',
function( $responser ) {
$name = $responser->get( 'name' ); // フォームのname属性値に応じて変更
$email = $responser->get( 'email' ); // フォームのname属性値に応じて変更
$endpoint = 'YOUR_GOOGLE_APPS_SCRIPT_ENDPOINT_URL';
$body = wp_json_encode( [
'name' => $name,
'email' => $email,
] );
$response = wp_remote_post( $endpoint, [
'headers' => [ 'Content-Type' => 'application/json; charset=utf-8' ],
'body' => $body,
'method' => 'POST',
'data_format' => 'body',
] );
if ( is_wp_error( $response ) ) {
$error_message = $response->get_error_message();
// エラーログに記録するなどのエラー処理をここに記述
}
}
);
お忙しいところ恐縮ですが、ご助言をいただけると嬉しいです。
よろしくお願いいたします。
詳しくありがとうございます！`
スクショをみた感じだと、「ソース」に new_image.js があるので、読み込みはできているのかなと思いましたがどうでしょうか？ 読み込みに失敗してたら多分「ソース」には表示されないと思うので。`
topページでjavascriptが読み込まれるかどうかを下記のコードのように記述してみましたが、検証ツールのコンソールでは、値（test)だけの状態で表示されません。
上記はどういう意味でしょうか？「ソース」では console.log("test"); とでているけど、「コンソール」には test と出力されないということですかね？
回答ありがとうございます！
また、返信が遅くなり申し訳ありません。
topページでjavascriptが読み込まれるかどうかを下記のコードのように記述してみましたが、検証ツールのコンソールでは、値（test)だけの状態で表示されません。
おそらく、パスが通っていないのでしょうか？(app/publicを足しましたがコンソールに表示自体されませんでした）
※コードの中のクラス名、スラッグについて
ゆくゆくは、スクロールするとヘッダーロゴ画像が、文字色の違うヘッダーロゴ画像へと変わる動きをつけたいと思っています。なので、クラス名などはnew_imageなどにしています。全ページロゴ画像が変わる動きをつける予定ですが、今回はスラッグはtopにしています。
my-snow-monkey.phpに記述
add_action(
'wp_enqueue_scripts',
function (){
if (is_page('top')) {
wp_enqueue_script(
'new-image',
'http://local-test-1.local/wp-content/plugins/my-snow-monkey/new_image.js'
);
}
}
);
new_image.jsに記述
console.log("test");
階層は,下記画像のようになっています。
よろしくお願い致します。
