2016/02/23761 Shares

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

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もよろしく!

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

この記事が気に入ったら
いいね!しよう

Twitter で