web学習

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

2018/09/24

1 WordPress テーマ stinger+のheader部分をカスタマイズ

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

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

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

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

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

4 header.phpを変更する。

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

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

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

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

7 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

8 CSSの変更

header-r、header-cも同様に命令する。

 

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

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

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

10 実際のサイトでは…

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

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

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

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

-web学習