WordPressテーマ「Simplicity」のカスタマイズしやすさに感動！使用5日目のレビュー公開

こんにちは。
ネット系フリーランサー mammina です。

SEO 内部対策済の WordPress のテンプレート「Simplicity」を使い始めて5日目となりました。

ようやく見た目のデザインも、中身のシステム的なカスタマイズも少しずつ整ってきて……

と、ひとり感動しています…… 現在のカスタマイズ状況は、こんな感じです。

開設初日のサイト↓↓↓とは大違いですねぇ。

Simplicity はテーマが提供しているオプションを調整していくだけでも「それなりのサイト」に仕上がっていきます。でも、このテーマの真価は「『テーマの編集』でのカスタマイズのしやすさ」にあります。

あまりに感動したので今日は、このブログでも使っている WordPress テーマ「Simplicity」の感動ポイントと、現状のサイトのカスタマイズポイントを紹介します。

【前提】Simplicity2 についてお話していきます

Simplicity には、「Simplicity1」と「Simplicity2」があります。

私が使用しているのは、Simplicity2 の方です。Simplicity2 は、今のところ β版なのですが、

今後は機能追加と不具合修正は、Simplicity2のみに行っていきます。

とのことですので、今後を見据えて Simplicity2 を採用しました。

そのため、この記事で、Simplicity と記載している箇所はすべて Simplicity2 を意味します。ご注意ください。

WordPress「管理画面からできるカスタマイズ」での感動ポイント

【感動1】トップページの一覧リスト表示のレイアウトが10パターンもある

[外観] – [カスタマイズ] – [レイアウト(全体・リスト)] で設定できます。

• 一覧リストのスタイル

最初は気がつかなくて、デフォルトのエントリーカードを使ってたんですね。

それで、「この雰囲気、よく見るよね……なんだかなぁ……(-。-)」なーんて、思ってたのですが、10種類も選べるじゃないですか！！

しかも、トップページの「サムネイル」画像の角の丸め具合も設定項目が用意されていました。

• サムネイルの角の丸め具合

これ、自分で CSS を書かないといけないかと思ってたので、見つけた時は嬉しかったです！

【感動2】全体イメージも「スキン」機能で19パターン以上も切り替えられる

[外観] – [カスタマイズ] – [スキン] で設定できます。

• スキン選択

スキンが提供されているというのは、ホームページで拝見していたのですが……

このページ↑↑↑だけ見て、「あれ、あんまりないなぁ……」と思い込んでいました(ゴメンナサイ)。設定を見たら19種類もありました！

HTML や CSS などの、ウェブ制作の時に使う言語をあまり知らなくても、このスキン機能を使えば、ブログのイメチェンが簡単にできちゃいますよ。

【感動3】「リンク」が、はてなブログっぽい「ブログカード」で表示できる

[外観] – [カスタマイズ] – [ブログカード] で設定できます。

• ブログカード有効
• 外部リンクのブログカード有効

投稿画面で、リンク先の URL をそのまま書くと、四角い枠にサムネイルとタイトル・抜粋が入り、自動的にリンクをキレイに整えて表示してくれます。

リンクが、ただの文字になっているよりも、断然わかりやすいですよね！

【感動4】トップページに表示させる「抜粋」を自分で設定できる

[外観] – [カスタマイズ] – [レイアウト(全体・リスト)] で設定できます。

• 投稿画面の「抜粋」項目を利用

これ、デフォルトだと、冒頭から 70文字が抜き出されるんですね。こんな感じです。

でも、先頭に挨拶を入れていると、挨拶ばっかり表示されて鬱陶しいし、ちょっとした前置きを入れていたりしていると、タイトルと抜粋が一致しなくて読者の方が不審がってクリック率が下がる可能性もあります……

この [投稿画面の「抜粋」項目を利用] 機能が用意されていることで、自分で適切な文章を書いて表示に反映させることができます。

内容の意味がわかるのでクリック率アップにつなげられますよね！ しかも、

[外観] – [カスタマイズ] – [SEO] に、こんなことが書いてありました。

• 投稿ページにメタディスクリプションを挿入

投稿ページのメタタグに説明文を挿入するか。
（※抜粋があるときはそれを使用、ない場合は冒頭の抽出文）

つまり、投稿画面の「抜粋」欄に適切な抜粋文を書いておけば、そのまま検索結果の抜粋に反映されるというわけです。SEO 関連のプラグインなしで、メタディスクリプションをページ毎に設定できるのはいいですね！

記事の投稿画面に [抜粋] 欄を出す方法

