全幅見出しウィジェットの設定

見出し設定

全幅見出しウィジェットの詳細設定

このウィジェットを利用することで、横幅100%表示のタイトルが設定可能となりました。

設定するにはページを『1カラム』にする必要がありますが、メインタイトル、サブタイトル、背景画像(またはカラー)を使った全幅見出しが利用可能となります。

ただしワードプレスの CSS 変更あるあるですが、CSS にて H2 を変更している場合、全幅見出しウイジェットにもその変更が影響します。

 

 

私の管理するサイト(中区ナビ)で『全幅見出しウィジェット』を設定してみました。

ヘッダー下部の背景が焼肉画像の部分全体が、『全幅見出し』です。
通常の見出しと比べ、今時な感じでオシャレですね。

全幅見出しウィジェット

 

でも、あらあら💦

見出しH2CSS にて変更しているがために、全幅見出し内のタイトル部分がへんてこなことになっています💦💦💦

このサイト(中区ナビ)の H2CSS は下記の通り。

 

下記の CSS を追記して『全幅見出しウィジェット』のみ、背景色を透明にしてフォントサイズも少し大きくします。

 

これだけでは h2:after で指定した、の突起部分が残ってしまうので、下記 CSS も追記します。

 

ついでにサブタイトルのフォントサイズも大きくします。

 

まとめるとこちら。

 

完成しましたぁ!

全幅見出し:改良後

 

このウイジェット、パソコンでの表示は良いのですがスマホ表示の際の背景にサイズ上の問題が残っています。

またバージョンアップによって良くなっていくことを期待しています。

 

 

 

この記事を書いたのは

白馬のおんじ
名古屋市の情報通信システム会社に勤務。生活の大半をブログ運営に捧げています(笑)WordPress や BiND を使用したサイト制作承ります!

"ZERO"で作るゼロ円ホームページ

レカムジャパン名古屋第一支店で作るホームページ。"ZERO"ならドメインの取得や管理にかかる初期費用も一切ゼロ。もちろん製作費も更新費用もかかりません。ホームページにかかる4つの費用を全てゼロにした名古屋第一支店だけのオールフリープラン"ZERO"。是非ご利用ください!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です