[キタジマ タカシ]

CSS で対処するとしたら下記のどちらかでしょうか。

.p-global-nav .c-navbar__item > a {
  padding: xxx; /* 任意の padding に変更 */
}

.p-global-nav .c-navbar__item > a {
  white-space: nowrap; /* 折返しを許可しない */
}

♥ 0

Who liked: No user

[Olein_jp]

こちらの状況を当方ローカルで再現して確認してみました。

ウィジェットの設定画面で、タイトルとリードテキスト、そのあとに背景色を設定できると思いますが、こちらのデフォルト値が #ffffff になっており、そちらが wpaw-pr-box というこのウィジェットの全体を囲っている要素にインライン出力されています。

ですので、CSS的にはこちらを !important で上書きするしかないとは思いますが、下記添付画像のように設定画面で任意の背景色を設定すれば解決しないでしょうか？

仮に、ウィジェット設定画面では #ffffff を設定しておき、CSS側から変更を加えないといけない理由が当てばコメントで追記いただければと思います。

♥ 26

Who liked:

[キタジマ タカシ]

どうも追加 CSS の記述にミスがある気がします（追加 CSS に記述してある CSS を lint に書けると閉じミスがあると指摘されます）。

  /*H1の文字サイズ行間調整（効いてない）*/
@media (max-width: 639px) { 
    h1.c-entry__title {
        font-size: 23px !important;
        line-height: 1.3;
    
}

という部分の CSS が怪しいので、

  /*H1の文字サイズ行間調整（効いてない）*/
@media (max-width: 639px) { 
    h1.c-entry__title {
        font-size: 23px !important;
        line-height: 1.3;
    }
}

にしてみてください。

♥ 0

Who liked: No user

[キタジマ タカシ]

rinker は詳しくないのですが、具体的にもとのデザインをどういう風にするカスタマイズをしていましたか？

♥ 0

Who liked: No user

[キタジマ タカシ]

こんな感じですかね？

.home .l-header .c-site-branding {
  display: none;
}

♥ 0

Who liked: No user

[キタジマ タカシ]

Snow Monkey のアイキャッチ画像・OGP 画像、ページヘッダー画像はいわゆるイメージ画像をいれるような想定なので、文字だったり顔があるきちんと画角を考えないといけない写真を設定するのは向いていません。

下記のような CSS でアイキャッチ画像の比率を定義しているので、OGP 画像の比率に合わせて CSS を調整してみると良いかもしれません。

.c-entry-summary__figure:before {
    content: "";
    display: block;
    padding-top: 75%;
}

♥ 0

Who liked: No user

[キタジマ タカシ]

こんな感じですかね？

.smb-items__banner img {
    transition: transform .2s;
}

.smb-items__banner:hover img {
    transform: scale(1.2);
}

♥ 1

Who liked:

[春]

Olein_jpさん
キタジマ タカシさん

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

トップページのみ以下のロゴとオレンジの箇所を狭めたいのです。。。
よろしくお願いいたします。

♥ 0

Who liked: No user

[yasuki]

依存関係というのは

		wp_enqueue_script(
			'my_scripts',
			MY_SNOW_MONKEY_URL . '/app.js',
			['aos'],
			filemtime( MY_SNOW_MONKEY_PATH . '/app.js' ),
			true
		);

これでよいのでしょうか？

♥ 0

Who liked: No user

[キタジマ タカシ]

GONSYさん、my_scripts の依存に aos を指定したほうが安全かと思います！

♥ 1

Who liked:

[GONSY]

@yasuki さん

こんにちは。

Snow Monkeyにもアニメーション機能がついていますが、あえてAOSを使うなら、こんな感じでmy-snow-monkey.phpに記述すればいいのではないかと。

add_action( 'wp_enqueue_scripts', 'msm_enqueue_style_script' );
function msm_enqueue_style_script() {
	wp_enqueue_style(
		'msm_style',
		MY_SNOW_MONKEY_URL . '/style.css',
		[],
		filemtime( MY_SNOW_MONKEY_PATH . '/style.css' )
	);
}

add_action(
	'wp_enqueue_scripts',
	function() {

		wp_enqueue_style(
			'aos-style',
			'https://unpkg.com/aos@2.3.1/dist/aos.css',
			[],
			false
		);

		wp_enqueue_script(
			'aos',
			'https://unpkg.com/aos@2.3.1/dist/aos.js',
			[],
			false
		);

		wp_enqueue_script(
			'my_scripts',
			MY_SNOW_MONKEY_URL . '/app.js',
			[],
			filemtime( MY_SNOW_MONKEY_PATH . '/app.js' ),
			true
		);
	
	}
);

あと、AOSはjQuery非依存なので、わざわざ読み込む必要はありません。

Snow Monkeyはカスタマイズも楽しいので、いろいろ試してみたくなりますよね。
このフォーラムも勉強になりますが、WordPressも一緒に学習していくと、もっとハマっていろんなことができると思います。

♥ 1

Who liked:

[キタジマ タカシ]

試さずに返信して申し訳ないのですが、ぱっと見で感じたことを書きますね。

– インデントしてみたところ msm_enqueue_style_script() の中にそれ以下のフックや関数が入ってしまっているので、外に出す必要があると思います。

– あと、これは本題とは関係ありませんが、add_action( 'wp_enqueue_scripts', function() { は何度も書く必要はないので、関連するものは一つのフックの中にまとめて書くのがわかりやすいと思います。

♥ 1

Who liked:

[yasuki]

.smb-items__banner__figure{
	overflow:hidden;
}

これもだめですよね？

♥ 1

Who liked:

[キタジマ タカシ]

.c-entry-summary__meta も display: block; あるいは display: inline-block; にしてみると良いかもしれません。

レイアウトにあまりこあわらないのであれば、「テキスト」ではなく「テキスト2」を使うと日付もカテゴリーも最初から表示されます。

♥ 0

Who liked: No user

[キタジマ タカシ]

あーもしかしたらコメントですかね？

  /*H1の文字サイズ行間調整（効いてない）*/
@media (max-width: 639px) { 
    h1.c-entry__title {
        font-size: 23px !important;
        line-height: 1.3;
    
}

↓

/* H1の文字サイズ行間調整（効いてない） */
@media (max-width: 639px) { 
    h1.c-entry__title {
        font-size: 23px !important;
        line-height: 1.3;
}

に差し替えてみるとどうでしょうか。

♥ 0

Who liked: No user