今までの STINGER PLUS+ カスタマイズまとめ

無料WordPressテーマ『STINGER PLUS+』との出会いは、私にとって衝撃的な出来事でした。

一目惚れとはこのことだ・・と悟った瞬間。(笑)

「このテーマは、WordPress初心者さんでも使いたい方が絶対に沢山いるだろうな。」
「だけど、数年前の自分だったら自力でカスタマイズできただろうか・・」

テーマの初期設定とカスタマイズをしながらそんな風に感じたことが、当ブログで実践した全てのカスタマイズ方法のページを作成して公開してみようと思い立ったきっかけです。

実はブログ開設当初は、WordPressカスタマイズの記事作成は全くの予定外。
そんな中でのふとしたきっかけから、STINGER PLUS+と出会い、このテーマで記事を書いたことによって沢山の新たなご縁に恵まれたことをとても嬉しく思っています。

自分なりに心からの感謝の気持ちを込めつつ・・まとめページを作成してカテゴリー「STINGERカスタマイズ」の記事を締めくくります。

はじめに

▶【WordPress】STINGER PLUS+ は史上最高に可愛い無料テーマ

当ブログのリニューアル作業を始めたタイミングで夢のようにリリースされたSTINGER PLUS+。
その喜びとSTINGER PLUS+の素晴らしさをとにかく多くの方へ伝えたい。そんな想いを込めた初回記事です。

▶WordPressカスタマイズに役立つ2大アイテム！「ピクセル定規」と「Eye Dropper」
AFFINGER4 STINGER8

私が長年愛用している2大アイテム、ブラウザ上のピクセルサイズを簡単に測れる「ピクセル定規」と、ブラウザ上のカラーコードを簡単に知ることができるカラーピッカー「Eye Dropper」をご紹介しています。

トップページのカスタマイズ

▶【STINGER PLUS】 サンプルデザイン（Sample03）と同じようにトップページを作る方法は？
AFFINGER4

例えば、『サンプル03のレイアウトにする』というボタンをポチっと押せば適用される・・という訳ではないんですね。
「あれ？意外と難しい？」と感じたサンプルデザインのレイアウト。カスタマイズ記事作成のきっかけとなったコンテンツです。
トップページの新着記事の見出しが表示されない場合の解決方法（？）も記事にしています。

▶【STINGER PLUS】トップページと固定ページのSNSボタンと投稿日を非表示にする方法
AFFINGER4 STINGER8

トップページのソーシャルボタン、固定ページの投稿日・最終更新日を非表示にする方法です。

ヘッダー・フッター・サイドバー・コンテンツ部分のカスタマイズ

▶【STINGER PLUS】 ヘッダー・サイドバー・コンテンツの細かいカスタマイズとCSSの基礎レッスン
AFFINGER4

• ヘッダー右上のメニュー位置の微調整
• サイドバーのカテゴリー表示の親子階層に段差をつける
• サイドバーのアーカイブ（ドロップダウン表示）の下の余白を広くする
• サイドバーの各項目の間の余白を広くする
• WordPress標準の埋め込みカードの幅を変更
• コンテンツ内の見出し（h2）上の余白を広くする
• コンテンツ内の基本の文字の大きさを変える

上記のカスマイズ方法とCSSの基礎についてまとめました。
WordPressカスタマイズを始めたばかりの方に届くといいな・・そんな願いを込めて作成したコンテンツです。

▶【STINGER PLUS】 見出し（h2、h3）のCSSカスタマイズ～背景色指定・背景画像使用・ステッチ風～
AFFINGER4 STINGER8

背景色を指定or背景画像を使用、さらにステッチ風のラインを追加した、見出し（h2、h3）の3種のCSSカスタマイズ方法です。

▶【STINGER PLUS・8・AFFINGER4】icomoon導入方法&ヘッダーに自作SNSアイコンを作成・追加する方法
AFFINGER4 STINGER8

Webアイコンフォント「icomoon」の導入方法と、見出し（h2）とお揃いの5種のSNSアイコン（フォローボタン）をヘッダーに追加する方法です。

