「TCD AWARD 2023」受賞サイトを発表しました。

ワードプレステーマ別

スマホ表示にて固定ページのタイトルが長い場合のカスタマイズ方法

Q.固定ページのタイトル見出しが長い場合スマホ表示がずれてしまう。

Opinionでは固定ページのタイトルが長い場合、枠からはみ出て表示されてしまいます。修正する方法はありますか。

A.下記のファイルを編集します

編集するファイル:style_sp.css
編集する箇所:

/* headline */
.headline1 { margin:0; padding:0 15px; height:36px; line-height:36px; border:1px solid #ccc; border-left:5px solid #adb8bf; font-size:15px; background:url(img/common/headline1.gif) repeat-x left bottom; }
.archive_headline { margin:0 0 20px 0; padding:0 15px; height:36px; line-height:36px; background:#aaa; color:#fff; font-size:14px; }
.headline2 { margin:0; padding:0 15px; height:36px; line-height:36px; border:1px solid #ccc; font-size:15px; background:url(img/common/headline1.gif) repeat-x left bottom; }


「height:36px;」を「height:auto;」に変更ください。

/* headline */
.headline1 { margin:0; padding:0 15px; height:36px; line-height:36px; border:1px solid #ccc; border-left:5px solid #adb8bf; font-size:15px; background:url(img/common/headline1.gif) repeat-x left bottom; }
.archive_headline { margin:0 0 20px 0; padding:0 15px; height:36px; line-height:36px; background:#aaa; color:#fff; font-size:14px; }
.headline2 { margin:0; padding:0 15px; height:auto; line-height:36px; border:1px solid #ccc; font-size:15px; background:url(img/common/headline1.gif) repeat-x left bottom; }

この記事は役に立ちましたか?

もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!

同じテーマのカスタマイズ記事