細部まで上品でモバイルファーストなWordPressデフォルトテーマ【Twenty Sixteen（2016年）】

Twenty Sixteen

Twenty Sixteen は ずっと人気の WordPress レイアウト — ブログとウェブサイト用に完全に動作する、オプションの右サイドバーのある水平の題字 — に対するモダンな試みです。美しいデフォルトカラースキームのカラーオプション、モバイルファーストのアプローチによる調和した柔軟なグリッド、細部にまで非の打ち所がない上品さを備えています。Twenty Sixteen は WordPress の外観をどこであろうとも美しく見せるでしょう。

※最新の情報を Twenty Sixteen で確認のうえご利用ください。

※デフォルトテーマでサイトを運用する場合は、日本語フォントの大きさや、種類をカスタマイズしたくなります。このカスタマイズをするにはスタイルシート・cssの知識などが必要になってきます。初心者の方には少しハードルが高いかもしれません。日本語で開発された有料テーマなどを利用されるとスムーズにサイトを作り上げることができるのではないでしょうか。

テーマカスタマイザー

「Twenty Sixteen」のカスタマイズ内容は以下の表のようになっています。

サイト基本情報	サイトのタイトル キャッチフレーズ
ヘッダー画像	画像を指定できる（1200 x 280推奨）
背景画像	背景画像を指定できる
メニュー	2ケ所の表示位置がある
ウィジェット	3ケ所 サイドバー コンテンツ下1 コンテンツ下2
ホームページ設定	トップページを最新の投稿か固定ページにする

インストール

Twenty Sixteen をインストールするにはダッシュボードから外観　→　テーマ　→　新規追加　→　テーマ名で検索しインストールを開始します。

※

Twenty Sixteenのカスタマイズ

Twenty Sixteen（WordPressテーマ）をカスタマイズするには、大きく分けて機能面とデザイン性をカスタマイズすることになります。最初に取り組むべきは、テーマカスタマイザーを使う、cssの追加をすることでしょう。どちらも手段が複数ありますので、事前に理解して取り組まれるとよいでしょう。プラグインを利用すれば高度なカスタマイズが可能になります。プログラムスキルをお持ちの場合は、直接テンプレート（PHP）ファイルを書き換えるカスタマイズになります。コードを直接編集する方法はリスクも高いので、よく理解されている方以外にはおすすめできません。

WordPressは無料で利用できるCMS（Contents Management System）であることから、多くの企業やブロガー、アフェリエイターによって運用されています。利用数が多いといことは、同じようなサイトが存在するといううことになります。そこで、サイトをカスタマイズして他のサイトと差別化しビジネスに役立てませんか。

css（スタイルシート）でカスタマイズ

部分的に色を変更したり、背景や囲みを装飾、文字の大きさを変更したりしたいのであればcss（スタイルシート）を追加することになります。「スタイルシート・css」記述するには、「テンプレートファイルに直接記述」する、「テーマカスタマイザーで記述」する。「プラグインを使って記述」などの方法があります。

ブロックエディタ対応のテーマではブロックごとにタイポグラフィ（「文字や文章を読みやすく、または美しく見せるための技術」）を指定できるので、文字の大きさや色を指定したい場合は、こちらを利用されたほうが良いでしょう。

注意点）スタイルシート・cssが大きくなりすぎると表示速度に影響を及ぼすこともあるので注意が必要です。

テーマカスタマイザーの「css追加」は複雑なコード編集は、編集エリアが狭く操作しづらいですが、テーマの更新よって上書きされることはありません。逆にテンプレートファイルの「style.css」は上書きされるので、子テーマで対応するか、バックアップをとり対応するかになります。推奨は「css追加」となっています。

css（スタイルシート）を追加するには、ダッシュボードの　外観　→　カスタマイズ　→　追加css　と進みコードを追加します。スタイルシートを適用させるには編集ブロックに　高度な設定で　「追加 css クラス」にクラス名を記述します。スタイルはブロック対して適用されるようになっています。複数のブロックに適応させたいならブロックをグループ化しておきます。

