WordPressのデザインカスタマイズとおすすめプラグイン

記事上部注釈
弊サイトでは実際に利用したサービスなどをアフィリエイトリンク付きで紹介することがあります

弊サイトではWordPressを活用しています。そのWordPressを行う上でのカスタマイズ方法を紹介します。超初心者でなければ上級者でもない(初級者レベル)だとぴったり合った内容です。この通りにカスタマイズすれば、弊サイトのコピーの出来上がりですね!

相鉄12000系(大崎)

写真1. 上手にカスタマイズした車両の例

WordPressの基礎知識

カスタマイズについて述べる前に、WordPressについて初級者なりに解説しましょう。私の解説でわからなければ、下の2つの書籍を参考にしてみましょう。

WordPressサイト作成塾

この本はIT系の本にしては珍しく、読みやすい本です。細かな使いかたは教えてくれませんが、始めるきっかけにはとても良い書籍です。


WordPress本格Webサイト構築パーフェクトマスター (Perfect Master Series)

この書籍は基本的なことを押さえていますが、もう少し発展的な内容があります。マニアックな構文の解説をするのでなく、サイトデザインの基本から教えてくれます。また、シチュエーションごとのコツ(会社ホームページを作成など)も教えてくれます。この本は話しかけるように書いてくれますので、私には合いますね。一般的な解説書もこのようなひねりのある文章で書いてくれると良いのにね。

WordPressブログ開設のために

WordPressは無料のブログ作成ソフトです。ある意味アメブロなどのような無料ブログサービスと同じです。ただし、ドメイン(URL)の取得やサーバーの確保は行われていませんので、これらは自力で行う必要があります。

私は安くて評判がそれなりに良いロリポップをレンタルサーバーとして契約し、ドメインはムームードメインとしました。これらはグループ企業なのか、同時に申し込むとロリポップの初期費用が免除されるのが大きかったです。サーバーの性能と価格には相関関係があります。どのプランにするかは思案のしどころですが、弊サイトのような弱小ブログであれば、WordPressを活用できる範囲で最も安いプランで問題ありません

※計算上、ロリポップでは安いプラン(転送量:60GB/日)であっても2万〜6万PV/日まで対応できます。弊サイトの実績では1.2MB/PVですので、理論上は安いプランであっても51200PV/日まで対応できます。上位プランへの変更はいつでもできる(下位プランへの変更はできない)ので、転送量が多いプランにするのは、アクセスの多いサイトになってから考えれば構いません。今回は私が契約しているロリポップで示しましたが、他の会社の最も安いプランでも事情は大きく変わらないでしょう。
ロリポップ!

ムームードメイン

カスタマイズに必要な3つの概念

そのWordPressの基本的な機能は最小限にとどめられています。しかし、機能は拡張できます。機能を拡張するためにはプラグインを導入します。特定のプラグインは特定の機能を追加してくれます。文字デザインはこのプラグイン、セキュリティならばこのプラグイン、という具合です。どうしてその機能を追加できるのかは考えません。航空機を飛ぶ原理を考えるようなものだからです。その機能を追加する意味を考えるのです。ここには無料のものも有料のものもあります。ここに課金するかどうかは各自で考えれば良いでしょう。私はプラグインに課金するくらいなら、鉄道に費やしますがね。

また、テーマを導入することでサイトデザインのパターンを選べます。テーマは専門家が制作して、その成果物を公開しています。WordPressにもテーマがありますが、使いにくいと感じました。これについても各自の使いたい機能に応じて選択すれば良いでしょう。無料のテーマと有料のテーマがありますが、必ずしも有料のテーマが優良ということはありません。私は無料のテーマで運用しています。

WordPressでブログを運用するには、最低限のHTLMやCSSといった知識が必要になります。プロフェッショナルになるにはこれらの知識をじゅうぶんに覚えて、使いこなす必要もあるのでしょうが、趣味ブログレベルではそこまで必要ありません。

ともかく、プラグイン、テーマ、HTLMやCSSという3つの概念がカスタマイズには重要です。以下の章でそれらについて述べます。

プラグインを考える際の基本

