[キタジマ タカシ]

Snow Monkey Blocks ボタンの場合

.smb-buttons > .smb-btn-wrapper {
  display: flex;
}

.smb-buttons > .smb-btn-wrapper > .smb-btn {
  align-items: center;
}

♥ 0

Who liked: No user

[キタジマ タカシ]

とりあえずコアのボタンブロックの場合の CSS を書いてみました。設定やカスタマイズによってはコンフリクトしてしまう可能性はあります。

.wp-block-buttons {
  align-items: stretch;
}

.wp-block-buttons > .wp-block-button {
  display: flex;
}

.wp-block-buttons > .wp-block-button > .wp-block-button__link {
  display: flex;
  align-items: center;
}

♥ 0

Who liked: No user

[キタジマ タカシ]

僕はそういうときデベロッパーツールの「フィルタ」をよく使っています。ここに「border-top」とか入力すると該当するセレクタが絞り込まれて表示されます。

♥ 0

Who liked: No user

[キタジマ タカシ]

（「各項目のボタンの下部を揃えます」そんな機能があったとは…！）

この辺が関連トピックですね。

項目のボタンを下揃えにしたい

このトピックには2件の返信、1人の参加者があり、最後にキタジマ タカシにより1年、 11ヶ月前に更新されました…

snow-monkey.2inc.org

Snow Monkey Blocksの「項目」でチェックを入れてもボタンの下部が揃わない

このトピックには4件の返信、2人の参加者があり、最後にキタジマ タカシにより8ヶ月前に更新されました。 5件の…

snow-monkey.2inc.org

♥ 1

Who liked:

[es：エス]

あれ？そんなことはなかったような…と思ってテストしてみたところ、ブロック設定で
『各項目のボタンの下部を揃えます (スタンダード・ブロックリンクのみ)。』をチェックし、
項目（スタンダード）で試したところ、ボタンは下端揃えされました。

ただ、内容を書く…の欄が空白だと上揃えになるため、一文字でも入れる必要はあります。

すべての項目の種類は試せていませんが、注釈のようにスタンダードかブロックリンクの
必要があると思いますので、一度、そのあたりも確認してみてください。

♥ 1

Who liked:

[Olein_jp]

ul.c-entries--text に border-top がありますので、そちらをカスタマイズしてみてください。

♥ 1

Who liked:

[Olein_jp]

添付されている画像の通り、もともと項目ブロックの各項目は上揃えとなっています。これはどのようなコンテンツが入れられるかコントロールできない（利用者によって違う）ので設計上そうしていると個人的には推測しています。

ですので、方法としては、

• コンテンツ量のバランスを整えてボタン位置を各項目揃える
• CSSでなんとかする

のどちらかかなと思います。

♥ 0

Who liked: No user

[meg]

オレインさん、ありがとうございます。

[aria-hidden="false"]

を追加すれば、条件を分岐させることができるのですね。

ただすみません。
教わった方法では、意図するタイミングで文字色を変更することができませんでした。

検証ツールを開いて上部固定のメニューが出てくる瞬間の .l-header__drop-nav というCSSクラスがついている要素を確認してみてください。＞aria-hidden が true と false で切り替わっていることが確認できるはずです。

こちら確認してみたのですが、「オーバーレイ（上部固定/スクロール時背景白）」の設定だと、教えていただいた箇所のクラスはfalseには切り替わらないようです。

ヘッダーの設定が「オーバーレイ」または「ノーマル」に設定した場合は、反映されることは確認できました。

できれば「オーバーレイ（上部固定/スクロール時背景白）」の見た目（左にロゴ、右にメニュー、スクロール時背景白）で設定できると嬉しいのですが…

ちなみに下記がスクロール前で

こちらがスクロール後です。

いっそ、元のCSSファイルで上記の

