ここを見ておけば検索不要!Stingerカスタマイズ辞典

  最終更新日:2016/02/23


Stinger カスタマイズ

WordPress無料国産テーマで絶大な人気を誇るStinger。愛用者が様々なカスタマイズ方法を紹介していますが、いちいち検索するのが面倒なこともあってカテゴリ別一覧としてまとめてみます。

Stingerにはいくつかバージョンがあり、ご紹介している記事は混在していますので徐々に整理していきたいと思います(現在のバージョンは、Stinger3 ver20121217)。

Stinger3カスタマイズ辞典としてお役に立てば幸いです。

※ブログ名は省略しております。ご了承ください。

目次

背景関連

基本設定方法

背景変更とそれに合わせたサイドバー装飾方法を解説。パターン画像を作って背景に並べ、サイドバーの背景色も変更しています。

stingerのカスタマイズ 背景の変更

背景に1枚の固定画像を設定する

パターン画像を連続させるのではなく、1枚の大きな画像を固定させて表示する方法を解説。

Background Managerで背景をフルスクリーン写真にする

メインコンテンツ部分やサイドバーを半透明にする方法も合わせてどうぞ。見た目はとても綺麗に仕上がりますが、やり過ぎると肝心のテキストが読みづらくなるのでご注意を。

メイン、サイドバー、メニューバーの背景を白半透明にする

ヘッダー関連

画像を変更する

ヘッダー画像の変更方法を解説。デフォルトの横幅は986pxなので、そのサイズに合わせて画像を用意しましょう。高さは自由ですが、あまりに高くなりすぎると離脱率も高くなります。

トップ画像を変更する

画像をスライダーに変更する

ヘッダー画像をスライド形式に変更する方法を解説。プラグイン「Meta Slider」を使用します。

Meta Sliderを使ってStinger3にスライダーを導入する方法

メニューを変更する

メニュー部分の基本的な設定方法を解説。ごちゃごちゃしていると見づらいので、特に読んでほしいカテゴリを載せておくと効果的です。

メニュー(ナビゲーション)を設定しよう

トップページ関連

おすすめ記事を追加する

記事一覧上部におすすめやまとめ記事を追加する方法を解説(手動更新)。自動更新したいならウィジェット化する方法もありますが、固定表示でOKならこれで十分です。

Stinger3、トップページにまとめを掲載するカスタマイズ|スマホ対応

記事一覧を線で区切る

トップページの記事一覧を線で区切って見やすくする方法を解説。単なる直線ではなく、点線にしたり太さを変えたり色をつけることによって印象がまったく変わります。

WordPressテーマ”Stinger”カスタマイズ初心者編!点線で見た目を可愛くしよう!

記事下関連

関連記事の表示を古い順に変更する

記事下の「関連記事」を古い順に表示させる方法を解説。この部分は記事を最後まで読んでくれた方が高確率で見る部分です。PV数に影響するのでタイトルにも気を使いましょう。

だいぶ落ち着いたのでこのブログで変更したところを書き留めておく備忘録#2

サイドバー関連

タイトル変更

タイトル部分の基本的な装飾に加え、画像を使わないアイコンフォントの使い方を解説。未対応ブラウザもあるので、使いすぎ注意。

Stingerサイドバーにさりげない気遣いを。アイコンフォントの使い方

新着記事部分の変更

サイドバーの新着記事部分から抜粋を削除し、日付を追加する方法を解説。すっきりさせてサムネイルとタイトルで惹きこみましょう。

Stingerサイドバー新着記事部分をスッキリ見やすく表示しよう

Google検索へ変更

デフォルトの検索バーをGoogle検索へ変更する方法を解説。記事が増えてきたら導入を検討してみましょう。検索用アドセンスもあります。

2StepでStingerのデフォルト検索をGoogle検索に変更する方法

フッター関連

背景色変更・ウィジェット追加

フッター全般の背景色変更と、ウィジェット対応のフッターカスタマイズを解説。下段の色を濃くすることで全体が引き締まります。建築物と同じです。

おしゃれは足元から!Stinger3フッターカスタマイズで差をつけろ!

アドセンス関連

PCとスマホで表示位置を変更する

スマホはタイトル下にアドセンスを表示させ、PCはデフォルトの位置に表示する方法を解説。スマホ用サイトのトップに大きな広告を置くとアドセンス停止になります。

StingerでスマホとPCでアドセンス表示位置を2Stepで替える方法

文中に広告挿入&記事下に広告を2つ並べて設置する

