STINGER5カスタマイズまとめ!知りたい全てはここにある!

公開日: : 最終更新日:2015/02/20 Stinger, Wordpress ,

STINGER5カスタマイズまとめ!知りたい全てはここにある!

ついにレスポンシブとなった大人気Wordpressテーマ「STINGER5」
SEOの強さとカスタマイズ性の高さがその人気の理由ですね。

多くの方が使われているのでカスタマイズ記事が多いのもその強み。
今回はStinger5のカスタマイズ記事を部分ごとにまとめてみました。きっとあなたのやりたかったモノも見つかりますよ。

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

Sponsored Link


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ページの記事一覧へ広告を入れる方法

特定カテゴリのみアドセンスを非表示にする

特定のカテゴリのみアドセンス広告を非表示にする方法。ポリシー違反でアドセンスが停止されるのはなんとしても避けたいもの。ペナルティをうけそうなカテゴリにはアドセンス広告を表示しないようにしておきましょう。

STINGER5で404ページと特定カテゴリの記事だけアドセンス(AdSense)を非表示にする方法

記事下広告をダブルレクタングルにする

広告を横に2つ並べるダブルレクタングルを実装する方法。本文の横幅変更が必須となります。

STINGER5でアドセンスの配置を記事下ダブルレクタングルに変更してみました

カエレバ・ヨメレバの表示を変更する

カエレバ・ヨメレバのデザインを変更する方法。主張しすぎないシンプルなデザインをご紹介されています。ほぼコピペのみで実現できるお手軽さも魅力です。

コピペで完了!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ファイルのみの配布になります。ホバー時のアニメーションが特徴的です。

SIMPLESTER Ver2

あとがき

このまとめはまだまだ未完成、みなさんのお力が必要です。
僕、私はこうしているよ!というモノがあればぜひ教えてください。自薦・他薦は問いません。

みんなで理想の「STINGER5」を完成させましょう!

最後まで読んでいただきありがとうございました。
Jimon(@jimon_s)でした。

jimon


 これは!と思ったらシェアして頂けると嬉しいです
  • このエントリーをはてなブックマークに追加
  • Pocket
  • 107 follow us in feedly
Loading Facebook Comments ...

Comment

  1. […] STINGER5カスタマイズまとめ!知りたい全てはここにある! […]

  2. […] これは!ログ STINGER5カスタマイズまとめ!知りたい全てはここにある! […]

  3. […] 現在こちらのサイトを見つつカスタマイズ作業を行っております。 http://korehalog.info/stinger5-customize/ […]

  4. […] STINGER5カスタマイズまとめ!知りたい全てはここにある! […]

  5. […] STINGER5カスタマイズまとめ!知りたい全てはここにある! […]

  6. […] こちらのSTINGER5カスタマイズまとめ!知りたい全てはここにある!では、Stinger5全般のカスタマイズ方法が掲載されています。ちょっと初心者には難しい部分もある(ワードプレスの構造とか)と思いますが、自分の今解決したい!と思っている問題はすぐに見つかるのではないでしょうか?それだけ項目も豊富にあります。 […]

  7. […] STINGER5カスタマイズまとめ!知りたい全てはここにある! STINGER5カスタマイズまとめ!知りたい全てはここにある! […]

  8. […] 4番目に来ているのはJimon(@Jimon_s)さんの「これは!ログ」のSTINGER5カスタマイズまとめにリンクを掲載して頂いているためです(ありがとうございます!)。 […]

  9. […] さて、栄えある第1位に輝いたのがファビコンの記事です!これは記事がよかったというよりも、この記事をリンクして頂いているこれは!ログさんの影響が大きかったですね。 […]

  10. […] これは!ログhttp://korehalog.info/stinger5-customize/ […]

  11. […]  コレは!ログさんを参考にさせていただきました。 […]

  12. […] 引用元: STINGER5カスタマイズまとめ!知りたい全てはここにある!. […]

  13. […] STINGER5カスタマイズまとめ!知りたい全てはここにある! […]

  14. […] ここを参考にさせてもらっています⇒STINGER5カスタマイズまとめ […]

  15. […] STINGER公式キャラクター 知りたい全てはここにある! […]

  16. […] STINGER5カスタマイズまとめ!知りたい全てはここにある!WordPressのStingerを自由自在にカスタマイズするための8つの修行STINGERの超ハイセンスなWordPressカスタマイズブログ30選もはやStingerには見えない!参考にしたいWordPressカスタマイズブログ集 – 副業ハックSTINGER子テーマ | ROOM9(ルームナイン) […]

  17. […] 自分のAdSenseコードが他人のサイトで不正利用されている – Google AdSenseの使い方 | スパイチェックツール | アフィリエイト野郎! STINGER5カスタマイズまとめ!知りたい全てはここにある! […]

Message

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

PROFILE

Jimon Profile
Jimon
東海地方の大学院生。おしゃれなグッズやiPhone,Macの情報など、人に教えたくなる「これは!」というモノを発信していきます。
お問い合わせ

About


おしゃれな小物とiPhone,Macの情報発信ブログ。
管理人『Jimon』(@jimon_s)がこれは!と思ったアイディア、ニュース、活用術を発信していきます

PAGE TOP ↑