ありがとうございます。表示できました。
スマホのスクロールで消えてしまうようですが
メニューの右下に常時表する方法があれば教えていただけないでしょうか？
モバイル用ヘッダーコンテンツが表示されるページテンプレートは以下になります。もしこれら以外のページテンプレートを使用している場合は表示されません。
– 左サイドバー
– 右サイドバー
– フル幅
– 1カラム（スリム幅）
– 1カラム
本来なら、下記の画像のように、.l-contents 直下に HTML が出力されるはずなのですが…。
>キタジマさん
お世話になっております。
ご返信いただきありがとうございます。
スクロールさせるためには情報ブロックを画面からはみ出させる必要があるわけですが、どうやってはみ出させるかですね…。中身を全部折返しさせないというのも微妙だし、情報ブロックをスマホ画面幅より大きい幅○○pxで固定するというのも微妙ですし…。
私自身技術的に詳しくなく仕様についての意見は難しいところなのですが…
たとえば他のテーマやプラグインですとスクロールの設定に「スマホ時」「PC時」「両方」といった選択肢があって、更に表の幅（width）もブロックのメニューから設定できるものもあるようです。
なのでそれに倣ってメディアクエリで「〇px以上（以下）のときにスクロールする」といった仕組みで何パターンか切り分けてもいいのかな？と思うのですが…
なるほどです。
現状、折返しを CSS でいじったり全体の幅の指定をしたりしているわけではないので、中の要素に width 指定があるとか折り返し指定があるということがなければ他の要素と同じように通常通りの表示となり、見切れたりすることはありません。
中身が多いとスマホサイズなどで非常に見づらくなったり、
「スマホでカラム分割しない」のチェックがない場合はスマホでも強制的にカラム分割されるため、特にラベルカラムの幅が狭くて見づらくなるということはありえます。なのでスクロール表示の機能はあっても良いかなと思いますが、仕様をどうするか悩みますね…。
スクロールさせるためには情報ブロックを画面からはみ出させる必要があるわけですが、どうやってはみ出させるかですね…。中身を全部折返しさせないというのも微妙だし、情報ブロックをスマホ画面幅より大きい幅○○pxで固定するというのも微妙ですし…。
>キタジマさん
ご返信ありがとうございます！
なるほど、コアのブロックの拡張は難しいんですね…
なので、細かくやりたい場合はやはりブロックスタイルの「吹き出し」ではなくて「吹き出しブロック」を使うほうが良いかもです（吹き出しブロックなら設定を追加することは可能です）。
吹き出しブロックに適当な CSS クラスを追加して、それでアバター画像を display: none、その吹き出しブロックをカラムブロックなんかに入れて横に画像を並べる、というのはどうでしょうね？
一旦アドバイスいただいた形で構成してみたいと思います。
ただいずれにしても現状では枠線と背景色を分けることはできなさそうですかね？
機能追加していただけるとしたら、アバターの表示・非表示や枠線・背景色のオプションなど追加していただけると嬉しいです…！
お忙しいところ恐縮ではございますが、ご検討いただけますと幸いです。
Snow Monkey を利用する・しないに関わらず、!important を簡単に活用していくのは、後にそれよりも強くスタイルを当てたい状況が発生した場合につらくなります。
ですので、「できるだけ使わないように書く」ことを個人的には意識しています。どうしても、という場合には自分の責任の元で利用することもありだとは思いますが、「どうしても」の場合ですね。
その判断ができるように、まずは CSS の詳細度について理解を深めていっても良いかもしれませんね。（さまざまな考え方があると思います。こちらは個人的な感想です。）
迅速なご回答ありがとうございます！
承知いたしました。今回は作り直して実装致します。
（追加CSSよりブロックをコピーする方向で）
また、issueとしていただきありがとうございます！
今回はクライアント様から納品後にあるセクションの背景を画像にしたいと依頼がありました。
トピック閉じさせていただきます。
残念ながら現状ではできません…。
でもできたほうが使い勝手が良さそうなので、今後調査してみます！ ひとまず issue は立てました。
とりあえず現状ではタイトルや中身をコピペするなどして別のセクションブロックに入れ直す必要があります。
「カスタムロゴ」というのはヘッダーに表示される画像のロゴということですよね？
僕のサイトで実験したところ、
.c-site-branding__title a::after {
content: "v0.3";
font-weight: normal;
font-size: 16px;
color:red;
padding-left:0px;
}
できれいに表示されました。
他の CSS が邪魔しているかもしれないので、崩れているページが確認できるのであればこちらにそのページの URL を共有いただきたいです。
お世話になっております。
北島様の助言をもとにプラグイン等を調べてみましたところ、Flying Scriptsというプラグインで除外していたのが原因だったようです。記述を削除することで動作しました。
初歩的なことですが、お答えいただいて感謝しております。
ありがとうございます。
解決したので閉じさせていただきます。
吹き出しの拡張で枠線や背景色の設定もできると嬉しいです…！
ブロックスタイルの場合、「スタイルをあてるかあてないか」だけで、設定を追加することができないんです…。
なので、細かくやりたい場合はやはりブロックスタイルの「吹き出し」ではなくて「吹き出しブロック」を使うほうが良いかもです（吹き出しブロックなら設定を追加することは可能です）。
吹き出しブロックに適当な CSS クラスを追加して、それでアバター画像を display: none、その吹き出しブロックをカラムブロックなんかに入れて横に画像を並べる、というのはどうでしょうね？
ちょっと気になった点としては、
僕の環境では
<script type='text/javascript' src='/wp-includes/js/jquery/jquery.js?ver=3.6.3' id='jquery-core-js'></script>
<script type='text/javascript' defer src='/wp-content/plugins/my-snow-monkey2/main.js?ver=1678666875' id='msm_scripts-js'></script>
となっているのに対し、memime さんの環境では
<script type='text/javascript' defer id='jquery-core-js' data-type="lazy" data-src="/wp-includes/js/jquery/jquery.min.js?ver=3.6.1"></script>
<script type='text/javascript' defer src='/wp-content/plugins/my-snow-monkey/scripts/main.js?ver=1678542667' id='msm_scripts-js'></script>
となっています。僕の環境では jQuery には defer がついていないのに、memime さんの環境では jQuery にも defer がついています。defer がついちゃうと読み込み順が保証されなくなっちゃう（多分）ので、「jQuery が見つからない」というエラーがでるのだと思います。
ちょっとなんで jQuery にも defer がついてしまっているのかはわからないのですが、高速化プラグインを使ったり、他に defer を追加するようなコードを追加していたりする可能性はありますか？また、他にも jQuery に依存する js ファイルを読み込ませていたりしますか？
【お使いの Snow Monkey のバージョン】 バージョン: 19.2.0
【お使いのブラウザ】 chrome
【当該サイトのURL】
### 実現したいこと
カスタムロゴの 横に テキストでバージョン番号を付けたいです
### 発生している問題
画像をまわりこんでしまって、横並びになりません。
### 試したこと
テキストロゴのときにおしえてもらったa::afterが効きません
.c-site-branding__title a::after {
content: "v0.3";
font-weight: normal;
font-size: 16px;
color:red;
padding-left:0px;
}
.custom-logo a::after {
content: "v0.3";
font-weight: normal;
font-size: 16px;
color:red;
padding-left:0px;
}
picture ::after {
content: "v0.3";
font-weight: normal;
font-size: 16px;
color:red;
padding-left:0px;
}
返信ありがとうございます。
「jQuery の 読み込みを最適化する」のチェックをつけたり、外したりするとその時だけ機能するようです。
「jQuery の 読み込みを最適化する」にチェックをつけると機能します。
ですが、なぜか「公開」を押してカスタマイザーを閉じると元に戻ってしまいます。
このテキストカラーはjQueryでしか指定していないので、色が変わっているということはjQueryは機能しているということだと思うのですが…
そうなんですね。他のgmailでも（自分の）試してみましたが、同様におきていました。違う環境から試してみたいと思います。
しばらく、こちらをこのままで（閉じずに）いさせてください。すみません。