ページごとに css を記述したい場合はプラグインを利用すると良いでしょう。「VK All in one Expansion Unit」の cssカスタマイズ　を有効にしておくと、ページごとに スタイルシートを追加することができます。

テーマによってはあらかじめ、ページごとに css を記述できるようにしたものもあります。複雑なデザインを施したいサイトの場合はこちらを選ぶとよいかもしれません。

テンプレートファイル（PHP）でカスタマイズ

テンプレートファイル（テーマファイル）のカスタマイズは、外観 → テーマファイルエディタで編集することになります。テンプレートファイルの構成は各テーマによって異なっていますが概ね以下のようなファイルで構成されています。

• スタイル（style.css）
• テーマの関数
• 404テンプレート
• コメント
• テーマフッター
• テーマヘッダー
• 検索フォーム
• 単一テンプレート

テンプレートファイルを直接編集してカスタマイズすることもできます。ただ、この方法は高度な知識を必要とされますので、十分な知識をお持ちの方におすすめなります。記述ミスによって画面が表示されなくなったり、管理画面にログインすらできなくなったりすることもあります。

テンプレートファイルを直接編集してサイトを運用するなら子テーマを利用しましょう。なぜならWordPressは頻繁にアップデートが繰り返されソースコードが上書きされてしまい、再びカスタマイズをしなければならなくなってしまうからです。

子テーマの作り方

＊子テーマとは
「子テーマ」は、WordPressでウェブサイトやブログのデザイン・レイアウトを構築する際に、「親テーマ」と連動して機能するもうひとつのテーマです。 WordPressのデザインテンプレートは、「テーマ」を有効化させることで構築されます。

詳細を読む

子テーマの作り方

子テーマは単独で動作するのではなく、親テーマと連動して機能します。そのため子テーマはカスタマイズをするソース（ファイル）だけで構成します。ただし、functions.php と style.css は親テーマと連動させるために必須となっています。

• functions.php
• style.css

これらのソースの記述内容は決まっているので準じて記述しなければなりません。

■子テーマはPC上で作成しアップロード

子テーマの作成作業はPC上で行います。作業は比較的簡単で、知識のある方なら数分で完了するのではないでしょうか。そして、完成した子テーマは、WordPress管理画面（ダッシュボード）のテーマからインストール（アップロード）すれば利用できるようになります。

■子テーマ作成手順と作業内容

子テーマは以下の手順で作業します。

【1.】子テーマフォルダを作成
【2.】Style.css を記述する
【3.】functions.php を記述する
【4.】子テーマフォルダを圧縮する
【5.】WordPressにアップロードする

■作業内容

【1.】Windowsパソコンでディスクトップ等に、子テーマフォルダを作成します。フォルダ名は　XXXX-child とわかりやすい名前にします。

【2.】Style.css を記述します。メモ帳などのテキストエディタを使います。テキストエディタを開いたら下記のコードを記述もしくはコピー＆ペーストしてください。

/*
Theme Name:xxxxx child
Theme URI:
Description:WordPressテーマ「xxxxx」の自作子テーマです。
Template:XXXX
Author:xxxx
Author URI:https://xxxxx.com/
Version:0.0.8
*/

xxxx の部分を変更します。Template: と Author URI: は子テーマを採用するサイトの内容にあわせます。完了したら先ほど作成した子テーマフォルダに保存します。

スタイルシートを追記したい場合は、子テーマの　カスタマイズ　→　追加css で記述できます。

【3.】functions.php を記述します。同様にテキストエディタを使用します。

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
  wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
  wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style')
);
}
?>

内容は変更する必要がないので、完了したら先ほど作成した子テーマフォルダに保存します。

※カスタマイズコードは子テーマを有効化し　外観　→　テーマファイルエディター　を使って追記します。

【4.】子テーマフォルダを圧縮する
WordPressにアップロードするために、子テーマーフォルダーを圧縮します。フォルダを右クリックし、送る　→　圧縮（zip形式）フォルダ　でディストップに圧縮ファイルが生成されます。

【5.】WordPressにアップロードする
WordPressにログインし　外観　→　テーマ　→　新しいテーマ　→　テーマのアップロードと進みます。

