SEO向けのWordPressのテーマに変える

WordPressにはブログの各ページの外観を変えるテーマがあります。

実はテーマは外観だけでなくSEO対策や集客の仕組みも含まれています。例えば

  • TwitterやFacebookなどへの拡散の仕組み
  • スマホなど端末に合わせたスタイル

などあります。

細かいSEO対策は徐々にやっていくとして、一番気にしたいのはスマホ向けです。Googleの検索エンジンもここを意識しています。

みなさんはブログを見る端末に何つかってますか?

私は閲覧ユーザのときは、基本iPhoneです。電車の移動時間や病院の待ち時間などのちょっと暇な時間にググってブログ見ています。統計は取ってませんが9割くらいはスマホです。システムエンジニアの私が9割なので、ごく一般の方々もスマホで閲覧する率が高いです。

Googleなんかは記録とっているので、当然この状況がわかっていて、モバイルフレンドリーなページのほうが検索のスコアを高くします。というよりモバイルフレンドリーじゃないページは減点しているのでしょう。

なので、テーマを選ぶときはiPhoneで確認するとよいです。
いろいろなテーマがありますが、迷わずSimplicityを使えばよいです。

Simplicity

Simplicityは、有名なブログでよく使われているテーマです。調べたければ、そのブログのソース(右クリックしてソース、Ctrl+FでSimplicity)で確認してみてください。

テーマを変える手順は、Simplicityのサイトを確認してください。読むのが面倒な人向けに最低限のリンクを張っておきます。

簡単に言うと、テーマは更新される可能性があるので、テーマの一部を抜粋した子テーマをインストールして、こちらをカスタマイズしてね、ということです。

スキンは Sky Pop

私のブログでは、Sky Popというスキンを使っています。Simplicityに最初から用意されているスキンです。

青を基調としていて、好きな感じです。iPnoneで見るとこのように見えます。

Sky Popのアイコンと文字が重なるスタイルを直す

iPhoneで確認すると一部アイコンと文字が重なってしまいます。

PCでは重なっていないのでモバイル用のスタイルの間違いのようです。

ブログのメンテナンスページから「外観」「テーマの編集」を選び、右側のファイルからモバイル向けの「mobile.css」を選んで下記スタイルを追加します。

div#under-entry-body h2 {
  margin-left: 40px;
}

div#under-entry-body h2:before {
  margin-left: -30px;
}

div#under-entry-body h2:after {
  margin-left: -30px;
}

iPhoneで確認するとうまく表示されるようになりました。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする