【当該サイトの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 );
}
);
おそらく空ボタンが発生して悪さをしているのだと思われます。
ボタン単体ではなく、そのボタンを覆っているエリアを選択した上で削除をしてみてはどうでしょうか？
現在の選択しているフォーカスが、構造上どこを指しているのか確認する際には、編集画面の最下部左に、
文書→ボタン→ボタン
というようなパンくずリストが見えると思います。そこで確認してください。上記の場合は、単体のボタンを選択している状態です。この状態で、カーソルキーの↑を一回押すと、もう一階層上に移動できるので、
文書→ボタン
になると思います。こうなった状態でそこ全体を削除（Deleteボタンでも消せるはずです）してみてください。
どうでしょうか？
そうなると、追加するCSSも変わります。
.page-id-448 .c-page-header {
display: none;
}
.p-breadcrumbs-wrapper {
display: none;
}
.l-contents__inner {
margin-top: 0;
}
すみません、URLですがこちらでいかがでしょうか？
＞消したいのは、背景画像を含めたヘッダーのタイトル部分とパンくずの部分ですか？
インフォメーションバーの下にコンテンツをぴったりとくっつけるイメージであってますか？
→はい！まさにそのようなイメージです。
可能であれば実現したいと思っています。
【当該サイトのURL】https://andpenso.biz/?page_id=553&preview=true
このURLだと、多分ページを制作中のプレビューURLになるので、現在の様子を確認することができませんー。
差し支えなければ、上記キャプチャいただいたページのURLを共有いただくことはできますかー？
まーちゅうさん、早速にありがとうございます！
少しアレンジして下記のように書かせていただいたところ、理想と近いカタチになりました。
.page-id-448 .c-page-header {
background-color: #fff;
min-height: 0px;
}
.page-id-448 .c-page-header__bgimage > img {
display: none;
}
実はまだパン屑リストとともに少し隙間が入ってしまっているのですが、min-heightにマイナスマージンを設定しても消えず、こちらを完全に消すことは不可能でしょうか？
こんにちは
.page-id-553 .c-page-header {
background-color: #333;
min-height: 200px;
}
.page-id-553 .c-page-header__bgimage > img {
display: none;
}
こんな感じでCSSを追加してみてください。
.page-id-553 のところは、アイキャッチを非表示にするこてーページのIDに合わせてください。
こちらでも試してみましたが、CSS はあたっているようなので、まーちゅうさんが書かれているように background-size で調整するのが良いのでは？と思いました。
プルクオートのほうは、.title .has-large-font-size というクラスをどのように付与しているのかがわかりませんでした。
※CSS のスクショだけだと試そうと思う人が試しにくいと思うので、下記テキストで記入します。
@media screen and (max-width: 999px) {
.top-image .smb-section-with-bgimage__bgimage {
width: 100%;
height: 100vh;
}
}
@media screen and (max-width: 640px) {
.top-image .smb-section-with-bgimage__bgimage {
width: 100%;
}
.title .has-large-font-size {
font-size: 20px;
}
}
カスタマイザー → デザイン → ヘッダー → ヘッダーコンテンツに入力すると右端にその内容が表示されます。ロゴのすぐ右側ということだとコードを書いて対応することになります。
サイドバーまわりのウィジェットエリアはアクションフックで追加しているので、それを一度外して、独自に追加し直すのが一番簡単かなと思います。ただ、Snow Monkey のアップデートで新しくサイドバーまわりのウィジェットエリアが追加されなりなど変更があったときは（アクションフックを外している都合上）その変更が反映されなくなるのでご注意ください。
// デフォルトのアクションを外す
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 );
