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

※当ページのリンクには広告が含まれています。

Stingerカスタマイズ WordPress(ワードプレス)
スポンサーリンク

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でした。
 



コメント

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

タイトルとURLをコピーしました