WordPress header部分のカスタマイズ方法(左右の真ん中部分に「ブロック要素(新たな枠)」を作りたい。) | WordPress Make&サポート中小企業診断士「Weber」

web学習

WordPress header部分のカスタマイズ方法(左右の真ん中部分に「ブロック要素(新たな枠)」を作りたい。)

2018/08/13

 WordPress テーマ 

「stinger+」
のヘッダー部分をカスタマイズして、左右の真ん中部分に「ブロック要素(新たな枠)」を作りたい。
そんな要望に応えるための方法です。
 この方法は、ヘッダー以外のフッターや固定ページ、投稿ぺージでも応用できるはずなので、その方法を記載します。

WordPress Theme stinger+のデフォルトのheader構造

ホームページ 中小企業診断士

新たに heade-cを作り、文字群を入れたい

ホームページ 中小企業診断士

header.phpを変更する。

 まず最初にheader.php内に、<div id=“header-wrap”>をつくる。
 下図のようにハンバーガーメニュー(スマホ枠の際に表示される)を枠の外に出すことが重要。今回の作業範囲の影響からハンバーガーメニューが影響しないようにする。

「header-l」と「header-r」の間に「header-c」を設け、両者間に新たな「ブロック要素枠」を作る。

ホームページ 中小企業診断士4

ダッシュボードで管理しているサイトの説明(descr)は、header-lの一番下(左のbox)で表記されるように、header-lの中に入れておく。

htmlを吐き出す元のheader.phpの変更が終わったら次は、CSSの変更です。

 header,phpに記載した新たな大枠 「header‐wrap」や「header-l」、「header-c」、「header-l」を既存のfloatプロパティーの命令ではなく、 「header‐wrap」 はtableタグ、 「header-l」、「header-c」、「header-l」はその中にあるtable―cellタグとして位置づけ、table内で横整列される命令に変更する。

中小企業診断士 WordPress8

CSSの変更 header-r、header-cも同様に命令する。

ホームページ 中小企業診断士 説明用写真

スマホ対応の命令を忘れずに…

最後に、横幅、950PX以下はブロック要素として、下にガンガンと落ちて見えるように{    }内の命令を行う

実際のサイトでは…

そうすると、ちょっと見ずらいですが、下図のように3つのtable-dellタグの枠に変更され、自由に、記載ができるようになります。

スマホ対応でも…しっかりと

しっかりブロック要素とし、ブロックが下にガンガンを落ちるように縦に整列してくれました。

中小企業診断士 ホームページ説明用写真 8

-web学習