Twenty Twelveの子テーマを使って、Google AdSense入りのレスポンシブデザインにするまでの手順

1．テーマを変更しました

先日、当ブログのテーマを変更しました。自作も考えましたが、結局は、Twenty Twelveを子テーマでちょこっとカスタマイズする、という方針に切り替えました。

大部分をTwenty Twelveベースにしたため、それほどたいした手間はありませんでした。以下、作業内容と、参考にさせていただいた情報を整理します。

2．実現したかったこと3点

今回のテーマ変更で実現したかったことは、以下の3点です。

(1)　レスポンシブデザイン

まず、レスポンシブデザインにする、ということです。

これまで、このブログのスマートフォン用ページは、プラグインWPtouchにお世話になっていました。

しかし、WPtouchを使うと、パソコン用ページの雰囲気と、スマートフォン用ページの雰囲気が、大きく異なってしまいます。

そこで、スマートフォン用ページもパソコン用ページと共通した雰囲気とするため、レスポンシブデザインとすることにしました。

(2)　Google AdSenseを、タイトル下・記事下・サイドバー上部に設置する

次に、Google AdSenseを設置する、ということです。

このブログには、Google AdSenseを設置させていただいてます。これまでのレポートを見る限り、ある程度効果が高いのは、(i)タイトル下、(ii)記事下、(iii)サイドバーの上の方、の3つではないかと思いましたので、この3箇所にGoogle AdSenseを設置することにしました。

サイドバーへの設置なら、ウィジェット機能で対応可能ですが、タイトル下と記事下は、テンプレートをいじる必要があります。

(3)　見出しタグの整理

最後に、個人的には、これが一番やりたかったことなのですが、見出しタグの整理です。

このブログの記事の特徴のひとつは、見出しが多いことだと思っています。特に、大きな見出しから小さな見出しまで、いろんなレベルの見出しを使うのが、このブログの記事の特徴です。本文中の見出しだけで、h3からh6まで、4段階の見出しを使うこともざらです。

しかし、これまでのテーマでは、見出しの大きさをレイアウトによって表現することが不十分でした。さらに、h6タグなどになると、本文よりも小さなフォントになってしまっていましたので、かなり見づらかったのではないかと思います。これを改めたいと思いました。

3．採用した方法＝Twenty Twelveを、子テーマでカスタマイズする

この3つを達成するために、私が採用した方法は、Twenty Twelveを、子テーマでカスタマイズする、ということです。

(1)　Twenty Twelveなら、レスポンシブデザイン

WordPressチームが提供するテーマの2012年版であるTwenty Twelveは、レスポンシブデザインのテーマです。そのため、Twenty Twelveをカスタマイズすれば、そんなに大きな手間をかけずに、レスポンシブデザインのテーマを作ることができます。

私の知識と技術では、レスポンシブテーマを全部自分で作るのは、無理でした。そこで、Twenty Twelveに乗っかることにしました。

(2)　「子テーマ」を使えば、カスタマイズもテーマの管理も簡単

すでにあるテーマのテンプレートをいじるのは、なかなか大変です。テーマの全体を理解しないと、どこを修正したらよいのかわからないですし、下手をするとテーマ全体が動かなくなります。

この対策として、WordPressには、「子テーマ」という機能が用意されています。

WordPress Codexは、こう言っています。

WordPressの子テーマとは、別のテーマ（親テーマ）の機能を継承し、その機能にさらに機能を追加したりその機能を調整したりすることのできるテーマです。

もっとも単純な形式では style.css ファイルを一つだけ備えたディレクトリとなり、制作がとても簡単です。HTML と CSS に精通していればプログラミングの知識は必要ありません。また、基本的には親テーマ自身にはまったく手を加えないで親テーマのスタイルやレイアウトを好きなだけ変更することができます。そのため、親テーマがアップデートされても子テーマの変更は保持されます。

