STINGER3のヘッダー（header.php）をカスタマイズ

シスアナコム社長の杉山です。

いよいよ今回からSTINGER3の見た目をカスタマイズしていきます。

対象は「header.php」で表示される部分。

ざっと見てみると、このファイルではおよそ以下の事をやっています。

• タイトルの設定
• ファビコンの設定
• スマホ用cssへの切り替え
• ウェブクリップの設定
• スマホ用メニューの表示
• ヘッダー部分の表示
• ＰＣ用メニューの表示

この中から、ファビコンの変更、ウェブクリップの変更、ヘッダー部分の変更をやります。

まずは準備から

子テーマにはまだ「header.php」をコピーしてないので、これまで通り、STINGER3のフォルダから子テーマのフォルダへコピーします。

シンボル画像ファイルを作る

シンボル画像としての少し大きめの画像を用意。

大きさ１４４×１４４、画像形式は「png」で作ります。

作ったのはこれ→

ファビコンは小さいので文字の場合は大きめに。

ファイル名は「webclip.png」としました。

このファイルをファビコンとウェブクリップの両方で使います。

このファイルの作成には、ホームページビルダーに付属しているウェブアートデザイナーを使いました。

アイコンファイルへ変換する

このサイトを使って「png」形式の画像ファイルを「ico」形式のアイコンファイルへ変換しました。

http://ao-system.net/favicon/

アイコンファイルに３つのサイズがあるのは、ブラウザで表示する時、デスクトップ上のショートカットで表示する時、エクスプローラでアイコン表示にした時それぞれに、異なるサイズが使われるからです。

１つのファイル内に３つの画像ファイルが格納されますが、別々の画像にする意味は特にないので、同じファイルを指定。

「favicon.ico」という名前でアイコンファイルを作ることができます。

作成し終わったアイコンファイル（favicon.ico）と最初に作成した画像ファイル（webclip.png）の両方を、ワードプレスの管理メニュー→メディアからアップロードします。

これで準備完了。

ファビコンを変更する

ファビコンはウェブサイト用のアイコン画像のこと。

ウェブサイトのシンボルマークです。

ブラウザでウェブサイトを表示すると、タブの左端に小さく表示されているアイコンのことです。

ブックマークに登録したときにも表示されます。

標準ではこんなアイコン→

ちょっと見にくいですが、「STINGER3」と書かれています。

ファビコンを変更するために「header.php」を修正する部分はここ。

<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/images/rogo.ico" />

<!---css切り替え--->

ここを以下のように修正します。

<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<link rel="shortcut icon" href="ファイルのURL" />

<!---css切り替え--->

「ファイルのURL」は、ワードプレスの管理メニュー→メディアでアップロードしたアイコンファイルをクリックして編集モードにしたときに表示されるので、これをコピペします。

修正したら「header.php」を保存。

これでブラウザでウェブサイトを表示させると、新しいファビコンが表示されるはずです。

ウェブクリップの変更

ファビコンと同様にウェブクリップも変更します。

ウェブクリップは、iPhoneなどのブラウザ「Safari」で画面上にウェブサイトのショートカットを作る際に画面に表示されるアイコン画像です。

最初に作成した「webclip.png」というファイルを指定します。

ウェブクリップを変更するために、「header.php」を修正する部分はここ。

<!---css切り替え--->
<?php if(is_mobile()) { ?>
<link rel="apple-touch-icon-precomposed" href="<?php echo get_template_directory_uri(); ?>/images/apple-touch-icon-precomposed.png" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">

ここを以下のように修正します。

<!---css切り替え--->
<?php if(is_mobile()) { ?>
<link rel="apple-touch-icon-precomposed" href="ファイルのURL" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">

ファビコンを修正した場合と同じ。

iPhoneなどのスマホを使って、ウェブサイトのショートカットを作ると、新しいウェブクリップが表示されるはずです。

ヘッダー部分の表示を変更する

最後にヘッダー部分の表示を変更します。

参考にしたサイトはこちら（リンク集に追加します）

えけこのくるる→女子ブロガー向けにＷＰテーマSTINGER3をカスタマイズしよう

女子ブロガーではありませんが、参考にさせて頂きました。

ありがとうございます。

ヘッダー画像について

まずはヘッダー画像を作成。

標準の画像と同じように９８６×１５０ピクセルで作成。

適当にフリーで使える画像をかき集めて、ウェブアートデザイナーを使って組み合わせて作りました。

これをファビコンやウェブクリップで使ったファイルと同様に、アップロードしておきます。

ヘッダー画像をタイトル文字代わりに表示

ページの先頭部分にサイト名を表示させる代わりに、この画像を表示させてみます。

「header.php」を修正する部分はここ。

      <p class="sitename"><a href="<?php echo home_url(); ?>/">
        <?php bloginfo('name'); ?>
        </a></p>

ここを以下のように修正します。

      <p class="sitename"><a href="<?php echo home_url(); ?>/">
        <img alt="<?php bloginfo('name'); ?>" src="ファイルのURL" width="986" height="150" />
        </a></p>

これでサイト名の代わりにヘッダー画像がリンク付きで表示されます。

スマホ用の修正

ただし、これをスマホで見ると、画像が大きすぎて画面からはみ出しています。

これを修正するためには、「header.php」ではなく「smart.css」というスマホ用スタイルシートを修正する必要があります。

まだ、このファイルは子テーマにコピーしてないので、「header.php」と同様に子テーマにコピーします。

「smart.css」ファイルの最後に、以下のスタイルを追加します。

.sitename img {
  height: auto;
  max-width: 100% !important;
}

これで大丈夫なはず．．．なのに何の変化もなし。

なんでだろ。

と思ったら、「header.php」に、スマホの場合に読み込む「smart.css」ファイルを指定している部分がありました。

つまり「smart.css」は子テーマのファイルが優先されるのではないということ。

明示的に読み込むファイルを指定しなければダメ。

「header.php」を修正する部分はここ。

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/smart.css" type="text/css" media="all" />

ここを以下のように修正します。

<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/smart.css" type="text/css" media="all" />

テンプレートディレクトリにある「smart.css」ファイルではなく、子テーマのディレクトリにある「smart.css」ファイルを読み込むようにします。

これでスマホでもヘッダー画像が画面に収まるように表示されます。

これで完成かと思ったのですが、スマホの表示で一部画像が表示されてません。

子テーマの「smart.css」ファイルを使うようになったため、このファイルと同じフォルダに画像ファイルが存在しないからです。

STINGER3のフォルダに存在する「images」フォルダを丸ごと子テーマのフォルダにコピーします。

これでやっと完成です！