「ZIP 形式のテーマファイルをお持ちの場合、こちらからアップロードしてインストールまたは更新できます。」と表示されるので、ディストップの圧縮フォルダをアップロードして子テーマをインストール、有効化すれば使用できるようになります。

最終作業として、子テーマで表示されるか確認をします。ブラウザの新規タブを開くか、他のブラウザを開いて目的のURLで開きましょう。このときWordPressの管理画面を開いておけば、万一表示されない場合にもテーマを親手テーマに戻せることが可能なことが多いです。

■トラブルが発生したら

表示されない原因の多くに　Style.css　の記述ミスが挙げられます。例えば2バイト文字で記述したり、Template:　を間違って記述したりでしょうか。

管理画面から親テーマに戻せるようなら、一度戻して、作成した子テーマフォルダをPCで修正しましょう。

表示はされるが崩れてしまう場合もあるようです。テーマが有料テーマや無料で配布されているテーマの場合は配布元のサイトで確認をしてください。

Twenty Sixteen にアフィリエイト広告を掲載

WordPressテーマ【Twenty Sixteen】にアフィリエイト広告を掲載するには、広告を掲載管理してくれるプラグインやウィジェットに一括して掲載する方法と、記事のどこかに「カスタムHTML」ブロックを使ってアフェリエイトプロバイダーが用意している、画像やテキストバナーをコピー＆ペーストします。

アフィリエイト広告を記事に貼り付けるには、記事のどこかに「カスタムHTML」ブロックを使ってアフェリエイトプロバイダーが用意している、画像やテキストバナーをコピー＆ペーストします。このとき注意しないといけないのは、ソースコードを改変しないこと、せっかくクリックされてもコードが改変されたり、正しくコピーされていないとカウントされないといったことが発生します。（その他広告商品ごとに注意点があるのでよく確認すること。）

サイト内に同じ広告バナーを貼り付ける場合、作業に時間がかかること、広告の管理が困難になること。広告によっては途中でスポンサーが広告の掲載を中止してしまうことがあります。この場合サイト内にある広告を削除しなければならないので、サイト内のページが多いと、結構大変な作業になります。

バナーには画像のものとテキストのものがあります、どちらもクリックされることでスポンサーサイトに移動するものです。画像は目につきやすいのでクリックされやすいととらえがちですが、昨今は広告ブロック搭載のブラウザ（特にスマートフォンなど）が利用されバナーが表示されないことも多くなってきました。テキストバナーは情報系のコンテンツでは、文章の中に溶け込ますことが可能なので、意外と思う方もいるかもしれませんがクリックされることが多くなります。（テキストは表示されているが、クリックされても移動がブロックされるケースもあります。）

再利用ブロックを利用して広告を貼り付ける

WordPressのデフォルトエディタ　Gutenberg　には指定したブロックを簡単に記事に貼り付けることができるようになっています。記事を書いているとサイト内の他の記事の一部分と同じような内容ができることがあります。こんなとき再利用したいブロックとして指定しておけばクリックするだけでページに貼り付けることができます。

アフィリエイトなどで広告バナーをサイト内に複数掲載している場合などにも、再利用ブロックは大いに利用価値があります。再利用ブロックは利用元の内容を変更すると、記事内貼り付けた利用ブロックも同時に変更されます。広告を入れ替えれば、サイト内の広告が自動的に置き換えられます。

１．再利用ブロックを指定する

Shift + 右クリックで再利用したい範囲を設定します。文字だけでなく、画像なども含めて指定することができます。続いてメニューのOptionから「再利用ブロックに追加」をクリックします。

２．再利用ブロックを記事に貼り付ける

再利用ブロックを記事に貼り付けるには、ブロックを登録していれば、再利用可能タブが表示されるので、タブをクリックして登録しているブロックをクリックします。

３．再利用ブロックを管理

再利用ブロックを編集したり、削除したければ、画面右上のオプション・再利用ブロックを管理を選択します。投稿一覧のような画面が表示されるので編集したいブロックをえらびます。ここで編集した内容は貼り付けているブロックすべてに適応され変種後の内容がページに表示されます。編集内容を反映させないようにするには、そのページで「通常ブロックに変換」しておきましょう。

