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

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

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

KDDIウェブコミュニケーションズのホスティング専門ブランド【CPIスタッフブログ】の「Bootstrapの使い方特設コーナー」のヘッダー・フッターについてのページです。サイト制作の際によくある些細な疑問の解決に役立つことを目的とした、サーバー関連の専門情報サイトです。

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

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

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

Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.

4はこっち。

Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.

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

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

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

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

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

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

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

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

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

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

スポンサーリンク

シェアする

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

フォローする

スポンサーリンク