ダウンロードはこちらからできます。
STINGER3公式サイト
カスタム内容
今のところカスタムしたのはタイトルロゴ、メニューバー、続きを読むの背景、検索ボックスの色と枠、ファビコンです。タイトルをテキストから画像に変更
ここで説明しようと思ったのだが、自分でやった方法と違うやり方が公式サイトに詳しく書かれていたので、今回は省略します。メニューバーをデコレーション
タイトルロゴの下のメニューバーを少し大きくして、マウスオーバーでアンダーライン？が出るようにしました。style.css内のナビゲーションを探して変更しました。
CSSへの記述は以下の通りです。
/*---------------------
ナビゲーション
-----------------------*/
#navi-in li {
position: relative;
float: left;
font-size: 18px;
display: block;
border-left-width: 1px;
border-left-style: groove;
border-left-color: #f3f3f3;
margin:-25px 0px 0px 0px;
text-align: center;
}
#navi-in li li {
float: left;
font-size: 18px;
display: block;
border: none;
margin:-25px 0px 0px 0px;
width: 150px;
height: 30px;
}
#navi-in li a {
float: left;
color: #333;
text-decoration: none;
display: block;
width: 150px;
height: 30px;
}
.menu-navigation-container {
overflow: hidden;
}
#navi-in li a:hover {
border-bottom: 3px solid #ff0000;
text-decoration: none;
display: block;
margin: 0px 0px -3px 0px;
まず、フォントサイズを13pxから18pxに変更して、区切りの線をくぼんだ線にして色を変更、横幅と高さを固定、マウスオーバーで3pxの赤いラインが出るようにした。このときに、marginで同じ分だけマイナスにすることにより表示がおかしくならないようにする。続きを読むの枠を角丸に
元が背景色だけ指定されてたので、枠線を加えて角を丸くしました。style.cssのmoreとmottoの部分に下記のcssを追加した。
background:#f3f3f3; /*背景色 */ border-radius: 6px; /*角の丸み */ border: 1px solid #ccc; /*枠の太さと色 */これが記事本文の「続きを読む」（more）の記述で下がサイドバーの「もっと読む」の記述。
border-radius: 6px; /*角の丸み */ border: 1px solid #ccc; /*枠の太さと色 */それぞれ枠線を追加して、角に丸みをもたせました。
検索ボックスの色の変更
検索ボックスの背景を白に変更して、枠線を追加しました。検索フォームを探して、#sと#searchsubmitの部分に追加したのは以下の通り。
border: 1px solid #ccc; /*枠の太さと色 */さらに、background-colorを#FFFに変更しました。
今回のカスタムは、子テーマを作って変更しました。
他にもちょっとしたところを変更していますが、長くなってしまったので今回は省力します。
WordPressでファビコンを変更する方法
ファビコンてなに？という方は、下の画像で確認してください。通常ですとブラウザ画面上の3箇所に表示されます。
URLの隣や、お気に入りの中のブックマークアイコン、ブラウザのタブに表示されます。
まずは、ファビコン用の素材を作るためにペイントツールを起動します。
ファビコン用素材の作り方 win編
ペイントツールを使ったことのない方は、スタートの検索から「ペイント」を入力すると出てきます。ファビコンにするサイズは16px、32px、48pxなので最初に大きいサイズを作っておきます。最初に作る画像が大きすぎると、縮小したときにぐちゃっとつぶれた感じになるので、程ほどの大きさで作るといい感じになります。
画像が出来たらそれぞれのサイズに縮小します。このときの拡張子をpngかgifかjpgのどれかで保存しておきます。
今度はこの出来た画像を、ファビコンの拡張子（.ico）に変更する必要があります。
画像をアップロードすると自動で変更してくれるサイトがあるのでそちらを使わせてもらいます。
ファビコン.icoを作ろう！（http://ao-system.net/favicon/）
「ファイルを選択」して「favicon.ico作成」をクリックしたらダウンロードして完了です。
この出来たファビコンをWordPressにアップロードします。
STINGER3でファビコンを簡単に変更する方法
念のためバックアップはとっておいてください。STINGER3の場合3分もかからずに変更できます。まずは、上で保存したファビコンの名前をrogoに変更しておきます。次に、FTPでthemesフォルダにあるstinger3ver***フォルダ内のimagesフォルダへrogoを上書き保存したら完了です。（***には自分で使ってるバージョンの数字を入力してください。）
これで、3箇所同時に変更されます。
ファビコンはタブをたくさん開いているときや、ブックマークにたくさん入れているときに、パッと見で自分のサイトとわかってもらえるので、出来るだけ設置したほうが良いでしょう。
STINGER3でGoogleAdsenseを使うときに気になったこと
追従するSNSボタンがAdSense広告にかぶる
まずSTINGER3を使っている方の大半は、ウィジェットの「Googleアドセンス用」に、広告のコードを貼り付けてますよね。そして、追従するSNSボタンをそのまま表示しているとおもうのですが、ここで下の画像を見てもらいたい。
青い部分をレクタングル（大）と同じサイズで作ったのですが、記事を読んで下にスクロールしていくと、追従するSNSボタンが広告におもいっきりかぶってるけど大丈夫なのでしょうか？
AdSenseプログラムポリシーの広告のプレースメントという部分を読んでみるとこう書かれていた。
Google 広告、検索ボックス、検索結果については、次の行為が禁止されています。
ページ内のさまざまな要素によって隠すなど、わかりにくくすること。
AdSense プログラム ポリシー
詳しくは自分で確認してもらいたいが、ドロップダウン式のメニューバーでAdSense広告が隠れるとアウトという記事をどこかで目にしたので、これも同じ理由でダメなのではないかと思っているのですが、どうなんですかね。
これで間違って広告をクリックする人はいないとは思ったのですが、心配だったので追従するSNSボタンは削除することにしました。
追従するSNSボタンの削除方法はSTINGER3公式サイトを参考してください。
また、広告の位置を変更した際の「PAGE TOP」もかぶる可能性があります。
ページトップボタンがAdSense広告にかぶる
これは、ウィジェットの「Googleアドセンス用」に設置するのではなく、「サイドバー1」に設置した場合の話です。STINGER3は検索ボックスや新着記事といった必要な機能がデフォルトでついています。これにより、「サイドバー1」にAdSenseを設置すると自動的にサイドバーの下の方に追いやられてしまいす。
そうすると、画面をスクロールしていくと画面右下に出る「PAGE TOP」ボタンが広告にかぶってしまいます。
広告に対して「PAGE TOP」ボタンは小さいですが、どれくらい隠れるとダメですよという記述が見つけられなかったので、自分で判断するのは危険だと思いこちらも削除することにしました。
通常通り「Googleアドセンス用」に設置していれば何の問題もありません。
ページトップボタンを削除する方法
非常に簡単です。footer.phpの
<!-- ページトップへ戻る --> <div id="page-top"><a href="#wrapper">PAGE TOP ↑</a></div> <!-- ページトップへ戻る 終わり -->の部分を削除するだけです。
スポンサーリンク