アフィリエイトを始める

アフィリエイト広告で得られる報酬には、「クリック型」と「成果報酬型」があります。アフィリエイトの多くが「成果報酬型」で企業のサービスや商品を紹介して購入されれば報酬を得ることができます。これにたいして「クリック型」はGoogleアドセンスのように広告がクリックされれば報酬を得ることができます。

アフィリエイトを始める場合、少しでも多く報酬を得たいだと思います。しかし、収益を高めるためには、記事を書くだけでは収益にはつながらないと言えます。とくに「成果報酬型」の場合は、スポンサー企業のサービスを申し込んだり、商品を購入してもらわないと収益にはなりません。つまり、購買の意思を持ったユーザーに自サイトにきてもらう必要があります。

何かに困っているので、これを解決したいと考え検索しているユーザーに、解決案として商品やサービスを紹介することで関心度は高まり、購買の動機になります。記事の内容によって成否が決まってくるとも言えます。

そのため、最低でも以下の点について決めてからアフィリエイトを始めるようにしましょう。

• 得意とするジャンルの情報を発信
• ブログの内容と関連のある広告素材を掲載
• 報酬が高いプログラムが多い分野を選ぶ
• 専門性の高い外注先を確保・活用する
• SEOやリスティングなど集客を計画する

アフィリエイトを開始するにはまずブログを作っておく必要があります。このとき、これからどんなブログにしていくのか、どんな商材を取り扱うのかを想定しておく方が後々運営にブレがでなくて好ましいでしょう。

アフィリエイトを始める手順

1. 売れ筋の商材を探し出す。売れていない商品を制約させるのは難易度が高いといえる
2. 集客の手法を決める。（SEOを利用する方法は難易度も高いし時間も必要、Twitterなどによる集客も手段の一つ）
3. ブログを作る
4. ブログのコンテンツに関心をもつユーザーの商材を扱うアフィリエイトサービスプロバイダを探す
5. アフィリエイトサービスプロバイダに広告掲載審査を申し込む
6. 承認されたら広告を掲載する

アフィリエイト・サービス・プロバイダ（Affiliate Service Provider / ASP）とは、インターネット上で商品やサービスを提供する ECサイトと、そのサイトの広告を掲載しているアフィリエイトサイトの間を取り持つ、 広告代理サービスを指します。アフィリエイト・サービス・プロバイダに登録することによって、広告主と直接契約しなくても、ブログやサイトに 貼りつけることができるようになります。

アフィリエイトの収益

アフィリエイトとは一言で説明すると成果報酬型の広告のことです。アフィリエイトでどのくらい稼げるかは、選ぶ商材やサイトの内容の品質によって大きく異なってきます。

1. ホームページやブログ記事に企業や特定の商品・サービスの広告を掲載
2. 訪問者がその広告をクリックして商品やサービスを買ったりして広告主の利益になる
3. 成果報酬が収入として手に入る

商材はさまざまで、良く知っているものや好きなものを選ぶことができます。もちろん、売れそうな商材を見極めることも成功のポイントになります。広告を掲載するには広告主を探さないといけません、そんな時はアフィリエイト・サービス・プロバイダを利用しましょう。広告主と掲載者との仲介をしてくれます。

１ケ月あたりのPV数	予想される収益
3万PV	6,000 ～ 9,000円
10万PV	2万円 ～ 3万円
30万PV	6万円 ～ 9万円
50万PV	10万円 ～ 15万円

収益を得るためには、PV数は絶対条件と言えます。そのためには多くのユーザーに求められる情報を発信することが求められます。PV数増加してきたらアフェリエイト商材の記事に誘導できる仕組みをサイト内に作り上げましょう。あとは商材を選ぶこと、報酬高目の方が良いですね。

クレジットカード等	10,000円前後（報酬高め）
Amazonアソシエイツ	～ 10%（報酬低め）
健康食品	1,500 ～　6,000円
無料会員登録（ポイントサイト等）	2,000 ～　2,500円前後

WordPressのテーマを変更する手順

テーマを変更するには、管理画面からダウンロードし有効化するという流れになるのですが、いきなり有効化するのは少しリスクがあります。ウイジェットなどはテーマによって取り扱いが異なります、そこで以下の手順で変更されることを推奨します。