プラグインというのは、特定の機能を付けるために必要なものです。パソコンを購入してから各種オプションを付けるようなイメージです。パソコンに機能を付けすぎると、動作が重くなります。これと同じ考えで、余計なプラグインを付けるとサイトが重くなってしまいます。そのため、プラグインは必要最小限にとどめたいところです。

私は以下のプラグインしか使用していません。そのうち、Akismet Anti-SpamとWP Multibyte Patchは最初から入っているプラグインですので、10のプラグインを活用していることになります。

・Akismet Anti-Spam (アンチスパム)
・All In One SEO Pack
・Contact Form 7
・Google XML Sitemaps
・Movable Type・TypePad インポートツール
・PS Auto Sitemap
・Shortcodes Ultimate
・SiteGuard WP Plugin
・Table of Contents Plus
・TinyMCE Advanced
・WP Multibyte Patch
・Broken Link Checker(2018年9月追加)

ここでは、各プラグインの詳細な説明のかわりに、役割分担ごとに紹介しましょう。詳細な説明はgoogle先生に任せるのです。

セキュリティ向上のためのプラグイン

趣味ブログといえども、全世界に公開されます(見てくれるかどうかは全く別問題です)。全世界に公開するということは、悪意ある人に攻撃の対象にされてしまう危険性があります。そこで、セキュリティ面を向上させるのです。

・Akismet Anti-Spam (アンチスパム)
・SiteGuard WP Plugin

これらのプラグインでガードします。本当はこれらのプラグインが不要な環境(悪意ある人がいない環境)が望ましいですが、そうもいかないでしょう。

SEO対策するためのプラグイン

ブログを運営するのであれば、少しでも訪問者を増やしたいのが本音です。そのためのプラグインです。

・All In One SEO Pack
・PS Auto Sitemap
・Google XML Sitemaps

これらはブログ執筆者と購読者の目の見えないところで一生懸命努力しています。たとえば、googleアクセス解析のIDをこのプラグインに記憶させれば、HTMLをいじらずに済むなどです。PS Auto Sitemapを導入すれば、サイトマップを作成してくれますので、一覧ページを簡単に作成できます。前身のシーサーブログはサイトマップを自動作成できなかったので、手動で目次ページを作っていたので、相当大変でした。この手間が省けるので、相当使えるプラグインです。でも誰もサイトマップを見ないんですよね…。Google XML Sitemapsはグーグルに自分のサイトのサイトマップを教えるものです。

サイトの見た目を変えるためのプラグイン

サイトの見た目を変えるためのプラグインです。

・Shortcodes Ultimate
・Table of Contents Plus
・TinyMCE Advanced

Shortcodes Ultimateはさまざまなショートコードを挿入できます。弊サイトでも囲み記事を作成するのに役立っています。Table of Contents Plusは記事に自動目次を作成してくれます。弊サイトは長文の記事が多いですので、見出しごとに目次を作ってくれると、読者の皆さまも便利でしょう!TinyMCE Advancedは文字の色を変えたりするのに重宝します。ただし、色の使いすぎには注意したいものです。

その他の機能を追加するプラグイン

これこそプラグインの本場です。

・Contact Form 7
・Movable Type・TypePad インポートツール
・WP Multibyte Patch
・Broken Link Checker

Contact Form 7はメールフォーラムを設置するのに重要なプラグインです。また、このプラグインは日本語で説明があるので、とてもやりやすいです。Movable Type・TypePad インポートツールは、前身のブログから記事を移設する作業で大いに重宝しました。移転作業が終わりましたから、外しても良いかもしれません。WP Multibyte Patchは日本語に変換する際の問題を解決してくれるものです。これは「有効化」という作業だけ行い、あとは意識していません。

弊サイトでは読者さまに便宜をはかるために、外部リンクを活用しています。その外部リンクは(当然弊サイトの管轄ではないため)私の知らないところでリンク先を変更している可能性があります。その管理を確実に実施するために、Broken Link Checkerを導入しています。このプラグインはリンク先が生きているか確認するものです。もしもリンク切れが生じていたらサイト管理者に警告します。ただし、私がきちんとリンク切れに迅速に対応しているかといえば、そこは…。

