【AFFINGER】をベースにヘッダーをカスタマイズする

投稿日:2017年4月10日 更新日:

アフィンガーを自分でカスタムしていく過程で思ったことは、自分でカスタムしやすいようには作られていないということ。

これはHTMLやCSSを自由に弄り回せない人からすれば良いことなのだろうけれど、ある程度弄れると話は別になってきます。

とはいえ、様々な設定や便利機能搭載の状態で作ってくれてあるわけで、それならそれを使いつつ自分で作ればいいじゃない! という結論に至りました。

それも十分記事に出来ますし、思ったよりアフィンガーって自由度が少ないんだなーと感じた人でもカスタムできるように記載していけたらなと。

自分の勉強にもなりますし、見ている人がいるなら日々の更新状態を眺めていってもらうのも面白いかもしれません

ではいってみましょう。

スポンサーリンク

モバイルファーストを目標にCSSを組み直す。

アフィンガーは基本的に子テーマを編集してカスタマイズしていくのですが、子テーマと親テーマCSSの内容で絶対的に違う場所があります。

それは『ブレイクポイントの数』。

子テーマでは下記の3種類なのですが、

@media only screen and (max-width: 960x) 
@media only screen and (min-width: 600px) 
@media print, screen and (min-width: 960px) 

親テーマでは、

@media only screen and (max-width: 959px) 
@media only screen and (min-width: 600px) and (max-width: 959px) 
@media only screen and (min-width: 600px) 
@media print, screen and (min-width: 960px) 
@media only screen and (max-width: 599px) 

この五種類を使っています。
どのような説明書きをしてあるかはそれぞれ使用している方は確認してもらえばわかるでしょう。

なので、これを変更します。

@import url('../affinger4/style.css');
/*共通設定
----------------------------------------------------*/

/*-- ここまで --*/

/*media Queries スマートフォンのみ(600px)以下
---------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 599px) {

/*-- ここまで --*/
}

/*media Queries タブレットサイズ(600px~959px)のみで適応したいCSS -タブレットのみ
---------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 600px) and (max-width: 959px) {

/*-- ここまで --*/
}

/*media Queries PCサイズ(960px)以上で適応したいCSS - PCのみ
---------------------------------------------------------------------------------------------------*/
@media print, screen and (min-width: 960px) {

/*-- ここまで --*/
}

簡単ですね。
親テーマでも使っているブレイクポイントをそのまま使用しているので、変にバランスが崩れるようなことはないでしょう。

上から順番にカスタマイズしていく

ワードプレスのテーマを使っている上で、上から順番にカスタマイズとなると『ヘッダー』からカスタムしていくのが定石でしょう。

というわけで、ヘッダーからやっていきます。
※元のコードは掲載しませんので、AFFINGERを所有している人は元のファイルで確認してください。

HTMLとCSSのカスタマイズ

コードを書き換えていくにあたって、書き換える場所は “body” より下の位置になります。それより上の部分にはSEO対策関連であったりアナリティクスの解析やOGPが設定できる場所ですので、書き換えるとアフィンガーの機能で追加できなくなり面倒になります

【body】の書き換え

CSSの初期設定ではバックグラウンドのカラーコードが “#f2f2f2” にせっていされているので、とりあえず “#FFF” として背景を白色にします。

PHPのほうは “<body <?php body_class(); ?> >” となっており “functions” から定義を読み込んでいるのでそのままでOKです。

【header】の書き換え

次は “header” の書き換えなのですが、コードをよく見ると “header” までの間に何やら記述があります。

コメントに動画用IDと書いてあるPHPの記述は、恐らく背景に動画を使うときのためのものなので、使用しないなら消してしまっても問題ないでしょう。

もしもここを削除するなら、<div id="st-player">を閉じている場所を探して、そこも削除しなくてはいけません。正直、ファイルが多すぎて面倒なのでそのまま置いておきます。

そして次にある<div id="st-ami">なのですが、CSSを見ても一切設定されていないので “functions” に何か定義があるのかと調べてみましたが、何も出てきません。何なんでしょうかコレ?

触らぬ神に祟りなしと言いますし、わからないものはそのまま放置して次に進みます。

<div id="wrapper" class="<?php st_wrap_class(); ?>">こんな記述が出てきますが、これはサイト全体を囲む枠だと思って貰えればいいです。

これも親テーマのCSSを引き継げば問題ないので、そのまま放置します。

その次の<div id="wrapper-in">もCSSが定義されておらず、ここからが<div id="wrapper">の中身ですよ。という意味合いしか持っていないと思われるのでそのまま放置します。

ようやく “header” 部分までやってきました。

<header id="<?php st_head_class(); ?>">

この記述はカスタム項目でヘッダーをワイドにしているかどうか? という判定の記述も兼ねているので、変更する必要はないです。カスタム項目のチェック外してたら意味ないんですけどね(;´Д`)

次のこの表記は、

<div class="clearfix" id="headbox">

“#headbox” に “.clearfix” で定義されているIE用のzoomを適用しています。というボックスなので、“#headbox” が記載されている場所を探します。そして自分の好きなように定義し直しましょう。

とりあえず私は、こんな感じに定義してみました。

#headbox-bg{
   min-width: 320px;<!-- 最小値の設定(親テーマで最小320px;に設定されている) -->
   max-width: 1120px;<!-- コンテンツの幅に合わせて設定 -->
   margin:0 auto;
}
#headbox {
   padding: 0 10px;
   margin:0;
   text-align:left;
}

横幅いっぱいに背景画像などを載せたい場合は “#headbox-bg” を100%にしてやれば画面の幅いっぱいに表示できます。形崩れを防止するために色々と記述を追加しないといけませんけれど。

個人的にヘッダーの下にラインを引きたいのでボーダーで指定してもよいのですが、そこにコンテンツを入れることがあるかもしれないので新しいボックスとCSSを定義します。

<div class="w2-header-bottom"></div><!-- ヘッダー下ライン -->

.w2-header-bottom{
   width: 100%;
   height:20px;
   background: #4188C9;
}

クラスの名前は親定義にあるものとかぶらなければなんでもOKです挿入場所は “#headbox-bg” が閉じている場所の下なのですが、ヘッダーで見ると “</div><!-- /#headbox clearfix -->” となっているので、表記を間違っているのではないかなと。

スポンサーリンク

-AFFINGER

Copyright© ビブリオテーク , 2017 All Rights Reserved.