コピペするだけ!STINGER5のカスタマイズまとめ

      2017/01/22

STINGER3からSTINGER5へ引越しして色々カスタマイズしてきましたが、
結構溜まってきましたので、この辺りで一度まとめてみます。
これからSTINGER5のカスタマイズをする人のお役に立てれば幸いです。

SNS

8種類のSNSボタン(カウントあり)を設置

ツイッター、フェイスブック、グーグルプラス、はてなブックマーク、LINE、Pocket、RSS、feedlyの全8種類です。
完成イメージはこちら。

◆カスタマイズ詳細
STINGER5で8種類のSNSボタン(カウントあり)を設置する方法

サイドバーへフォロワー数付きツイッターボタンを設置

好きな場所へ設置できますが、RSSの上部へ入れるパターンでカスタマイズしていきます。
完成イメージはこちらです。

◆カスタマイズ詳細
STINGER5のサイドバーへフォロワー数付きツイッターボタンを設置する方法

Google Adsense

記事下にアドセンスのダブルレクタングルを横並びに配置

完成イメージはこちら。

◆カスタマイズ詳細
STINGER5で記事下にアドセンスのダブルレクタングルを横並びに配置する方法

ラージモバイルバナーをはみ出さずにキレイに設置

完成イメージはこちら。

◆カスタマイズ詳細
STINGER5でラージモバイルバナーをはみ出さずにキレイに設置する方法

サイドバー上部にだけ広告(アドセンスなど)を設置

デフォルトだと、ウィジェットであらかじめアドセンス枠があり、そこにコードを入れるだけで3か所自動的に表示されます。ですが、例えば記事下にダブルレクタングルを設置するなど、カスタマイズをしたら他の場所も自動表記されたら困りますよね。

ということで、カスタマイズしたからこそ必要となる、サイドバー上部にだけ広告を設置していきます。

設定はとっても簡単です。
サイドバーのコードへ入れ込むだけです。

完成イメージはこちら。

◆カスタマイズ詳細
STINGER5でサイドバー上部にだけ広告(アドセンスなど)を設置する方法

スポンサーリンクと広告との間の気になる余白を埋める

アドセンスを無事設置して見てみると、このような感じではないでしょうか。

スクリーンショット 2015-06-21 12.41.06

スポンサーリンクと広告との間の余白気になりませんか?
この余白を埋めていきます。

完成イメージはこちら。

スクリーンショット 2015-06-21 12.46.01

◆カスタマイズ詳細
STINGER5でスポンサーリンクと広告との間の気になる余白(スペース)を埋める方法

フォント・画像

Google fontsを使ってタイトルのフォントをカスタマイズ

一般的なフォントも色々ありますが、Googleのフォントはセンスがありますよね。
●ビフォー

●アフター

◆カスタマイズ詳細
STINGER5でGoogle fontsを使ってタイトルのフォントをカスタマイズする方法

バラバラのサムネイル画像サイズを一括で統一

STINGER3からSTINGER5へ引越しされた人はこんな風にサムネイル画像の大きさがバラバラになっていないでしょうか。

とっても気持ち悪いですよね。
かといって、これまでの記事をすべて直すのはとんでもなく手間です。

そんな時に便利なのが「Regenerate Thumbnails」というプラグイン。
なんと、過去の記事までさかのぼってサムネイルの大きさを一括で統一してくれる便利な機能です。

完成イメージはこちら。

◆カスタマイズ詳細
STINGER5でバラバラのサムネイル画像サイズを一括で統一する方法

ヘッダー画像のサイズを変更

「STINGER5で記事下にアドセンスのダブルレクタングルを横並びに配置する方法」にて、ページ全体の横幅を広げたことでヘッダー画像の大きさが中途半端になっています。

これをピッタリサイズに変更していきます。

完成イメージはこちら。

◆カスタマイズ詳細
STINGER5でヘッダー画像のサイズを変更する方法

「WordPress Popular Posts」の表示をキレイに設置

STINGER3からSTINGER5へ移行された方は表示が変になっていないでしょうか。

こんな感じでサムネイルが大きくなり過ぎていてバランスが悪いですよね。
その上にあるNEW POSTと同じ見え方に整えました。

完成イメージはこちら。

◆カスタマイズ詳細
STINGER5で「WordPress Popular Posts」の表示をキレイに設置する方法

その他

サイドバー上部へプロフィールを設置

ウィジェットを使ってサイドバーへは入れることができますが、上部へ入れるためにはサイドバー (sidebar.php)へ直接書き込みます。

完成イメージはこちら。

◆カスタマイズ詳細
STINGER5でサイドバー上部へプロフィールを入れる方法

Google Analyticsを設置

STINGER3などから移行する際はついつい忘れてしまいがちなので、設置し直しましょう。
ただし、稼働するまでに少し時間がかかるので、しばらくしてからGoogle Analyticsのリアルタイムサマリーなどで、きちんと稼働しているか確認しましょう。

◆カスタマイズ詳細
STINGER5にGoogle Analyticsを設置する方法

トップページだけNEW POST(新着記事)を削除

デフォルトだと、サイドバーにNEW POSTが固定されていて、トップページでの表示が二重になってしまいますよね。NEW POSTをトップページだけ削除していきます。

完成イメージはこちら。

◆カスタマイズ詳細
STINGER5でトップページだけNEW POST(新着記事)を削除する方法

今後も随時更新予定

以上、STINGER5のカスタマイズまとめでした。
これからもまだまだカスタマイズしていきますので、このまとめページへ随時更新していきます。

 - STINGER