[Olein_jp]

画像拝見しまして、僕の考えですが（これが正解ではないと思います）、標準ブロック（WordPressが提供するブロック）と Snow Monkey Blocks だけでは、このレイアウトの実現は難しいと思います。

仮に僕がこういったレイアウトを再現したいと考えた場合、どのような方法を取るかですが、

1. メディアと画像ブロックなどでレイアウト
2. テキスト部分（画像でいう右側）を、見出し・段落・ボタンブロックでレイアウトし各々にCSSクラス付与
3. 追加CSSでクラス指定をして、スマホ→タブレット→PCの縦書きになるようスタイルを記述していく

が常套手段かなと思います。テキスト部分を標準ブロックを使わずにカスタムHTMLブロックでやってしまっても良いでしょう。

僕なら、このような形での実装にするかなと思います。

♥ 1

いいねをした人: 居ません

[Olein_jp]

ボタンブロックを縦向きで表示したいです

実際にどのような見た目にしたいのか、サンプルになるようなキャプチャ画像など添付いただけるとスムーズかと思います。

また、実際に試された内容なども記載いただけると、どのようなポイントでのアドバイスが最適化など、返答者が推測することができますので、加えて情報をいただけますと良いかと思います。

♥ 1

いいねをした人: 居ません

[Olein_jp]

どんな方法で実現されたいのかによりますが、

スマホ用の画像を別に登録することができればと思うのですが、そういう機能はないのでしょうか？

ということは、CSSなどで実現されるお考えではないと察しました。その場合は、

• 三角矢印が右のもの（＝PC用）を設置し、Snow Monkey Editor の機能で表示設定（ウィンドウズサイズ）でスマホ・タブレットを非表示に
• 三角矢印が右のもの（＝スマホ用）を設置し、Snow Monkey Editor の機能で表示設定（ウィンドウズサイズ）でPCを非表示に

タブレットの扱いは任意でどちらかに含んでください。編集画面では同じようなものが２つ表示されますが、実際の表示側にはウインドウサイズに応じて表示・非表示が切り替わります。

♥ 1

いいねをした人: 居ません

[Olein_jp]

画像のリンク先を「メディアファイル」に設定する箇所がわかりませんでした。

これをこのままGoogle先生に聞いてみると良いと思いますがいかがでしょうか？

https://www.google.com/search?q=%E7%94%BB%E5%83%8F%E3%81%AE%E3%83%AA%E3%83%B3%E3%82%AF%E5%85%88%E3%82%92%E3%80%8C%E3%83%A1%E3%83%87%E3%82%A3%E3%82%A2%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%80%8D%E3%81%AB%E8%A8%AD%E5%AE%9A&oq=%E7%94%BB%E5%83%8F%E3%81%AE%E3%83%AA%E3%83%B3%E3%82%AF%E5%85%88%E3%82%92%E3%80%8C%E3%83%A1%E3%83%87%E3%82%A3%E3%82%A2%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%80%8D%E3%81%AB%E8%A8%AD%E5%AE%9A

♥ 2

いいねをした人: 居ません

[Olein_jp]

styleに40pxが入ってしまっているので

ソースコードを拝見できていないので断定はできませんが、変更されたい箇所に別途フォントサイズなどを指定していることによって、インライン要素にてスタイルが当たってしまっていると考えられます。

その場合、インライン要素に記述されている原因を解除した上で、

.c-entry__title {
  font-size: 20px;
}
@media ( min-width: 64em ) {
  .c-entry__title {
    font-size: 40px; // PCで40pxにしたいという想定
  }
}

とするとうまくいきそうな気がしますがいかがでしょうか。

♥ 1

いいねをした人: 居ません

[Olein_jp]

長方形と三角は一つの画像になってます。

長方形と三角が一体となっている画像を、スマホ表示時だけ三角の場所を変えたい場合には、魔法が必要ですね…

冗談はさておき、ご自身で「長方形」と「三角」をそれぞれ別画像として用意する事はできますか？

それが出来ないと実現は難しいですね。

♥ 0

いいねをした人: 居ません

[Olein_jp]

こんばんわ！

この三角矢印は、画像をCSSで表示（ :before などで）させている状態ですか？

現状の状況をもう少し頂かないと回答が難しいですねぇ。

♥ 0

いいねをした人: 居ません

[Olein_jp]

Snow Monkey で任意の固定ページをホームページに設定（と同時に投稿ページにも別の固定ページを設定）した場合には、トップページにはアイキャッチ画像は設定されてもOGPに割り当てられるだけで、表示はされないというのは仕様であるという認識です。