1. 変更前にバックアップする
2. ダッシュボード・外観　よりテーマディレクトリにアクセスする
3. ライブプレビューを確認し表示の調整を行う
4. 有効化して公開
5. 公開後の確認作業を行う

※ライブプレビューで確認して表示の調整をするには、ダッシュボードの　外観　画面でインストールしたテーマの有効化ボタンの右側　ライブプレビューボタンをクリックします。

テーマカスタマイザーによる調整ができるので、修正が終わったら左上部の「有効化して公開」ボタンをクリックします。公開後にはスタイルシートを修正、確認、設定します。以下の点については公開後早期にチェックするようにしましょう。

• 外部のツールと連携している場合は正しく動作しているか
• スタイルシートが正しく設定されているか
• 不要なプラグインは削除する。

※

WordPressテーマの選び方

テーマを選ぶ際にはにはレスポンシブデザインかどうかは着目しましょう。レスポンシブデザインとは、スマートフォンやタブレット・PC別に１つのデザインで表示できるようにしたものです。サイトの内容によってはスマホユーザーが少ないこともあるでしょうが、Googleはモバイル端末での表示を標準と考えていますので、この点からも対応すべきポイトです。

• レスポンシブデザインなのか
• デザインをカスタマイズしやすいか
• ダウンロード数（利用されている数）が多いのか
• ブロックエディタに対応しているのか
• 日本語に対応しているのか
• テーマは安全なのか

有料テーマ	無料テーマ	公式テーマ
WordPress有料テーマはおしゃれでカスタマイズしやすいのが大きなメリットです。 WEBサイト運用するための機能も標準として装備されているので、プラグインの追加をしなくても十分使用することが可能です。 無料テーマはシンプルなものが多く、他のサイトとデザインが同じようになってしまうこともあります。 しかし、有料テーマであればカスタマイズしやすくなっているため、好みのサイトを作成しやすいのが特徴です。	WEB制作会社から配布される無料テーマもあります。無料とは思えないほど機能やデザインが充実しているテーマもあります。ただし、無料がゆえに途中で更新がストップしたり、開発が終了されることもあります。無料テーマは開発者の宣伝や有料版へのステップとして提供されていることもあると認識しておきましょう。 無料テーマのデメリットとしては、製品版のお試し（機能が制限されたり）として配布されたり、個人的に配布されたりしていて、サポートや更新が終了してしまうことがあります。	公式テーマは、日本語に対応しているのか確認しましょう、開発が海外の場合、日本語表示等に考慮されていない場合もあります。また、テーマ内の説明も日本語でないことも多いようです。 ディレクトリ登録時に事前に審査が行われるので、製作者サイトからの直ダウンロードに比較すれば安全といえるでしょう。 デザインや機能は育て上げる面もあり初心者にはハードルが高いかもしれません。サポートはありませんのでwordpress.orgやネットから情報か自力で解決しなければなりません。

WordPressテーマを安全に運用する

WordPressのテーマとは、サイト全体のテンプレートのことです。テーマは複数のファイルの集合体で、デザインなどの内容が一式セットになっています。そのため、テーマを変更すれば複雑な処理を行うことなく、デザインや構成、機能などを変えることができます。テーマは、インターネット上で無料ダウンロードできるものから、有料で販売されているものもあります。また、自分で作成したテーマをアップロードして使用することも可能です。

テーマの更新には、機能の追加・変更などのほかに、セキュリティ向上や不具合の修正なども含まれるため、常に最新の状態にアップデートしておくことです。また、テーマを更新すると、カスタマイズは初期化してしまいます。更新する度にカスタマイズし直すのは手間がかかるので、「子テーマ」の利用が推奨されています。子テーマを作る理由はテーマを直接カスタマイズしてしまうと、テーマのバージョンアップによって変更した内容が上書きされてしまうからです。子テーマは、親テーマの機能やスタイルを引き継いでいます。子テーマにカスタマイズしたい部分だけを付け加えておけば、テーマを更新した後もカスタマイズした状態をそのまま引き継げます。