ナビゲーションを追加したりフッターを作ったり

ナビゲーションがなくてとっても不便だったので追加することにしました。

Bootstrap4を活用したヘッダーってどんなのだ?と思って見た記事がこちら。

サーバーの基本知識から応用、ウェブ制作のノウハウなど幅広くご紹介します。

ふむふむ。Bootstrapのサイトに、サンプルコードがあるとな。

というわけで行ってみました。

…が、こちらはver3.3だったので…

4はこっち。

この中から「Blog」のデザインをチョイス。

画像をクリックすると実際にそのデザインが使われたサイトが表示されるので、ソースコードを見てhtmlの内容とcssの内容を確認。

当サイトのheader.phpとindex.php、style.cssを編集しました。

<nav>の中のclass “active” は吹き出しの三角を表示するんだけど、そのうち設定します(…予定)。

すると…なぜかサイトの上部に余白ができました。

どうもhtmlに直接スタイルが記述されている模様。

調べてみると、原因はバージョン3.1から新たに導入された「管理バーの表示」という機能で、それを表示するために余白を作っているようで。。

参考にさせていただいたのはこちらのサイト。

ヘッダーにwp_head();を入れたら、ページのトップに28pxの隙間が空いてしまいました。

下記の記述をfunctions.phpに入れて無事解決!

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク