賢威のヘッダーをカスタマイズする

公開日: 2014年02月02日
最終更新日: 2014年05月18日

ヘッダー

今回は、inosh blogに使用しているテーマ「賢威」のヘッダーをカスタマイズしていく様子をご紹介します。トップメニューの消去、ロゴ部分のカスタマイズ、記事タイトルを吹き出し風にする、ヘッダー全体における背景の設定など。

もくじ

はじめに

前回までの記事(CSSで文字サイズや行間を調整して視認性・可読性を高める)で、賢威の初期設定や文字サイズなどの基本スタイルを調整しましたので、これからヘッダー・サイドバー・コンテンツ部分・フッターと、それぞれにCSSを適用させて賢威っぽさを無くし、オリジナルのデザインにしていきます。

今回は、賢威のヘッダーをカスタマイズしたいと思います。

現在のヘッダーはこのような状態↓
賢威のヘッダー

これを、前回ブログのテーマカラーを決めるで決めたように、黒をメインカラーにしてCSSでカスタマイズしていきたいと思います。

トップメニューを消す

賢威では、デフォルトでヘッダーの1番上の部分に、サイトマップへのリンクが固定表示(トップメニュー)されています。

トップメニュー

サイトマップへのリンクは、最終的にフッターに設置したいと考えておりますので、これはゴッソリ消しちゃいます。

このトップメニュー部分(<”div id=”top”>)は1番上に表示されていますが、header.phpではなくfooter.phpに記述されており、CSSの絶対配置により1番上に強制的に表示させているような形になります。

そのため、トップメニューを消すには、footer.phpの以下のコードを消去します。

footer.php

<!--▼トップメニュー-->
<div id="top">
<div id="top-in">

<ul id="top-menu">
<li><a href="<?php bloginfo('url'); ?>/sitemaps/">サイトマップ</a></li>
</ul>

</div>
</div>
<!--▲トップメニュー-->

ちなみに、絶対配置は以下のpositionプロパティとtopプロパティにより指定されています。

design.css(↓このような形で絶対配置されている)

#top {
    position: absolute;
    top: 0;
    background-color: #fff;
    font-size: 1.2em;
}

footer.phpのトップメニュー部分を消去すると、サイトマップへのリンクが設置されていたメニュー部分が消えるのですが、それを配置するためにコンテンツ全体に対してpadding-topを設定しているため、1番上にまだ空白が残っています。

賢威のヘッダー

トップメニューが消えてる

空白はそのまま

これは、#containerにpadding-top:25pxが設定されているためなので、先日作成したオリジナルのCSS「mystyle.css」に上書きするコードを記述します。

mystyle.css

#container {
    padding-top:0;
}

すると、このようにトップメニュー部分が余白を含めて根こそぎなくなります↓
完全になくなった

次は、実際にロゴや記事タイトル部分のスタイルを調整していきたいと思います。

ロゴ・背景・記事タイトルのスタイル定義

まず、header.phpを以下のように書き換えました。

header.php(賢威のデフォルト)

<!--▼ヘッダー-->
<div id="header">
<div id="header-in">
<div id="header-title">
<p class="header-logo"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></p>
<h1><?php h1_keni(); ?></h1>
</div>
<div id="header-text">
<p><?php echo the_excerpt_keni(); ?></p>
</div>
</div>
</div>
<!--▲ヘッダー-->

<?php if (the_keni('globalmenu') > -1) { ?>
<!--▼グローバルナビ-->
<div id="global-div">
<dl id="global-div-in">
<dt class="btn-gdiv">メニュー</dt>
<dd class="menu-wrap">
<ul id="menu" class="menu">
<?php echo get_globalmenu_keni(); ?>
</ul>
</dd>
</dl>
</div>
<!--▲グローバルナビ-->
<?php } ?>

下矢印

header.php(書き換え後)

<!--▼ヘッダー-->
<div id="header">
<div id="header-in">
<div id="header-title">
<p class="header-logo"><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('template_url'); ?>/images_my/logo.png" alt="inosh blog" /></a></p>
</div>
<h1><?php h1_keni(); ?></h1>
</div>
</div>
<!--▲ヘッダー-->

上記で変更したのは、以下の点です。

変更した点

  1. ロゴ(ブログタイトル)部分をテキストから画像に変更
  2. h1タグをクラス「header-logo」の外へ出す
  3. <div id=”header-text”>部分を削除(記事投稿時に抜粋を入力すると、ヘッダー右側に表示される部分)
  4. グローバルナビを丸ごと削除する

4.グローバルナビとは、賢威の設定次第でヘッダー下に表示させることが出来る、グローバルメニューのことです。

inosh blogではグローバルメニューを表示させないため、削除してしまいます。

そして、CSSには以下のように記述しました。

mystyle.css

#header {
    background:#222;
    border-bottom:2px solid #e41858;
    padding-top:22px;
}

#header-in {
    padding-top:0; 
}

#header #header-title {
    width:30%;
}

#header h1 {
    color:#222;
    background:#e9e9e9;
    display:inline-block;
    padding:1em;
    border-radius:8px;
    -webkit-border-radius:8px;
    -moz-border-radius:8px;
    position:relative;
}

#header h1:after {
    position:absolute;
    top:25px;
    left:-35px;
    z-index:2;
    border-left:35px solid transparent;
    border-bottom:15px solid #e9e9e9;
    content:"";
}

ヘッダー全体の背景・ボーダー・余白の設定、ロゴ部分の横幅の設定、記事タイトルを吹き出し風にする設定などなど。。。

ここまでで、ヘッダーはこのようになりました↓
ヘッダーカスタマイズの途中経過

次は、パンくずリストをカスタマイズしていきたいと思います。

パンくずリストのスタイル定義

まず、single.phpとarchive.phpを以下のように書き換えました。

single.php、archive.php(賢威のデフォルト)

<!--main-->
<div id="main">
<!--main-in-->
<div id="main-in">

<!--▼パン屑ナビ-->
<div id="breadcrumbs">
<ol>
<?php the_breadcrumbs(); ?>
</ol>
</div>
<!--▲パン屑ナビ-->

下矢印

single.php、archive.php(書き換え後)

<!--▼パン屑ナビ-->
<div id="breadcrumbs">
<ol>
<?php the_breadcrumbs(); ?>
</ol>
</div>
<!--▲パン屑ナビ-->

<!--main-->
<div id="main">
<!--main-in-->
<div id="main-in">

パンくずリストの記述部分を上に移動させるだけですね。
<div id=”main”>の外に出すのが目的です。

また、多少コードの内容が違うものの、page.phpも同じようにパンくずナビ部分を上に移動させました。

そして、CSSには以下のように記述しました。

mystyle.css

#breadcrumbs {
    width:100%;
    margin-bottom:0;
    background:#f5f5f5;
    border-bottom:1px solid #ddd;
    box-shadow:inset 0px 3px 6px rgba(230,230,230,1);
}

#breadcrumbs ol {
    width:1000px;
    margin:auto;
}

#breadcrumbs ol li.first {
    padding-left:18px;
    background:url(http://inosh.jp/wp-content/themes/keni61_wp_corp_140111/images_my/divi_home.png) left center no-repeat;
    background-size:14px 12px;
}

#breadcrumbs li a {
    background-image:url(http://inosh.jp/wp-content/themes/keni61_wp_corp_140111/images_my/divi_arrow.png);
    background-size:4px 7px;
}

これで、パンくずリストがヘッダー直下にくっつくような形となり、このような形になります↓
賢威のヘッダーカスタマイズ完成

次は、スマホでの表示を確認し、崩れている表示をスマホ向けに最適化します。

スマホ用にスタイルを調整(レスポンシブデザイン)

現状、スマホではこのような表示になっています↓
スマホで見た場合のヘッダー

これを、Media Queriesを利用してスクリーンサイズを指定し、スマホにだけ適用させるCSSを記述していきます。

Media Queriesって何?って方は、デバイスに合わせてCSSを振り分ける「Media Queries」が参考になると思います。

また、時間がある時にじっくり読もうと思っているため全部読めていないのですが、WebデザインレシピさんのCSS3 Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書きで、とても勉強になることを書かれていると思います。

今回、inosh blogのヘッダーのスタイル調整に関しては、以下のように記述しました。

mystyle.css

@media (max-width:640px) {
#header #header-title {
    width:40%;
    margin-bottom:14px;
}

#header h1 {
    font-size:1em;
    margin-left:5px;
    padding:0.5em;
    border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
}

#header h1:after {
    top:-14px;
    left:10px;
    border-left:10px solid #e9e9e9;
    border-top:14px solid transparent;
    border-bottom:none;
}
}

すると、このようになりました↓
スマホ用のヘッダーをカスタマイズ

むしろスマホの場合は必要ないかな~ってことで非表示にさせたいところだったのですが、さすがにh1タグを非表示にさせるのはアレなので、ひとまずこのような形にしておきたいと思います。

inosh blogにおける賢威のヘッダーのカスタマイズは、とりあえず以上です。

\(^o^)/ ぼっけぇシェア \(^o^)/

サブコンテンツ
ページトップへ戻る ページエンドへ進む