デフォルトの配置から文中へのアドセンス挿入と記事下にレクタングルを2つ並べて設置する方法を解説。ブログの内容によっては、アドセンスとそれ以外の広告を並べて設置するのも良いでしょう。

アドセンス収益が2倍に!STINGER3で収益アップするためのカスタマイズ

ヘッダにアドセンスを表示する

ブログタイトル横にアドセンスを表示させる方法の解説。PHPの振り分けでスマホ閲覧時は非表示となります。この部分は恐ろしくクリック率が低いので、PV数が少ないと効果がありません。

ヘッダーにアドセンスを追加してスマホには表示させない方法

文字・テキスト関連

テキストシャドウを使う

タイトル部分等の装飾に使えるCSSテキストシャドウの解説。文章全体に適用してしまうと、かなり読みづらくなるのでお勧めしません。1pxのセンスが問われます。

Stinger記事タイトル部分にシャドウをつけるフォントカスタマイズ

Google Fontsを使う

Google Fontsを使ったテキスト装飾の解説。未対応のブラウザもあるため、ロゴなら軽い画像のほうが良いかもしれません。

Google Fontsを使ってStingerをかっこよくカスタマイズ!

タイトル・見出しを変更する

女子ブロガー向けの装飾サンプルを紹介。サンプルがあり、コピペしてすぐに使うことができます。カスタマイズ例を見ながらオリジナルにアレンジしてみましょう。

続2)女子ブロガー向けにWPテーマSTINGER3をカスタマイズしよう

スマホ版の解説はこちら。女子ブロガー向けとなっていますが、もちろん男子ブロガーでも使えます。

続3)女子ブロガー向けにWPテーマSTINGER3をカスタマイズしよう

段落や文字間の余白を調整する

段落(<p>)や文字間の余白を調整する方法を解説。読みやすい適切な余白は、文字の大きさや記事の幅、フォントの種類によって変わってきます。様々なパターンを試してみましょう。

pタグ(段落タグ)をカスタムして読みやすくする方法

ボタン関連

続きを見るボタンの変更

トップページの「続きを見る」ボタンを装飾し、視認性を高める方法を解説。ボタンの色は全体の配色によりますが、目立たせたいあまりにどぎつい色にすると逆に目立たなくなります。

Stinger「続きを見る」ボタンをカスタマイズしてクリック率アップ

SNSボタンを削除する

追尾式のSNSボタンを削除する方法を解説。最新版ではスマホ非表示になっていますが、表示した時としない時のシェア率を計測してみると面白いかもしれません。

STINGER3の「追従するSNSボタン」を削除する方法

Pocketボタンを追加する

SNSボタンに「Pocket」を追加する方法を解説。利用者が増えているので導入の価値ありです。ただし、ボタンを並べすぎると邪魔になるので必要最低限に留めておきましょう。

「Stinger3」のSNSボックスにPocketボタンを追加してその効果について考えてみた

Feedly購読ボタンを追加する

SNSボタンに「Feedly」を追加する方法を解説。こちらも利用者が増えていますが、ブログの購読者が増え始めてから数を表示したほうが良いかもしれません。

細かすぎて伝わらないStingerカスタマイズ

SNSボタンをオリジナル画像に変更する

公式ボタンからオリジナル画像を使ったボタンへの変更方法を解説。オリジナルにする場合は、読者が一瞬でSNSボタンだと認識できるようなデザインを考えましょう。また、クリックできるとわからなければ意味がありません。

ブログのソーシャルボタンをオリジナル画像にしてみた

記事下のSNSボタンを綺麗に設置する

サイズが微妙に違うボタンをオリジナルボタンで綺麗に表示する方法を解説。ここだけ綺麗に配置しても、サイドバーがごちゃごちゃだったら意味がありません。全体のデザインとマッチするように考えましょう。

ブログの記事下に自分のプロフィールとRSS購読ボタンを設置する

画像関連

サムネイル取得方法を変更する

アイキャッチ画像を設定していない場合の「No Image」を回避する方法を解説。運営途中でStingerに変更した場合は重宝します。

Stinger3 に対して行ったカスタマイズのセルフまとめ

スマホ関連

トップ画像を表示する

スマホ閲覧時にPC版と同じヘッダー画像を表示する方法を解説。画像が重いと全体の表示速度に影響するので無理に表示することはありません。

スマートフォンでのヘッダー画像の表示

右上の「About」を変更する

スマホ閲覧時のメニューは「About」となっていますが、ここを好きなテキストに変更する方法を解説。CSSの適用箇所にも触れています。

Aboutの文字を変える方法

その他

ファビコンを変更する