▶【STINGER PLUS】フッターのカスタマイズ（キャプションを非表示＆メニューカラーの変更）
AFFINGER4

フッターのサイト説明文（キャプション）を非表示にする方法とフッターメニューのカラーを変更する方法です。

▶【STINGER PLUS】3カラムのフッターを追加する方法（背景色指定or背景画像使用）
AFFINGER4

背景色を指定、または複数の背景画像を使用して、3カラムのフッターを追加する方法です。

プラグイン関係のカスタマイズ

▶目次を表示するWordPressプラグイン【Table of Contents Plus】を簡単カスタマイズ！
AFFINGER4 STINGER8

記事の見出しごとに目次を自動生成してくれるWordPressプラグイン「Table of Contents Plus」の設定とカスタマイズ方法です。
カラーを変更、ボックスの角に丸みを付けて、見出しのテキストにGoogleフォントを使いました。
ボックスを中央に表示したい場合のCSSコードもご一緒に。

▶「この記事が気に入ったらいいね！しよう」WordPressプラグイン【VA Social Buzz】のカスタマイズいろいろ
AFFINGER4

「この記事が気に入ったらいいね！しよう」のボックスを表示させるWordPressプラグイン「VA Social Buzz」の設定とカスタマイズ方法です。

• Facebook・TwitterのシェアボタンとPush7の購読ボタンを非表示にする方法
• ボックス上の余白を指定する方法
• 表示位置の調整とメッセージの追加方法

STINGER PLUS+のデフォルトのオリジナルソーシャルボタンを活用できるよう工夫してみました。

▶【WordPress Popular Posts】の設定方法と人気記事を「STINGER PLUS+」と同じスタイル（順位付き）で表示する方法
AFFINGER4 STINGER8

サイドバーなど任意の場所に人気記事ランキングを表示できるWordPressプラグイン「WordPress Popular Posts」の設定とカスタマイズ方法です。
人気記事をSTINGER PLUS+ の新着記事と同じスタイルで表示する方法、ランキングに順位を付ける方法をご紹介しています。

▶サイドバーのサムネイル付きプロフィール欄を「STINGER PLUS+」と同じスタイルで作成する方法
AFFINGER4

こちらは、上記「WordPress Popular Posts」でのカスタマイズの応用編です。
サイドバーに表示するTwitterウィジェット（埋め込みタイムライン）の背景を透明にする方法もご一緒に。

Googleアドセンスの条件分岐と位置変更

▶【STINGER PLUS】アドセンスをアイキャッチ画像の下・見出し（h2）の前に設置する方法
AFFINGER4 STINGER8

STINGER標準の条件分岐コードを使って、パソコンとタブレットでは大きいサイズ、スマホでは小さいサイズのアドセンス広告をアイキャッチ画像の下・見出し（h2）の前に表示する方法です。

▶【STINGER PLUS】記事エリアの横幅を広げてアドセンス（レクタングル大）を横並びに配置する方法
AFFINGER4 STINGER8

STINGER標準のアドセンス用ウィジェットを利用して、アドセンス（レクタングル大）を横並びに配置する方法です。
パソコンとタブレットでは横並びに「レクタングル大（336×280）」が2つ、スマホでは「レスポンシブ（自動サイズ）」が1つ表示されます。

OGP設定について

▶【STINGER PLUS 】 OGP設定の「fb:admins」を「fb:app_id」に変更する方法

STINGER PLUS+ でのOGP設定に必須となる「fb:admins」（Admins Id）を「fb:app_id」（アプリID）に変更する方法を、アプリIDの取得方法も含めて説明しています。
個人と切り分けてブログやサイト運営をしたい方へ向けた内容となっています。

ソーシャルボタンのカスタマイズとその他設定方法など

▶【STINGER PLUS】 ソーシャルボタンのテキストがスマホで表示されない原因と対処法は？

パソコンでは表示されるソーシャルボタンの「LINE」以外のテキストが、その他の端末で表示されないのはなぜ？？
・・なんと、STINGER PLUS+の標準仕様でした・・
あえて、タブレットやスマホでもテキストを表示させたい場合のカスタマイズ方法です。

