*

初心者でもできた!Stingerのカスタマイズに役立った記事まとめ

Stingerカスタマイズ

WordPressのテーマに「Stinger3」を導入して1ヶ月弱が経ちました。その間、いくつか変更したい点が出てきたのですが、いかんせんCSSもPHPもちんぷんかんぷんな素人です。

何とかならんかな?とググってみたところ、さすがに人気の無料テーマ「Stinger」ですね。既に同じような意図でカスタマイズされている方が、解説記事を公開しています。

こういう時に利用者の多いテーマだと助かりますね。記事を上げて頂いた方々にはこの場を借りて、心より感謝申し上げます。

他にも私のようにカスタマイズを希望されている方もいるかと思いますので、役に立った記事をカスタマイズの用途に合わせてご紹介したいと思います。

なお、ほとんどの場合テーマを編集しますので、必ず事前にファイルのバックアップを取っておきましょう。実際、何度かレイアウトを崩してしまったり、管理画面にすらアクセスできなくなったことがありますが、元のファイルをFTPアップロードして上書きすればすぐに戻せます。


スポンサーリンク

 

ヘッダーにアドセンス728×15を入れる

デフォルトでは、336×280のアドセンス広告が右サイドバー上部に1つ、記事下に2つ表示されますが、サイズが同じためか、3つともまったく同じ広告が表示されることがありました。

広告の内容を分散させたかったのと、ファーストビューにアドセンス広告を入れてCTR(クリック率)を上げたかったので、ヘッダー下部に728×15のアドセンスを入れることにしました。

 
<役に立った記事>

 

ヘッダー画像の高さを変更する

ヘッダーにアドセンスを入れたため、ファーストビューでは記事タイトルがかなり下の方に押しやられてしまいました。これを解決するため、ヘッダー画像の高さをデフォルトの150から100に変更しました。

 
<役に立った記事>

 

追尾型SNSボタンをスマホから消す

デフォルトで搭載されている追尾型SNSボタンはソーシャル拡散を期待できる優れた機能ですが、スマホでは邪魔に感じる方もいるようです。また、アドセンスの上に被さるように表示するのは規約にひっかかるおそれがありますし、クリックしにくいためCTRを下げる可能性もあります。

ただし、追尾型SNSを消すのはスマホだけにして、PCやタブレットの場合は表示させたいと考えました。

 
<役に立った記事>

 

アドセンスの表示位置とサイズをデバイスごとに変更する

右サイドバー上部の336×280のアドセンス広告を、CTRの高い記事タイトル直下に変更したいと考えました。

また、スマホではファーストビューを広告が占めると規約違反のおそれがありますので、記事タイトル直下には、300×250のアドセンスではなく320×50のモバイルバナーを入れるのが無難です。

しかし、もっともCTRの高さが期待できるのは300×250ですので、記事下には表示させたいところです。

そこで、このような細かいアドセンス広告の表示設定ができないものかと考えました。

 
<役に立った記事>

 

検索ボックスをGoogle検索に入れ替える

デフォルトではスタイリッシュな検索ボックスが用意されていますが、Google検索も微々たるものですが広告収入が期待できますので、変更したいと考えました。

 
<役に立った記事>

 

今までに実施したカスタマイズは以上です。

なお、今後予定しているカスタマイズもありますので備忘録として記載しておきます。近いうちに時間を取って実施したいと思います。

 

OGPを出力する

Facebookのデバッガーで調べてみたところ、当ブログはOGPを正常に出力していないようです。facebookページも作りましたので、近々対処しなければいけませんね。

 
<役に立った記事>

 

スマホ表示のフォントを小さめに

スマホのファーストビューでは、iPhone4sの場合、スクロールしないと記事タイトル直下のアドセンスが表示されません。そこで、ブログタイトルや記事タイトルのフォントをもう少し小さくしてアドセンスが表示されるようにしたいと考えています。

スマートフォンのCSSは「smart.css」に記載してありますので、こちらをカスタマイズしてみるつもりです。

 
<役に立った記事>

 

iPhone用ウェブクリップを設定

※2013年10月22日の追記です。

Stingerで作ったブログを、iPhoneで「ホーム画面に追加」した場合に、ファビコンと同じ画像を表示させるにはカスタマイズが必要です。

まずは表示させたい画像を114×114のpngファイルで作成します。次に、サーバー内のwp-content/themes/stinger3/imagesフォルダ内に、作成したpng画像をアップロード。

