ワードプレスを使い続けて早○年。いろいろなテーマを使いながらカスタマイズしてみたり、自分で子テーマを作成してカスタマイズしてみたり。そんな私が先日たまたま見つけた素晴らしいテーマ「STINGER」。作成者は、ENJILOGのENJIさん。
・・・すごーい！使ってみたーい！
ところが私の運営しているサイトは情報系が多く、しかもブログ形式ではないので、ブロガー向けのワードプレスのテーマSTINGERは、使わないだろうなーと思っていました。
・・・でも、使ってみたいなー。
・・・使わせてもらうとしたら、ブロガーになる時かなー。
そんな訳で、このサイト「えけこのくるる」を始めたのは、STINGERを使ってみたかったから！と言っても過言ではありません。（あとは、ふなっしーとスープカレーねっ）
でもさー、ちょっと漢（おとこ）らしいのよー、STINGERはー。色使いとか、フォントとか、装飾とか。
じゃ、女子にも使えるようにカスタマイズ法を書いてみようかな？そしたら女子ブロガーさん達にも、普及するかもね～♪
女子ブロガー向けカスタマイズの手順その１
ヘッダーの画像を可愛いくしよう
ヘッダーの画像を変えるだけで、サイトの雰囲気はがらりと変わります。画像は1個でもいいけど、いくつか登録してランダムに表示させることもできます。アイキャッチ画像とも言います。
管理画面の「外観」→「ヘッダー」で、使いたい画像をアップロードするか、メディアライブラリーから選んで設定してください。ヘッダー画像の推奨の大きさは、986×150pxです。
デフォルト画像はこれ。
ヘッダー画像を可愛いイラストにしてみました。いいでしょー♪
注）後ほど、背景色（壁紙）を変更する予定なので、背景に色を入れてあります。
ヘッダー画像の高さを変えたい時は
画像の高さは、150pxより高くすることも低くすることもできます。高さを変更したい時は、管理画面の「外観」→「テーマの編集」のテンプレート内、テーマのための関数（functions.php）ファイルの114行目あたりに書いてある数値「150」をお好みの高さに変更してください。幅の変更はしない方がいいです。
//カスタムヘッダー
$args = array(
‘width’ => 986,
‘height’ => 150,
functions.phpは大切なファイルなので、間違えると画面が真っ白になったりします。念のため、バックアップを取ってから挑みましょう。数字の前後にある半角とコンマに気をつければ、きっと大丈夫！
ヘッダー画像にリンクを入れたい？
私が今まで作ってきたサイトは、タイトルの文字部分ではなく、ヘッダー部分の画像をクリックしてトップページに戻っていました。
ヘッダー画像をクリックしてサイトのトップページに戻りたい方のために、画像にサイトリンクを入れておくと、ちょっと便利で親切です。
管理画面の「外観」→「テーマの編集」でテンプレート内、ヘッダー（header.php）ファイルのカスタムヘッダー画像についての記述。
<?php if (is_home()) { ?>
<?php //カスタムヘッダー画像// ?>
<?php if(get_header_image()): ?>
<p id="headimg"><img src="<?php header_image(); ?>" alt="*" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" /></p>
<?php endif; ?>
<?php } else { ?>
<?php //カスタムヘッダー画像// ?>
<?php if(get_header_image()): ?>
<p id="headimg"><img src="<?php header_image(); ?>" alt="*" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" /></p>
<?php endif; ?>トップページの時に表示されるヘッダー画像と、それ以外のページの時に表示されるヘッダー画像について、指示をしています。この2カ所の記述に、それぞれリンクタグを追加します。場所を間違えないよう、以下のコードに貼り替えて下さい。
<?php if (is_home()) { ?>
<?php //カスタムヘッダー画像// ?>
<?php if(get_header_image()): ?>
<p id="headimg"><a href="<?php echo home_url(); ?>/"><img src="<?php header_image(); ?>" alt="*" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" /></a></p>
<?php endif; ?>
<?php } else { ?>
<?php //カスタムヘッダー画像// ?>
<?php if(get_header_image()): ?>
<p id="headimg"><a href="<?php echo home_url(); ?>/"><img src="<?php header_image(); ?>" alt="*" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" /></a></p>
<?php endif; ?>リンクタグを追加することで、ヘッダーにある画像をクリックすると、トップページに戻るようになります。
詳しく解説しますと、画像を表示させるタグ部分を
<img src="<?php header_image(); ?>" alt="*" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" />
サイトURLへリンクするタグで囲むと、トップページにリンクするようになります。
<a href="<?php echo home_url(); ?>/"><img src="<?php header_image(); ?>" alt="*" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" /></a>
ヘッダー画像にマウスをのせると色が薄くなり、さらにヘッダー画像をクリックしてサイトトップに移動する事が出来れば、成功です！
ヘッダー画像におすすめ
私がよく利用させてもらっている、無料で使える素敵な写真素材や、可愛いイラストのサイトをご紹介します。
サイトタイトルを可愛くしよう
さあ、スマホで表示確認をしてみましょう。あらー、せっかくヘッダー画像を可愛くしたのに、スマホで見た時は、ヘッダー画像が表示されないようです。普通にタイトルだけが表示されています。ここも可愛くしたいよね？（PCとスマホ、共通で表示される部分です）
スマホで表示した時も可愛いサイトにするために、2つの方法を考えました。1つ目はタイトルの前後にアイコンを入れる方法。2つ目は、タイトルをロゴ画像にしてしまう方法です。
タイトルの前後に画像を入れてみよう
タイトルの前にアイコンを入れました。
タイトルの後ろにアイコンを入れました。
画像の大きさは、35×35pxです。少し大きいかもしれません。30×30pxぐらいがぴったりかも？可愛いので、回してみました。
使いたいアイコンが決まったら、メディアライブラリーに新規追加（アップロード）して、画像のアドレスをコピーしておいて下さい。アイコン画像のアドレスは、管理画面の「メディア」→画像にマウスをのせて→「編集」を押すと、右側に画像のURLが表示されます。
では、入れる場所です。管理画面の「外観」→「テーマ編集」のテンプレート内、ヘッダー（header.php）ファイルの143行目ぐらいにタイトルを表示させるタグがあります。
<a href="<?php echo home_url(); ?>/"><?php bloginfo('name'); ?></a>このタグの前か後ろに、アイコン画像を表示させる以下のタグを入れます。思い切って前後、両方というのもいいかもしれませんね。
<img alt="" src="画像のURL" width="幅" height="高さ" />
タイトルとのバランスを見て、タグとタグの間に半角スペースを入れてもいいと思います。ちなみに私は、半角を入れる派です。
タイトルの文字の色を変えよう
サイトタイトルの文字の色を変更するのも、いいですよね。例えば、以下の設定をスタイルシート（style.css）に追記すると、サイトタイトルの文字の色が紫色になります。16進数で記入する場合は、purpleの代わりに、#800080としてください。
#container #header #header-in #h-l .sitename a {
color: purple;
}
色の名前や16進数は、WEB色味本 原色大辞典 -HTML Color Namesで、簡単に探せます。サイトのイメージカラーを決めておくと、見出しなどを装飾する際、色選びが楽になりますよ。
タイトル丸ごと画像にしよう
タイトル前後の画像も可愛いけど、好みのフォントを使ってタイトルロゴを作るのもおすすめです。イラストを入れてさらに可愛くすることもできます。
画像の幅は、一番狭いiPhoneの画面にあわせて280pxぐらいまでだと、はみ出さずに原寸で表示されます。（それ以上、横幅が大きい画像を使いたい場合は、次の項目を参考にして下さい。）高さは、お好みで。SEOに大事なので、画像のaltにはサイトタイトルを入れてください。
管理画面の「外観」→「テーマ編集」のテンプレート内、ヘッダー（header.php）ファイルの143行目ぐらいにタイトルを表示させるタグがあります。
<a href="<?php echo home_url(); ?>/"><?php bloginfo('name'); ?></a>これを次のように変更します。
<a href="<?php echo home_url(); ?>/"><img alt="サイトタイトル" src="画像のURL" width="幅" height="高さ" /></a>
タイトル画像を最大幅で表示させよう
280pxよりも横幅のあるタイトル画像を使っても、スマホでは画面内に収まるようにできます。以下の指定をスマホ用のスタイルシート（smart.css）に追記してください。スマホの画面幅に合わせて、はみ出さないよう縮小表示されます。
.sitename img {
height: auto;
max-width: 100% !important;
width: 100%;
}
タイトル画像を最大幅にした時のPC表示例。
スマホで見てみると、こんな感じで表示されます。
PCでスマホの表示確認をする方法
STINGERの場合、PCやタブレットで表示されているヘッダー画像が、スマホでは表示されません。STINGERは、レスポンシブデザインのテーマではなく、PC＆タブレット用のスタイルシート（style.css）と、スマホ用のスタイルシート（smart.css）の2種類で、表示を切り替えるタイプのテーマです。
スマホ経由のアクセスが大半となっている昨今、スマホで自分のサイトがどう見えているか、表示確認も大切ですね。
スマホを持っていない方は、Google Chrome（グーグルクローム）のデベロッパーツールを使うと、UA（ユーザーエージェント）を切り替えて、サイトの表示確認をすることができます。
スマホを持っている方も、iPhone、android、iPadなどで、自分のサイトがどのように表示されているか確認してみてください。
1）Google Chromeで、見たいページを開く
2）右上の設定ボタンから、ツール→デベロッパーツールを開く
または、マウスを右クリックして「要素を検証」を押す
または、キーボードの「F12」ボタンを押す
3）画面右下の歯車アイコンを押して、Settings画面を開く
4）Overrides→User Agentにチェックを入れ、表示確認してください。
UA（User Agent）の切り替え時には、画面のリロードが必要です。（F5ボタン押すといいよ♪）
今回のまとめと次回のお知らせ
はーい、お疲れさまでしたー。ヘッダー部分が可愛くなりましたね！
次回は、フォントと背景色の変更、記事の見出し部分の装飾などについて書く予定です。お楽しみにー。