スマホサイト制作日誌（終）WPTouchのヘッダーを任意の画像にする

Tweet

前の記事：スマホサイト制作日誌（６）カテゴリメニューを見やすくする

とうとう、というかようやくというか、今回の「家電女子.net」カスタマイズは、「ヘッダーをオリジナルロゴにする」で一区切りとします。

ここまでは、文字入力さえできればなんとかなるカスタマイズでしたが、最後は「画像制作」。
本格的な画像加工ソフトはあるにこしたことはありませんが、私は今回Windows標準のペイントで通しましたよ！
（というか、PCを新しくしてからまだソフトインストールしてないだけというか・・・ｗｗ）

凝ったらキリがありませんが、オリジナルロゴがあるとサイトの差別化がぐんとはっきりするので、簡単なものから作ることをオススメします。

タイトルロゴとメニューボタンを用意する

まずは、タイトルロゴとメニューボタンを準備します。
スマートフォンの場合、レイアウト崩れを防ぐためには横幅計は320px（機種により～340pxまで可能）以内。
私は、WPTouchのコードを極力いじりたくなかったので、縦幅はヘッダーの初期設定45pxを生かしてそのままに、横幅は「PCのタイトルロゴを縮小しておさまる」180px、「メニューボタンはタップしやすい」90pxで作りました。

●タイトルロゴ（180×45）

●メニューボタン（90×90）

メニューボタンは、メニューを閉じる時の画像も並べて作ってるので縦45px×2=90pxです。
この二つをwordpressフォルダの中の任意の場所にアップロードします。

タイトルロゴを配置する

ここでは、画像「titlelog.png」を、「jkaden」フォルダ内の「images」フォルダに保存しました。
style.css の下記の場所を書き換えます
（※入力ミスで表示が崩れる場合があるので、編集前に必ずバックアップを取ることをお勧めします。）

#headerbar-title a {
    letter-spacing: -1px;
    position: relative;
    display: block;
    width: 180px; /*画像の幅*/
    height: 45px; /*画像の高さ*/
    text-indent: -9999px;
    overflow: hidden;
    background: url(images/titlelogo.png) no-repeat 0 0; 
}

CSSで直さなくても、header.phpでサイトタイトルを呼び出すタグを削除し、直接imgタグで配置してもいいんですが、タイトルを削除するとSEO的に弱くなるので、「text-indent: -9999px;」で、画面の彼方に飛ばしました(笑)。

メニューボタンを配置する

画像「menu.png」も、「jkaden」フォルダ内の「images」フォルダに保存しました。
style.css の下記の場所を書き換えます。
（※入力ミスで表示が崩れる場合があるので、編集前に必ずバックアップを取ることをお勧めします。）

#headerbar-menu a {
    height: 45px;
    display: block;
    background: url(images/menu.png) no-repeat 0 0; 
    width: 90px;
    margin: 0;
    padding: 0;
}

メニューボタンの縦幅を45px以外に設定した場合は、下記の箇所も編集します。
（例：縦60pxで上下並びの120pxの画像を作成した場合）

#headerbar-menu .open {
	background-position: 0 -60px;　/*←縦幅に合わせ変更*/
}

『メニュー押したときには、60px下の部分を使ってね♪』というおまじないです。

header.php からロゴアイコン表記を削除する

このままだと、管理画面で設定したアイコンが表示されたままなので、header.php で下記のタグを外すか、コメントアウトします。
（※入力ミスで表示が崩れる場合があるので、編集前に必ずバックアップを取ることをお勧めします。）

<img id="logo-icon" src="<?php echo bnc_get_title_image(); ?>" alt="<?php $str = bnc_get_header_title(); echo stripslashes($str); ?>" />

タイトル画像を作成ときに、このアイコンの表示を生かす配置のデザインにすれば、コードをいじる必要はありません。
その他、画像の位置や背景色などの微調整は、適宜CSSを修正します。

スマートフォンサイト最適化の道はまだまだ続く・・・

WPTouchカスタマイズ日記は、一応ここで完成です。

カスタマイズ前とカスタマイズ後のビフォーアフターはこちら。

ちょっとはイメージが変わったでしょうか？
まだまだ改良は永久に続きますけどねぇ・・・・。
今回、「リンクシェアスマートフォンメディア研究員」をさせていただき、「スマートフォン対応サイトって何だろう？」と改めて考えさせられ、実際にスマートフォン最適化に取り組んでみて、PCよりさらに、いやもっと緻密なユーザーへの配慮が必要なんだなぁと痛感しました。

まずは、「自分が見やすく・使いやすいこと」
そして、「ユーザーに快適にサイト閲覧してもらえること」
さらに、「作り手として更新しやすいこと」

私も、まだまだプログラミングやコーディングは素人で、今回死ぬほどググりました！
「WPTouch」だけでなく、まだまだスマホ最適化の便利ツールはたくさんあります。
日々勉強です。できることからコツコツと。
この記事も、多少なりとも誰かの参考になれば幸いです。
ただし、編集は自己責任で(笑)。

【過去記事】
・スマホサイト制作日誌（６）カテゴリメニューを見やすくする
・スマホサイト制作日誌（５）WPTouchテーマのTOP画面に任意のコンテンツを配置する
・スマホサイト制作日誌（４）WPTouchの記事リストのデザインを変更する
・スマホサイト制作日誌（３）WPTouchのオリジナルテーマを作る
・スマホサイト制作日誌（２）WPTouchカスタマイズ＜管理画面編＞
・スマホサイト制作日誌（１）スマートフォン対応って何？

Tweet