記事の投稿画面では、インストールしたままの状態では [抜粋] 欄は表示されません。そのため、一手間 掛けて設定する必要があります。でも、一度やれば、その後ずっと表示されるので、最初に抜粋欄を表示する設定に変更しておきましょう。

[投稿] – [新規追加] で、記事の投稿画面を表示させる。

画面右上に [表示オプション] があるので、クリックする。

[抜粋] 項目にチェックを入れる。

これで、記事の投稿画面の [本文] の下に [抜粋] 欄が表示されるようになります。

クリック率を上げる「抜粋(メタディスクリプション)」の書き方

こちらのページが詳しいです。

上のページの前半は書き方とは直接関係ないので、ポイントだけ抜粋しておきますね！

• 文字数は120文字以内にすること
• 各ページに固有のdescriptionを設定すること
• 「これはWordPressについてのページです」のように非具体的なものは避けること
• キーワードだけで埋め尽くされたものにしないこと

meta description タグにはタイトルだけでは説明しきれなかった、そのページの内容を詳細に伝える文言を設定するようにしよう。

meta description にはそのページで対策予定のキーワードを必ず含めるようにしよう。なぜなら、キーワードに対応した文言が太字で表示されるようになるからだ。

【感動5】アイキャッチ画像を「サムネイル」としてあちこちに表示できる

「アイキャッチ画像」というのは、その名の通り「目」を「惹く」ための画像のこと。人は「テキスト」よりも「画像」の方が先に印象に残ります。

新規記事の投稿画面の [アイキャッチ画像] 欄に設定することで、「トップページの一覧リストやサイドバーにサムネイル画像を表示することができるようになります。

本文先頭にアイキャッチ画像を表示

[外観] – [カスタマイズ] – [レイアウト(固定・投稿ページ)] で設定できます。

• 本文先頭にアイキャッチ画像を表示

ページ送りにもサムネイル画像を表示させられる

本文先頭にアイキャッチ画像を表示するのと同じく、[外観] – [カスタマイズ] – [レイアウト(固定・投稿ページ)] で設定できます。

• [前ページ] [次ページ] ナビタイプ

「サムネイル付き」と設定します。

画像がある方が目に止まりやすいので、他のページも見てもらえる確率が上がるというわけです。

【感動6】「新着記事・人気記事」ウィジェットが、痒いところに手が届く便利さ

[外観] – [ウィジェット] で設定できます。

せっかく、自分のサイトに辿り着いてくれたんだから、できる限り多くの記事を読んでもらいたいものですよね？

だからこそ、人気記事や新着記事をサイドバーに表示させたりするのですが……

• トップページには新着記事が並ぶから、サイドバーに新着記事はいらない。
• でも、それ以外のページには、新着記事一覧を表示しておきたい。

って、結構ありがちです。

それを、たったひとつのウイジェットで実現してくれるのが、こちらです。

一見、地味に見えますが、痒いところに手の届く機能で感動しました！

注意：人気記事リストの表示には「WordPress Popular Posts プラグインが必要

インストールをお忘れなく。

・　・　・

・　・

・

「『テーマの編集』によるカスタマイズ」での感動ポイント

Simplicityは、そのままでも利用できますが、カスタマイズを念頭に置いて作成したWordpressテーマです。

子テーマを作成してスタイルシートから外観を変更しやすいように作りました。

とあるように、編集がとてもやりやすかったです！ こちらも、実際に使ってみて感動したポイントを挙げていきます。

【感動1】カスタマイズ用に、最初から「子テーマ」が用意されている

親テーマを編集してしまうと、アップデート時に消えてしまいます。だからこそ、カスタマイズをするときは、子テーマを作って、そこに変更を加えて行くのですが……

Simplicity では、あらかじめ子テーマを作ってくれているので、ダウンロードしてインストールすればスグに使えて手間が省けます。

【感動2】ヘッダーやフッターに挿入するための php テンプレートファイルがある

子テーマには、style.css などが用意されていて、通常のデザイン変更なら、変更箇所だけを style.css に書き込んでいけば大丈夫です。

私が特に便利だと感じたのは、ヘッダーやフッターに挿入できるように php テンプレートファイルがあることです。

• header-insert.php
• footer-insert.php

ちょっとした解析コードやスタイルシートの読み込みに使えます。

私の場合、WEB フォントを使うために、header にスタイルシートを読み込ませる必要があったんですね。

とか思っていたのですが、そんな心配は不要でした。便利！

現状のカスタマイズ内容を一挙公開

「ワードプレスのカスタマイズ」と聞くと、難しく聞こえるかもしれませんが……ちょっと手を加えるだけで、サイトの雰囲気も変わるし、読者の方にとっての使いやすさ・読みやすさも変わります。

ここからは、私がこのサイトで行ってきたカスタマイズ内容をお伝えします。そんなに手を入れてないのですが、雰囲気良く仕上がっていると思いませんか？(元のテンプレートが良いんですね♪)

あなたのご参考になれば嬉しいです。

『タイトル』をオシャレに：WEB フォントを使用

タイトル用のロゴ画像がつくれなくても、ウェブフォントを使えば「タイトル」の雰囲気を良くしていくことができるんです。

こちらを参考にフォントを読み込みました。

選んだフォントは、Google Fonts で公開されている「Fredericka the Great」です。

サイズを大きくして、ロゴらしくしています(20px → 51px)。また、サイトキャッチフレーズとの隙間も詰めることで、さらにロゴらしさを出してみました！

ウェブフォントとして使えるフォントや、使用方法については、こちらのページが詳しいので参考にしてみてください。

『背景画像』を追加：テーマの編集

私はテーマの編集を使いましたが、[外観] – [カスタマイズ] – [背景] で設定できます。

背景素材はこちらを利用しました。

サイドバーに『自己紹介』を追加：プラグイン「About Me 3000」を使用

自己紹介くらい HTML を書いても良いのですが、面倒ならプラグインを活用してサクッと作ると早いですよ。

「About Me 3000」を使う時の注意点

「About Me 3000」は、「ユーザー」として登録したプロフィールをそのまま活用できません。

「違う内容にしたい時もあるからいいかな？」とも思うのですが、あなたがプロフィールを共通化したいなら、別の方法で自己紹介を作った方がいいかもしれません。

また、プラグインを使いすぎると、読み込みに時間がかかるようになってしまいます。セキュリティにも注意が必要です。プラグインを使うか、使わずに作るか、見極めが大事ですね。

「About Me 3000」の設定で出てくる「Gravatar」って何？

「Gravatar」は、メールアドレスとプロフィール画像を紐付けるものです。ブログのコメント欄などでも、使われていたりします。

「About Me 3000」プラグイン自体は「Gravatar」は必須ではありません。自分でプロフィール写真をアップすることができます。

ただ、WordPress テーマの「Simplicity(このサイトで使用しているテーマ)」で、「ユーザー」として登録するときには「Gravatar」の登録が必要になります。

サイドバーに『twitter』埋め込み

詳しくは、こちらの記事にまとめました。

サイドバーに『Instagram』埋め込み

こちらを参考にして埋め込みました。

padding は 2px、サムネイルサイズは 90×90px です。

追記 …… 2016/03/31

昨日までは、上記で問題なく使えていたのですが……さっき見てみたら、なぜか表示されず？

今は、取り急ぎ、下記のサービスを使っています m(__)m

サイドバーの『見出し』をオシャレに：WEB フォントを使用

こちらを参考にフォントを読み込みました。

選んだフォントは、Google Fonts で公開されている「Josefin Sans」です。

記事ページに『目次』を追加：プラグイン「Table of Contents Plus」を使用

目次は、記事の全体像を早いうちに見せるのと、読者が読みたいところだけ読んでもらうのに有効な手段です。

とはいえ、ひとつひとつをコーディングするのは面倒なので、プラグインを活用していきます。「Table of Contents Plus」は、見出しタグから自動で目次を生成してくれます。

私は、少し css をいじって、見た目を調整しています(中央寄せ、行間、見出し文字サイズ等)

記事で『吹き出しで会話してる風』に：プラグイン「Speech Bubble」を使用

マンガって、ついつい読んじゃいますよね？ ヘタすると一日中読んでしまったりしませんか？ それと同じように、ブログも「読もうとしなくても記事をどんどん読み進んでもらえたら」理想的ですよね！

「マンガちっく」な表現を多用することで、それが可能になります。マンガの表現で特徴的なのは「吹き出し」です。WordPress でも吹き出しプラグインがあるので、使ってみています。

ショートコードで記事に吹き出しとアイコンと名前が追加できます。
記事に直接HTMLとCSSを記述する必要がありません。
9種の吹き出しセットが使用できます。

公式サイトはこちらです。

記事本文を読みやすく：フォントを変更

バズ部のテンプレートで使われているフォントが好きなので、変更してみました。

body {
font-family : YuGothic, ‘游ゴシック’, sans-serif;
}

まとめ

Simplicity は、ある程度の知識がある方も、また「そうでない方」にとっても、自分らしいブログづくりをしやすい WordPress テーマだと感じました。知識のありなしを問わず、それぞれの段階でカスタマイズしやすいのです。

まだブログを運用し始めて数日の段階なので、広告や SNS、SEO についてのコメントは控えさせていただきましたが、これからが楽しみです！