おそらく空ボタンが発生して悪さをしているのだと思われます。
ボタン単体ではなく、そのボタンを覆っているエリアを選択した上で削除をしてみてはどうでしょうか？
現在の選択しているフォーカスが、構造上どこを指しているのか確認する際には、編集画面の最下部左に、
文書→ボタン→ボタン
というようなパンくずリストが見えると思います。そこで確認してください。上記の場合は、単体のボタンを選択している状態です。この状態で、カーソルキーの↑を一回押すと、もう一階層上に移動できるので、
文書→ボタン
になると思います。こうなった状態でそこ全体を削除（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 );
こんにちは
追加CSSに
.c-meta__item--author {
display: none;
}
を記入すれば、消えます。
こんにちは
background-size: cover;で、画面サイズに合わせて背景画像のサイズが変わると思います。
画像を繰り返しにしている場合は、background-size: contain;の方がいいかもです。
以下の通り設定し、結果的に、、、、、、、、、、、、できました！！
ご回答いただいたお二方ありがとうございました！！
こちらも皆さんの参考になればと思い、以下に設定した内容を記載しております。ぜひご参照ください！（無駄なところがあるかもしれません、、）
- ヘッダーを
全幅にする
- ヘッダーレイアウトを
2行に
- ヘッダーコンテンツに記述（記述内容を以下に記載しております）
- 「お問い合わせ」をグローバルナビに入れ、
menu-item-contactクラス付与
ヘッダーコンテンツ
<div class="header-tel">
<div>TEL</div>
<div class="header-tel-number">0000-00-0000</div>
</div>
<div class="header-btn-recruit"><a class="c-btn">採用情報</a></div>
追加CSS
/*==========================*/
/* Header
/*==========================*/
[data-has-global-nav=true] .l-2row-header__row:last-child{
margin-top: 0px;
}
.c-fluid-container{
padding-right: calc(192px + 22px);
position: relative;
}
.c-header-content{
display: flex;
align-items: center;
}
.header-tel{
display: flex;
justify-content: flex-start;
font-weight: bold;
font-size: 20px;
}
.header-tel-number{
margin-left: 6px;
}
.header-btn-recruit{
display: table;
}
.header-btn-recruit a.c-btn{
background-color: #fff;
color: var(--accent-color,#cd162c);
border: 2px solid var(--accent-color,#cd162c);
border-radius: 22px;
font-weight: bold;
width: 175px;
height: 44px;
margin-left: 23px;
display: flex;
align-items: center;
justify-content: space-around;
}
.header-btn-recruit a.c-btn::after{
content: "";
width: 7.7px;
height: 7.7px;
border-top: 2px solid var(--accent-color,#cd162c);
border-right: 2px solid var(--accent-color,#cd162c);
transform: rotate(45deg) translate(1px, 1px);
}
.menu-item-contact{
position: absolute;
top: 0;
right: 0;
width: 192px;
height: 100%;
}
.c-navbar{
justify-content: flex-end;
}
.c-navbar__item{
flex: initial;
}
.c-site-branding__title{
position: absolute;
height: 100%;
top: 0;
display: flex;
align-items: center;
}
.l-2row-header .p-global-nav .c-navbar__item>a{
padding-top: 16px;
padding-bottom: 12px;
}
.p-global-nav .c-navbar__item>a{
font-size: 16px;
line-height: 1.5;
}
@media (min-width: 64em){
.l-2row-header__row:first-child {
padding-top: 4px;
padding-bottom: 0px;
}
}
ふぅ〜追加CSSでできて、よかった、、🥷
トピック閉じておきます
「お問い合わせ」をグローバルナビに入れて btn-contact みたいな何か適当なclassを付けてCSSで装飾すれば、「採用情報ボタン」はヘッダーコンテンツに入れられると思います。
.btn-contact {
background: #111;
color: #fff;
padding: 1em;
position: absolute;
top: 0;
right: 0;
}
CSSは、こんな感じ。
height width の設定も必要かもしれません。
ありがとうございます。
実のところ、やはりHTMLをいじる以上はテンプレートに手を加える必要があるかなとは思っていたので、ご回答いただき大変参考になりました。ありがとうございます。
ちなみにMy Snow MonkeyからSnow Monkeyのテンプレートファイルを上書きする際、下記のコードを使用するとのことですが、添付画像のようなヘッダーを実装する場合、下記コードを利用し、どのようにカスタマイズを進めれば良いでしょうか？
また今回のヘッダー自体、頻繁にデザインを変更する予定はないのですが、ご提案いただいたメンテナンス性はできれば高い方が良いなと思うところもあります。そちらも合わせて最適解がありましたらアドバイスいただけますと幸いです。
add_filter(
'snow_monkey_template_part_root_hierarchy',
function( $hierarchy ) {
$hierarchy[] = untrailingslashit( __DIR__ ) . '/override';
return $hierarchy;
}
);
参考元：