不要と判断したプラグイン

多くの人が必要と言っている機能でも、私は以下の機能は不要と考えています。そのため、以下に関するプラグインは導入しておりません。

キャッシュを保存するプラグイン

ページ高速化のために、ページのデータを読者さまのパソコンにキャッシュとして保存していて、インターネットと読者さまの端末の間の通信量を削減するためのものです。これに関しては、余計なデータを削減することで、ページを軽量化する方向が正道と考え、導入していません。

画像の容量削減のプラグイン

「ブログに掲載する画像を自動縮小するプラグインを導入して、画像を読み込む時間を短縮しましょう!」ということを述べる人もいます。これは1つの見識でしょうが、もともとの画像のサイズを小さくすれば良いだけです。私は(デジカメなり携帯電話なりで撮影した)元画像をパソコン上で低画質に変換しています。そうすれば、このようなプラグインを導入する必要もありません。

テーマの設定について

私は無料のテーマに絞っていました。WordPress テーマ 無料 などで検索すれば、無数のテーマが出てくることでしょう。私がテーマ選びで重要視したことは、ページのデザインです。私は右カラム(メニューが右側にあるページデザイン)のページを作成したかったので、テーマのデフォルトが右カラムになっていたものです。

私はsimpricity2を選択しました。stinger8も試験的に導入しましたが、とても使いにくかったのです。simpricity2の詳細なカスタマイズ方法は次の章で示します。

HTMLやCSSの設定について

simpricity2に限らず、WordPressでカスタマイズするには、HTMLやCSSに関する知識が必要です。とはいっても、細かな知識は必要なく(どこかのサイトのコピペで平気!)、おそれる必要はありません。

HTMLやCSSに関する基礎知識

ブログを読むと、ただ文章が書かれるだけではなく、見出しがあったり、文字に装飾がなされたり、という表現の工夫が見られます。これらはHTMLによる記述がなされているためです。いいかえると、HTMLの知識を使うことによって、表現が広がるのです。

では、全てHTMLなのでしょうか?答えはNoです。例えば弊サイトでは見出しの書式は統一されていますが、これを全てHTMLで行うことは大変です。そのため、CSSという概念が登場します。見出しの書式を別に作っておくことで、1回1回見出しを作成するたびにHTMLによる記述をしなくて良いのです。

見出しのカスタマイズ

見出しが変わればブログの印象は大きく変わることでしょう。そこで、弊サイトでは見出しの書式からカスタマイズすることにしました。
※simpricity2の見出しは地味な印象があるため、気に入らなかったのです。

私は見出しのCSS設定を以下のものとしました。

.article h2{
font-size:26px;
background:none;
border-bottom: 1px solid #006e54;
border-left: 30px solid #006e54;
}

.article h3{
font-size:23px;
border-top:2px solid #006e54;
border-bottom:2px solid #006e54;
padding:10px 0;
}

.article h4, .article h5, .article h6{
font-size:20px;
padding:8px 0;
}

.article h4{
border-bottom:1px solid #006e54;
}

見出し2(h2と表示された箇所)を例にして、この意味を説明します。

{}で囲った部分が実際の命令と考えましょう。命令の中身は以下の通りです。

font-size:26px;
background:none;
border-bottom: 1px solid #006e54;
border-left: 30px solid #006e54;

font-sizeはフォントサイズ、つまり文字の大きさのことです。この場合は、26pxにしましょうという意味です。
backgroundは背景色です。この場合は、背景色はなしという意味です。
border-bottomは文字の下側を加工しますということです。この場合は、1pxの実線(solid)で#006e54のカラーという意味です。
border-leftは文字の左側を加工しますということです。この場合は、30pxの実線で#006e54のカラーという意味です。

このような要領で「テーマの編集」のarticleを書き換えましたが、本文のh2は反映されません。ネットを見ても同様の事例はありませんので、大変困りました。

しょうがないので、追加CSSにh2だけ同様の内容を記すことで、強引にh2の内容に反映させました。

補足説明:見出しについて

いきなり見出しがどうたらこうたら~という内容でしたね。そして、h2、h3、h4という文字列が出てきましたね。