さらに、PHP や WordPress Plugin API を基本的に理解していれば、自分の子テーマの中で PHP を使い、親テーマにまったくさわることなくどのような改変でも可能になります。

このような理由で、使用しているテーマをカスタマイズする方法として子テーマをおすすめします。

子テーマ – WordPress Codex 日本語版

ということで、子テーマを使うことにしました。

4．手順

私がとった手順は、以下の通りです。いろいろなページに助けられましたので、そのページへのリンクを張っておきます。ありがとうございました。

(1)　子テーマ作成

まずは、子テーマを作ります。

子テーマの作り方は、インターネット上にたくさん情報がありますが、このページがまとまっていてわかりやすかったです。

まずは子テーマをつくる準備から | Webourgeon

(2)　サイドバーの幅を調整

子テーマを作る準備をしたら、cssなどの修正です。

最初に、メインカラムとサイドバーの幅を修正しました。Twenty Twelveのサイドバーは、幅300pxのGoogle AdSense広告を貼ると、はみ出してしまうのです。これではよくないので、修正しました。

これも、インターネット上にたくさんの情報がありますが、私が参考にしたのは、このページです。

TwentyTwelveでサイドバーに300px幅の広告を貼りたいと思ったときにするWordPressのカスタマイズ | ぱそこん学び舎

(3)　Google AdSenseのコードを挿入

サイドバーの幅を修正したら、次は、Google AdSenseのコード挿入です。

a．タイトル下：300×250

タイトル下に、300×250の広告を入れました。

Twenty Twelveの場合、挿入する場所は、以下の場所です。

(a)　編集するテンプレート

content.php

(b)　挿入する場所

<div class=”header-meta”><?php twentytwelve_entry_meta(); ?></div>

と

<?php else : ?>

の間

<?php if ( is_single() ) : ?>と<?php else : ?>に囲まれた間に挿入することで、個別記事ページのみに表示させることができます。

（これをしないと、トップページなど、1ページに複数の記事を表示するページに、記事の数だけGoogle AdSenseの広告が表示されてしまいます。）

b．記事下：336×280

記事下の336×280は、以下の通りです。

(a)　編集するテンプレート

single.php

(b)　挿入する場所

<?php get_template_part( ‘content’, get_post_format() ); ?>

の下。

c．サイドバー上

サイドバーの上部に、300×250の広告を入れました。

これは、WordPressのウィジェット機能の、テキストウィジェットを使って、設置しました。

(4)　見出しタグの整理

a．ページ全体のh1、h2、h3、……の整理

ページ全体の見出しタグを整えるために、以下のとおり、整理しました。

(a)　h1タグ

ブログタイトルにしました。このブログの場合は、「単純作業に心を込めて」がh1タグです。

(b)　h2タグ

記事タイトルにしました。

たとえばこの記事だと、「Twenty Twelveの子テーマを使って、Google AdSense入りのレスポンシブデザインにするまでの手順」をh2タグで囲むようにしました。

これに対して、Twenty Twelveは、記事タイトルをh1タグで囲っています。そこで、記事タイトルを囲むタグをh2タグに修正するために、content.phpテンプレートの中の「<h1 class=”entry-title”><?php the_title(); ?></h1>」を「<h2 class=”entry-title”><?php the_title(); ?></h2>」に修正しました。

b．レイアウトの整理

hタグのレイアウトを整理しました。視覚的に、見出しの大小関係を表現することが目的です。最近の記事の場合、一番大きな見出し（1，2，3，……の見出し）がh3で、一番小さな見出し（(a)、(b)、(c)、……の見出し）がh6なので、h3～h6までに階層をつけることをまず考えました。また、昔の記事には、一番大きな見出しがh2になっているものが残っているため、h3よりも大きな見出しがh2だということもわかるデザインがよいなあと思いました。

見出しのレイアウトを変えるのは、cssを加えるだけです。

このページが大変参考になりました。

[CSS初心者向け]ブログで良く見かけるシンプルな見出しの作り方 | delaymania