*

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

公開日: : WordPress

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

スポンサードリンク

関連記事

no image

ローカルにWordPressのテスト環境を作るため、WindowsにXAMPPをインストール

1.はじめに 企業サイトのようなサイトをWordPressで作成する、ということを試してみたくて、

記事を読む

no image

Windows 8で使うWindows Live Writerのキーボードショートカットが使えなかった原因

1.Winows Live Writerとキーボードショートカットによる見出し設定 (1) Wind

記事を読む

no image

Windows 8にXAMPPをインストールし、ローカルのWordPress環境構築

1.大まかな流れ Windows 8 pro (64bit)のノートパソコン(VAIO T)に、XA

記事を読む

no image

作りながら学ぶことの力ー本格ビジネスサイトを作りながら、WordPressを学ぶ

1.はじめに GWを利用して、WordPressを勉強しました。ローカルにXAMPPでテスト環境を

記事を読む

no image

Stinger3導入1ヶ月後の検証

1.Stinger3を導入して1ヶ月が経ったので、検証する 2013年11月15日、WordPre

記事を読む

no image

プラグイン「Twitter Tools」でTwitterにWordPressの更新を流す際に、bit.lyの短縮URLを使う

1.WordPressブログの更新をTwitterに流すプラグイン「Twitter Tools」

記事を読む

no image

Google AdSenseの2次審査に通りました。WordPressブログにAdSenseを設置するまでの流れ。

1.Googleから「Google AdSense Support」というメールが届いた 今日の午

記事を読む

no image

テーマをStinger3(の子テーマ)に変更した理由と、1ヶ月後の検証項目

1.テーマを「Stinger3」(の子テーマ)に変更 先日、このブログのWordPressのテーマを

記事を読む

no image

WordPress.comブログを削除したけれど、WordPress.comアカウントを残している理由→JetpackのMyStatsを使うため

1.WordPress.comのブログを削除しました 私が、この「単純作業に心を込めて」というブログ

記事を読む

no image

プラグインBackWPupで、SugarSyncに、WordPressのXML・データベース・画像フォルダのファイルをバックアップ

1.バックアップの仕組みを作ったきっかけ 先日、よくわからないままサーバーをいじった結果、すべての

記事を読む

スポンサードリンク

スポンサードリンク

no image
「ハサミスクリプト for MarsEdit irodrawEdition」をキーボードから使うための導入準備(Mac)

諸事情により、Macの環境を再度設定しています。 ブログ関係の最重要は

no image
AI・BI・PI・BC

AI 『〈インターネット〉の次に来るもの 未来を決める12の法則』を読

no image
[『サピエンス全史』を起点に考える]「それは、サピエンス全体に存在する協力を増やすか?」という評価基準

1.「社会派」に対する私の不信感 (1) 「実存派」と「社会派」 哲学

no image
[『サピエンス全史』を起点に考える]サピエンス全体に存在する協力の量と質は、どのように増えていくのか?

『サピエンス全史』は、大勢で柔軟に協力することがサピエンスの強みだと指

no image
WorkFlowyを「書き上げる」ための道具として機能させるための、2つの条件・3つのイメージ

Tak.さんのTweetに触発されて。 WorkFlowyやOmniO

→もっと見る

  • irodraw
    彩郎 @irodraw 
    子育てに没頭中のサラリーマンです。1980年代生まれ、愛知県在住。 好きなことは、子育て、読書、ブログ、家事、デジタルツールいじり。
    このブログは、毎日の暮らしに彩りを加えるために、どんな知恵や情報やデジタルツールがどのように役に立つのか、私が、いろいろと試行錯誤した過程と結果を、形にして発信して蓄積する場です。
    連絡先:irodrawあっとまーくtjsg-kokoro.com

    feedlyへの登録はこちら
    follow us in feedly

    RSSはこちら

    Google+ページ

    Facebookページ

PAGE TOP ↑