ですので、ページトップに画像を配置したい場合には、ホームページに設定した固定ページにお好きな形で画像を配置する必要があると思います。

♥ 0

いいねをした人: 居ません

[Olein_jp]

共有いただいたサイトを見てすぐに「岐阜城だ！」と分かりました。そして、こちらの事務所も自転車で10分くらいにあって「とうとう Snow Monkey もこんなところまで…」と痛感していた次第です…

ぱっと見ですが、この写真は観光コンベンション協会が著作権を持っている可能性があるので（昔からよくみる構図なので）、クライアント様が撮影された写真ではない場合にはご注意ください。

本題ですが、パッと拝見した感じだと、ヘッダーを全幅設定にした上で snow_monkey_template_part_render_template-parts/header/2row にフックをしてブランディング部分の c-row__col c-row__col--auto に任意にクラスを追加してコンテンツ幅を管理するという形でもできるのかなと思いました。

My Snow Monkey からのカスタマイズになります。

♥ 1

いいねをした人: 居ません

[Olein_jp]

簡単に検証してみましたが、結果としては正常に送信・受信することができました。最大容量はサーバーにもよると思いますが、10MB（Zipファイル）まで送信できることを確認しました。

画像サイズが大きかったのかと思い、画像サイズを700KB未満にしているのですが、それでも
・確認画面における画像の表示
及び
・メール本文への画像表示
ができません。

確認画面を用いたフォームでテストをしていないので、確認画面での表示は確認できていませんが、メール本文への画像表示は確認することができました。

{all-fields} で出力していれば問題ありませんが、個別でメールテンプレートにスラッグを入力している場合、（僕だけかな？）たまに書き忘れがあったりするので、よろしければスラッグ記載のご確認も今一度されてみても良いかもしれません。

参考になれば幸いです。

♥ 1

いいねをした人: 居ません

[Olein_jp]

画像を右寄せで配置すると、次の文章が回り込んでしまうのですがこれは仕様でしょうか。

これは WordPress の仕様です。Snow Monkey の仕様ではありません。

左寄せと中央配置ですと特に回り込みはありませんでした。

左寄せでも回り込みます。画像を小さくしてみると回り込むはずです。中央寄せは回り込みは発生ません。

♥ 4

いいねをした人: 居ません

[Olein_jp]

ブラウザ幅の違いから表示・非表示が変わるということであれば、まずはメディアクエリを疑うのでCSSを確認する必要があるかと思います。また、追加されている画像も読み込みがされているか、CSSがどうなっているかも確認してください。

ディベロッパーツールで確認するときちんと表示されていて、特に問題があるようには思えないんですが、実機になると表示されていません。

実機でSafariとChrome両ブラウザにて表示されないという認識でよいでしょうか？スマホのOSの記載もお願いします。また、カスタマイズされた部分へCSSなどカスタマイズされているようであれば、それも記述をお願いします。

こちらで同バージョンにてiOS実機にてSafari/Google Chromeともに表示の確認はしましたので、カスタマイズ起因の可能性が高いかもしれません。

スムーズに解決されたい場合にはURL共有をされることをお勧めします。

♥ 3

いいねをした人: 居ません

[Olein_jp]

ブラウザの開発者ツールでスマホ表示時のCSSを確認したら原因が分かると思いますがいかがでしょうか？

♥ 1

いいねをした人: 居ません

[Olein_jp]

おそらく空ボタンが発生して悪さをしているのだと思われます。

ボタン単体ではなく、そのボタンを覆っているエリアを選択した上で削除をしてみてはどうでしょうか？

現在の選択しているフォーカスが、構造上どこを指しているのか確認する際には、編集画面の最下部左に、

文書→ボタン→ボタン

というようなパンくずリストが見えると思います。そこで確認してください。上記の場合は、単体のボタンを選択している状態です。この状態で、カーソルキーの↑を一回押すと、もう一階層上に移動できるので、

文書→ボタン

になると思います。こうなった状態でそこ全体を削除（Deleteボタンでも消せるはずです）してみてください。

どうでしょうか？

♥ 3

いいねをした人: 居ません

[Olein_jp]

別件ですが、カバーを挿入した際に、毎回ボタン要素が追加されて、何度削除しても出てくるのですが、こちらはWordPressのバグでしょうか？解決方法をご存知であれば教えてください。

別件の場合は、別トピックの作成をお願いしますー

♥ 1

いいねをした人: 居ません

[投稿者]

投稿