Q.質問内容
・アーカイブページで表示されている見出しを、固定ページでも表示させたいです。
・ページによっては、ページのヘッダーの下部に正方形のテキストが表示されますが、固定ページでも同じ表示をさせたいです。
▼変更箇所イメージ
A.下記の方法でカスタマイズしてください。
各記事内「カスタムCSS」の入力枠に下記のCSSを追記してください。
#page_header{ overflow: unset; margin-bottom: 60px; } #page_header:before{ content: 'PAGE';/**** 任意のテキストを指定してください。 ****/ background: #00729f;/**** 任意のカラーコードに変更してください。 ****/ line-height: 165px;/**** 小見出しがない場合は200pxにしてください ****/ width: 200px; height: 200px; bottom: -100px; position: absolute; z-index: 999999; right: 0; left: 0; margin: auto; color: #fff; text-align: center; font-weight: 600; font-size: 24px; } /**** 小見出しがある場合のみ追記 ****/ #page_header:after{ content: '固定ページ';/**** 任意のテキストを指定してください。 ****/ bottom: -115px; line-height: 200px; position: absolute; z-index: 999999; right: 0; left: 0; margin: auto; color: #fff; text-align: center; font-size: 14px; } @media (max-width: 767px) { #page_header:before{ line-height: 95px;/**** 小見出しがない場合は120px ****/ width: 120px; height: 120px; bottom: -60px; font-size: 18px; } /**** 小見出しがある場合のみ追記 ****/ #page_header:after{ font-size: 12px; bottom: -115px; } }
補足)
・小見出しの改行が必要な場合は、テーマ(page.php)のカスタマイズが必要になります。
・サイトの設定状況により、font-familyなどの指定が別途必要になる場合があります。
この記事は役に立ちましたか?
もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!