当サイト「n2apps.jp」のWordPressテーマを「STINGER5」に変更してみました。
前に利用していた「STINGER3」の良いところは引き継ぎ、改めるところは改善/強化という正統進化を遂げているWordPressテーマだと思います。
「STINGER5」はレスポンシブデザインということで、スマホ用のスタイルシートを別に用意しなくても良いのが地味にラクですね。
まぁ、そのまま使うのは味気ない(というか個性が無い)と思うんです。
今回も、一部カスタマイズして利用していますので、その内容を少しまとめておきたいと思います。
大したことはしていませんが、参考になるところがあれば幸いです。
「STINGER5」を個性的にカスタマイズ
まずは、テーマのカスタマイズ機能を利用
テーマが用意しているカスタマイズ機能を利用して、基本的な設定を行います。
まずは、テーマ変更前と同じような感じになるよう設定しました。
- ヘッダー画像の非表示
- 背景画像の設定
- ナビゲーションバーにメニューを設定
ウィジェットなどは「STINGER3」から引き継がれているので、特に変更はしませんでした。
基本色（キーカラー）の設定
やはり、サイトに使う色を変えておきたいですね。
色というのは、サイトの個性を出しやすい部分でもあります。
しかも、今回の「STINGER5」では「基本色（キーカラー）」の設定が追加されていて、以下の4つの色が設定できるようになっています。
- グループ1（ブログタイトル色など）
- グループ2（吹き出し背景など）
- 吹き出し内の文字（H2）
- グループ3（淡い色推奨）
ただ「STINGER5」のデフォルト配色は好きなので、気になる部分だけ変更しました。
グループ2（吹き出し背景など）
H2タグで表示される「吹き出し」や、サイドバーにある「購読する」、コメント欄の「コメントを送信」の色が変わります。
今回は「#3c87a8」としてみました。（Webセーフカラーではないのですが）
デフォルトの色では、サイドバーの「購読する」という文字が白で読めないような配色になっているので、濃い目の色に変更したいところです。
おそらく「購読する」という文字が白固定になっているのは、「STINGER5」の設定ミスではないでしょうか。
（次の設定「吹き出し内の文字（H2）」に連動するようにした方が良いですね。）
吹き出し内の文字（H2）
H2タグの文字色を設定します。
これは、先ほどの「グループ2（吹き出し背景など）」で設定した背景色に対する文字色にあたります。
「グループ2（吹き出し背景など）」に濃い色を設定した場合は、薄い色を設定してコントラストを付けた方が良いと思います。
グループ3（淡い色推奨）
この色を変更すると、記事タイトル下の「公開日」「更新日」が表示される部分の背景色や、サイドバーの検索フォームの色が変更されます。
検索フォームの色だけを変更したかったので、この設定は変更しませんでした。
気になるところは、スタイルシートを個別に設定
基本色（キーカラー）を変更しましたが、気になるところが2か所ありました。
1つは、記事タイトル下の「公開日」「更新日」が表示される部分上下にあるラインの色が「グループ2（吹き出し背景など）」に連動していること。
もう1つは、「グループ3（淡い色推奨）」を変更せずに、サイドバーにある検索フォームの背景色を変えたいことです。
それぞれ「CSS編集」で個別に変更しています。（function.phpを書き換える方法もありますが）
記事タイトル下の「公開日」「更新日」が表示される部分上下にあるラインの色を変更する
カラー設定「グループ2（吹き出し背景など）」を「青緑（#3c87a8）」に変更しましたが、記事タイトル下の公開日などが表示される部分のラインには色を入れたくない（黒やグレーなどの無彩色を使いたい）と思いましたので、以下のCSSを追加しました。
.blogbox {
border-top-color: #CCCCCC;
border-bottom-color: #CCCCCC;
}
上端と下端のボーダー色を「薄いグレー（#CCCCCC）」に変更しています。
これにより、スタイルシートが上書きされるので、「グループ2（吹き出し背景など）」に連動して変更されなくなります。
検索フォームの背景色を変更する
カラー設定「グループ3（淡い色推奨）」を変更せずに、サイドバーにある検索フォームの背景色を変えたいので、以下のCSSを追加します。
#s {
background-color: #666666;
}
#searchsubmit {
background-color: #666666;
}
それぞれ、検索フォームと検索ボタンの背景色を「濃いグレー（#666666）」に変更しています。
アドセンス（広告）の表示位置を変更しよう
私の場合は、記事中にmoreタグを入れることで、記事本文の途中にアドセンスの広告を入れるようにしています。
そのため、広告は基本3つまでというグーグル様とのお約束に背くことになるため、1つ減らす必要があります。
広告を1つ減らす、「どこを減らすか？」それが問題だ
PC表示とスマホ表示では広告を表示する箇所が異なるため、それぞれカスタマイズします。
PC表示では、記事本文下のアドセンスを1つに！
「STINGER5」では、記事本文の下に2つ、サイドバーの上部に1つ、表示されるようになっています。
サイドバーの上部は「絶対に外せない場所」なので、必然的に記事本文の下を1つに減らすことになります。
変更するのは、single.php 52行目から。
<div style="padding:20px 0px;">
<?php get_template_part('ad'); //アドセンス読み込み ?>
<?php if(is_mobile()) { //スマホの場合 ?>
<?php } else { //PCの場合 ?>
<div class="smanone" style="padding-top:10px;">
<?php get_template_part('ad'); //アドセンス読み込み ?>
</div>
<?php } ?>
</div>
これを次のように変更します。
<div style="padding:20px 0px;">
<?php get_template_part('ad'); //アドセンス読み込み ?>
</div>
もともとPCの場合にのみ表示するようになっているので、スマホ表示には影響はでません。
スマホ表示では、一番最後に表示されるアドセンスを削る！
記事本文の下に1つ、サイドバーの上部に1つ、NEW ENTRYとスクロール広告の間に1つ表示されます。
スマホの場合は、サイドバーはもはや「サイド」ではなく記事の下に続けて表示されるので、記事本文の下が「外せない場所」になってきます。
また、サイドバーにある広告のどちらを減らすかという点においては、スマホではスクロール操作を行うため、より上に配置した方が多くの人の目に留まりやすいということで、NEW ENTRYとスクロール広告の間の広告をなくすことにしました。
変更するのは、sidebar.php 21行目から。
<!-- スマホだけのアドセンス -->
<?php if (is_404()) { ?>
<?php } else { ?>
<?php if(is_mobile()) { //スマホの場合 ?>
<div style="padding-top:10px;">
<?php get_template_part('ad'); //アドセンス読み込み ?>
</div>
<?php } else { //PCの場合 ?>
<?php } ?>
<?php } ?>
<!-- /スマホだけのアドセンス -->
この部分を削除してしまうか、コメントのみ残して以下のようにすればOKです。
<!-- スマホだけのアドセンス --> <!-- /スマホだけのアドセンス -->
こちらも、もともとスマホだけで表示される部分なので、PC表示には影響はでません。
また、「STINGER3」を利用していたときはスマートフォン向けには、ブログタイトルのすぐ下に「ビッグモバイルバナー」を配置していましたが、あまり収益にはつながらないことが判明したので「STINGER5」では無くすことにしました。
意外と忘れやすいカスタマイズ
必ず、ファビコンを変更するべし！
ファビコン（favicon）というのは、ブックマークなどに追加した場合に表示される「サイトのアイコン画像」のことです。
「STINGER5」の「images」フォルダにある「logo.ico」がそれです。（黒地に白文字で「5」と書かれたやつ）
また、iPhoneなどでホーム画面に保存した際のアイコン（apple-touch-icon-precomposed.png）も用意されていますので、これも変更しておきます。
まとめ
今回「STINGER5」にテーマを切り替えて、色やデザイン、広告の表示箇所など、基本的なカスタマイズを行いました。
上に書いた以外の細かい変更（スタイルシートなど）もありますが、「STINGER3」に比べると変更した箇所が圧倒的に少ないです。
たぶん、「STINGER5」で採用されているデザインと、自分が「いいな」と思っているテイストが合っているってことなのかなと思います。
カスタマイズしすぎてしまうと、どんどん「STINGER5」では無くなっていってしまうので、テーマの構造に係る変更はできるだけ控えて、いかに個性を出していくかというところでしょうか。
コメント