ついにレスポンシブとなった大人気Wordpressテーマ「STINGER5」
SEOの強さとカスタマイズ性の高さがその人気の理由ですね。
多くの方が使われているのでカスタマイズ記事が多いのもその強み。
今回はStinger5のカスタマイズ記事を部分ごとにまとめてみました。きっとあなたのやりたかったモノも見つかりますよ。
※Stinger3のまとめはこちらのサイトをご覧ください。
(ここを見ておけば検索不要！Stingerカスタマイズ辞典)
スポンサーリンク
STINGER5の構造理解
STINGER5のid,class構造
テーマの構造がわかっているのといないのとでは、カスタマイズの自由度、楽しさが大きく変わってきます。ざっくりとでもclass,id構造は把握しておきましょう。
Stinger5カスタマイズ！最新版class,id構造早見表 -トップページ編-
ディスプレイサイズによるcss適用範囲の違い
STINGER5はレスポンシブデザインのため、ディスプレイサイズによって読み込む「style.css」の範囲が変わってきます。うっかり間違った箇所にコードを追加してしまうとレスポンシブが崩れることにもなりかねません。適用範囲は正確に知っておきましょう。
Stinger5カスタマイズ！どこがどのデバイスに対応？「style.css」徹底分析！
サイト全体の見た目変更
サイト全体、記事部分の横幅を変更する
記事部分の横幅の変え方。ダブルレクタングルを設置する場合には必須となります。
Stinger5カスタマイズ！記事部分の幅を自由に変える方法。うっかりするとレスポンシブが崩れるよ！
サイトのファビコンを変更する
ブラウザで表示されるファビコン(タブに表示されるアイコン)を変更する方法。
header.php を子テーマに作ってファビコンをオリジナル画像に設定する
ヘッダー編
ブログタイトルをロゴ画像に入れ替える
ブログのタイトル欄をテキストからロゴ画像に変更する方法。サイトの顔となる部分なのでよく考えて決めましょう。
[Stinger5]ブログタイトルをロゴ画像に置き換えるテクニック
トップページ編
サムネイルサイズを変更する
記事一覧のサムネイルサイズを変更する方法。「itiran.php」の他に「style.css」の変更も必要なので注意が必要です。
Stinger5カスタマイズ！サムネイル画像を好きな大きさに変更する方法
トップページから記事一覧を消し、ひとつの記事を表示する
トップページを記事一覧でなく、最新記事の全文にする方法。
Stinger5のトップページに投稿の全文を1件だけ表示する方法
記事一覧を写真付きのカード型2カラムにする
記事一覧を横並びの2カラム方式に変更する方法。サムネイルを活かしたデザインになっています。
Stinger5カスタマイズ！記事一覧をオシャレな写真付き2カラムにする方法、もちろんレスポンシブ対応だよ
ナビメニュー編
スマホでトグルメニューを実装する
タップすると広がるトグルメニューを実装する方法。下に伸びるタイプのメニューです。
スマホで横からにゅっと出るメニューを実装する
横からにゅっと出てくるメニューを実装する方法。jQueryプラグイン「Sidr」を使います。
JQuery『Sidr』をWordPressのカスタムメニューに対応させ設置する方法
デフォルトの見た目のままドロップダウンメニューを実装する
STINGERデフォルトの見た目を崩さずドロップダウンメニューを追加する方法。スマホ、PCともに対応しています。
スティンガーをスマホ対応ドロップダウンメニューにカスタマイズする方法（ソースコードあり）
記事ページ編
記事下関連記事を横並びにする
記事下の関連記事を横並び表示にする方法。記事を多く表示してもスッキリとした印象になります。
Stinger5カスタマイズ；関連記事を横並びに変えてみた。
サイドバー編
サイドバーを左側に移動
サイドバーと記事部分の配置を入れ替えサイドバーを左側に設置する方法。人間には左側を優先的に見る性質があるそうです。
Stinger5カスタマイズ！左右を逆転！サイドバーと記事本文の表示位置を入れ替える方法
サイドバーを削除
サイドバーを削除して1カラムに変更する方法。記事を大きく見せたい方にどうぞ。
Stinger5カスタマイズ！サイドバーを削除、すっきり1カラムにする方法。特定ページだけなしにもできるよ
SNSのフォローボタンを設置する
Twitterやfacebookのフォローボタンを設置する方法。今はSNSも大切な集客源。フォロー、拡散ボタンは設置しておきましょう。
【Facebook】
Facebook のファンページを作成してプラグインの Like Box を設置しよう
【Twitter】
Twitter のフォローボタンとタイムラインプラグインを設置しよう
NEW POSTに背景色をつける
NEW POSTの各記事に背景色をつけて個別に別れた表示にする方法。シャドウをつければカードのような見た目にもできます。
【STINGER5】NEW POSTの一つ一つの背景色を変更する方法
フッター編
フッターを3カラムに変更する
フッター部分を3カラムにする方法。管理画面の「ウィジェット」から表示内容を管理できる利便性の高いカスタマイズです。
Stinger5カスタマイズ；レスポンシブデザインに合せた変更にチャレンジ！フッターカスタマイズのついでにね。
スマホで画面下部に固定フッターをつける
スマホから見たときに画面下部に固定フッターを付ける方法。「前の記事」「次の記事」「ホーム」「ページトップ」をページごとに出し分けられます。
【STINGER5】スクロールしてもフッターで固定するメニューを設置してみたよ！
スマホで横からにゅっと出てくるメニューを実装する
ボタンタップで横からにゅっと出てくるメニューを実装する方法。ぬるぬる動いて気持ちいいです。
サイドバーって死んだの？ 〜STINGER5のスマホ表示をカスタマイズ〜
アドセンス、アフィリエイト関連
管理画面のウィジェットだけで広告配置を変更できるようにする
デフォルトのStingerでは管理画面のウィジェットにコードを入力すると3ヶ所に広告が表示される仕様になっています。このカスタマイズでは広告の表示場所もウィジェットのみで変えられるよう変更します。
Stinger5カスタマイズ！目指せ収益UP！管理画面のウィジェットのみで広告の場所を変える方法（ダブルレクタングル対応）
記事本文にアドセンス広告を設置する
google adsenseの広告を記事本文内に設置する方法。こちらはショートコードを用いた方法です。
STINGER5でアドセンスを記事内へ、サイドバーに別の広告をカテゴリ別に入れてみた
トップページの記事一覧にアドセンスを表示する
トップページの記事一覧の中に横長のアドセンス広告を挟み込む方法。開発者のENJIさんのブログでも採用されている方法です。
Stinger5でブログTOPページの記事一覧へ広告を入れる方法
特定カテゴリのみアドセンスを非表示にする
特定のカテゴリのみアドセンス広告を非表示にする方法。ポリシー違反でアドセンスが停止されるのはなんとしても避けたいもの。ペナルティをうけそうなカテゴリにはアドセンス広告を表示しないようにしておきましょう。
STINGER５で404ページと特定カテゴリの記事だけアドセンス（AdSense）を非表示にする方法
記事下広告をダブルレクタングルにする
広告を横に2つ並べるダブルレクタングルを実装する方法。本文の横幅変更が必須となります。
STINGER５でアドセンスの配置を記事下ダブルレクタングルに変更してみました
カエレバ・ヨメレバの表示を変更する
カエレバ・ヨメレバのデザインを変更する方法。主張しすぎないシンプルなデザインをご紹介されています。ほぼコピペのみで実現できるお手軽さも魅力です。
コピペで完了！STINGER5でヨメレバ・カエレバのカスタマイズ
SNS、シェアボタン編
SNSボタンを統一デザインに変更する
デフォルトではバラバラのデザインとなっているSNSボタンの見た目を統一する方法。CSSスプライトを使う方法で、とても丁寧に解説されています。外部javascriptを読み込まずに済む点も魅力的です。
SNSボタンのデザインがばらばらだったので自作してみた。(Stinger5カスタマイズ)
ユーザビリティ向上
記事一覧全体をリンク化、クリック可能にする
トップページの記事一覧全体をクリック可能にする方法。タイトル以外に背景をクリックしても記事ページに移るようにします。
Stinger5カスタマイズ！記事一覧全体をリンク化、クリック可能にする方法
コメント欄を複数メディア化
「facebook」「Google+」「Wordpress」のコメント欄を同時に設置できるプラグイン。気軽にコメントして頂ける環境を作りましょう。
コメント欄をタブ型に！複数メディアのコメントを同時表示できるプラグイン「Coments Evolved for WordPress」
STINGERカスタマイズ環境整備
functions.phpを子テーマ側で管理する
子テーマ側からfunctions.phpを管理する方法。通常functions.phpは子テーマを作っても親テーマのものを使う仕様になっています。この方法を使えばfunctions.phpも子テーマのモノを読み込むようになります。
Stinger5カスタマイズ；functions.phpのカスタマイズを子テーマ側で実施する方法
やってはいけないカスタマイズ
STINGERのやってはいけないカスタマイズを紹介。迂闊にカスタムするとアウトラインが乱れてしまいます。
Stingerカスタマイズ！迂闊に「説明文」を消しちゃダメ！アウトラインが崩れるぞ
子テーマ配布
Stinger-minimum
ポップなカラーのおしゃれな子テーマ。かわいいもの好きな女子ブロガーの方にオススメです。
子テーマ”Stinger-minimum”を新しくなった「STINGER5」用に作りなおしました。
SIMPLESTER
「究極のシンプル」をデザインテーマとした子テーマ。cssファイルのみの配布になります。ホバー時のアニメーションが特徴的です。
あとがき
僕、私はこうしているよ！というモノがあればぜひ教えてください。自薦・他薦は問いません。
みんなで理想の「STINGER5」を完成させましょう！
最後まで読んでいただきありがとうございました。
Jimon(@jimon_s)でした。