.l-header {
  background-color: var(--_background- 
  color,transparent);
  color: var(--header-text-color,#333);
  overflow: hidden;
  z-index: 1000;
}

の

color: var(--header-text-color,#333);

の部分を書き換えてしまおうかとも思ったのですが、
それでは根本的な解決にはならないですよね…。

お手数ですが、もう少しお付き合いいただけると嬉しいです。

♥ 0

Who liked: No user

[Olein_jp]

検証ツールを開いて上部固定のメニューが出てくる瞬間の .l-header__drop-nav というCSSクラスがついている要素を確認してみてください。

aria-hidden が true と false で切り替わっていることが確認できるはずです。この部分をCSSで利用することで、上部固定メニューが出てきたときだけCSSを適応するという書き方をすることができます。

例えば、

.l-header__drop-nav[aria-hidden="false"] .p-global-nav .c-navbar__item>a {
    color: pink;
}

このように書くと、上部固定メニューの文字色だけがピンクになっていると思います。こちらをもとにカスタマイズしてみてください。

♥ 0

Who liked: No user

[hiro8watanabe]

Olein_jpさん、まーちゅうさん、アドバイスありがとうございます。

Olein_jpさんの参考記事をカスタマイズして無事ループ表示することができました。
いろいろ試しているうちに検証漏れがあったようです。助かりました。

一点、各値を取得する際、ドキュメントに記載がある

<?php echo CFS()->get( 'フィールド名' );?>

では取得できない状態です。

現状は下記で取得していますが、これはSnow Monkey固有の現象なのか判断ができません。

<?php echo get_post_meta($post->ID, ‘フィールド名’, true); ?>
<?php echo wp_get_attachment_image(post_custom(‘フィールド名’), ‘large’); ?>

現在、WordPressに障害が発生しているらしく、テストサイトで検証ができないのため、復旧し次第検証し、Snow Monkeyの場合に起こる事象なのか確認後、不具合報告へ上げるか判断しようと思います。

色々と教えてくださりありがとうございました。

♥ 0

Who liked: No user

[まーちゅう]

とりあえず、プラグインのドキュメントに目を通してみてはいかがですか？

Loop – Custom Field Suite

mgibbs189.github.io

♥ 4

Who liked:

[Olein_jp]

こちらは WordPress テーマ Snow Monkey に関するフォーラムです。プラグインの使い方は、各種プラグインページにフォーラムへのリンクが設置してありますので、そちらからトピックを作成されると、プラグイン作者やユーザーからコメントが寄せられるかもしれません。

[Custom Field Suite] Support | WordPress.org

wordpress.org

Snow Monkey と併用することで発生する不具合の場合は、不具合報告へトピックを作成されると良いかと思います。

不具合報告

このフォーラムには675件のトピック、3,348件の返信があり、最後にdiiihにより14時間、 4分前に更新…

snow-monkey.2inc.org

本件を拝見すると、おそらく単純に Custom Field Suite でのカスタムフィールド出力方法のご質問と理解しました。私もこちらのプラグインを利用したことがありますし、繰り返しで入力させたものを出力させたこともあるので、方法としては、以下のサイトで紹介されているコードで実現できます。

【WordPress】Custom Field Suiteで繰り返しのカスタムフィールドグループを作る | deep-space-blue

Smart Custom Fieldsが5.xに対応していない かつて繰り返しフィールドが作れるSmart Custom Fieldsについて紹介しましたが 2019年7月29日現在、Smart Custom FieldsはWord…

deep-space.blue

こちらに掲載されているコードをカスタマイズする形で、一度試してみてください。

また、大丈夫かと思いますが、カスタマイズされる際には、Snow Monkey 本体のコードに手を入れるとアップデートで消えてしまいますので、子テーマもしくはプラグインなどを用意した上でカスタマイズされると良いでしょう。

ご確認ください。

♥ 2

Who liked:

[hiro8watanabe]

### 試したこと
の画像の表示コードが欠けていました。

画像は
<?php echo wp_get_attachment_image(post_custom('フィールド名'), 'large'); ?>

で一旦表示されました。

♥ 0

Who liked: No user

[キタジマ タカシ]

書いてみました。

.l-footer--footer-2 .l-footer__footer {
    background-color: transparent;
}
.l-footer--footer-2 .l-footer__footer .c-row__col--lg-fit {
    flex-grow: 1;
}
.l-footer--footer-2 .l-footer__footer .l-footer__copyright {
    display: flex;
    justify-content: flex-end;
}
.l-footer--footer-2 .l-footer-widget-area__item:last-child {
    max-width: none;
    flex: 1 1 auto;
}
.l-footer--footer-2 .l-footer-widget-area__item:last-child .menu {
    display: flex;
    flex-wrap: wrap;
}
.l-footer--footer-2 .l-footer-widget-area__item:last-child .menu > * {
    margin-top: 0;
    margin-right: 1em;
}

CSS での上書きが増えると、テーマのアップデート時に HTML 構造や CSS が変わってしまったときは崩れたりする可能性が大きくなります。それを避けたい場合はフッターテンプレートパーツ自体を上書きしてオリジナルのフッターテンプレートパーツをつくるとか、デザイン案よりも Snow Monkey のレイアウトを優先する、などの配慮が必要になると思います。

♥ 0

Who liked: No user

[miyuki]

こちらが完成版です。

♥ 0

Who liked: No user