▶【STINGER PLUS】 カウント付きオリジナルソーシャルボタンにRSS・Feedly・Push7を追加する方法
AFFINGER4 STINGER8

STINGER PLUS+のデフォルトのオリジナルソーシャルボタンに、RSS・Feedly・Push7の3種のボタンを追加する方法です。

▶【STNGER PLUS】ソーシャルボタンへの「SNS Count Cache」導入・設定・カスタマイズ・エラー解決方法
AFFINGER4 STINGER8

STINGER PLUS+のデフォルトのオリジナルソーシャルボタンに、シェア数とフォロー数を表示させるSNSキャッシュプラグイン「SNS Count Cache」の導入と設定方法です。
Twitterのカウント数取得に必要となるwidgetoon.js&count.jsoonへのサイト登録方法もご紹介しています。
さらに、アップデートにより設定項目に追加されたFacebookの「App id」と「App secret」の取得方法、及び、設定が反映されない現象についての対処法も追記しました。

▶WordPressサイトにPush7を導入する方法と設定手順を簡単4ステップで♪
AFFINGER4 STINGER8

最近、あちこちのWebサイトで見かけるようになった、黄色い雷マークの新しいWeb通知プッシュサービス「Push7」の導入方法とWordPressプラグインでの自動プッシュ設定方法をポイントを押さえて4ステップにまとめました。

▶【STINGER PLUS】「Twitterカード」導入方法とサムネイルが正常に表示されない原因と対処法は？
AFFINGER4

STINGER PLUS+の「Twitterカード」申請方法を2種類のカード別にご紹介しています。
私の友人が遭遇した、Twitterカードにデフォルトユーザーイメージ（ゆきだるまっぽい人）が表示されてしまう原因と対処法もご一緒に。

▶Twitterカードが表示されない・タイムラグがある・修正後もエラーが出る場合の確認ポイントと対処法
AFFINGER4

OGP設定をしっかり行っているはずなのにTwitterカードが表示されない、しばらく時間を置かないと表示されない、問題点が見つかって修正した後も検証ツールでエラーが表示される・・。そんなTwitterカードのトラブルに関する内容です。
デフォルトのアイキャッチ画像を記事文頭に移動させるカスタマイズ方法もご一緒に。

子テーマの作成方法

▶STINGER PLUS 「子テーマ」がダウンロードできない！そんな時は自分で作成してみよう♪

公式サイトから子テーマのダウンロードができなくなった場合に、子テーマを自分で作成する方法です。

カスタマイズ中のエラートラブル解決法

▶WordPressのテーマ編集後にエラーメッセージが出て画面が真っ白に！どうしたらいい？
AFFINGER4 STINGER8

テーマファイル編集後に画面真っ白＆エラー表示・・私がよく遭遇するパターンの解決法です。
いつかの「冒険」に備えて、PHPコードとCSSコードのコメントアウト方法も覚えておくと安心です。

さいごに

以上、今までのSINGER PLUS+カスタマイズまとめとして、24記事をご紹介しました。

こちらのページでカテゴリー「STINGERカスタマイズ」の更新は一区切りとなります。

記事を参考にして下さった方。
メールにてメッセージを送って下さった方。
SNSでフォロー＆シェアをして下さった方。
足跡を残して下さった方。

どれも「ひゃっほうぅ！」となる位、とても嬉しかったです。
ありがとうございました。

今後は、別館サイトを作成しつつ初心に戻り、こちらではレンタルサーバー選びから初期設定、サイト収益化までのゼロからのWordPress入門記事を更新していくこととしました。
なんだかすっかりWordPressブログですね。

その後の予定は、風のふくまま気の向くままに。

ある時は子育てに関する記事を書いているかもしれないし、またある時は自分の老化現象を語っているかもしれません。(笑)

・・「そういえば、あのおばさん何やってるかな？」
お時間のあるときに、そんなノリで時々にでもご来訪いただけると幸いです。

追記

Kanami

この記事で区切りをつけたはずなんだけどなぁ...？

その後、AFFINGER4にテーマ変更、2017年10月現在も更新を続けています。

気になるカスタマイズがありましたら、他の記事にもぜひお立ち寄りください♪