・確認画面における画像の表示
及び
・メール本文への画像表示
「表示」という表現がちょっとひっかかりました。というのも、Snow Monkey Forms の「ファイル」は、確認画面や入力画面ではファイル名の表示しかおこなわないので画像自体は表示されません。また、メールについてもファイル（画像）は本文にはファイル名の表示だけで実際のファイル（画像）は添付ファイルとして届きます。ということで、確認画面・メール本文に画像自体が表示されないということでしたらそれは仕様となります。
メールへの添付もされないということであれば、オレインさんが書かれているように {file-xxxx} のようにファイルの name をメール文面の設定に書いていないとスルーされてしまうのでちゃんと記述しているか確認してみてください！
簡単に検証してみましたが、結果としては正常に送信・受信することができました。最大容量はサーバーにもよると思いますが、10MB（Zipファイル）まで送信できることを確認しました。
画像サイズが大きかったのかと思い、画像サイズを700KB未満にしているのですが、それでも
・確認画面における画像の表示
及び
・メール本文への画像表示
ができません。
確認画面を用いたフォームでテストをしていないので、確認画面での表示は確認できていませんが、メール本文への画像表示は確認することができました。
{all-fields} で出力していれば問題ありませんが、個別でメールテンプレートにスラッグを入力している場合、（僕だけかな？）たまに書き忘れがあったりするので、よろしければスラッグ記載のご確認も今一度されてみても良いかもしれません。
参考になれば幸いです。
Olein様、まーちゅう様、キタジマ様
ご対応いただきありがとうございます！
実機でSafariとChrome両ブラウザにて表示されないという認識でよいでしょうか？
→SafariとChrome共に表示されませんでした。
スムーズに解決されたい場合にはURL共有をされることをお勧めします。
→現在進めている実案件の内容ですので共有することができず申し訳ございません。
まーちゅう様のアドバイスを実践したところ反映させることができました。
私のスキル不足のため原因の切り分けができていないのですが、ひとまずこの実装で進めていこうと思います。
重ねて御礼申し上げます。
もし PC でページを表示させてそれをデベロッパーツールで確認しているのであれば、スマホを PC につないでスマホで表示しているページをデベロッパーツールで確認することもできるので試してみるとなにかわかるかもですね。
CSSで、画像に置き換えてみてはどうですか？
#page-top a svg {
display: none;
}
#page-top {
background: url(https://snow-monkey.2inc.org/wp-content/uploads/2018/04/logo.png) no-repeat center center;
background-color: transparent;
background-size: contain;
}
ブラウザ幅の違いから表示・非表示が変わるということであれば、まずはメディアクエリを疑うのでCSSを確認する必要があるかと思います。また、追加されている画像も読み込みがされているか、CSSがどうなっているかも確認してください。
ディベロッパーツールで確認するときちんと表示されていて、特に問題があるようには思えないんですが、実機になると表示されていません。
実機でSafariとChrome両ブラウザにて表示されないという認識でよいでしょうか？スマホのOSの記載もお願いします。また、カスタマイズされた部分へCSSなどカスタマイズされているようであれば、それも記述をお願いします。
こちらで同バージョンにてiOS実機にてSafari/Google Chromeともに表示の確認はしましたので、カスタマイズ起因の可能性が高いかもしれません。
スムーズに解決されたい場合にはURL共有をされることをお勧めします。
使用したコードについてもう一度記載させていただきます。
キタジマさん
お世話になっております。
object-fitで画面いっぱいに全体を表示することができました。
背景画像に色々と付け加えたい場合はカスタムHTMLブロックになるのですね。
勉強になりました。
説明不足なところもあり、申し訳ございませんでした。
回答いただきありがとうございました。
更新した際にページが見当たりませんと表示されてしまいます…。
編集画面に内容を入力しその編集画面で更新をクリックすると404になるということです…？
ちょっと状況がよくわからないのですが、ボタンにアンカーリンクが設定できないということであれば、下記の画像を参考に設定してみてもらえればと思います。
※「#-cv」のように飛び先のアンカーを入力して、右端の矢印（送信）をクリック
【当該サイトのURL】https://andpenso.biz/wp-admin/post.php?post=553&action=edit
管理画面の URL なので閲覧できませんでした。
id追加によりページ内リンクを飛ばそうと試しているのですがうまくいきません。
「うまくいかない」というのは具体的にどのような動作になってしまうのでしょうか？
目次の表示条件はフックでカスタマイズするようになっています。
参考：
目次ウィジェットの場合も目次ブロックの場合のようにポチポチで設定できればよいのですが、つくり上難しいので、ウィジェットの場合はコードで対応してもらう形になっちゃいます…。今回の場合だとこんな感じでしょうか。
add_filter(
'inc2734_wp_contents_outline_args',
function( $attributes ) {
$attributes['selector'] = implode(
',',
[
$attributes['selector'],
'.smb-section__title',
'.smb-section__inner > .c-container',
'.smb-section-break-the-grid__content',
'.smb-section-side-heading > .smb-section__inner > .c-container > .c-row > .c-row__col:first-child',
]
);
return $attributes;
}
);
.top-image（= セクション（背景画像/動画ブロック）の大外の要素）には背景画像は無いので background-size をつけてもどこにも影響を与えることはできません。画像が繰り返しでない場合は背景画像ではなく img で配置されているので、background-size ではなくて object-fit になります。
@media screen and (max-width:999px){
/*トップイメージ*/
.top-image {
height: 90vh;
}
.top-image .smb-section-with-bgimage__bgimage > img {
object-fit: contain;
}
}
ただ、background-size: contain や object-fit: contain は、表示エリアに収まるように画像を縮小するという指定になるので、画像を画面いっぱいに広げたいという用途には不向きです。ちょっとどう表示させたいのかがいまいちわかっていないのですが、
– 画像はどこか切れることなく全て表示したい
– 画像は画面いっぱいに表示したい
– 画像の上に文字を載せたい
という表現を実現したいのであれば、セクション（背景画像/動画）ブロックは向いていないのではないかと思います。Snow Monkey Blocks やコアのブロックにはそのような表現ができるブロックはなかったと思うので、CSS でカスタマイズするよりはカスタム HTML ブロックなんかで自作したほうが確実ではないかと思います。
まーちゅうさん、キタジマさん、ご教示いただきありがとうございます。
あれから試してみて、タブレットはなんとか枠内に見せたい部分は収まったのですが、スマホがどうしても画面に収まりきらない状態です。
セクション（背景）に「top-image」をつけて、cssで「top-image」「top-image img」とで「background-size: cover;」、繰り返し設定にはしていないのですが「background-size: contain;」で試しましたが変わらずでした。
今回のはトップ画像になるのですが、スマホ版で背景画像が縮小されないのは当てているクラスが違っているのでしょうか。
ご教示いただいた内容で追加cssを下記のように記載しましたが、縮小できませんでした。↓↓
/*タブレット*/
@media screen and (max-width:999px){
/*トップイメージ*/
.top-image {
width:100%;
height:90vh;
background-size:cover;
}
}
/*スマホ*/
@media screen and (max-width:599px){
/*トップイメージ*/
.top-image {
width:100%;
height:auto;
background-size:cover;
}
}
あーフックのタイミングみたいですね。これでどうでしょうか。
add_action(
'after_setup_theme',
function() {
remove_action( 'snow_monkey_sidebar', 'snow_monkey_sidebar_add_sidebar_widget_area', 20 );
function my_snow_monkey_sidebar_add_sidebar_widget_area() {
if ( function_exists( 'is_woocommerce' ) && is_woocommerce() ) {
snow_monkey_the_woocommerce_sidebar_widget_area();
} else {
snow_monkey_the_sidebar_widget_area();
snow_monkey_the_sidebar_sticky_widget_area();
}
}
add_action( 'snow_monkey_sidebar', 'my_snow_monkey_sidebar_add_sidebar_widget_area', 20 );
}
);
