[キタジマ タカシ]

わ、全然気づいていませんでした。ご報告ありがとうございます！

現在、

.p-global-nav--vertical .c-navbar__item > a {
  text-align: left;
  writing-mode: vertical-rl;
}

のように a を縦書きにしているのですが、それを消して

.p-global-nav--vertical .c-navbar__item {
  text-align: left;
  writing-mode: vertical-rl;
}

のように li を縦書きにすると Chrome と表示が同じになるみたいです。サブメニューがどうなるかとか詳しい検証はまだですが、その方向で変更を入れたほうが良さそうな気がします。詳しく見てみますね。

♥ 2

Who liked:

[キタジマ タカシ]

slugにすると日本語のスラッグだったときにすごいことになっちゃうかもですね。

class 名は日本語 ok なので、URL エンコードされた状態でなければそんなに見にくくなることもないのかな？と思います。勝手に URL エンコードされちゃうようなら考えます！

♥ 1

Who liked:

[キタジマ タカシ]

セクションとカラム上の画像はそのままで、カラム（３等分）の部分をカスタムHTMLに変更するイメージでしょうか。

んーそうですね、人によって考え方はいろいろだと思いますが、僕なら、このデザインにマッチするブロックはないので、デザインの変更が不可であればカスタム HTML ブロックで実装すると思います。

♥ 0

Who liked: No user

[キタジマ タカシ]

変更を入れてみました！ Snow Monkey Mega Menu v2.0.3 にアップデートしてみるとどうでしょうか？

♥ 1

Who liked:

[キタジマ タカシ]

.smb-section-with-bgimage__bgimage のデフォルトの背景色が白だからですかね。ページの背景と同じ #FCFCFA に設定してみるとどうでしょうか。

.smb-section-with-bgimage__bgimage {
  background-color: #fcfcfa;
}

2.セクション（背景画像/動画）に高度な設定でclassをつけ、追加cssにてサイズ指定したが反映されませんでした。

背景画像（.smb-section-with-bgimage__bgimage img）のデフォルトが object-fit: cover だからですね。

.smb-section-with-bgimage__bgimage img {
  object-fit: initial;
}

のようにすれば拡大縮小は避けられると思いますが、そもそも用途的にセクション（背景画像）向きではないかもしれませんし、あるいは、背景の画像を固定してしまうと文字サイズを変更したときや文章量が変わったときに画像から文字がはみ出してしまうため、背景画像ではなく CSS で装飾するほうが向いているかもしれません。

♥ 0

Who liked: No user

[キタジマ タカシ]

意図的にそうされているのかもしれないとも思うのですが、

バグです！後ほど確認してみますね。

♥ 1

Who liked:

[キタジマ タカシ]

一覧のページについては「アーカイブページ設定」ですかね。

アーカイブページ設定

アーカイブページ（ブログ一覧ページ含む）共通の設定を行うことができます。 カスタマイザーでデザイン > アーカ…

snow-monkey.2inc.org

♥ 1

Who liked:

[キタジマ タカシ]

見れればどこでも良いとは思いますが、僕ならわかりやすいようにメディアアップローダーでアップロードして参照するか、My Snow Monkey とか子テーマの中に入れると思います。

♥ 0

Who liked: No user

[キタジマ タカシ]

ただIDだと、登録時のWPの状態によってIDが可変してしまい、DBの情報が異なる場合に、想定通りの色分けにならない可能性があります

あ！そうでした、スラッグですね。一応一覧のところと、記事内のところ、どちらも ID と slug の class を出力するようにしてみようと思います。しばしお待ちを！

♥ 2

Who liked:

[キタジマ タカシ]

また、ヘッダーコンテンツ右に画像でリンクボタンを入れたいのですがこれは可能でしょうか。

はい、普通に HTML を記述すれば良いです。下記は適当な例ですが、こんな感じで a と img を記述してみてください。

<div class="header-info" style="gap: 1em">
  <div class="header-wrapper">
    <i class="fas fa-phone-alt"></i>&nbsp;<b>0123-456-7890</b><br>午前：9:00〜12:00<br>午後：13:00〜19:00(土日祝日は16:00まで)<br>休診日：木曜日
  </div>
  <div>
    <a href="#"><img src="https://placehold.jp/100x60.jpg"></a>
  </div>
</div>

♥ 0

Who liked: No user

[キタジマ タカシ]

要は

<li class="c-meta__item c-meta__item--categories">
  <span class="c-meta__term c-meta__term--category-23">
    <span class="screen-reader-text">カテゴリー</span>
    <i class="fa-solid fa-folder" aria-hidden="true"></i>
    <a href="https://snow-monkey.2inc.org/category/info/">お知らせ</a>
  </span>
</li>

みたいになったら良いですかね？ 確かにここ CSS でさくっとやろうとしても HTML 構造的に無理なので、こうしちゃったほうが良い気がします！

♥ 1

Who liked:

[キタジマ タカシ]

ありがとうございます。確認したところ、.header-info を閉じる </div> が無いようです。それで HTML 構造がずれてしまって現象が発生しているように思います。

♥ 0

Who liked: No user

[キタジマ タカシ]

ヘッダーコンテンツに入力した HTML を、ここにそのまま貼り付けてもらって良いのでしょうか？（HTML 全体を`で囲むとコードとして認識されます）。

♥ 0

Who liked: No user

[キタジマ タカシ]

1. jQuery の読み込みを最適化の無効化

上記について、まだ同じエラーが出て続けていますね。HTML ソースを見ると jQuery の読み込み部分が

<script type='text/javascript' id='jquery-core-js' data-type="lazy" data-src="https://www.kyushu-kiden.co.jp/wp-includes/js/jquery/jquery.min.js?ver=3.6.1"></script>

のように、src ではなくて data-src となっています。なにか遅延読み込みさせるようなものを使われているのではないかなと思うのですがどうでしょうか？

♥ 1

Who liked:

[キタジマ タカシ]

過去にこんなトピックが…！（完全に忘れていました、ありがとうございます）

♥ 1

Who liked:

[投稿者]

投稿