なにやら荒れた天候で、日本各地がてんやわんやですが、皆さんいかがお過ごしでしょうか。
さて、SEOに強いと言われるWordPressのテーマ「Stinger3」を導入して数日が経過しました。
今の段階で結果を語るのはまだ早すぎますが、現時点での傾向としては「良好」とだけお伝えしておきます。
基本的な設定はあらかじめほとんど組み込まれているStinger3ではありますが、やはり少しは自分に合わせてカスタマイズしたいと思うところがありました。
今回は、Stinger3導入に関して、私が変更した点やハマった点について書こうと思います。
管理画面を操作中に画面が真っ白になる事象への対策
Stinger3インストール後、管理画面で操作したとき（保存などをして画面遷移した際など）に、画面が真っ白になることがあります。大抵、保存や変更はうまくいっているみたいなのですが、気持ち悪いし不便なので修正しましょう。
修正方法は下記記事を参考にしてください。
【WordPress】今話題のStingerにテーマ変更しました！SEOの強さに期待です！ | love guava!
サイドバーに人気記事を表示させる
デフォルトだとGoogleアドセンスと新着記事がサイドバーに表示されています。これでも悪く無いと思いますが、私はサイト内の回遊性を上げるために人気記事を表示させるようにしました。
これはよく利用されているプラグイン「Wordpress Popular Posts」を使っています。
見た目はCSSで整える必要があります。私はPC版はそれなりの表示になりましたが、モバイル版はあまりキレイに表示されていません。まあとりあえず表示上は問題ないので、時間があるときに修正したいと思います。
不要なプラグインを無効化する
他のテーマだとプラグインで実現するような機能のいくつかは、Stinger3ではもともと実装されています。このため、不要だと思われるプラグインは無効化しました。
プラグインが多くなると動作が重くなりがちですし、不要なプラグインが原因でStinger3が正常に動作しない場合もあるので、不要プラグインの無効化は強く推奨します。
私が無効化したプラグインの一例です。
- Breadcrumb NavXT…パンくずリストを表示する。デフォルトで実装されているので、無効化。
- Dynamic To Top…画面上部へ戻るボタンを表示する。デフォルトで実装されているので、無効化。
- Newpost Catch…新着記事を表示する。デフォルトで実装されているので、無効化。
- WP-PageNavi…ページナビゲーションを表示する。デフォルトで実装されているので、無効化。
- WP External Links…外部リンクにアイコンを付与したり、「target=”_blank”」をつけたりできる。ソーシャルボタンの動作に影響したので、無効化。ただし、代わりのプラグイン「external_link_rewriter」を入れました。（これはアイコンは付与できません）
あとはSEO系のプラグインもそれほど必要ない気もします。Stinger3の作者、@ENJILOGさんがオススメしているプラグインも参考に。
WordPressのお勧めプラグインと設定方法を公開 | ENJILOG
Googleアドセンスの配置を変更
お小遣い稼ぎにかかせないGoogleアドセンスの配置も、Stinger3では最適化されています。
ただし、@ENJILOGさんからスマホ用Googleアドセンス表示について重要なお知らせがありました。
【重要】Stingerのスマホ用アドセンス表示の問題について | SEO対策に強い無料WordPressテーマ「Stinger」
端的に言うと、「記事下のアドセンス広告が、1画面に2つ表示されており、これがポリシーに反する」というものです。
対処方法もあるので、アドセンスを利用する人は必ず上記記事に目を通して対策しておきしょう。
私もこれを受けて記事部分にアドセンスを配置しました。
が、ここで新たな問題が。
記事部分にアドセンスを配置すると、スマホ表示で広告が見切れてしまう
記事部分にアドセンス広告を配置するには、基本的に下記コードを「single.php」に貼り付けるだけです。
<?php get_template_part('ad');?>ただし、このままだと、スマホで表示したときに広告が切れてしまうという問題がありました。
▼少し見にくいですが、広告の下のほうが空白になってしまっています。
※ちなみに、スマホ用アドセンス広告はレクタングル（中）を使用することを想定しています。他の広告は私は使用していないので、未確認です。
これを解決するのに相当悪戦苦闘したのですが、CSSを編集することで解決しました！
スマホ用のCSS「smart.css」に、以下のコードを記述してください。
/*Adsenseの下部が見切れる対策*/
.adsbygoogle ins iframe{
height:250px;
}CSSの知識が乏しいので正しいのかイマイチ確証が持てないのですが、私はこれでうまく表示されるようになりました。
同じ現象の方、試してみてください。
※このCSSが使えるのは「非同期コード」のみです。「同期コード」で対策する場合、アドセンス用コード部分に任意のクラス名やセレクタを指定し、上記CSSを適用する必要があります。
＜2013/10/15追記＞
アドセンスが見切れる対策ですが、上記のやり方ではなく作者の@ENJILOGさん直伝のやり方のほうが良さそうです。
YouTubeの高さがおかしい | WordPressの使い方
「style.css」と「smart.css」について、下記のような記述を探します。
（上記記事ではstyle.cssのみですが、smart.cssも対処しないとスマホの表示が見切れたままになります）、
.kizi img,.wp-caption,.kizi video,.kizi object,.kizi iframe {
margin-bottom: 20px;
height: auto;
max-width: 100%!important;
}上記の部分を、下記のように修正してみてください。
.kizi img,.kizi wp-caption {
margin-bottom: 20px;
height: auto;
max-width: 100%!important;
}ファビコンの変更
ファビコンってご存知でしょうか？ブラウザのタグに小さく表示されるアイコンのことです。多くのブラウザではブックマークするとそのアイコンが表示されるので、個性的なファビコンを設定しておくと他のWebページと差別化できていい感じになります。
ファビコンの設定方法
- まずはファビコンを作りましょう。これは「ファビコン 作成」などでググればすぐに出てきます。
- ファビコンができたら、ファイル名を「rogo.ico」にしてデスクトップなどに保存します。
- 2で保存したファイルを、「FFFTP」などのFTPツールを使ってサーバにアップロードします。アップロード先は、「wp-content/themes/（Stingerテーマ名）/images」の直下です。デフォルトの「rogo.ico」が存在するので、上書きするか、不安な人はリネームしてバックアップするなどしておきましょう。
これでファビコンが設定できるはずです。
ちなみに、アドセンス変更やファビコン設定などを確認するとき、変更したにも関わらずブラウザ上の表示が変わっていない場合があります。その場合はキャッシュが原因の可能性があるので、下記を試してみてください。
【WordPress】CSS修正したけど反映されないときに確認すべき3つのこと | love guava!
まとめ
上記以外にも細々したところを触っていたりします。まあ見た目のところが大半なのでそれはお好みで。
しかし、CSSの知識が不足しているなーとつくづく感じました。今後ブログのデザイン修正を通して学習していくことにしましょう。