オリジナルのファビコンに変更する方法を解説。Stingerに身も心も捧げた方は変更不要かもしれません。

Stingerシリーズのファビコンをオリジナル画像に変更する方法

Twitterメンション

ツイートされた時にメンションをつける方法を解説。公式サイトにはその他おすすめの設定がいくつか掲載されています。

STINGERご利用の方にぜひ、やって頂きたい事。

高速化関連

おすすめプラグイン一覧

表示高速化のためのプラグイン設定方法を解説。GTmetrixの値と実際の表示速度に誤差があるので、できるなら環境を変えてのテストが一番です。

GTmetrix90点以上は当たり前!全てのStingerユーザーにおすすめのプラグインと設定

番外編:ネタ系

擬人化

Stingerの擬人化で、見事公式キャラになりました。

Stinger3に対する愛が大きすぎたが故に、辿りついたのは擬人化だった

まとめ

様々なブログを見ていると、自分のブログに足りないものがたくさん見えてくるなと実感しました。お客様目線でどうなんだろう、と考えることはブロガーにとっても必要ですね。

表示が遅いとか、カテゴリが大きすぎるとか、配置がゴチャゴチャしているとか、余白が足りないとか、テーマ自作の参考にもなりました。

stinger

随時更新中です。自薦・他薦記事があればぜひ教えてください。

「Stinger使ってみようかな」と思ったらさっそくダウンロード!

追記WP無料テーマGushもよろしく!

追記残念ながら閉鎖してしまったブログもあったため、リンクが切れていた箇所を削除いたしました。

シェアありがとうございます


Ellora

Ellora

ブログ初心者を対象として、アクセス・収益アップ施策を配信中。目とデコルテが大好き。Twitterでは目のお化けと言われています。

2015年秋、「Ellora Bloggers Club」を発足。ブログ運営の悩みや疑問に対して、一人ひとりにアドバイスを行っています。

コメント一覧

  1. […] 「ここを見ておけば検索不要!Stingerカスタマイズ辞典 」 […]

  2. […] ◆ここを見ておけば検索不要!Stingerカスタマイズ辞典 […]

  3. […] フォロー: 徳洲会, 政治, 東京都知事選, 猪瀬 5000万円, 猪瀬 5千万, 猪…  ここを見ておけば検索不要!Stingerカスタマイズ辞典  30 users […]

  4. […] ここを見ておけば検索不要!Stingerカスタマイズ辞典 […]

  5. たかよし より:

    こんばんは。

    たかよしです。

    wp はじめたばかりです。

    テーマを「stinger 3」を使用しています。

    ここのサイトを参考にしてカスタマイズしています。

    たいへん勉強になります。

    どうしても出来ないことがあるので、アドバイス

    お願いします。

    それは

    ヘッダー画像をスライドショーにしたくて、

    プラグイン、「header image slider」を

    インストールして、実行してみましたが、

    スライド画像の位置が画面のトップに上がって

    タイトルが隠れてしまいます。

    高さを150px・250px・300pxに

    それぞれ変更してみましたが、

    すべてタイトルおよび説明文が隠れてしまいます。

    もちろん、「テーマ編集」での「テーマのための関数」php

    内の画像の高さも、その都度変更しています。

    そこで今後のことを考えて、「meta slider」の

    プラグインを導入しようと、一様調べたのですが、

    「meta slider」で作成した時、生成される「コード」

    をstinger3のどこに、貼り付けばいいのか?

    悩んでいます。その時削除する項目もわかりません。

    ご教授お願いします。

  6. […] ここを見ておけば検索不要!Stingerカスタマイズ辞典 自由を手に入れろ!WordPressの最強テーマ、Stingerを思うがままにカスタマイズするための8つの修行 様々な想いを込めて。わたしが […]

  7. […] ここを見ておけば検索不要!Stingerカスタマイズ辞典 […]

  8. […] ここを見ておけば検索不要!Stingerカスタマイズ辞典 […]

  9. […] スアップのためにしてこられたこと等も記載されています。 私も「ここを見ておけば検索不要!Stingerカスタマイズ辞典」にはお世話になりました。 そして、「同期ブログ」に出会う前 […]

  10. たかよし より:

    こんにちは。

    たかよしです。

    たびたびすみません。

    ワードプレスstinger3を愛用している者です。

    プラグイン「Ps Auto Sitemap」を使用して、固定ページに「サイトマップ」の

    ページを作り、“ヘッダーメニュー”に「サイトマップ」を作成しました。

    その時以降2~3日は正常に表示されていたのですが、ある日突然「404エ

    ラー」となって表示されなくなりました。

    いちようサイトをググッテ調べてみました。

    やった事

    1.固定ページを編集で「サイトマップ」のパーマリンクのスラッグを数回変

    2.「Ps Auto Sitemap」と「サイトマップ」の固定ページの削除を再インスト

    ールおよび「サイトマップ」固定ページの再度作成

    3.「.htaccess」に「Options -MultiViews」を追記(追記後、最後は改行し

    ました。)

    4.「Ps Auto Sitemap」を削除して、「Dagon Design Sitemap Generater)を

    インストールして実行。

    上記4項目を実行しても「404エラー」となって表示されません。

    ただし、

    「サイトマップ」の固定ページを編集するページ内にある「固定ページを表示

    」ボタンをクリックすれば、正常に表示されます。

    なんか変で判りません。

    私の推測ですが、

    「.htaccess」に「Options -MultiViews」を追記する箇所がまちがっていたか

    も知れません。

    「.htaccess」内のどの箇所に追記すればいいのでしょうか?

    ちなみに私の「.htaccess」の内容は、

    # BEGIN WordPress

    RewriteEngine On
    RewriteBase /wpb/
    RewriteRule ^index\.php$ – [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /wpb/index.php [L]

    # END WordPress

    となっていました。

    ちなみに
    3.の「Options -MultiViews」を追記した箇所は、

    RewriteRule . /wpb/index.php [L]
    Options -MultiViews

    に追記したがでめだった。

    次に

    Options -MultiViews

    # END WordPress

    に追記してもだめでした。

    それともう1点

    さくらサーバーにワードプレスをインストールした際、まちがって新たなディ

    レクトリーにインストールしてしまったせいなのか?「.htaccess」ファイルが

    3箇所のディレクトリー内に有りました。

    全部変更が必要なのか?どれか1箇所を変更すれば良いのかも、どうかご教授お

    願いします。

    • Ellora より:

      表示されなくなったまでの2~3日間にどこかいじりましたか?
      そこに原因がある気がします…

      さくらでは「Options」が使えません。

      また、「.htaccess」はWP本体があるディレクトリからルート直下へ移動する必要があります。

      • たかよし より:

        こんにちは。

        エローラさん。

        たかよしです。

        返事がおそくなってすみません。

        早速ですが、

        > 表示されなくなったまでの2~3日間にどこかいじりましたか?
          そこに原因がある気がします…

        の件ですが、

        実はブログタイトル名とその説明を変更いたしました。

        ウェブマスターツールで、前タイトル名時のブログを削除して、
        新タイトル名でのブログを登録して、サイトマップの追加をしました。
        この時、表示されたブログが前のままでしたが、?

        タイトル名を変更した事が原因でしょうか?

        次に

        > さくらでは「Options」が使えません。

        の件ですが、

        そうですか。さくらサーバーでは、「Options -MultiViews」
        は使えないと言う事ですね !!

        わかりました。

        次に

        > また、「.htaccess」はWP本体があるディレクトリからルート
          直下へ移動する必要があります。

        の件ですが、ルート直下へ移動するとは、どこに移動させれば
        良いのかいまいち判りません。

        それで、私の現状のさくらサーバーのディレクトリ配置図と、
        「.htaccess 」ファイルの中身を、勝手ながらpdfファイル
        にしました。

        pdfファイル URL ↓

        http://www.y-taka.sakura.ne.jp/report-box/saitomap-situmon.pdf

        よろしければ、参考にしてどうかご教授お願いします。

        仮に対処できなかった場合、別な方法でサイトマップを、
        自動表示してくれる方法があるでしょうか?

        よろしくお願い致します。

        たかよしより。

        • Ellora より:

          返事が遅くなり申し訳ありません。

          僕の知識では対処できませんでした。
          もう少し調べてみます。

          [追記]
          Twitterで聞いたところ、
          パーマリンクの設定が怪しいとお答えいただきました。

          • たかよし より:

            こんばんは。

            エローラ 様

            遅くなりまして、夜分返答すみません。

            あれから自分なりに、検索して調べて行く内に

            試行錯誤でやってみたら、ブログアクセス時点で404エラー。

            になり、ログインすらもできなくなりました。

            いろいろググッテなんとか、ブログのアクセスまでは今まで通り

            出来るように回復出来ましたが、正しいユーザー名および
            パスワードを入力しても、いまだログイン出来ない状態です。

            ワードプレスの再インストールを考えています。

            そこで、「さくらインターネット」からワードプレスを

            かんたんインストールをするのではなく、

            別ルートから僕のサーバーに

            再インストールする方法が有るのでしょうか?

            さくらから再インストールすれば、再びディレクトリが追加

            されて、混乱を招く気がします。

            現在は、各ファイルのバックアップ作成中です。

            どうかご教授お願い致します。

          • Ellora より:

            WP本体をダウンロードすれば、好きな場所にインストールできますよ。

            WordPressインストール・超初心者向け

  11. たかよし より:

    こんばんは

    エローラ 様

    たかよしです。

    WP再インストールできました。

    またいちからやり直しですが、

    めげずにstingea3で記事を更新

    していきます。

    その前に

    カスタマイズが残っていました。!!

    お忙しい中、いろいろアドバイス

    アリガトウございます。

    困った時はまたよろしくお願い致します。

    • Ellora より:

      あまりお役に立てずすみません。
      カスタマイズはバックアップとりながらやってみてください。

      今後ともよろしくです。

  12. […] ここを見ておけば検索不要!Stingerカスタマイズ辞典 […]

  13. […] ここを見ておけば検索不要!Stingerカスタマイズ辞典 […]

  14. […] 参考サイトは、以下2つのエントリを読めばほぼ事足りると思います。 →ここを見ておけば検索不要!Stingerカスタマイズ辞典|NAIFIX […]

  15. […] WordPressは、オープンソースのブログソフトウェアで、サーバーをレンタルしています。解説本では「WordPressのテンプレートはすべてPHPであるため、PHPとHTMLをある程度知っていれば容易にテンプレートをカスタマイズできる」とあるのですが、呪文のようでなかなかです。カスタマイズの「虎の巻」をネットで調べながら、“見よう見まね”で試行錯誤を繰り返しています。  ★参考にさせていただいたページ   「えけこのくるる」   「Ryun’s Web Note」   「ここを見ておけば検索不要!Stingerカスタマイズ辞典」 […]

  16. […] ここを見ておけば検索不要!Stingerカスタマイズ辞典 […]

  17. […] ※Stinger3のまとめはこちらのサイトをご覧ください。 (ここを見ておけば検索不要!Stingerカスタマイズ辞典) […]

  18. […] ここを見ておけば検索不要!Stingerカスタマイズ辞典ただ以外な落とし穴で、HTMLやCSSがわかってくると楽しくって記事を全然書けなかった!! このブログは2月と5月にリニューアルしたんですが、2回とも2週間くらい何も書いてませんw それくらいHTML・CSS弄ってるの楽しかった(´¬`) […]

  19. […] STINGER 5のカスタマイズについては、「これは!ログ」を運営されている@jimon_sさんが「STINGER5カスタマイズまとめ!知りたい全てはここにある!」でまとめてくれています。STINGER 3については「ここを見ておけば検索不要!Stingerカスタマイズ辞典」を参考にしましょう。 […]

  20. でう より:

    こんばんは。
    スティンガー6を使ってるんですが、最近投稿した記事がサイドバーに「newpost」と英語で表示されます。

    これを日本語に変えたいんですが、やり方教えてもらえませんか?
    よろしくお願いします

    • Ellora より:

      newpost.phpにある以下の部分を変更すれば反映されると思います!

      <h4 class=”menu_underh2″> NEW POST</h4>

  21. でう より:

    できました!ありがとうございます。
    他にも質問があるんですが、スティンガー6にもフッターの一番下の部分をGushみたいに左右画面いっぱいに色をつけたいんですが、どうやればできますか?

    Copyrightとか書かれてる所です。

    • Ellora より:

      フッターを含めた全体が #wrapper で囲まれているので、フッター部分をそこから外してあげれば左右いっぱいに広げられると思います。

      デベロッパーツールなどで構造をチェックしてみてください。

  22. ガオ より:

    とても参考になる記事ありがとうございます。私今年の3月頃からワードプレスを使ったブログをはじめております。ちなみにテーマはstinger3を使っています。

    色々と調べたのですが、一つわかないことがありまして、記事下にデフォルトのH3タグ関連を非表示にできません。テーマのコードをいじるのかな?となんとなくわかるのですが、何分素人なもので、よくわかっていません。解決策などお分かりになられますでしょうか?

    • Ellora より:

      「関連記事」と表示されている部分でしょうか。

      であれば、single.phpの61行目あたりにその見出し(h4)が直書きされているので、削除すれば消えますよ。

  23. […] ここを見ておけば検索不要!Stingerカスタマイズ辞典 愛用者が様々なカスタマイズ方法を紹介していますが、いちいち検索するのが面倒なこともあってカテゴリ別一覧としてまとめてみます。 […]

この記事へのコメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*

PAGE TOP ↑