フォーラムへの返信
-
.base-image { position: relative; /* 親要素を相対配置にする */ display: block; /* ブロック要素として表示 */ }は、必要ないので削除してください。
Who liked:
こんにちは。
方法はいろいろあると思いますが、画像ブロック5つの場合
まず、5つの画像ブロック全部をグループブロック化します。
その上で、カスタマイザーの追加CSSを以下のように変更してみてください。.overlay-image1, .overlay-image2, .overlay-image3, .overlay-image4 { position: absolute; width: 12%; height: 20%; z-index: 1; margin-top: 0 !important; } .overlay-image1 { top: 100px; left: 100px; } .overlay-image2 { top: 0; right: 0; } .overlay-image3 { bottom: 0; left: 0; } .overlay-image4 { bottom: 0; right: 0; } .overlay-image1 img, .overlay-image2 img, .overlay-image3 img, .overlay-image4 img { width: 100%; /* 画像を要素の幅に合わせる */ height: 100%; /* 画像を要素の高さに合わせる */ object-fit: cover; /* 画像をブロックに合わせて表示 */ }画像の位置やサイズは、お好みで調整してください。
サンプルページ
Who liked:
こんにちは。
FROM（メールアドレス）に、@gmail.com のメールアドレスを指定しているのが原因だと思います。
“From” gmail.com であると主張するメールが全然違うサーバー（takatakapo.com）から送られているので、スパム判定されています。
FROM（メールアドレス）を空にするか、xxxx@takatakapo.com のようなサイトと同じドメインのメールアドレスを指定してください。
まとめると、
FROM（メールアドレス）は、サイトと同じドメインのメールアドレスを指定します。
REPLY-TO（メールアドレス）は、通常は空にしておいてもよいのですが、今回のように“From”（送信元のドメイン）と違うドメイン（gmail.com）のメールアドレスで返信を受け取りたい場合に使用します。Who liked:
一応断っておきますが、上のコードは動作確認もしていなくて、こんな感じでいろいろコード書かないと実現できないですよということを理解してもらうためにChatGPTに書かせたコードです。
きちんと動作させるためには、前後の投稿のタイトル（furigana）だけでなく、リンクURLも取得しないといけないし、
snow-monkey/template-parts/content/prev-next-nav.php の中身も書き換えないとダメだと思います。並び変えプラグインは200項目を50音順に手作業で並び変える手間と、新項目をかんがえると避けたく
カスタムフィールドでいきたいです手作業で全部の記事を並べ替えるのは手間でしょうが、いろいろなフックを調べたりして時間をかけてコードを書くのもかなりの手間です。
私の感覚では、誰かに頼んで有償対応してもらうぐらいのレベルだと思います。要望は分かりますが、このフォーラムはコミュニティであり、カスタマーサポートセンターではありませんので、そこのところは理解していただきたいと思います。
並べ替えのプラグイン Post Types Order の有料版に Advanced Post Types Order というのがあります。
こちらのプラグインなら、自動ソート機能があるので何百記事でも簡単に並べ替えができます。
カスタムフィールドにも対応しているようです。39ドルで買い切りのプラグインですので、検討してみてはどうでしょうか？
Who liked:
こんにちは。
もしボタンの色をカスタマイザーで設定したアクセントカラーに変更したいのであれば
「外観」>「カスタマイズ」を開くと一番下に「Snow Monkey Forms」の項目がありますので、「ボタンにアクセントカラーを使用します。」にチェックを入れて「公開」ボタンをクリックしてください。Who liked:
汎用的とは言ってもボタンのデザインは、数限りなくあると思いますので
Oleinさんの言われている通り、ブロックスタイルで対応するのがいいと思います。知識に自信があるわけでもないと尻込みせずに、チャレンジしてみると意外と簡単だったりするので、以下のコードをMy Snow Monkey に追加してみてください。
- マウスホバー時に色が反転する is-style-reverse
- マウスホバー時に色が変わる（左から右へ流れる） is-style-fluent
- 矢印（ホバー時に右に動く） is-style-arrow
- 光るボタン is-style-glow
の4つが、ブロックスタイルとして追加されます。
/** * Block Styles * * @link https://developer.wordpress.org/reference/functions/register_block_style/ * @param string $block_name, * @param array $style_properties */ if ( function_exists( 'register_block_style' ) ) { /** * Register block styles. */ add_action( 'init', function() { register_block_style( 'snow-monkey-blocks/btn', array( 'name' => 'reverse', 'label' => '反転', ) ); register_block_style( 'snow-monkey-blocks/btn', array( 'name' => 'fluent', 'label' => '左から右へ流れる', ) ); register_block_style( 'snow-monkey-blocks/btn', array( 'name' => 'arrow', 'label' => '矢印付き', ) ); register_block_style( 'snow-monkey-blocks/btn', array( 'name' => 'glow', 'label' => '光るボタン', ) ); } ); }CSSのサンプル
.smb-btn-wrapper.is-style-reverse .smb-btn { background: var(--bgcolor-btn-reverse); } .smb-btn-wrapper.is-style-reverse .smb-btn:hover { background: var(--bgcolor-btn-reverse-hover); } .smb-btn-wrapper.is-style-fluent .smb-btn { background: var(--bgcolor-btn-fluent); } .smb-btn-wrapper.is-style-fluent .smb-btn:hover { background: var(--bgcolor-btn-fluent-hover); } .smb-btn-wrapper.is-style-arrow .smb-btn { background: var(--bgcolor-btn-arrow); } .smb-btn-wrapper.is-style-arrow .smb-btn::after { content: '→'; } .smb-btn-wrapper.is-style-glow .smb-btn { background: var(--bgcolor-btn-glow); }Who liked:
