お疲れさまです。途中参加させていただいたので、最後にもちょいと参加させていただきます。笑
拝見するに「コンテンツ部分のコンテナーの余白を削除」が新設される、ということですので、それに伴い
– 「コンテンツ部分のコンテナーの余白を削除」が有効なとき、画像のサイズが画面幅より大きい場合は画像は全幅になる。
– 「コンテンツ部分のコンテナーの余白を削除」が無効なとき、現在の「全幅のときは画像も全幅」をやめたとすると、全幅にしたとしても画像は全幅にならない。
とすることで、hisanobuさんのご要望のイメージに近づくのかな、という感じですね。
ただ、キタジマさんのおっしゃるようにPCとスマホでは横幅の違いが大きいため、「コンテンツ部分のコンテナーの余白を削除」しない場合にスマホ時に余白が残り、そのせいで画像の表示がかなり小さくなるといった弊害も起こるのかなという気もしますけども…。
個人的には、今の仕様で特に問題と感じていない上に、「コンテンツ部分のコンテナーの余白を削除」が新設されるのであれば、他のセクションとも揃ってバッチリね、くらいの感じで受けてとめています。
Snow Monkey v20.2.0 でブログカードの CSS に変更が入った影響です。以前に追加したブログカード用の CSS を一旦全部消して、新しく下記の CSS を追加してみてください。
.is-provider-wp-oembed-blog-card {
padding-top: 2em;
}
.is-provider-wp-oembed-blog-card .wp-oembed-blog-card > a,
.is-provider-wp-oembed-blog-card .wp-oembed-blog-card > span{
flex-wrap: nowrap;
}
.wp-block-embed__wrapper {
overflow: visible !important;
}
.wp-oembed-blog-card-label-text {
font-size: 0.875rem;
line-height: 1.2;
font-weight: bold;
background: #333;
color: #fff;
display: flex;
align-items: center;
height: 30px;
position: absolute;
top: -30px;
left: 0;
z-index: 12;
padding: .5em .75em;
}
@media not (min-width: 640px) {
.is-provider-wp-oembed-blog-card {
--wp-oembed-blog-card--gap: var(--_margin-1);
--wp-oembed-blog-card--figure--basis: 50%;
}
.is-provider-wp-oembed-blog-card .wp-oembed-blog-card__figure {
order: 1;
}
}
付随してなのですが、「コンテナーの配置」がデフォルトor幅広でも、SPでメディアが全幅になってしまいます。
PC・tabではpaddingが保持されているので、spでpaddingが消えて全幅になると不自然かなと…。
んーなるほどです。左右の padding については「コンテナーの配置」が全幅かどうかではなくて「コンテンツ部分のコンテナーの余白を削除」が有効かどうかが関係してきます。ただ、PC とスマホでは横幅が全然違うので、
– スマホの場合は全幅でも通常幅でも横幅が同じ（全幅は「最大幅」の制限を外すものなので）。
– 「コンテンツ部分のコンテナーの余白を削除」が有効なとき、画像のサイズが画面幅より大きい場合は画像は全幅になる。
– 「コンテンツ部分のコンテナーの余白を削除」が無効なとき、現在の「全幅のときは画像も全幅」をやめたとすると、全幅にしたとしても画像は全幅にならない。
– PC のときと同じように素直に全幅・通常幅、コンテナーの配置、コンテンツ部分のコンテナーの余白を削除を反映した場合、どの組み合わせの場合も画像は全幅にできない
ということになってくるので、こちらを立てればこちらが立たずというか、いずれにしろ PC と同じように設定を反映させることは画面幅の問題でできないので、今ぐらいの感じが落とし所なのかなと個人的には思います…。
以前こちらのスレッドにて
ブログカードのデザインをカスタマイズいただいたのですが
今見てみたらデザインが変わってしまっていました。
これを以前のデザイン
こちらに戻すことはできますでしょうか？
ありがとうござます！
付随してなのですが、「コンテナーの配置」がデフォルトor幅広でも、SPでメディアが全幅になってしまいます。
PC・tabではpaddingが保持されているので、spでpaddingが消えて全幅になると不自然かなと…。
ややこしくなってすみません。
キタジマさん
お世話になります。早速実装されたものを見てみてみました！
セクション（ブロークングリッド）で全幅、コンテナーの配置で全幅にしていてもPCの時左右にpaddingが入るのですが、他にどこかで余白無くす設定ってありましたでしょうか…？
これ Swiper みたいな transform でスライドを実現しているスライダーでも、「キャンバスエリアの幅が指定されている」 + 「ボックスシャドウが見きれないようにする」という条件だと同様の挙動になってしまうので、根本的に解決するにはキャンバスエリアの幅を指定しない（ページの左右余白もない完全なフル幅）ようにするしかないのかなぁという気がします。もしうまい挙動を実現されているスライダーを見かけたときは、調査しますので教えていただけるとうれしいです！
あーなるほど！わかりました。動画ありがとうございます。
スライダーのキャンバス（描画エリア）にスクロールバーとボーダーをつけると挙動がわかりやすいと思うので動画をとってみました。
スライドのボックスシャドウが切れてしまわないようにスライダーのキャンバス（描画エリア）にボックスシャドウの大きさ分の padding をつけているわけですが、それの影響で、実際にはキャンバスが伸縮しているわけではないけどそう見えちゃいますね…。
transofrm ではなくて本物のスクロールで動くスライダーという仕様上仕方ないというか、ちょっとどう対応できるかが想像つかないですね…。そもそもこの仕様のスライダーにボックスシャドウをつけてる機能があることが問題な気がしてきました…。
描画エリア外から描画エリアに入ってくるスライドの表示・非表示の切り替えのタイミングが少し遅いので、そこを調整したら多少違和感がマシになるかも…どうだろう。
ご返信ありがとうございます。
スライダーの動画を撮ってみましたので、ご確認いただけますでしょうか。
https://drive.google.com/file/d/1Af6WpKL4PFIw2KSKrIieknG3avsWZ_cs/view
再生スピードを50%にしていますので、より確認していただきやすいと思います。
全幅にした場合は目立ちにくくはなりますが、同じ状態になっているようです。
お手数ですが、よろしくお願いいたします。
FTP アップロードで問題ありません！
テーマに style.css スタイルシートがありません。
これは例えばプラグインの zip ファイルを間違ってテーマとしてインストールしようとするとでます。あとはテーマのファイルが欠落している場合が考えられますが、それだと FTP でアップロードしても不具合が出ると思うので前者が怪しそうな気がします。
「新しく投稿されたものに関してはカテゴリラベルのところにNewマークがつくようにする」は以下のコードを加えました。
すでに「NEW」が表示されているということですね。
私がやるとすれば、サムネイル上の「NEW」以外のカテゴリー名はCSS（ display: none ）で消します。
ご提示のコードの場合、該当の要素に my-new がついていると思いますので、そこだけ強制的に表示させます。
.c-entries .c-entry-summary__term {
display: none;
}
.c-entries span[class*="my-new"] {
display: block!important;
}
カテゴリーの表示は、位置をCSSで移動させるのがちょっと嫌なので、フィルターフック snow_monkey_template_part_render_template-parts/loop/entry-summary で </header> の後に replace を使ってリンクなしのカテゴリーを表示するようにしてあげれば、それっぽい感じになると思います。
add_filter(
'snow_monkey_template_part_render_template-parts/loop/entry-summary',
function( $html ) {
$category = get_the_category();
$cat_name = $category[0]->cat_name;
$html = str_replace(
'</header>',
'</header><p class="cat_name_origin"><span>'. $cat_name. '</span></p>',
$html
);
return $html;
}
);
もっとスマートな方法もあるかと思いますが、1つの例として参考にしていただければと思います。
やっても良いのか不明ですが、filezillaでFTP接続し、直接スノーモンキーのファイルをテーマのフォルダーに入れたら表示がもどりました。
Snow Monkey はファイルサイズが大きいので、サーバーのアップロード許容量が小さいとそのエラーがでてアップロードできなきことがあります。
.htaccess や php.ini でアップロード量を増やすか、レンタルサーバーならレンタルサーバーの管理画面から変更できるかもです。
【お使いの Snow Monkey のバージョン】20.0.1
【お使いの Snow Monkey Blocks のバージョン】19.2.0
【お使いの Snow Monkey Editor のバージョン】9.2.1
【お使いのブラウザ】crome
### 発生している問題
固定ページ編集は機能するのですが、文章などいじらなくてもページを離れようとすると「更新内容が反映されませんがいいですか？」のポップアップが出るようになってしまいました。
気付いたらそうなっていたので、どのタイミングからそのようになったかは分からないです。
### 試したこと
プラグイン・テーマ・WP全ての更新をおこない、最新版にしました。
ですが、発生する問題はそのままです。
最新版にしたバージョンは以下の通りとなります。
【お使いの Snow Monkey のバージョン】20.1.0
【お使いの Snow Monkey Blocks のバージョン】19.3.2
【お使いの Snow Monkey Editor のバージョン】9.2.5
imgタグにloading=”lazy”は特に何もプラグインいれてない状態でも付与されていました（これはたぶんWordPress標準っぽい？）。
あ、ほんとですね！失礼しました。
その後も調査していたのですが、もしかしたらスライダーブロック側で実行タイミングを調整してなんとかできるかも？しれません。一応キャッシュ無効化した僕の環境では、縮んで読み込まれていたのが正しい大きさで読み込まれるようになりました。ただ、レイアウトとかにもよるのかもで、確実に絶対大丈夫とはいえないので、無理だったらすみません。一応次の Blocks のアップデートで反映はさせておきます。