Stinger3のheader.phpファイル内にある「apple-touch-icon-precomposed.png」の記述をアップロードした画像ファイル名に変更して、更新すればOKです。詳しくはこちらのブログをご覧ください。

 
<役に立った記事>

 

Pocketのソーシャルボタンを追加

※2013年10月24日の追記です。

Webで気になる記事を、Pocketを使って後で読む方が多いようですので、Pocketのソーシャルボタンを追加することにしました。コードは、「Pocket for Publishers: Pocket Button」から取得できます。

フッターと追尾型ソーシャルボックスの両方に入れてみました。

 
<役に立った記事>

 

あとがき

Stingerを導入した経緯は、過去記事「PV2倍超え!WordPressの無料テーマStinger導入準備とカスタマイズ」の通りですが、たしかにPVは増えたもののアドセンス収益の方は思ったほど伸びなかったんですね。

アドセンス管理画面を確認すると、トネリコBLOGはスマホからのアクセスが40%以上を占めているのですが、このスマホ経由の収益が落ち込んでしまったことが大きな原因だったのです。

そこで、「これはなんとかしなければ」と思ったことがカスタマイズに踏み切った大きな理由でした。

はじめは分からないことだらけでしたが、他のブロガーの方々が有益な記事をあげて頂いたおかげで、試行錯誤しながら多くのことを学びつつ、カスタマイズを進めることができました。

Stingerのカスタマイズをご検討されている方には、参考にして頂ければ幸いです。

 
以上TONELIKOでした。
 





スポンサーリンク


シェアしてもらえると嬉しいです!

ブログの更新情報はこちらで確認できますよ!  

 

 
follow us in feedly  
 

関連記事

CLOUDFLARE

CDN「CloudFlare」は効果絶大!WordPressブログの表示を2.94秒短縮!

なんと、GTmetrixで「AA」が出ました!ブログ運営を始め...

記事を読む

WordPressのテーマをStingerにしたら1日でPV2倍以上アップ!

PV2倍超え!WordPressの無料テーマStinger導入準備とカスタマイズ

WordPressでブログを初めて10ヶ月、やっと3000PV...

記事を読む

Googleアナリティクス ページ速度のサマリー

速度92%短縮!WordPressの遅い表示を改善した、たった1つのプラグイン設定

WordPressで作ったブログが重い! 上記画像はGo...

記事を読む

AdSense Manager

過去167記事に定型文を自動挿入!AdSense Managerのもう一つの使い方

ブログ記事に毎回自動挿入したい定型文はありませんか? T...

記事を読む

コメント/トラックバック (1件)

トラックバック用URL:

コメントフィード

  1. […] 初心者でもできた!Stingerのカスタマイズに役立った記事まとめ […]




管理人にのみ公開されます

人口30%減!厚木市でアパマン経営や土地の売却を検討するなら地域ごとの人口予測は必見!

ここのところ「相続予定の土地をどうしたらいいかな?」って相談を...

厚木の公園9選!遊具、滑り台、アスレチック、動物、桜(花見)、プール(水遊び)など、目的ごとに最適な公園がすぐ分かります。

厚木市は大きな公園が多く、遊具やアスレチックなどの施設が充実し...

厚木高校ってどんなとこ?いきものがかり以外の有名人は?偏差値や部活(吹奏楽部、軽音、ソフトテニス、チア)の種類、進学実績は?

最近「放牧宣言」をした”いきものがかり”の母校でもあり、神奈川...

厚木市で合鍵作成できる店9選!(イオン、ミロード、コーナン、ビーバートザンなど)

同居家族がいるなら作っておきたいのが合鍵(スペアキー)。 一...

厚木市で車の買取査定!おすすめの買取店15選

「愛車をできるだけ高く売りたい!」 「でも、実際にどれぐ...

→もっと見る


  • 神奈川県在住の三児の父トネリコ(TONELIKO)です。
    Webマーケティング、子育て、iPhone、Mac、ディズニー、コストコ、サッカー、厚木等に関する体験から得たノウハウをご紹介します。
    黒糖きなこと黒ゴマとココナッツが大好物。家ではiPad、外ではiPhoneが手放せません。
    詳しいプロフィールはこちら
    E-Mail:iアットtoneliko.com(アット⇒@に変更)



  • follow us in feedly

PAGE TOP ↑