オリジナルのtheme(テーマ)を作る04:headerを作る

bootstrapを使っているので、ほぼbootstrapの書き方ですが、一部変更してます。
見た目は、後でcssを書き換えて変更していく予定です。

<header id="header">
    <nav class="navbar navbar-inverse">
    <div class="container">
        <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#globalmenu" aria-expanded="false">MENU</button>
        <h1><a class="navbar-brand" href="#">tomisan.info</a><small>"I tried" of tomisan</small></h1>
        </div>
        <!--//navbar-header -->
        <div class="collapse navbar-collapse" id="globalmenu">
            <ul class="nav navbar-nav">
            <li><a href="#">個別ページ1</a></li>
            </ul>
            <!--//nav navbar-nav -->
            <ul class="nav navbar-nav navbar-right">
            <li><a href="#">リンク1</a></li>
            <li><a href="#">リンク2</a></li>
            <li><a href="#">リンク3</a></li>
            </ul>
            <!--//navbar-right -->
        </div>
        <!-- //collapse navbar-collapse -->
    </div>
    <!--//container -->
    </nav>
    <!--//nav -->
</header>
<!--//#header -->

元はこんなHTMLですが、wordpressのテンプレートタグを入れていきます。

<h1><a class="navbar-brand" href="<?php echo home_url('/'); ?>"><?php bloginfo('name'); ?></a><small><?php bloginfo('description'); ?></small></h1>

サイト名とトップページへのリンク、サイトのキャッチフレーズ(説明)を出力します。

メニュー部分は後回しで(;^ω^)
次は記事のタイトルと記事の本文を表示させよう。。

コメントは受け付けていません。