これらの解説がないのも不親切ですので、私なりに解説いたします。

見出しは章立てというイメージです。分厚いテキストを見ると、第1章、第2章、…と続きます。その第1章の中に第1節、第2節、…と続きます。これをインターネットに反映させたとお考えください。弊サイトでは、大見出し、中見出し、小見出しの3段階を活用しています。

WordPressでブログを書く上では、記事のタイトルが一番の見出しです。これにはh1を使用します。そのため、記事本文にはh2以下を使用します。大見出しがh2、中見出しがh3、小見出しがh4とするのです。人によっては大見出しと小見出しの2段階にして、大見出しをh2、小見出しをh3にすることもあるでしょう。この考えは人それぞれです。

この構造もきちんとすると良いと聞きます。h3の中にh4が2つ入るのは変ではありませんが、h4の中にh2が入るのは変です。

弊サイトのとあるページを例に示しましょう。

<h2>ベルリンとフランクフルトの関係</h2>
<h2>18年冬のダイヤを解析する</h2>
<h3>発着駅の確認</h3>
<h4>フランクフルト側の発着駅</h4>
<h4>ベルリン側の発着駅</h4>
<h3>実際のダイヤを観察する</h3>
<h4>フランクフルトからベルリンに向かう</h4>
<h4>ベルリンからフランクフルトに向かう</h4>
<h2>17年冬のダイヤ</h2>
<h3>発着駅の確認</h3>
<h4>フランクフルト側の発着駅</h4>
<h4>ベルリン側の発着駅</h4>
<h3>実際のダイヤを観察する</h3>
<h4>フランクフルトからベルリンに向かう</h4>
<h4>ベルリンからフランクフルトに向かう</h4>

この場合、h2の中にh3が入り、h3の中にh4が入り込んでいることがわかります。ただし、最初の見出しは細分化する必要がありませんので、中見出しや小見出しを設定していません。

見出しについてはさまざまなデザインパターンが考えられます。このようなサイトで見出しパターンを探すことも良いでしょう。

※別ウィンドウで開きます。h3は例として使用しているだけで、h2やh4で使用してはいけないということではありません。

フォントのカスタマイズ

simpricity2はフォントにもこだわっているテーマです。しかし、そのフォントは私には独創的に思えてしまいますし、なによりフォントを読み込む時間(※)がかかってしまいます。そのため、私はフォントを指定を外したいと考えました。

※フォントもデータのかたまりです。通信するデータの量が多いほど読み込みに時間がかかることは明らかです。

フォントの指定を外すのは簡単です。追加CSSで以下の記述を追加するだけです。

body {
font-family: none
}

フォント指定:なしという意味です。フォントの指定なしということは、見る環境でその環境に最適化されたフォントが表示されるということです。これで、各自のデバイスで、各自が慣れたフォントで、弊サイトを読むことが可能になりました。

ページネーションについて

ページネーションといって、1つの記事を2つ以上のページに分割することをページネーションといいます。多くのメディアで採用されている様式ですね。私はこのように分割されているページを読むと、2ページ目に移動するのが億劫になってしまいます。そして、「ウゼー」とも思ってしまいます。そこで、私は弊サイトではページネーションを行わないことにしました。ページネーションとは異なりますが、前編と後編に分けられると、イラっとしています。そこで、私はなるべくひとまとまりで記事を執筆することにしました(※)。

※前身ブログはこのような考えがなかったので、前編と後編に分けることもありました。このブログに記事を移設する際に記事を統合しています。ブログ移転の際にこのような丁寧な見直しをしたかったので、ブログ転送の方法を特殊なものにしました。

前編と後編の間に別の記事を書いていると、前編を読み終えた後に後編を探すのが大変になってしまいますね。前編と後編にわけなければ、読者さまをイラつかせません。旅行記はどうしても長編になってしまいますので、適当なところで分割しています。弊サイトではその対策として、旅行記ごとにカテゴリ分けを実施しています。また、(前身のブログではない)弊サイト初の旅行記については前の記事と後の記事に内部リンクを整備することにしました(都市観光については都市観光のまとめページに内部リンクを整備しています)。

スポンサーリンク

シェアする

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

フォローする