パンくず部分を帯状にするには？

♥ 0

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

このトピックには3件の返信、2人の参加者があり、最後にキタジマタカシにより4年、 8ヶ月前に更新されました。

4件の投稿を表示中 - 1 - 4件目 (全4件中)

投稿者

投稿
2019年8月28日 12:20 PM #26330

Hatsuki
閲覧者

♥ 6

【お使いの Snow Monkey のバージョン】v7.10.0
【お使いのブラウザ】Safari
【当該サイトのURL】

===

現在のパンくずでコンテンツ幅に合わせない場合でもお知らせのように端から端まで、または上下に隙間なく背景色をつけるにはどうすれば良いでしょうか？
c-container内に存在する為か、c-containerにpaddingなどが当たっている為なのか、どうも隙間などが入ってしまうので。

♥ 0

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

2019年8月28日 1:02 PM #26332
キタジマタカシ
参加者

♥ 2249
例えばこんな感じはどうでしょうか？

PHP
```
add_filter(
	'snow_monkey_template_part_render',
	function( $html, $slug ) {
		if ( 'template-parts/common/breadcrumbs' !== $slug ) {
			return $html;
		}
		return '<div class="p-breadcrumbs-wrapper"><div class="c-container">' . $html . '</div></div>';
	},
	10,
	2
);
```
CSS
```
.p-breadcrumbs-wrapper {
  margin: 0 calc(50% - 50vw);
  background-color: #f5f5f5;
  padding: .5em;
}

.p-breadcrumbs-wrapper .c-container {
  padding-right: 1.86957rem;
  padding-left: 1.86957rem;
}

@media (min-width: 40em) {
  .p-breadcrumbs-wrapper .c-container {
    padding-right: calc(1.86957rem + env(safe-area-inset-right));
    padding-left: calc(1.86957rem + env(safe-area-inset-left));
  }
}

.p-breadcrumbs-wrapper .c-breadcrumbs {
  margin: 0 !important;
}
```
♥ 0

いいねをした人: 居ません
2019年8月28日 1:26 PM #26333

Hatsuki
閲覧者

♥ 6

回答ありがとうございます。これで対応しておきます。
これをやる為だけにここまで書く必要あると、何とかスムーズにならないものかと思います（^_^;

♥ 0

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

2019年8月28日 1:30 PM #26336

キタジマタカシ
参加者

♥ 2249

.c-container は追加しないにしても、wrapper は最初からあったほうが良いかもですねー

♥ 0

いいねをした人: 居ません
投稿者

投稿