記事や固定ページを作るときは、Wordなどにメモ書きしておいた内容をコピーペーストすることもあります。ところが、Wordからビジュアルエディタにコピーペーストした文章の行間が開きすぎてしまう場合があります。

Wordからコピーペーストした文章の行間が開いてしまう

以下、対策を紹介します。

行間が開いてしまう状況の再現

ページ作成に使うためWordに入力しておいた文章をコピーします。

Wordに入力した文章をコピー

WordPressの管理画面で投稿または固定ページを新規追加し、Wordからコピーした文章を本文のビジュアルエディタにペーストすると、行間が開いてしまいます。

ビジュアルエディタにペーストした文章の行間が気になる

この内容でプレビューしてみると、ブラウザ画面でも行間が開いています。

ブラウザ画面でも行間が開いている

原因は、Wordでコピーした内容にスタイル情報が含まれるためです。同じ理由で一部のメールソフトからコピーした文章でも同じ現象が起きます。

対策1：テキストエディタにペースト

Wordからコピーペーストする文章の行間が開かないようにするには、ビジュアルエディタではなくテキストエディタにペーストする方法があります。

テキストエディタにペーストすれば行間が開かない

ブラウザ画面でも行間は開きません。

ブラウザ画面でも行間が開かない

対策2：メモ帳などを経由してビジュアルエディタにペースト

どうしてもテキストエディタを使いたくない場合は、メモ帳などを経由する方法があります。

まずは、Wordで入力した文章をコピーします。

Wordに入力した文章をコピー

いったん、メモ帳（またはテキストエディタ）にペーストします。

コピーした文章をメモ帳にペースト

メモ帳で文章をコピーします。

メモ帳で文章をコピー

その文章をビジュアルエディタにペーストすれば、行間は開かないはずです。

ビジュアルエディタにペーストしても行間が開かない

MTS Simple Booking Cの予約フォームについてスマホ表示のときに枠を広くする方法を紹介します。加工イメージは次のようになります。

MTS Simple Booking Cの予約フォームのレスポンシブ対応

MTS Simple Booking Cの初期設定の予約フォーム

MTS Simple Booking Cでは初期設定の予約フォームもレスポンシブになっていますが、テーブルレイアウトでの表示のため場合によっては各項目が入力しづらいかもしれません。

初期設定の予約フォーム

予約フォームの入力枠を広くする

今回のカスタマイズの趣旨は、テーブルレイアウトをバラバラにして、見出しと入力項目を単純に上から下に表示しようというものです。入力枠が広くなるのがメリットです。

使用するCSSは次のとおりです。子テーマのstyle.cssなどに入力してお使いください。おおざっぱにまとめてあるので必要に応じて微調整およびカスタマイズをお願いします。

@media (max-width: 480px) {
    #booking_client-fieldset table th,
    #booking_client-fieldset table td,
    #booking-reservation-fieldset table th,
    #booking-reservation-fieldset table td,
    #booking-message-fieldset table th,
    #booking-message-fieldset table td,
    #booking-confirm-fieldset table th,
    #booking-confirm-fieldset table td {
        display: block;
        float: none;
        width: 90%;
        text-align: center;
        overflow: auto;
    }
}

これで、予約フォームの各項目がバラバラになり上から下に表示されます。テーブルレイアウトよりも枠が広くなり、スマホなどでは入力しやすくなるでしょう。

セルをバラバラにして上から下に表示

「テーマのカスタマイズは子テーマで」とわかっていても面倒なこともあります。子テーマフォルダを作成してstyle.cssに初期設定を記述して、空のfunctions.phpを準備して、親テーマからテンプレートをコピーして、、、こうした定型の作業を簡単に実行できるプラグインがあれば便利ですよね。

そんな子テーマをワンクリックで作成できるのがOne-Click Child Themeプラグインです。以下、使い方を簡単に説明します。

ワンクリックで子テーマを作成

「プラグイン」‐「新規追加」メニューからOne-Click Child Themeプラグインをインストール、有効化します。

One-Click Child Themeプラグインのインストール

「外観」-「Child Theme」メニューを開いて現在使用中のテーマの子テーマを作成します。「Theme Name」(1)には子テーマの名前を入力します。名前は自由ですがフォルダ名になるので英数字（例：child-test）で付けておきましょう。その他の項目(2)(3)は適当で大丈夫です。「Create Child」(4)ボタンをクリックして設定を完了します。

現在使用中のテーマから子テーマを作成

子テーマが作成され、有効化されます。

作成した子テーマが有効化される

これで、「外観」‐「テーマの編集」メニューからstyle.cssなど、必要なファイルを開いて修正できるようになります。

作成した子テーマのstyle.cssには親テーマのstyle.cssを読み込むコード（@import）が記述されていません。子テーマで定番の次のコードです。

@import url('../親テーマフォルダ/style.css');

その代わりにfunctions.phpで親テーマ、子テーマのstyle.cssを読み込むスタイルになっています。

親テーマから子テーマへのファイルコピー

作成された子テーマはstyle.cssやfunctions.phpなど最小の構成になっています。その他のファイルを子テーマで編集したい場合は、「外観」-「Child Theme」メニューを開いて親テーマからコピーすることができます。

以下は、header.php(1)を選んでコピーする例です。ファイル一覧からheader.php(1)を選択して「Copy Template」(2)ボタンをクリックすると親テーマのheader.phpが子テーマフォルダにコピーされます。

親テーマのheader.phpを子テーマにコピー

「外観」‐「テーマの編集」メニューを開くと、header.phpが追加されており、編集できるようになっています。

header.phpを子テーマで編集可能になる

コピー済みのファイルは「外観」-「Child Theme」メニューで選択できなくなるので、作成済みのファイルを間違ってを上書きするのを防ぐことができます。ゼロからコピーし直すときは、子テーマにコピーしたファイルをFTPツールなどで削除しておく必要があります。

これで、子テーマの準備は完了です。あとは、アイデアに応じてCSSやPHPのカスタマイズにチャレンジしていきましょう。

WordPressに慣れてくると気づくのが「CSSを使えば自由にデザインをカスタマイズできる」ということです。たとえば、「グローバルメニューを画像に置き換えたい」も、CSSをカスタマイズして実現することができます。

メニュー項目の画像置き換えもCSSカスタマイズで可能

CSSカスタマイズの手法はさまざまですが、テーマのstyle.cssを開いて修正する方法は効率的ではありません。

なぜなら、修正したいデザイン（スタイル）はテーマのstyle.cssに書かれているとは限らないからです。複数のCSSファイルを持つテーマもありますし、プラグインのCSSが反映されている場合もあります。

ページのデザインをカスタマイズしたい場合、テーマのCSSを開いて修正するのではなく、現在表示中のページに適用されているCSSを知ることが重要です。そのCSSを何らかの形で上書きしなければ、いつまでたっても「自分で作成したCSSが反映されない」というモヤモヤから解放されません。

現在表示中のページに適用されているCSSを調査できるツールが「インスペクタ」です。インスペクタはブラウザに組み込まれているツールで、HTMLやCSSを調べるだけでなく、CSS変更のシミュレーションなどもできる強力なツールです。以下の画面はFireFoxの例です。

CSSカスタマイズを強力にサポートするツール「インスペクタ」

FireFox以外のブラウザでは名称が異なりますがインスペクタと同様のツールを使うことができます。

ここでは、インスペクタを使ってサイトのデザインをカスタマイズ（CSSカスタマイズ）する方法を説明していきます。前半はインスペクタの使い方を中心に説明し、後半はケーススタディとして定番のCSSカスタマイズ事例に取り組んでいきます。

作業にあたってCSSの知識があれば理想的ですが、知識がなくても読めるように、できるだけ簡単に説明しています。CSSの記述経験がない方も読んでみてください。

テーマにBizVektor（ビズベクトル）、ブラウザにFireFoxを使う例で説明しますが、他のテーマやブラウザでも考え方は同じなので参考にしてください。

インスペクタの使い方（電話番号の色設定を例に）

まずは、画面の右上に表示された電話番号の色を変更する例でインスペクタの使い方を見ていきましょう。

BizVektorの電話番号周辺のデザインをカスタマイズしたい

CSS調査ツール「インスペクタ」を表示する

デザインをカスタマイズする部分のHTMLやCSSを特定するため、インスペクタを開きます。それには、カスタマイズしたいパーツあたり（ここでは、電話番号）でブラウザ画面を右クリックして「要素を調査」（FireFoxの場合）メニューを選択します。

ブラウザ画面を右クリックして「要素を調査」メニューを選択

ここでは、FireFoxを使って説明を進めていきますが、その他の主なブラウザでは以下のメニューからFireFoxのインスペクタに該当する機能を使うことができます。参考にしてください。

• Google Chrome --- 「検証」メニュー
• Internet Explorer --- 「要素の検査」メニュー
• Safari --- 「要素の詳細を表示」メニュー

「要素を調査」メニューをクリックすると、画面が上下に分割されます。画面下部に開いたウィンドウが「インスペクタ」です。

ブラウザ画面のHTMLやCSSを解析できる「インスペクタ」

インスペクタには現在表示中の画面のHTMLとCSSが表示されます。画面の左側(1)がHTML、右側(2)がCSSです。これらのコードを参考にしながらCSSを記述してデザインをカスタマイズすることができます。

ブラウザ画面に対応するHTMLとCSSの確認

ブラウザに表示されている電話番号(1)に該当するHTMLタグ(2)がハイライトされ、そのHTMLに適用されているCSS(3)が表示されます。

現在表示中の画面のHTMLとCSSが表示される

目的のHTMLやCSSが表示されていない場合は、HTMLウィンドウで任意の場所(1)をクリックしてみましょう。ブラウザ画面に点線(2)が表示され、目的の場所を正しく選択できたか確認することができます。

HTMLをクリックしてブラウザ上の要素を確認

または、HTMLウィンドウの上にある要素選択ボタン(1)をクリックして、ブラウザ画面で調べたい場所をクリック(2)します。

要素選択ボタンをクリックしてからブラウザ画面を選択することもできる

すると、ブラウザ画面でクリックした要素のHTMLがハイライトされます。

クリックした要素のHTMLがハイライトされる（そのスタイルは右側に表示される）

ブラウザ画面のHTMLとCSSをインスペクタで表示する仕組みが理解できたら、CSSのカスタマイズを始めていきましょう。

カスタマイズしたい要素のCSSを調べる

修正したい要素（ここでは電話番号）あたりを右クリックして「要素の調査」メニューからインスペクタを開いて右側のCSSウィンドウ（「ルール」タブ）に注目してください。

修正したい要素のスタイルを確認

電話番号に対して設定されているスタイルが表示されていますが、このウィンドウはかなり下までスクロールできるくらい多くのCSSが記述されています。

多くのCSSが記述されているのは、同じようなスタイルが何度も記述されていることが1つの原因です。たとえば、CSSウィンドウをよく見ると、何度もフォントサイズ（font-size）が指定されていることに気づきます。

フォントサイズを指定するCSSが何度も記述されている

ここがWordPressのCSSカスタマイズのツボです。次の点を頭に入れておきましょう。

• 同じ要素にいくつもCSSが指定されている場合がある
• そのうち最も優先度が高いスタイルが適用される

同じ要素にいくつもCSSが指定されているのは、テーマだけでなくプラグインにもCSSが含まれていたり、テーマのCSSの中でもスマホ用のCSS、タブレット用のCSS、PC用のCSSなど、同じ要素に対して複数のスタイルが定義されているためです。

いくつものスタイルが指定されている場合、最も優先度が高いスタイルが適用されます。たとえば、次の例ではフォントの種類が2回指定(1)(2)されていますが、優先度の高い(1)が適用され、(2)は打ち消し線で消されています。この打ち消し線は、優先度が低いのでスタイルが反映されないことを示しています。

優先度の低いスタイルは打ち消される

この要素のスタイルをカスタマイズするには、現在適用されているスタイル（打ち消されていないスタイル）を探して上書きする必要があります。

ただし、「上書き」とは実際にstyle.cssを開いて既存のコードを修正することではありません。既存のコードを打ち消すために優先度の高いCSSを作成するということです。具体的な作業はこれから説明していきます。

スタイルの変更とプレビュー

電話番号の色を変更したいので、もう一度、現在の設定を確認しましょう。

現在の電話番号の色設定

インスペクタを使うメリットは、画面上でCSSの変更をシミュレーションできることです。スタイル変更後のイメージをプレビュー（実際に変更せずにイメージを確認）することができます。

試しにCSSの色設定の部分（ここでは、#006600）をクリックしてみてください。設定を編集できるようになるはずです。

色設定が編集可能になる

変更したい色の名前またはカラーコードを入力します。ここでは、「red」と入力しましたが、他の色でも大丈夫です。

色設定を「red」に変更する

CSS(1)が変更され、その内容がブラウザ画面(2)に反映されます。

CSSの変更がブラウザ画面に反映される

うまくいかない場合は入力ミスがないかチェックしてください。基本的に記号も含めてCSSは半角で入力する必要があります。次のように「ｒｅｄ」(1)と全角で入力するとうまくいきません。その場合、入力が間違っていることを示すアイコン(2)が表示されます。ご注意ください。

CSSの入力ミスで警告アイコンが表示される

CSSを変更して電話番号が赤く変わりました。ただし、これは変更のシミュレーションです。実際のファイルは変更していないので、お試しで変更イメージを確認したい方も安心して作業できます。

修正中のCSSは左端に緑の目印が付いています。

カスタマイズ中のCSSを示す目印

オリジナルのCSSに戻すにはブラウザ画面を更新します。

変更したスタイルを反映させる

上記のCSSカスタマイズは、あくまでシミュレーションなので、作成したCSSをどこかに保存する必要があります。

子テーマのstyle.cssに入力するのが定番ですが、BizVektorでは「外観」-「CSSカスタマイズ」メニューを使うこともできます。子テーマを使わなくてもCSSカスタマイズにチャレンジできるので便利です。

ここでは、「外観」-「CSSカスタマイズ」メニューを使う方法で説明しますが、子テーマのstyle.cssでも考え方は同じです。

早速、作成したCSSを保存しましょう。それには、インスペクタのCSSウィンドウでCSSをコピーします。「#header」から「}」の行までしっかりコピーしましょう。コピー漏れが原因のWordPressトラブルが多いのでご注意ください。

カスタマイズしたCSSをコピー

「外観」-「CSSカスタマイズ」メニュー（または子テーマのstyle.css）を開いて、コピーしたCSSをペースト(1)します。問題なければ「CSSを更新」ボタン(2)をクリックしてCSSを保存しましょう。

「外観」-「CSSカスタマイズ」にCSSをペースト

サイトを表示してブラウザ画面を更新し、もう一度インスペクタを開いてみましょう。修正前のオリジナルCSS(1)に打ち消し線が引かれています。上記のステップで入力した新たなCSS(2)が優先されているためです。結果として、電話番号の色(3)が緑から赤に変わります。

新たなCSSが優先され既存のCSSが打ち消される

これで、インスペクタを使ったCSSカスタマイズは完了です。その他の要素についても基本的には同じ手順でカスタマイズすることができます。

インスペクタの使い方のまとめ

ここまで、インスペクタの使い方を簡単に説明してきました。CSSカスタマイズの手順をまとめておきます。

• カスタマイズしたいパーツあたりでインスペクタを開く
• カスタマイズしたいパーツのHTMLとCSSを確認する
• CSSを修正してブラウザ画面のプレビューを確認する
• 問題なければCSSを「CSSカスタマイズ」メニューなどにコピーペーストする
• コピーペーストしたCSSから不要な行を削除して保存する

続いて、WordPressの個別サポートでも相談が多い定番のCSSカスタマイズ事例について、インスペクタを使って解決してみましょう。

ケーススタディ1：ヘッダーロゴのサイズを変更する

BizVektorではヘッダーロゴ画像を表示できますが、大きい画像は高さが60pxに縮小表示されます。

高さが60pxに縮小表示されるロゴ画像

もう少し大きいロゴ画像は縮小せずに表示したい場合もあります。「ロゴの表示サイズを大きくしたい」は、WordPressの個別サポートでも人気の相談です。

ここでは、高さが150pxのロゴ画像を表示する例で説明しますが、実際に使いたい画像に合わせて作業して大丈夫です。

幅600px、高さ150pxのロゴ画像を縮小せずに表示したい

ロゴの表示サイズを変更する

まずは、ロゴ画像あたりを右クリックしてインスペクタを開きます。

ロゴを右クリックしてインスペクタを開く

ブラウザ画面(1)を形成しているHTML(2)とCSS(3)を確認しましょう。

インスペクタを開いてHTMLとCSSを確認

CSSウィンドウに注目すると、都合の良いことにロゴ画像の高さ制限（max-height）が指定されているのが見えます。

ロゴ画像の高さ制限が指定されている

この制限を緩めれば、大きいロゴ画像を縮小せずに表示できるようになります。さっそく、サイズ制限の「60px」の部分をクリックして「150px」などに変更してみましょう。

プレビュー用にサイズ指定を変更する

ロゴ画像の表示サイズが大きくなり、オリジナルの画像を表示できるようになります。

CSSのカスタマイズ結果のプレビュー

これで大丈夫そうであれば、ひとまずカスタマイズしたCSSをコピーします。

カスタマイズしたCSSをコピー

「外観」-「CSSカスタマイズ」メニューまたは子テーマのstyle.cssにペーストします。

インスペクタからCSSをコピーペースト

このうち、今回のカスタマイズに不要な部分を削除します。具体的には、「margin-top: 3px;」は今回のカスタマイズには関係ないので削除しましょう。

不要なCSSを削除してカスタマイズ完了

完了したら「CSSを更新」ボタンをクリックして、サイトを確認しましょう。

「デザインが崩れた！」に対処する

ロゴが大きくなり、カスタマイズが完了したように見えるかもしれませんが、油断は禁物です。修正したパーツだけに注目せず、他に影響が出ていないか確認してください。ここでも、ロゴ画像の幅が広すぎたせいで、右側の電話番号が下に落ちてしまいました。

ロゴの高さ調整はうまくいったが電話番号が下に落ちた

「レイアウトが崩れた！」と騒ぎたくなるかもしれませんが、落ち着いて原因を調べましょう。それには、電話番号あたりで右クリックしてインスペクタを開きます。

レイアウト崩れの原因調査のため電話番号あたりでインスペクタを開く

開いたインスペクタで電話番号あたりのHTML(1)をクリックしてみると、ブラウザ画面に表示された要素(2)の幅が広すぎてロゴ画像(3)と横並びにできないように見えます。

電話番号(2)とロゴ画像(3)が横並びにならないことを確認

そこで、どこかに広い幅が指定されていないか、CSSウィンドウをチェックしていきます。現在の要素（id="headContactTel"）に幅の指定が見当たらなければ、HTMLウィンドウで周辺の要素をクリックして、現在の要素の内側や外側に幅指定がないかチェックしていきます。

すると、以下のHTML要素(1)（「id="headContact"」のdivタグ）で「width: 50%;」というスタイル指定(2)が見つかり、ブラウザ画面では幅の広い電話番号エリア(3)が作成されていることを確認できます。

電話番号の幅を指定している要素が見つかる

これが原因なのか確定はできませんが、ひとまず「width: 50%;」の部分を修正してみましょう。

幅の広い電話番号のスタイル定義

「width: 50%;」の「50%;」をクリックすると編集可能な状態になるので適当な値に変更してみましょう。たとえば、「30%」に変更してみます。

電話番号の幅を30%に変更する

ブラウザ画面のプレビューを見ると、ロゴと電話番号が横並び可能になったのを確認できます。また、HTMLウィンドウで電話番号の要素(1)をクリックしてブラウザ画面を確認すると、確かに点線で囲まれた電話番号の幅(2)が狭くなっていることがわかります。

電話番号の幅が狭くなりロゴと横並び可能になった

これで問題なさそうなので、プレビューに使ったCSSを「外観」-「CSSカスタマイズ」メニューまたは子テーマのstyle.cssにコピーペーストします。

カスタマイズしたCSSをコピー

コピーしたCSSをペーストして保存（「CSSを更新」ボタンをクリック）します。

カスタマイズしたCSSをコピーペースト

完了後、サイトを表示してロゴ画像と電話番号が横並びになったことを確認しましょう。

ロゴ画像と電話番号が横並びになったことを確認

これで、「ロゴの表示サイズを大きくしたい」のカスタマイズは完了です。このケースで学ぶのはインスペクタの使い方だけではありません。カスタマイズで発生した他のパーツの問題にも対処が必要だということです。

1つのパーツをカスタマイズしたときは他のパーツに影響が出ていないか十分に確認しましょう。その場で気づかないと、ある日突然、「何もしていないのにデザインが崩れた！」という"WordPressの超常現象"を目にすることになります。

"WordPressの超常現象"のほとんどは、何らかの作業をしたときの確認漏れです。その場で発生していた問題の確認を忘れると、数日後に「何もしていないのに急にトラブルが起きた！」となるのです。ご注意ください。

ケーススタディ2：記事本文のフォントサイズを大きくする

「ブログ記事の文字サイズ（フォントサイズ）は大きくできないのですか？」

よくある質問ですが、これもインスペクタを使ってCSSを調整すれば大丈夫です。

記事本文のフォントサイズを大きくしたい

フォントサイズを変更する

ここまでと同じように記事本文でインスペクタを開いて手がかりをつかみましょう。

記事本文あたりでインスペクタを開く

CSSウィンドウを下にスクロールしていくと、フォントサイズに関するスタイル指定が見つかります。

フォントサイズに関するCSS

そこで、「font-size: 100%;」を「font-size: 110%;」や「font-size: 16px;」などに変更してみても、今ひとつスッキリ仕上がりません。たとえば、「font-size: 16px;」に変更すると、記事本文だけでなくパンくずリストやサイドバーなどの文字も大きくなってしまいます。

必要ない部分のフォントサイズも大きくなってしまう

うまくいかない原因は、CSSウィンドウで見つけたフォントサイズの指定がページ全体（*）に対する設定になっているためです。もう少し工夫が必要なようです。

CSSの適用範囲を限定する

そこで、ページ全体にスタイルを適用せずに、「記事本文のみに」のように範囲を限定してスタイルを指定します。たとえば、CSSウィンドウを上にスクロールしていくと、「.content p」（コンテンツエリアの段落＝記事本文の段落）というCSSセレクタが見つかります。ここにフォントサイズを指定したらどうだろうと考え、既存のスタイルの下をクリックして新たなCSSを入力できるようにします。

記事本文の段落に新たなスタイルを入力する

ここに「font-size: 16px;」と入力してみます。

フォントサイズ指定を追加

プレビューを見ると、今度は記事本文(1)（.content p）のみのフォントサイズが変更されています。パンくずリスト(2)のフォントサイズは小さいままです。

記事本文のフォントサイズのみが変更される

問題がなさそうであれば、このCSSを「外観」-「CSSカスタマイズ」メニューまたは子テーマのstyle.cssにコピーペーストします。このコードに含まれる「line-height: 170%;」は不要なので削除しておきましょう。

記事本文のフォントサイズ指定を追加

「CSSを更新」ボタンをクリックして完了です。サイトを表示して問題がないか確認しましょう。

記事本文のフォントサイズが大きくなる

このケースから学ぶのは「試行錯誤」です。ここにCSSを入力して、だめなら別の場所に入力してみる。論理的にCSSを組み込むプロのデザイナーさんから見れば邪道なアプローチかもしれませんが、ゼロからCSSカスタマイズに取り組む方には効率的な方法です。試行錯誤の気持ちでCSSカスタマイズにチャレンジしていきましょう。

ケーススタディ3：サイドバーのアイコン画像を変更する

「サイドバーのメニューのアイコン画像を変更したい」にもチャレンジしてみましょう。仕上がりイメージは次のようになります。

サイドバーの箇条書きのアイコンを変更したい

まずは、アイコンとして使いたい画像を「メディア」‐「新規追加」メニューからアップロードします。

使いたいアイコン画像をアップロード

アップロードの完了後、「編集」をクリックします。

アップロードの完了後に画像の編集メニューを開く

画面右側の「ファイルのURL」をメモ帳などにコピーします。または、後のステップでアイコン画像のURLをコピーペーストするときに、この画面を開いてURLをコピーペーストしても大丈夫です。

アイコン画像のURLをメモ帳などにコピー

箇条書きリンクのアイコンを変更する

サイトを表示して、インスペクタを開きます。今回はサイドバーの箇条書きをカスタマイズしたいので、箇条書き項目のいずれかを右クリックして「要素を調査」をクリックします。

箇条書き項目のインスペクタを開く

CSSウィンドウを見ると、箇条書きのリンク（li a）に対する背景画像のスタイル指定（background: url）が見つかるので、backgroundのプロパティをクリックして編集できるようにします。画像のパス「images/icon_arrow1_gray.gif」の部分をクリックすると画像が開いてしまうので注意してください。

アイコン画像のURLを編集可能に

編集状態にしたプロパティの「url」の中身を、アップロードしておいた新たなアイコンのURLに置き換えます。

新たなアイコンのURLに置き換える

変更イメージは次のようになります。

アイコン画像のURLを変更（urlの中身だけを変更）

URLを書き換えるとブラウザ画面のアイコンが置き換わります。アイコンのサイズや位置など多少の違和感は気にしないで大丈夫です。

アイコン画像が置き換わる

ひとまず、このCSSを「外観」-「CSSカスタマイズ」メニューまたは子テーマのstyle.cssにコピーペーストして微調整しましょう。

CSSをコピーする

コピーしたCSSを「外観」-「CSSカスタマイズ」メニューまたは子テーマのstyle.cssにペーストします。

コピーしたCSSをペースト

今回はbackgroundをカスタマイズしただけなので、「background」のみを残して他のプロパティは削除しておきましょう。

background以外のプロパティを削除する

「CSSを更新」ボタンをクリックしてサイトを確認します。

サイドバーの箇条書きアイコンが変更される

アイコンの表示位置を調整したい場合

アイコンの位置やサイズに違和感があれば、微調整しましょう。上記のCSSでURLの後に指定された「10px 50%」は背景画像の表示位置を示し、「左から10px・上から50%の位置に表示」という意味です。この値を修正しても良いですし、CSSに慣れている方はbackground-positionなどのCSSを使っても良いでしょう。

たとえば、アイコンを箇条書きブロックの中で左寄せ、上ピッタリに表示する場合は「10px 50%」を「left top」にします。表示結果は次のようになります。

アイコンを左寄せ・上ピッタリにした場合

「5px 12px」と指定すると左から5px、上から12pxに表示されます。

左から5px・上から12pxに表示した場合

あとは自由に調整してください。

アイコンのサイズを調整したい場合

アイコンのサイズは「background-size」で調整することができます。書式は次のようになります。

background-size: 幅 高さ;

たとえば、次のように記述します。

background-size: 8px 8px;

アイコン画像を指定した「background」と合わせて記述する例は次のようになります。

.sideTower .sideWidget li a {
    background: url(…略…) 10px 50% no-repeat;
    background-size: 8px 8px;
}

表示結果は次のようになります。

アイコンの表示サイズを変更した例

サイズの指定パターンは他にいくつもあるので興味があればインターネットでbackground-sizeについて調べてみてください。

ケーススタディ4：グローバルメニューを画像に置き換える

「文字ベースのグローバルメニューを画像に置き換えたい」

これもよくある相談です。グローバルメニューを画像に置き換えると、場合によってはSEO的に影響があるので要注意ですが、ここではデザインのカスタマイズがメインテーマなので紹介することにします。SEO最優先の方はご注意ください。

仕上がりイメージは次のようになります。

メニュー項目を画像に置き換える

事前に、メニュー項目に使う画像を「メディア」‐「新規追加」メニューでアップロードしておいてください。

ここでは、次のような画像を使います。

メニュー項目を画像に置き換える

グローバルメニューのCSSを調べるため、任意のメニュー項目を右クリックしてインスペクタを開きます。

メニュー項目のインスペクタを開く

カスタマイズしたいのはメニュー項目の作成に使われている「箇条書きのリンク」（li a）です。HTMLウィンドウ(1)でリンクのaタグをクリックして、ブラウザ画面(2)でメニュー項目がハイライトされ、CSSウィンドウ(3)にもaタグに関するスタイルが表示されていることを確認しましょう。

カスタマイズするメニュー項目のHTML・ブラウザ画面・CSSを確認

メニュー項目には画像が入っていないので、新たにbackgroundを使って画像を表示します。さらに、「text-indent: -9999px;」を使ってメニュー項目の文字を画面の外に飛ばします。CSSの例は次のようになります。

background: url(http:// …略… /service.png) no-repeat center;
text-indent: -9999px;

これをCSSウィンドウの「#gMenu .menu > li > a」の中に入力します。

メニュー項目を画像に置き換えるCSSを追加

入力後にブラウザ画面を見ると、メニュー項目の文字が消えて、代わりに画像が表示されるようになります。

メニュー項目に画像は表示されたが…

ただし、気づいたかと思いますが、すべてのメニューに同じ画像が表示されてしまいます。対処が必要ですが、ひとまず画像の表示まではうまくいっているので、ここまでのCSSをコピーして「外観」-「CSSカスタマイズ」メニューまたは子テーマのstyle.cssにペーストしておきましょう。

CSSウィンドウからCSSをコピーする

「外観」-「CSSカスタマイズ」メニューまたは子テーマのstyle.cssにペーストし、今回のカスタマイズに関係ない部分は削除して保存（CSSを更新）しましょう。

コピーペーストしたCSSを編集して保存

すべてのメニュー項目が同じ画像ですが、ここから修正するので大丈夫です。

メニュー項目の画像化までは問題なし

マウスオーバー時の問題に対処する

CSSに限りませんがWordPressのカスタマイズ作業では、とにかく確認が必要です。この例では「すべてのメニュー項目に同じ画像が表示される」の他にも問題があります。たとえば、メニューにマウスオーバーすると、「画像が表示されない！」に気づくはずです。

マウスオーバーしたら画像が消えた！

ここからはCSSの知識が必要になるので経験がない方は簡単に解決できないかもしれませんが、これはマウスオーバー時のスタイルを設定することで解決できます。さきほど更新したCSSを見直して、マウスオーバー時のCSSセレクタを追加します。

マウスオーバー時も同じ画像を表示するように変更

変更前後のCSSセレクタをまとめておきます。

#gMenu .menu > li > a {
…略…
}

#gMenu .menu > li > a,
#gMenu .menu > li > a:hover {
…略…
}

これで、マウスオーバー時も同じ画像が表示されるようになります。

マウスオーバー時も同じ画像が表示される

マウスオーバー時に別の画像を表示する

マウスオーバー時に別の画像（例：service2.png）を表示するには、上記のようにまとめたCSSセレクタを別々にすれば大丈夫です。たとえば、次のようなCSSになります。

/* 通常の画像 */
#gMenu .menu > li > a {
    background: url(http:// …略… /service.png) no-repeat center;
    text-indent: -9999px;
}

/* マウスオーバー時の画像 */
#gMenu .menu > li > a:hover {
    background: url(http:// …略… /service2.png) no-repeat center;
    text-indent: -9999px;
}

表示結果は次のようになります。

マウスオーバー時に違う画像を表示する

メニュー項目ごとに別の画像を表示する

あとは、メニュー項目ごとに別々の画像を表示できれば完了です。それを解決するため、任意のメニュー項目を選んでもう一度インスペクタを開きましょう。

メニュー項目のインスペクタを開く

HTMLウィンドウを見て、メニュー項目の箇条書きタグ（li）に注目してください。たとえば、「サービス紹介」メニューのliタグ(1)を見ると「menu-item-146」という固有のIDが割り振られています。

メニュー項目には固有のIDが付いている

他のメニュー項目のliタグ(2)も同じように固有のIDが付いていることに気づきます。

この固有のIDを活用すれば、メニュー全体の箇条書きリンクを示す「#gMenu .menu > li > a」というCSSセレクタを修正して特定のメニュー項目の箇条書きリンクとして機能させることができます。

つまり、

#gMenu .menu > li > a

は、すべてのメニュー項目で共通のCSSセレクタですが、メニュー項目固有のIDを付加して

#gMenu .menu > li#menu-item-146 > a

とすれば良いのです。

さっそくCSSを変更してみましょう。

特定のメニュー項目のみに画像を表示するようにCSSを変更

これで、特定のメニュー項目（例：ここでは「サービス紹介」）のみに画像が表示されるようになります。

特定のメニューのみに画像が表示される

あとは、他のメニュー項目についても固有のIDを付けて、個別の画像を指定すれば大丈夫です。CSSの例を以下に紹介します。

#gMenu .menu > li#menu-item-146 > a,
#gMenu .menu > li#menu-item-146 > a:hover {
    background: url(http:// …略… /service.png) no-repeat center;
    text-indent: -9999px;
}

#gMenu .menu > li#menu-item-149 > a,
#gMenu .menu > li#menu-item-149 > a:hover {
    background: url(http:// …略… /howto.png) no-repeat center;
    text-indent: -9999px;
}

#gMenu .menu > li#menu-item-148 > a,
#gMenu .menu > li#menu-item-148 > a:hover {
    background: url(http:// …略… /company.png) no-repeat center;
    text-indent: -9999px;
}

#gMenu .menu > li#menu-item-147 > a,
#gMenu .menu > li#menu-item-147 > a:hover {
    background: url(http:// …略… /blog.png) no-repeat center;
    text-indent: -9999px;
}

#gMenu .menu > li#menu-item-154 > a,
#gMenu .menu > li#menu-item-154 > a:hover {
    background: url(http:// …略… /booking.png) no-repeat center;
    text-indent: -9999px;
}

コードが増えたので混乱しないようにまとめておきますが、メニュー項目ごとに異なるのはIDと画像のファイル名（以下の赤い部分）だけです。

#gMenu .menu > li#menu-item-154 > a,
#gMenu .menu > li#menu-item-154 > a:hover {
background: url(http:// …略… /booking.png) no-repeat center;
text-indent: -9999px;
}

また、言うまでもありまんが上記のIDはサンプルサイトのものです。あなたのサイトではIDが異なるので、インスペクタでしっかり確認してCSSを作成してください。

これで、メニュー項目ごとに別々の画像が表示されます。

メニュー項目ごとに別々の画像が表示される

最後まで油断は禁物！スマホで確認すると…

これでグローバルメニューが画像になって安心しているかもしれませんが、油断は禁物です。このサイトをスマホで見てみましょう。

スマホで見たグローバルメニュー

見え方に違和感があれば対処が必要です。その方法はいくつもありますが、スマホやタブレットでは画像置き換えをしないパターンが簡単かもしれません。

上記の各メニューに関するCSSに「画面幅が広い端末の場合は」という条件を設定すれば、画面幅が狭いスマホやタブレットでは画像メニューではなく文字のグローバルメニューが表示されるようになります。

たとえば、上記のCSSを@media (min-width: 970px) {　}で囲みます。これにより、幅が970px以上の端末のみにCSSが適用されるようになります。

@media (min-width: 970px) {
    #gMenu .menu > li#menu-item-146 > a,
    #gMenu .menu > li#menu-item-146 > a:hover {
        background: url(http://hp555.net/wp-content/uploads/2016/02/service.png) no-repeat center;
        text-indent: -9999px;
    }
…途中省略…
}

表示結果は次のようになります。

スマホには文字メニュー・PCには画像メニューを表示する

まだカスタマイズしたいポイントがあるかもしれませんが、ひとまず、グローバルメニューの画像置き換えは完了とします。

このケースから学ぶのは「どこまでのカスタマイズをCSSで実現できるか」です。WordPressのカスタマイズというと、すぐにPHPの修正を考える方がいます。抜本的にはPHPを修正した方が良い場面もありますが、未経験の方には現実的ではありません。むしろCSSだけでどこまでカスタマイズできるのかを掘り下げるのが現実的です。

グローバルメニューの画像置き換えもCSSだけで実現できることが理解できれば、もう少し難しそうなカスタマイズもCSSで対処できるのではないか、という希望を持っていただけると思います。

まとめ

このように、ブラウザに組み込まれたインスペクタを使うとサイトのデザインを効率的にカスタマイズできるようになります。CSSの変更をプレビューしながら試行錯誤でカスタマイズできるインスペクタは最高のツールです。そんなインスペクタを使いこなして、自由自在にCSSをカスタマイズしていきましょう。

ここで紹介したケーススタディについてもデザインを仕上げたわけではありません。いくつか取りこぼしがあると思います。あとはみなさんのセンスにお任せします。発展学習として取り組んでいただければと思います。

WordPressに限りませんが記事下に広告やリンクバナーを表示したいこともあります。次のように記事下に問い合わせページやサービスページへのリンクバナーなどを表示しておけば、見込み客の誘導に役立つだけでなくSEO面でも効果が期待できます。

記事下にリンクバナーを表示したい

テーマによっては記事下などに広告を挿入できるようになっている場合もありますが、ここでは、そのような機能のないテーマでWP Insertプラグインを使って記事下にリンクバナーを表示する手順を紹介します。

すでにリンクバナーを作成済みの方や、アフィリエイトのタグを貼り付けるだけの方はリンクバナーのタグ作成のステップは省略して、WP Insertプラグインの使い方に進んで下さい。

リンクバナーのタグを作成

「投稿」または「固定ページ」の「新規追加」メニューを開きます。

「投稿」‐「新規追加」メニューを開く

公開するページではないので「広告用」(1)などと入力して「下書きとして保存」ボタン(2)をクリックします。

公開しないので下書き保存する

「メディアを追加」をクリックして、使いたい画像を選びましょう。

「メディアを追加」をクリックして画像を選択

ここでは、問い合わせページにリンクするバナーを作成する想定なので、選択した画像(1)の画面右下「添付ファイルの表示設定」でリンク先(2)に「カスタムURL」を選び、その下(3)に問い合わせページのURL（例：http://example.com/contact）を入力します。

画像クリック時のリンク先を設定

完了後、「投稿に挿入」ボタンをクリックすると、リンクバナーが作成されます。そのタグをコピーするため、「テキスト」をクリックしてテキストエディタを開きます。

テキストエディタに切り替える

タグをコピーします。

リンクバナーのタグをコピー

続いて、リンクバナーのタグをWP Insertプラグインのメニューにペーストします。

WP Insertプラグインの使い方

WP Insertプラグインを使うと、記事本文の上下左右に広告など（リンクバナーや任意の文章なども）を表示することができます。

WP Insertプラグインを使うため、「プラグイン」‐「新規追加」メニューからインストール、有効化します。

WP Insertプラグインのインストール

「WP Insert」メニューを開いて、「Ad - Below Post Content」（本文下に広告を表示する場合）をクリックします。本文下ではない場所に表示する場合は、必要に応じて選択してください。たとえば、「Ad - Above Post Content」は記事本文の上です。

コンテンツ下に広告を挿入するメニューを開く

上記のステップでコピーしたリンクバナーのタグを「Ad Code (Primary Network)」(1)にペーストします。完了後、赤いステータス(2)をクリックして緑に切り替えましょう。赤にすると広告が無効になり、緑にすると表示されるようになります。

リンクバナーのタグをペーストしてステータスを有効に

ステータスが緑(1)に切り替わったのを確認して「Update」(2)をクリックします。これで完了です。

作業を完了する

各ページの下にリンクバナーが表示されます。

ページの下にリンクバナーが表示される

広告を表示しないページを設定

広告タグをペーストした画面の「Rule」タブでは広告表示のルールを設定することができます。

広告表示のルール設定

• Logged in Users --- ログイン中のユーザーに表示するか
• Mobile Devices --- モバイル端末に表示するか
• Home --- フロントページに表示するか
• Archives --- アーカイブに表示するか
• Category Archives --- カテゴリーアーカイブに表示するか
• Search Results --- 検索結果に表示するか
• Single Pages --- 固定ページに表示するか
• Single Posts --- 個別記事に表示するか

 
これらの条件と「Exceptions」（例外）を組み合わせることで、広告の表示／非表示の条件を細かく設定できます。

たとえば、「問い合わせページの下にはリンクバナーは不要」という要件で設定してみましょう。

その場合、

• 基本的には、すべてのページにリンクバナーを表示する
• ただし、「問い合わせページ」のみリンクバナーを非表示にする

という設定にします。

具体的なメニューの設定は、

• 「Single Pages」を「Status : Show Ads」（広告を表示）に設定(1)
• 「Exceptions」（例外／広告を非表示）に「お問い合わせ」を追加(2)

のようにします。

リンクバナーを表示しないページを設定

例外（ここでは、広告を表示しないページ）は、いくつも追加できます。

リンクバナーを表示しないページ

完了後、「Update」をクリックしてサイトを確認しましょう。

問い合わせページの下からはリンクバナーが消えているはずです。

問い合わせページからリンクバナーが消える

「Rule」タブのオプションを組み合わせれば、このように特定のページのみ広告を非表示にしたり、逆に特定のページのみに広告を表示するような使い方もできます。

あとはアイデア次第です。試行錯誤してみましょう。

タグクラウドのリンクをCSSでカスタマイズする例を紹介します。仕上がりイメージは次のようになります。

タグクラウドのスタイルを変更した例

テーマによって異なりますが、タグクラウドではよく使われるタグのサイズが大きくなるのが定番です。次のようなイメージです。

よく使われるタグは大きくなる

タグのフォントサイズを統一して、枠線を付けて、背景色を設定するCSSの例を紹介していきます。

すべて同じフォントサイズにする

サイズを揃えたければタグクラウドのリンクに共通のフォントサイズを指定します。たとえば、次のようなCSSを使います。

/* タグクラウドのフォントサイズを統一 */
.tagcloud a {
    font-size: 16px !important;
}

タグクラウドは「tagcloud」というクラス名になっているので、そのリンクのフォントサイズを指定するものです。既存のフォント設定よりも優先度を上げるため「!important」を付けています。

表示結果は次のようになります。

タグクラウドのフォントサイズを統一

枠線を付ける

個々のタグを枠線で囲むCSSの例は次のようになります。

/* タグクラウドに枠線を付ける（＋フォントサイズ統一） */
.tagcloud a {
    font-size: 16px !important;
    border: solid 1px #000080;
    border-radius: 5px;
    display: inline-block;
    padding: 5px;
    margin-bottom: 8px;
}

表示結果は次のようになります。

タグクラウドに枠線を付ける

マウスオーバー時に背景色を付ける

タグクラウドにマウスオーバーしたときに背景色を付けるCSSの例は次のようになります。

/* タグクラウドのマウスオーバー時の背景色 */
.tagcloud a:hover {
    background-color: #f6bfbc;
    text-decoration: none;
    color: #000;
}

表示結果は次のようになります。

マウスオーバー時に色を変える

自由にカスタマイズしてお使いください。

WordPressのプラグインなどで作成したフォームの各項目に説明文を表示する方法を紹介します。

問い合わせフォームのメッセージ欄などに「何かご希望があればこちらに入力してください」のガイダンスを表示したり、郵便番号や電話番号の入力例を表示しておき、何か入力された時点で消えるのが典型的な動きです。

フォーム要素に説明文を表示する

自作のフォームとプラグインで自動作成されるフォームでは作業が異なるので注意が必要です。以下、簡単に説明します。

説明文を表示するplaceholder属性

フォーム項目のplaceholder属性を使うと、説明文を表示することができます。たとえば、メッセージ欄などを作成するtextareaタグには次のように記述することができます。

<textarea placeholder="ご要望はこちらに入力してください。"></textarea>

表示結果は次のようになります。

説明文が表示される

何か入力すると説明文は消えます。

何か入力すると説明文は消える

名前や住所、郵便番号、電話番号などを入力するテキストボックス（inputタグ）でも同じように指定できます。

<input type="text" name="postcode" placeholder="（例：113-0022）">

表示結果は次のようになります。

郵便番号の入力例を表示

プラグインで作成したフォームにplaceholder属性を付加する

タグを手作業で入力したフォームの場合は上記のように任意のタグにplaceholder属性を指定すれば良いのですが、問題はプラグインで作成するフォームです。

多くの場合はショートコードを使うことでフォームが自動作成されるので、個々のフォーム要素のタグを編集できないこともあります。

その場合、自動作成されたフォームに対してjQueryを使ってplaceholder属性を後付けする方法があります。

以下、予約システムのプラグイン「MTS Simple Booking C」で作成した予約フォームのメッセージ欄に説明文を表示する例で説明します。

自動作成されたフォーム要素の名前を調べる

まずは、説明文を表示したいフォーム要素の名前（IDまたはclass名）を調べます。

インスペクタ（「要素を調査」などのメニュー）を使って説明文を表示したいテキストエリア「メッセージ」のソースを調べてみると「booking-note」というIDが付いています。

説明文を表示する要素のIDまたはクラス名を調べる

その要素に対するjQueryを記述する

この「booking-note」に対してplaceholder属性を後付けするjQueryを記述します。具体的には次のようなコードを子テーマのfunctions.phpなどに入力します。

/* 「booking-note」に説明文を付加 */
function my_wp_footer(){ 
?>
<script type="text/javascript">
jQuery(function() {
    var msg = 'ご要望はこちらに入力してください。';
    jQuery('#booking-note').attr('placeholder', msg);
});
</script>
<?php
}
add_action('wp_footer', 'my_wp_footer');

指定したフォーム要素に説明文が表示されるようになります。

指定したフォーム要素に説明文が表示される

まとめ

このようにplaceholder属性を使うと、フォーム要素に説明文を表示できるようになりますが、場合によってはjQueryで後付けするなどの工夫が必要です。あとはいろいろと試行錯誤してみてください。

WordPressで記事の下などに表示されるカテゴリーページのリンクを色分けする方法を紹介します。仕上がりイメージは次のようになります。

カテゴリーを色分けする

カテゴリーページのリンクを色分けできるテーマもありますが、カテゴリーはシンプルなリンクになっているのが一般的です。以下はStingerの例です。

Stingerのカテゴリーリンク

それぞれのカテゴリーはCSSを使って色分けすることができます。それには、「投稿」‐「カテゴリー」メニューからカテゴリーのスラッグを調べます。

カテゴリー名とスラッグを調べる

カテゴリーごとに色を指定するCSSを記述します。次のCSSはスラッグが「campaign」の「キャンペーン」リンクを赤くする例です。

.tagst a[href*="/campaign"] {
    background-color: red;
}

「a[href*="/campaign"]」という指定によって、「/campaign」という文字が含まれるリンクにCSSが適用される仕組みです。この「campaign」の部分を色分けしたいカテゴリーのスラッグに変更し、「red」を好きな色に変更すれば、好きなカテゴリーを好きな色に設定することができます。

完成したCSSは次のようになります。「キャンペーン」「新商品情報」リンクの色分けと合わせて、その他のカテゴリーおよびタグリンクに対する設定も行っています。

/* カテゴリー・タグ共通 */
.tagst a[rel*="category"],
.tagst a[rel*="tag"] {
    color: #fff;
    background-color: silver;
    text-decoration: none;
    border-radius:5px;
    margin: 0 3px;
    padding: 5px;
}

/* 「キャンペーン」の背景色 */
.tagst a[href*="/campaign"] {
    background-color: red;
}

/* 「新商品情報」の背景色 */
.tagst a[href*="/products"] {
    background-color: blue;
}

これにより、「キャンペーン」「新商品情報」のリンクが色分けされます。

カテゴリーが色分けされる

その他のカテゴリーやタグには共通設定が適用されます。

その他のタグやカテゴリーは共通設定が適用される

ここでは「キャンペーン」「新商品情報」を色分けする例だけを紹介したので、色が付かないその他のカテゴリーやタグも取りこぼさないように保険の意味で共通の色設定も作成しました。色分けするカテゴリーやタグがすべて判明している場合は、その他のカテゴリーやタグにも色設定を記述しておけば良いでしょう。

WordPressプラグインのWordPress Popular Postsで人気記事に順位を表示する方法を紹介します。仕上がりイメージは次のようになります。

WordPress Popular Postsで人気記事に順位を表示する

WordPress Popular Postsで表示する人気記事の一覧は次のようなイメージです。「順位が付いていれば…」と思った方もいるでしょう。

人気記事の一覧（WordPress Popular Posts）

人気記事に順位画像を表示する

人気記事に金メダル、銀メダル、銅メダルなどの画像を表示したい場合は、その画像を「メディア」‐「新規追加」メニューからアップロードしておきます。

順位画像をアップロードする

人気記事の一覧にメダル画像を付加するため、子テーマのstyle.cssなどに次のようなCSSを入力します。

/* すべての順位共通のスタイル */
.wpp-list li:before {
    display: block;
    margin-bottom: -30px;
    margin-left: -10px;
}

/* 1位 */
.wpp-list li:nth-of-type(1):before {
    content: url('http://-----.jpg');
}

/* 2位 */
.wpp-list li:nth-of-type(2):before {
    content: url('http://-----.jpg');
}

/* 3位 */
.wpp-list li:nth-of-type(3):before {
    content: url('http://-----.jpg');
}

実際に使う場合は、url('http://-----.jpg')の部分を実際の画像のURLに置き換えてください。また、余白のmargin-bottom（下の余白）・margin-left（左の余白）は画像サイズに応じて微調整をお願いします。これにより、人気記事の一覧にメダル画像が表示されるようになります。

人気記事に順位画像を付加

文字で順位を表示する

順位を示すメダル画像などを使わずに好きな文字で順位を表示したい場合は、上記のCSSでcontentの部分に「1位」「2位」「3位」などと入力すれば大丈夫です。

1位から3位（または10位までなど）1つずつ設定することもできますが、面倒であればCSSのカウンタを使って順位を自動的に加算して表示する方法があります。たとえば、次のようなCSSになります。

/* カウンタをリセット */
body {
    counter-reset: wpp-ranking;
}

/* 一覧の表示スタイル */
.wpp-list li {
    margin-bottom:20px;
    position: relative;
}

/* 順位ラベルを表示 */
.wpp-list li:before {
    content: counter(wpp-ranking, decimal)'位';
    counter-increment: wpp-ranking;
    background: rgba(94, 185, 77, 0.9);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    padding: 4px 8px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}

counter-incrementで加算した順位をcontentで表示する仕組みです。'位'の部分は好きな文字に置き換えて大丈夫です。counter-resetではカウンタをリセットしています。リセットしないとカウンタがうまく機能しない場合があります。

このコードは以下のサイトから引用させていただきました。ありがとうございます！

【WordPress】人気記事ランキングに「順位」をCSSだけでいい感じに表示させる【WordPress Popular Posts】
自動で連番付与できるCSS。counter-incrementの使い方

これにより、好きな文字で人気記事の順位を表示できるようになります。ランキングの数字は自動で加算されています。

順位を文字で表示

WordPressのログイン画面は「http://example.com/wp-login.php」、管理画面は「http://example.com/wp-admin」のようなURLです。よく知られたURLを使うのは便利ですが、誰でもアクセスできてセキュリティが気になる方もいると思います。

そこで、WordPressのログイン画面のURLを変更する方法を紹介します。

ログイン画面のURLを変更する

SiteGuard WP Pluginプラグインを使うと、ログイン画面のURLを変更することができます。

まずは、「プラグイン」‐「新規追加」メニューからSiteGuard WP Pluginプラグインをインストール、有効化します。

SiteGuard WP Pluginプラグインのインストール

有効化すると、さっそくログイン画面が変更されます。

ログイン画面が変更される

具体的なログイン画面のURLは「SiteGuard」‐「ログインページ変更」メニューまたは管理者あてのメールで確認できます。

新たなログイン画面のURL

ログイン画面のURLを忘れないように、管理者あての「ログインページURLが変更されました」のメールは保存しておきましょう。

管理者あてのURL変更通知は要保存

ここでは「http://example.com/login_88739」のようになっていますが、このURLは好きな文字に変更することもできます。お客様に納品する場合などは、利便性を考慮してお客様にちなんだ文字などに変更しておくと良いでしょう。

次の例では「http://example.com/sample-login」に変更しています。

ログイン画面のURLを変更

変更後、一般的なログイン画面のURL（http://example.com/wp-login.php）にアクセスすると、「ページが見つかりません」になります。

wp-login.phpではログイン画面が表示されない

変更後のURLにアクセスすると、ログイン画面が表示されます。

新たなURLでログイン画面が表示される

ログイン画面のURLを元に戻す

ログインページ変更のステータスを「OFF」にすれば、新たなURLを無効にして元のwp-login.phpにアクセスできるようになります。

ログイン画面のURL変更を無効に

管理画面へのアクセス制限

上記のようなログイン画面のURL変更と合わせて、管理画面へのアクセス制限も設定しておくと良いでしょう。ログイン履歴のあるユーザーのみが管理画面にアクセスできるようになります。

管理画面へのアクセス制限を設定するには「SiteGuard」‐「管理ページアクセス制限」メニューのステータスを「ON」にします。

管理画面へのアクセス制限を有効に

ここで、管理画面にログインした履歴のないユーザーが管理画面のURL（例：http://example.com/wp-admin）にアクセスすると、「ページが見つかりません」になります。

第三者の管理画面へのアクセスを防ぐ

この機能では、正規にログインしたユーザーのIPアドレスが.htaccessに記録される仕組みです。これにより、ログイン画面のURLを知っているユーザーしか管理画面にアクセスできなくなります。

まとめ

このようにSiteGuard WP Pluginプラグインを使うと、ログイン画面のURLを変更したり、管理画面へのアクセスを制限することができます。また、ここでは紹介しきれないほど多くのセキュリティ関連機能を使うことができます。WordPressサイトのセキュリティが気になる方はお試しください。

ちなみに、SiteGuard WP Pluginプラグインの初期設定ではログインロックが有効になっています。ログイン画面でパスワードを3回間違えるとロックされます。ロック期間が1分なので大きな問題ではないかもしれませんが、ご注意ください。

パスワードを3回間違えるとロックされる

最近のWordPressテーマは機能が充実しているので、ヘッダーにロゴ画像を表示できるテーマも少なくありませんが、Twenty Sixteenなどのシンプルなテーマでは「ロゴをアップロードする」のようなメニューはありません。そこで、シンプルなテーマでヘッダーにロゴ画像を表示する方法を紹介します。

ただし、header.phpを開いてPHPを修正するのは面倒なのでCSSだけで対処します。

ヘッダーにロゴ画像を表示する

以下、Twenty Sixteenの例で説明しますが、他のシンプルなテーマでも考え方は同じです。

Twenty Sixteenのヘッダー部分は次のようなイメージです。サイト名の下あたりにロゴ画像を表示してみましょう。

Twenty Sixteenのヘッダー部分

ヘッダーにロゴ画像を表示する

たとえば、次のようなCSSを使うと、好きな画像をヘッダーロゴとして表示できます。「http://-----.jpg」をロゴ画像のURLに変更してください。

/* ヘッダーにロゴを表示 */
.site-title a:after {
    display: block;
    content: url('http://-----.jpg');
}

/* サイト名のフォントを調整 */
.site-title {
    font-size: 14px;
    font-weight: normal;
}

「site-title」というクラス（サイト名）のリンクタグの直後（:after）に画像を指定して、「display: block;」でブロック要素とすることでサイト名の下に画像が表示される仕組みです。

表示結果は次のようになります。

ヘッダーにロゴを表示したイメージ

サイト名とキャッチフレーズを入れ替える

ロゴ画像（サイト名）の下にキャッチフレーズが表示されていますが、サイト名とキャッチフレーズの上下関係を入れ替えるには、次のようなCSSを使う方法があります。

/* Flexboxの作成 */
.site-branding {
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}

/* サイト名をキャッチフレーズの下に */
.site-branding p:first-child {
    -webkit-order: 1;
    order: 1;
}

Flexboxは子要素の順番の入れ替えなど、柔軟なレイアウトが可能なレイアウトパーツです。Twenty Sixteenでは親要素「site-branding」をFlexboxに設定することで子要素のサイト名とキャッチフレーズの順番を入れ替えることができます。

表示結果は次のようになります。

キャッチフレーズをサイト名の上に移動

サイト名やキャッチフレーズを消す

サイト名やキャッチフレーズのテキストは次のようなCSSで消すことができます。

/* サイト名を消す */
.site-title {
    font-size: 0;
}

/* キャッチフレーズを消す */
.site-description {
    display: none;
}

「font-size: 0;」はSEO的に問題があるという都市伝説もあります。また、一般的なテーマではサイト名は見出し（h1）に設定されている場合も少なくないので、サイト名を非表示にする場合は注意してください。

表示結果は次のようになります。

ロゴ周辺のサイト名とキャッチフレーズを非表示に

あとは、いろいろと試行錯誤してみてください。

WordPressで作成できる2種類のページが「投稿」と「固定ページ」です。

ブログ記事は「投稿」で書いて、会社概要やサービス紹介などのページは「固定ページ」で作るのが一般的な使い方ですが、ある程度作成した後で投稿と固定ページを変換したいと思うこともあります。

投稿をまとめて固定ページに変換したい

投稿を固定ページに変換したり、固定ページを投稿に変換するにはそれぞれの内容をコピーペーストすれば良さそうですが、ページ数によっては限界もあります。

そこで、プラグインを使って「投稿」と「固定ページ」を変換する方法を紹介します。

投稿を固定ページに変換する

pTypeConverterプラグインを使うと、作成済みの投稿と固定ページを変換（投稿を固定ページに、または、固定ページを投稿に）することができます。

まずは、「プラグイン」‐「新規追加」メニューからpTypeConverterプラグインをインストール、有効化します。

pTypeConverterプラグインのインストール

「ツール」‐「pTypeConverter」メニューから「Convert」を開くと、画面の下(1)に投稿や固定ページが一覧されます。投稿なのか固定ページなのかは、画面右側の「タイプ」(2)に表示されます。「post」が投稿、「page」が固定ページです。「Type」(3)で絞り込んで投稿または固定ページのみを表示することもできます。

現在の投稿と固定ページを確認

ここでは、投稿を固定ページに変換したいので「Reset」ボタン(1)をクリックして「Type」(2)で「post」を選択します。最後に表示件数を指定する「Limit」(3)で「ALL」などを選択すると、指定件数の投稿(4)が表示されます。

投稿だけを表示する

続いて、固定ページに変換したい投稿をチェックします。

固定ページに変換したい投稿をチェック

「Selected items to」（変換先）で「page」（固定ページ）(1)を選択して「Convert!」(2)ボタンをクリックすると、選択した投稿が固定ページに変換されます。

選択した投稿を固定ページに変換

処理された投稿に「Success!」と表示されて変換が完了します。

固定ページへの変換が完了

固定ページの一覧を見ると、さきほどまで投稿だったページが固定ページの中に一覧されています。

投稿が固定ページに変換される

これで完了です。データベース自体が置き換えられるので、pTypeConverterプラグインを停止しても元には戻りません。

カスタム投稿タイプを投稿や固定ページに変換したい場合

初期設定では投稿と固定ページの相互変換は可能ですが、処理対象にカスタム投稿タイプが含まれていません。カスタム投稿タイプを含めるには、「ツール」‐「pTypeConverter」メニューから「Options」タブを開いて、「Use Advanced Post Types」をtrueに設定します。

カスタム投稿タイプを変換対象に

「Convert」タブを開くとカスタム投稿タイプも変換対象になったことがわかります。

カスタム投稿タイプも変換対象になる

カスタム投稿タイプを変換対象にすると、「Type」の絞り込みメニューや「Selected items to」の変換先メニューにリビジョン（revision）やメニューアイテム（nav_menu_item）なども表示されるようになります。ページの変換には関係ないアイテムなので操作を間違えないように注意してください。

「SEOに強い」で有名なテンプレート「賢威」ですが「デザイン的にはどうなの？」が気になっている方もいると思います。そこで、賢威7のテンプレートのイメージを紹介します。執筆時点では25種類あります。

バリエーションが豊富な賢威のテンプレート

企業サイト向きのコーポレート版、美容系のビューティ版、女性サイト向けのプリティ版、幅広い業種向きのクール版など、用途に応じてカラーバリエーションが用意されています。

ピンときたパターンがあれば、賢威を購入してさっそくダウンロードしていただくことをおすすめします。

テンプレートパターンと合わせて、サイトを彩るデザインパーツをいくつか紹介します。たとえば、ランキング、お客様の声、画像上のリンクなどです。参考にしてください。

コーポレート版テンプレート

コーポレート版テンプレートは企業、団体、個人事業、士業などに合うデザインです。ベースカラーはBLACKやBLUEの落ち着いた色だけでなくORANGEやPINKも選べるので柔らかいイメージの会社や幼稚園、保育園、学校、料理教室などにも合うと思います。

ヘッダー画像にキャッチフレーズを表示可能

上記のサンプルでは、ヘッダー画像にキャッチフレーズを表示していませんが、従来の賢威と同じようにヘッダー画像の中にキャッチフレーズを表示することもできます。

ヘッダー画像にキャッチフレーズを表示できる

ビューティ版テンプレート

ビューティ版テンプレートはサロン、美容系、エステなどに合う華やかなデザインです。重厚感のあるGOLDやWINEから、さわやか系のAQUAまで選べるので、さまざまなお店の雰囲気に合うテンプレートが見つかると思います。

予約カレンダーの設置イメージ

ちなみに、サロン系サイトによくある予約カレンダー（MTS Simple Booking Cで作成）を設置したイメージは次のようになります。エステや治療院の予約システムを作りたい方は参考にしてください。

予約カレンダー

丸印を画像に置き換えた場合

プリティ版テンプレート

プリティ版テンプレートは女性向けサイトやアフィリエイトにも合いそうな色使いです。派手すぎず地味すぎずバランスの良い色合いになっているので普通の会社のサイトにも使えると思います。

クール版テンプレート

クール版は幅広い業種に合うテンプレートです。色選びに迷ったらNAVYあたりが無難かもしれません。

スタンダード版テンプレート

ゼロから自分でデザインをカスタマイズしたい方はスタンダード版が便利です。

スタイル定義済みのデザインパーツ

賢威ではテンプレートのデザインを選べるだけでなく、カスタマイズに役立つ定義済みのスタイルがいくつも用意されています。HTMLにclassを付加すれば各種デザインパーツを組み込むことができます。

アフィリエイトに役立つランキングパーツ

ランキング形式のレイアウトを簡単に作成できるようになっています。アフィリエイトの商材や貴社の人気サービスなどを紹介するときに役立つでしょう。

アフィリエイトにも役立つランキングパーツ

FAQなどに使えるQAパーツ

FAQ（よくある質問）などのコーナーで使えるQAパーツも用意されています。ビューティ版テンプレートでは次のようになります。

QAパーツ（ビューティ版テンプレートの場合）

コーポレート版テンプレートでは次のようなイメージです。

QAパーツ（コーポレート版テンプレートの場合）

お客様の声などに役立つ「画像＋吹き出し」

画像と吹き出しのレイアウトを使えばお客様の声なども簡単に作成できます。写真の角を丸くしたり吹き出しに背景色を付けることができるので、あとは貴社サイトの雰囲気に合ったスタイルを選べばアイデア次第でサイトが華やかになっていくでしょう。

お客様の声に役立つ「画像＋吹き出し」（プリティ版テンプレートの例）

商材ダウンロードに役立つ各種アイコン

ダウンロードベースの商材やマニュアルを配布するのに役立つアイコンもそろっています。

賢威で使えるアイコンの例

商品ページへの誘導に役立つ「画像上のリンク」

商品やサービスページにうまく誘導するために「画像の上に文字やリンクを乗せたい」もニーズの多い要件です。賢威では次のように画像の上にリンクや文章をのせることができます。商品ページへのナビゲートに役立つでしょう。

画像の上にリンクを表示

画像を背景に設定して、その上に文章をのせることもできます。

背景画像の上に文章をのせる（プリティ版テンプレートの場合）

クリックしたくなるコンバージョンボタン

「お申し込みはこちら」や「資料請求」「お問い合わせはこちら」など、成約につなげるボタンは、色や大きさが重要です。そんなボタンのスタイルに悩まなくても賢威なら、こんなボタンを使うことができます。

コンバージョンボタン（クール版テンプレートの例）

テンプレートによってボタンのイメージも違うので、いろいろなテンプレートを試してみると良いかもしれません。以下はコーポレート版テンプレートの例です。

コンバージョンボタン（コーポレート版テンプレートの例）

以下はプリティ版テンプレートのコンバージョンボタンです。

コンバージョンボタン（プリティ版テンプレートの例）

以下はビューティ版テンプレートのコンバージョンボタンです。

コンバージョンボタン（ビューティ版テンプレートの例）

いかがでしょうか。ボタンのバリエーションだけ見ていてもサイト制作が楽しくなりそうな気がするのは私だけでしょうか。

賢威には、ここでは紹介しきれないほどデザインパーツが充実しています。ダウンロードしたテンプレートにデザインパーツを組み込んで、貴社サイトのイメージに合うかどうか吟味していけば、サイトの完成形が見えてくることでしょう。

メタキーワード（meta keywords）とメタディスクリプション（meta description）。よく耳にする項目ですが、結局、SEO的に設定した方が良いのか、設定する必要ないのか迷っている方がいるようです。ここでは、それぞれの項目が必須なのか指定不要なのか簡単にまとめます。

メタキーワード（meta keywords）

「メタキーワードは指定した方が良いですか？」は、WordPress個別サポートでも多くいただく質問です。

メタキーワード（meta keywords）は指定した方が良い？

先に結論を書くと「どちらでも良い」です。私は指定していません。

meta keywordsはページのキーワードを指定する項目ですが、現時点（2016年3月）ではSEO的に重要な項目ではありません。現在のGoogle検索では検索順位の決定要因になっていないからです。

昔は検索順位を決めるために重要な項目でしたが、あまりにも対策が簡単なため、「meta keywordsにキーワードを繰り返し入力する」というインチキが流行してしまったため、検索順位の決定要因ではなくなりました。

今でもmeta descriptionが話題になる事情

そんなわけで私は設定していません。ただし、さまざまな事情によって設定した方が良いのか、する必要ないのか、今でも議論が分かれています。

というのは、meta keywordsに関して昔の良いイメージが頭から離れない方や、今後復活するのが不安な方、SEO業者から「meta keywordsを設定してください」と強く勧められて迷っている方もいます。どうしても気になる方は設定しておけば良いと思います。マイナスにはならないでしょうから。

私は万が一、meta keywordsの重要性が復活したら急いですべての記事やページに入力すれば良いか、と思っています。昔のように「meta keywordsに検索キーワードを入れるだけで簡単に上位表示できる！」のような時代は来ないでしょうから。

「どうしても簡単に検索順位を上げたい」ならば、meta keywordsよりもページのタイトルを練り込むことに時間をかけた方が良いです。「ページのタイトルを見直せば検索順位の改善が期待できる」は現在の定説になっているので。

メタディスクリプション（meta description）

ページの概要を指定する項目です。検索結果に表示されるパーツとして知られています。

meta descriptionは検索結果にサイト概要として表示される

設定した方が良い項目ですが検索順位の決定要因ではないので過剰に神経質になる必要はありません。

「クリック率に影響する」のが気になっている方もいるでしょうが、必ずしも検索結果に使われるとは限りません。

たとえば、検索キーワードによっては次のようにmeta descriptionが表示されない場合もあります。

必ずしもmeta descriptionが検索結果に表示されるとは限らない

これは検索キーワードと関連性の強い文章がピックアップされる場合があるためです。ですから、「クリック率を上げるためにmeta descriptionの一字一句を厳選して作り上げるぞ！」と意気込みすぎると、「あんなに力を入れたのに、なぜ検索結果に変な文章が表示されてるんだ！」とイライラすることになります。

基本的にはページの概要を示す内容としてmeta descriptionを設定するのは間違いではありませんが、クリック率を爆発的に上げるとか、検索順位を上げるとか、過剰な期待をするのは止めましょう。

meta descriptionの設定

meta description対応のテーマの場合

BizVektor、賢威、Simplicity、Stinger6のような実用的なテーマでは、投稿や固定ページの編集画面で「抜粋」や「メタディスクリプション」に入力した内容が自動的にmeta descriptionに設定されるようになっています。たとえば、BizVektorで固定ページの「抜粋」に次のように入力します。

meta descriptionに設定したい内容を「抜粋」に入力

この内容がmeta descriptionに設定されます。

「抜粋」に入力した内容がmeta descriptionに設定される

このページを検索すると、サイトの概要として表示される仕組みです。

meta descriptionが検索結果のサイト概要として使われる

meta description非対応のテーマの場合

「抜粋」に入力した内容がmeta descriptionに反映されないテーマでは、プラグインを使ってmeta descriptionを作成する方法があります。定番がAll in One SEO Packプラグインです。

インストールすると投稿や固定ページの編集画面でメタディスクリプションを入力できるようになります。入力しない場合は本文の先頭からの抜粋がmeta descriptionに設定されます。

メタディスクリプションの入力（All in One SEO Packプラグイン）

これにより、ページのmeta descriptionが作成されます。

All in One SEO Packによって作成されたmeta description

まとめ

以上、簡単にメタキーワードとメタディスクリプションについて説明してきました。検索結果に表示されるメタディスクリプション（meta description）は必須ですが神経質になる必要はありません。メタキーワード（meta keywords）は指定不要ですが、指定しても間違いではありません。

とはいえ、SEOに「絶対」はありません。いろいろなサイトから情報収集して最後は自分自身で判断することが重要です。今ひとつ心配な方や設定方法がわからない方はWordPress個別サポートで対応いたします。気軽にご相談ください。

サイトの制作中や公開後のサイト管理中に役立つプラグインをまとめておきます。すべてが必須プラグインではありませんが、「こんなパーツや機能を作りたい」を実現できそうなものがあれば活用してください。目次が長くなりました。すいません。

投稿やページの表示

記事を一覧表示する（新着・カテゴリー指定など）

【プラグイン名】List category posts
【用途】固定ページの中で最新の投稿を一覧表示したいときに役立ちます。
【設定】[catlist]というショートコードを入力して投稿を一覧表示できます。詳しいオプションは、以下のページをご覧ください。

▼List category postsのショートコードの使い方
https://wordpress.org/plugins/list-category-posts/other_notes/

最新記事の一覧

人気記事を一覧表示する

【プラグイン名】Wordpress Popular Posts
【用途】ウィジェットなどに人気投稿を一覧表示します。基本的にはサイドバーに「人気記事」を表示するイメージですが、wpp_get_mostpopular()を使って任意のテンプレートで一覧表示したり、アイキャッチ画像やアクセス件数を表示することもできます。

関連記事はSEO的には必須パーツです。

人気記事の一覧

▼WordPress Popular Postsで人気記事を表示する
http://www.nishi2002.com/5087.html

関連記事を一覧表示する

【プラグイン名】WordPress Related Posts
【用途】ウィジェットなどに関連記事を一覧表示します。wp_related_posts()を使って任意のテンプレートで一覧表示することもできます。

サムネイル付き関連記事

投稿の表示順を変更する

【プラグイン名】Intuitive Custom Post Order
【用途】投稿は通常、新しい順に表示されますが、古い順に読んでもらいたいこともあります。このプラグインを使えば、投稿や固定ページの表示順をドラッグアンドドロップで変更できます。

ドラッグアンドドロップで投稿の表示順を変更

▼投稿を並べ替えて表示順を変えるIntuitive Custom Post Orderプラグイン
http://www.nishi2002.com/4593.html

カテゴリーの表示順を変更する

【プラグイン名】Category Order
【用途】サイドバーなどの「カテゴリー」リンクに表示されるカテゴリーの表示順を変更することができます。
【設定】「投稿」‐「Category Order」メニューでカテゴリーをドラッグアンドドロップして並べ替えます。

カテゴリー表示順の変更

投稿やページに追加するパーツ

著者プロフィールと最近書いた記事を表示する

【プラグイン名】VK Post Author Display
【用途】この記事を書いた著者のプロフィールと、その人が書いた最近の投稿を表示できます。

▼WordPressで投稿者情報を表示する
http://www.nishi2002.com/12913.html

著者プロフィールと著者の最近の記事

※著者画像はAvatar Managerプラグインで変更できます。

テーブル形式のコンテンツを作成する

【プラグイン名】TablePress
【用途】投稿や固定ページの本文に「会社概要」のような表形式のコンテンツを追加できます。

テーブル形式のコンテンツを作成

マルチカラムのコンテンツを作成する

【プラグイン名】Page Builder by SiteOrigin
【用途】ブロックを組み立てるようにして、本文の中に2列や3列の「マルチカラム」のコンテンツを作成できます。作成した列はレスポンシブ対応です。

パーツを組み合わせて3列のコンテンツを作成

▼Stinger5のトップページに3カラムのパーツ「3PRエリア」を組み込む
http://www.nishi2002.com/15058.html

マルチカラム・開閉式FAQなどを作成する

【プラグイン名】WP Canvas Shortcodes
【用途】ビジュアルエディタでショートコードを使ってマルチカラムコンテンツ、タブコンテンツ、ボタン、開閉式コンテンツ、記事一覧、文章の枠線、Googleマップ、料金表、文字を乗せた画像など役立つパーツを作成できます。とても便利です。

ショートコードを使って記事一覧も表示できる

ボタンや開閉式ブロックも簡単に作成できる

http://www.nishi2002.com/16620.html

ポップアップウィンドウを表示する

【プラグイン名】Easy Modal
【用途】「利用規約」のように小さいウィンドウで表示したい画面を作成することができます。
【設定】「Easy Modal」‐「Modals」メニューから表示内容を設定します。画面を表示するためのリンクタグは「Examples」タブからコピーすることができます。うまく表示できない場合は「General」タブの「Sitewide」を「Yes」にしてみてください。

ポップアップする「利用規約」ウィンドウ

コメント欄を一括で非表示にする

【プラグイン名】Disable Comments
【用途】投稿や固定ページの下に表示されるコメント欄をまとめて消すことができます。
【設定】「設定」‐「Disable Comments」メニューでコメント欄の非表示を設定できます。

すべてのコメント欄を非表示に

カスタム投稿タイプ・カスタムフィールド

カスタム投稿タイプを作成する

【プラグイン名】Custom Post Type UI
【用途】ブログ記事と別に管理したい投稿区分（カスタム投稿タイプ）を作成できます（例：おすすめの店、スタッフブログ、イベント情報、お客様の声、商品情報、定型のインフォメーションなど）。投稿とは別形式の入力フォームを作成したい場合にも役立ちます。
【メモ】このプラグイン以外で追加したカスタム投稿タイプは管理できません。

▼「投稿」とは別に管理したい「スタッフブログ」のようなメニューを追加する方法
http://www.nishi2002.com/11414.html

カスタムフィールドを作成する

【プラグイン名】Advanced Custom Fields
【用途】投稿を入力していると、タイトルや本文以外の定型項目（料金、住所、電話番号など）を入力したくなることもあります。そのときに役立つのがカスタムフィールドです。カスタムフィールドは通常の投稿編集画面からも入力可能ですが、使いやすいとはいえません。このプラグインを使えば、テキストボックス、チェックボックス、ドロップダウンメニューなど、種類に応じて入力しやすいカスタムフィールドを作成できます。

カスタムフィールドを使った入力項目のカスタマイズ

【メモ】すべてのカスタムフィールドが投稿や固定ページに共通とは限らないので、カスタム投稿タイプを作成するCustom Post Type UIプラグインと併用した方が良いでしょう。

カスタム投稿タイプのURLを設定する

【プラグイン名】Custom Post Type Permalinks
【用途】カスタム投稿のURLが日本語になってしまう場合などに、通常の投稿と同じようにパーマリンク設定を変更できます。
【設定】「設定」‐「パーマリンク設定」メニューからカスタム投稿タイプのURL構造を設定します。

▼カスタム投稿タイプの日本語パーマリンクを変更する方法
http://www.nishi2002.com/9665.html

カスタム投稿をサイドバーに一覧表示する

【プラグイン名】Custom Post Type Widgets
【用途】サイドバーに投稿を表示する「最近の投稿」はカスタム投稿を表示できません。このプラグインを使うと、通常の投稿以外のカスタム投稿もサイドバーに一覧表示することができます。
【設定】「外観」-「ウィジェット」メニューでサイドバーに「最近のカスタム投稿」ウィジェットを設置して、表示するカスタム投稿タイプを選択します。

カスタム投稿をサイドバーに表示できる「最近のカスタム投稿」

カスタムタクソノミーをサイドバーに表示する

【プラグイン名】List Custom Taxonomy Widget
【用途】サイドバーにカテゴリーリンクを表示するパーツのカスタムタクソノミー版です。
【設定】「外観」-「ウィジェット」メニューでサイドバーに「List Custom Taxonomy」ウィジェットを設置して、表示するカスタムタクソノミーを選択します。

カスタムタクソノミーをサイドバーに表示

ナビゲーションパーツ

パンくずリストを表示する

【プラグイン名】Breadcrumb NavXT
【用途】ページの階層リンクとなるパンくずリストを表示します。ウィジェットメニューを使うか、header.phpの最後あたりでbcn_display()を呼び出します。

パンくずリスト

子ページを画像付きで一覧表示する

【プラグイン名】Child Pages Shortcode
【用途】親ページにショートコード[child_pages]を入力すれば、自動で子ページへのリンク（アイキャッチ画像付き）が表示されます。

親ページを表示すると自動で子ページが一覧表示される

子ページのナビゲーションを表示する

【プラグイン名】Child Page Navigation
【用途】表示中の親ページの子ページリンクをサイドバーウィジェットなどに一覧表示します。子ページのリンクを一覧表示するプラグインにはList Pages Shortcodeプラグインもあります（ショートコード[child-pages]を使う）。

親子カテゴリーを開閉表示する

【プラグイン名】jQuery Categories List Widget
【用途】「投稿」‐「カテゴリー」メニューで親子関係に設定したカテゴリーについて階層化され、親カテゴリーをクリックすると子カテゴリーが展開され、もう一度クリックすると閉じます（孫カテゴリーも大丈夫そうです）。
【設定】「外観」‐「ウィジェット」メニューで、表示から除外するカテゴリーなどを設定できます。

クリックで展開できるカテゴリーメニュー

「上に戻る」を自動表示する

【プラグイン名】Dynamic To Top
【用途】長いページを下にスクロールしたときに、ページの一番上に戻るために矢印を自動で表示します。

「上に戻る」を自動で表示

サイドバー

ページごとにサイドバーを切り替える

【プラグイン名】WooSidebars
【用途】ページごとに違うサイドバーを表示することができます。ブログ記事のサイドバーと固定ページのサイドバーを別々にしたい場合などに役立ちます。
【設定】「外観」-「Widget Areas」メニューでページごとのサイドバーを作成する必要があります。詳しくは、以下のページをご覧ください。

▼投稿と固定ページで別々のサイドバーを表示する
http://www.nishi2002.com/10047.html

投稿と固定ページで別々のサイドバーを作成できる

画面スクロール時にサイドバーを固定する

【プラグイン名】Standard Widget Extensions
【用途】長い本文画面を下にスクロールしても左下や右下にサイドバーを表示し続けることができます。広告などに便利です。
【設定】メインコンテンツやサイドバーの定義名（divのid）を設定する必要があります。デフォルトではTwenty Twelve用に最適化されています。
※テーマによってはうまく動作しない場合があります。

本文が長くても消えないサイドバー

▼WordPressで画面スクロールにサイドバーを連動させたいとき
http://www.nishi2002.com/3762.html

サイドバーにアコーディオンメニューを表示する

【プラグイン名】JQuery Accordion Menu Widget
【用途】親ページにマウスオーバーすると子ページが展開されるアコーディオンメニューをサイドバーに表示したいときに役立ちます。

アコーディオンメニューをサイドバーに表示

管理画面を使いやすくする

よく使うタグをエディタでボタン化する

【プラグイン名】AddQuicktag
【用途】エディタで最初から使用可能になっている「B」ボタンや「I」ボタンと同じように、クリックするとHTMLタグなどが追加されるオリジナルのボタ ンを追加することができます。HTMLに不慣れなお客様用にあらかじめボタンを用意しておくと作業がスムーズになるでしょう。

エディタにオリジナルボタンを追加

▼エディタにタグを追加できるAddQuicktagプラグイン
http://www.nishi2002.com/3527.html

「フォントサイズ」ボタンを追加する

【プラグイン名】TinyMCE Advanced
【用途】記事本文のフォントサイズ（文字の大きさ）を変更するボタンなどを追加できます。
【設定】「設定」‐「TinyMCE Advanced」メニューを開いてツールバーを設定します。

▼WordPressで文字サイズを変更できるTinyMCE Advancedプラグイン
http://www.nishi2002.com/8881.html

ビジュアルエディタに「フォントサイズ」ボタンを追加する

画像の回り込み解除のボタンを追加する

【プラグイン名】TinyMCE Clear
【用途】画像の回り込みを解除するタグ「<div style="clear:both;"></div>」をボタンクリックで投稿に追加できるようになります。HTMLに不慣れな方など、ビジュアルエディタで投稿を編集したい方に役立ちます。

ボタンクリックで回り込みを解除

▼ビジュアルエディタで画像の回り込みを解除できるTinyMCE Clearプラグイン
http://www.nishi2002.com/5805.html

既存の投稿をコピーして投稿を新規作成する

【プラグイン名】Duplicate Post
【用途】既存投稿を元にして投稿を新規作成できます。投稿の見本を作成しておき、それをコピーして定型項目を入力してもらうときに役立ちます。
【メモ】投稿一覧に「複製」（投稿を下書きでコピー） 、「新規下書き」（投稿をコピーして編集画面を開く）というメニューが追加されます。便利ですが、「同じような」ページを量産すると SEOの面で悪影響が出る場合があります。注意しましょう。

既存投稿をコピーして新たな投稿を作成できる

先頭画像をアイキャッチ画像に設定する

【プラグイン名】Auto Post Thumbnail
【用途】本文の先頭画像を自動でアイキャッチ画像に設定できます。また、テーマ変更時などは全投稿の画像からアイキャッチ画像を一括作成できます。

▼すべての投稿のアイキャッチ画像を一括設定する
http://www.nishi2002.com/5068.html

編集画面にページナビゲーションを付ける

【プラグイン名】Admin Post Navigation
【用途】投稿や固定ページの編集画面で前後のページに移動するナビゲーションを表示できます。複数投稿の編集時に一覧表示画面に戻る必要がなくなるので便利です。

編集画面に追加されたページナビゲーション

▼WordPressの編集画面に前後の投稿へのナビゲーションを追加する
http://www.nishi2002.com/13444.html

画像関連

画像クリックでポップアップ表示する

【プラグイン名】FancyBox for WordPress
【用途】クリックされた画像をポップアップで表示できます。ページ内の全画像をスライド形式で見せることもできます。
【設定】編集画面から追加する画像のリンク先を「メディアファイル」にして投稿や固定ページに挿入すれば、クリック時にポップアップされるようになります。

クリック時にポップアップされる画像

スライドショーを表示する

【プラグイン名】Meta Slider
【用途】画像が切り替わるスライドショーを作成できます。リンク先を設定すれば広告にもなります。

選んだ画像が切り替わるスライドショー

Googleマップを表示する

【プラグイン名】Simple Map
【用途】ページにGoogleマップを表示することができます。次のようなショートコードを入力するだけです。

▼入力するショートコードの例
[map zoom="18" width="400px"height="300px"]東京都千代田区永田町1-7[/map]

表示されるGoogleマップの例

画像の質を落とさず容量を削減する

【プラグイン名】EWWW Image Optimizer
【用途】画像を圧縮して容量を減らしてくれます。アップロード時に自動で最適化されますが、すでにアップロード済みの画像をまとめて処理することもできます。
【設定】設定しなくても動作しますが「設定」‐「EWWW Image Optimizer」メニューから設定できます。

自動で容量が削減された画像（メディアライブラリ）

アップロード時に画像サイズを小さくする

【プラグイン名】Imsanity
【用途】デジカメなどで撮影した画像をアップロードするとサイズが大きすぎて、そのままでは使いづらいです。Imsanityプラグインを使うと画像アップロード時に都合の良いサイズに変更することができます。

【設定】「設定」‐「Imsanity」メニューから、保存する画像の上限サイズを設定できます。初期設定では幅2048px、高さ2048pxになっています。

SNS関連

SNSと連携するボタンを表示する

【プラグイン名】WP Social Bookmarking Light
【用途】投稿の上下に「いいね！」「ツイート」ボタンを表示できます。

SNS連携ボタン

SNSへのリンクアイコンを表示する

【プラグイン名】Social Media Widget
【用途】TwitterやFacebook、Google+などへのリンクアイコンを表示します。
【設定】「外観」‐「ウィジェット」メニューでサイドバーなどに追加して、自分のTwitterやFacebookのURLを設定します。

各SNSへのリンクアイコンを表示

投稿を自動でSNSに送信する

【プラグイン名】Jetpack
【用途】投稿したのと同時にTwitterやFacebookにも書き込みます。
【設定】インストール後、Jetpack の設定画面で「パブリサイズ共有」から必要なSNSとの「連携」を選択します。

システムの作成

メールフォームを作成する

【プラグイン名】Contact Form 7
【用途】メールフォームを2、3分で作成できます。
【メモ】「お問い合わせ」メニューで画面を定義し、ショートコードを「お問い合わせ」固定ページなどにコピーペーストします。確認画面はありませんが、チェック必須のチェックボックスを配置することで簡易的に送信前のワンクッションを入れることはできます。

すぐに作成できるメールフォーム

▼Contact Form 7のメールフォームで確認画面の代わりに送信前チェックを追加する
http://www.nishi2002.com/5040.html

確認画面付のメールフォームを作成する

【プラグイン名】Trust Form
【用途】確認画面付きのメールフォームを作成できます。メニューから入力画面、確認画面、完了画面の画面レイアウトをドラッグアンドドロップで組み立てることができます。

▼Trust Formによる確認画面付き問い合わせフォームの作成
http://www.nishi2002.com/4526.html

予約システムを作成する

【プラグイン名】MTS Simple Booking C
【用途】プログラミングなしで予約システムを作成できます。所要時間は30分から60分くらいです。
【メモ】外部サイトからのダウンロードが必要です。「MTS Simple Booking C」が無料版、「MTS Simple Bookingビジネス版」が有料版です。有料版ではPayPal連携による先払いスタイルの予約システムも作成できます。

作成される予約カレンダー

▼「MTS Simple Booking C」による予約システムの作成
http://www.nishi2002.com/3341.html

不動産物件検索システムを作成する

【プラグイン名】不動産プラグイン
【用途】不動産物件検索システムを作成できます。検索条件を選ぶドロップダウンリストなどは、実際に入力されているデータから動的に作成されます。膨大な項目数の不動産物件の登録フォームや検索機能、問い合わせフォームと連動した物件詳細ページが使用可能です。
【メモ】外部サイトからのダウンロードが必要です。デフォルトのパーマリンク設定のみで動作します。

不動産プラグインによる物件検索システム

▼WordPressの「不動産プラグイン」による物件検索システムの作成
http://www.nishi2002.com/5240.html

ショッピングカートを作成する

【プラグイン名】Welcart
【用途】ショッピングカート機能を追加することができます。
【設定】ショップの設定や商品の設定はダッシュボードの各メニューから行うことができます。詳しくは、以下の公式ガイドを参考にしてください。

小さなECサイトのWordPress＋Welcart導入・設定ガイド[Welcart公式ガイド]

ショッピングカートの個別商品ページ

多言語対応のサイトを作成する

【プラグイン名】WPML
【用途】サイトを多言語対応にできます。1つのサイトで複数言語のコンテンツを編集、管理できます。
【メモ】有料です。数千円～の各種ライセンスがあります。

1つの管理画面で複数言語のコンテンツを管理できるWPML

▼1つのWordPressサイトを多言語対応にできるWPMLプラグイン
http://www.nishi2002.com/10506.html

サイトの管理

日本語サイトの不具合対策

【プラグイン名】WP Multibyte Patch
【用途】日本語などのマルチバイト文字に関する不具合対策です。インストール済みのはずなので「プラグイン」‐「インストール済みプラグイン」メニューから「有効化」します。

サイトが完成するまで「メンテナンス中」にする

【プラグイン名】WP Maintenance Mode
【用途】サイトを工事中にします。完成まで非公開にしたいときに。
【設定】「プラグイン」‐「インストール済みプラグイン」‐「WP Maintenance Mode」‐「設定」メニューから、メンテナンス中にするか公開中にするかを切り替えます（「プラグイン有効化」を「はい」にして更新するとメンテナンス中、「いいえ」にすると公開中になる）。

メンテナンス中の画面

固定ページのURLに「.html」を付加する

【プラグイン名】.html on PAGES
【用途】固定ページのURLに「.html」を付加します（例：contact.html）。
【メモ】「.php」を付加するには「.php on PAGES」プラグインがあります。

カテゴリーページのURLから「category」を削除する

【プラグイン名】WP No Category Base
【用途】カテゴリーページのURLから「category」を削除します。たとえば、http://hp555.net/category/infoがhttp://hp555.net/infoというスッキリしたアドレスになります。

URLを変更したページを新たなURLに転送する

【プラグイン名】Redirection
【用途】サイト作成の初期は、体裁の悪いURLを直したり、命名ルールを統一するなど、古いページのURLが変更されることがあります。古いURLへのアクセスが無駄にならないように、新たなURLに転送するように設定することができます。
【設定】必要に応じて旧URLと新URLの対応付けを登録します。同一サイト間、別サイトへの転送などを設定できます。

▼URLの変更後、新たなページにユーザーをリダイレクトする
http://www.nishi2002.com/3122.html

WordPressデータベースを初期状態に戻す

【プラグイン名】WordPress Database Reset
【用途】テスト表示用の投稿や固定ページをすべてクリアして「Hello world!」と「サンプルページ」が入っただけの初期状態に戻します。インストール直後の状態に戻したいときに役立ちます。
【設定】「ツール」‐「Database Reset」メニューから実行します。

▼WordPressサイトに追加したテストデータを削除するには
http://www.nishi2002.com/6686.html

サイト全体をバックアップする

【プラグイン名】BackWPup
【用途】サイトをバックアップします。WordPressのシステム本体、データベース、ファイルなどWordPressのすべてをバックアップできるのでサイトの移転にも役立ちます。手動、自動のバックアップが可能でDropboxなどにもバックアップできます。保存するバックアップの最大ファイル数も定義できます。
【設定】バックアップ先、バックアップする内容を定義します。
【メモ】手動バックアップを始めた後に表示される進捗画面は閉じても大丈夫です。

▼BackWPupによるWordPressサイトのバックアップ方法
http://www.nishi2002.com/5381.html

サイトを別のサーバーに移転する

【プラグイン名】Duplicator
【用途】レンタルサーバーを引っ越したりテストサイトをサーバーにアップするときに役立ちます。

▼テストサイトを簡単に本番環境に移行できるDuplicator
http://www.nishi2002.com/10023.html

サイトコンテンツの文字列を一括置換する

【プラグイン名】Better Search Replace
【用途】サイト内の文字を一括置換できます。サイトのURLを変更するときなど、ブログ記事の本文に入っている古いURLをまとめて変更するのに役立ちます。

▼使用例：「ユーザー名.sakura.ne.jp/フォルダ名」のWordPressを独自ドメインで表示する
http://www.nishi2002.com/10530.html

保存するリビジョン数を設定する

【プラグイン名】WP Total Hacks
【用途】投稿や固定ページを修正するたびに増えていくリビジョンの数を制限できます。

リビジョン数の設定

URLや画像のリンク切れをチェックする

【プラグイン名】Broken Link Checker
【用途】投稿や固定ページに入力したリンクや差し込んだ画像へのリンク切れがないかチェックします。
【設定】有効化すると定期的にチェックが行われ、「ツール」‐「リンク切れをチェック」にレポートされます。リンク切れ情報をメールで受け取ることもできます。動作設定は「設定」‐「Broken Link Checker」メニューです。

【メモ】サイトの動作が遅くなる場合があります。使い終わったら停止しておいた方が無難です。

リンク切れURL・画像のレポート

SEO

SEO対策を行う

【プラグイン名】All In One SEO Pack
【用途】SEO対策を行うプラグインですが、インストールすれば検索順位が上がるわけではないので注意してください。meta description非対応のテーマでは、All In One SEO Packのようなプラグインを使ってmeta descriptionを出力する必要があるので必須インストールです。

【設定】「All in One SEO」メニューから全般的な設定を行います。個別記事のmeta descriptionは編集画面から設定できます。

All In One SEO Packによるmeta descriptionの設定

投稿時にsitemap.xmlを自動生成する

【プラグイン名】Google XML Sitemaps
【用途】サイト内のページのURL情報などが含まれるサイトマップ（sitemap.xml）を自動生成します。新たな投稿や固定ページを作成すると、自動で再作成されます。検索エンジンが効率的にページデータを収集できるようになります。
【設定】「設定」‐「XML Sitemap」メニューで設定することができます。設定しなくても自動でsitemap.xmlが作成されるようになっています。

sitemap.xmlが自動作成される

アクセス解析する

【プラグイン名】Jetpack
【用途】アクセス統計をはじめ、SNS連携、メール投稿など豊富な機能が使用可能になるプラグインです。サイト全体のアクセス数だけではなくアクセス数の多いページや検索キーワード、さらにクリックされた外部リンクも調べることができるので、アクセス解析だけのためにインストールしても十分に楽しむことができます。
【設定】wordpress.comと連携する必要があります（要ユーザー登録）。連携の完了後、「Jetpack」メニューから有効にしたい機能の「設定」をクリックします。アクセス数などの情報は「サイト統計情報」から参照することができます。

Jetpackによるアクセス解析

ボトルネックのプラグインをチェックする

【プラグイン名】Plugin Performance Profiler
【用途】サイト表示を遅くしているかもしれないプラグインをチェックできます。

プラグインのロード時間をチェック

▼WordPressが重いと感じたらネックになっているプラグインをチェック！
http://www.nishi2002.com/4633.html

ページをキャッシュする

【プラグイン名】WP Fastest Cache
【用途】表示が遅いページはSEO的に良くありません。ページをキャッシュして表示の高速化したいときに使います。効果は抜群ですがサイト制作中には不要です。公開後に「どうしてもサイト表示が遅くて困る」ときに使うプラグインです。
【設定】「WP Fastest Cache」メニューでキャッシュを有効化するとページがキャッシュされるようになります。

セキュリティ対策

サイトをスパムコメントから保護する

【プラグイン名】Akismet
【用途】スパムコメントを「スパム」として振り分けてくれます。
【設定】Akismetアカウントを有効化するため「新しいAkismetキーを作成する」からユーザー登録を行ってAPIキーを取得して設定する必要があります。

Akismet APIキーの入力

ログイン画面のURL変更・アクセス制限など

【プラグイン名】SiteGuard WP Plugin
【用途】ログイン画面のURLを変更したり、画像認証やIPアドレスでアクセス制限することでログイン画面や管理画面に対するセキュリティ対策を行うことができます。
【設定】「SiteGuard」メニューからセキュリティ設定を行います。

ユーザー権限を設定する

【プラグイン名】User Role Editor
【用途】管理者、編集者などWordPressのユーザーに割り振られた権限をカスタマイズしたい場合に役立ちます。「ユーザー」‐「User Role Editor」メニューから、次のように直感的なメニューでロール（管理者、編集者など）ごとの権限を設定することができます。

User Role Editorによる権限のカスタマイズ

サイトにパスワードロックをかける

【プラグイン名】Password Protected
【用途】パスワードを知っている人だけがサイトを見られるようにします。
【設定】「設定」‐「Password Protected」メニューでパスワードを設定します。

サイトを閲覧するにはパスワード入力が必要

まとめ（プラグインの考え方）

いわゆる定番のプラグインを紹介してきましたが、すべてインストールする必要はありません。むしろ、今の自分に必要なのか考えてからインストールしないと、テーマと機能が重複するなど不都合が生じる場合があります。

自分のサイトに必要なのか、困りごとを解決できるのか、お試しでインストールした後もしっかり見極める必要があります。その目印として定番のプラグインを紹介しました。参考にしてください。

急にアクセスが倍増！でも、喜んで大丈夫？

「一生懸命に記事を書いてきた努力が報われた！」と思う方もいるでしょう。

ところが、一生懸命に記事を書いたわけでもなく、人気記事を書いた覚えもなく、アクセスが倍増する原因が思い当たらない方は要注意です。もしかすると、単純にアクセスを2回カウントしているだけかもしれません。

つまり、ページを1回表示すると2回カウントされる…

そんなことが、よくあります。

典型的な例はGoogleアナリティクスの設定を2回行ってしまったことです。

思い当たる方はサイトのHTMLソースを見てみましょう。Googleアナリティクスのタグが2つ入っているかもしれません。

「アクセス倍増！」の原因はGoogleアナリティクスの重複設定

これは意外とよくあるパターンで、最近の実用的なテーマには「Googleアナリティクス設定」のようなメニューがあります。そのメニューだけでGoogleアナリティクスの設定は完了しますが、サイト設定の流れ作業でAll in One SEO PackのようなプラグインでもGoogleアナリティクスの設定を行ってしまうこともあります。

すると、上記のようにテーマとプラグインによってGoogleアナリティクス用のタグが2回出力されてしまい、ページを1回表示するとアクセスが2回カウントされるようになってしまいます。

結果として、「やった！アクセスが倍増したぞ！理由はわからないけど…」の勘違いが生じます。どうですか？アクセス数が倍増しても喜べませんよね。

テーマの設定を行い、プラグインの設定を行い、その他の設定を行い、、、と、マニュアルや入門書に載っている手順を片っ端から設定しているだけだと、このような落とし穴に落ちます。ご注意ください。

以下、主なテーマとプラグインのGoogleアナリティクス設定メニューを紹介します。重複設定していないか確認しましょう。

テーマやプラグインのGoogleアナリティクス設定メニューの例

BizVektorでは「外観」-「テーマオプション」メニューの「SEO & GA」にトラッキングIDを入力します。これで設定完了です。

BizVektorのGoogleアナリティクス設定

Stinger6では「Stinger6管理」で設定します。

Stinger6のGoogleアナリティクス設定

賢威7では「賢威の設定」で「</head> 直前に挿入するコード記入欄」にタグを入力する形式です。

賢威7のGoogleアナリティクス設定

Simplicity2では「外観」-「カスタマイズ」メニューの「アクセス解析」にトラッキングIDを入力します。

Simplicity2のGoogleアナリティクス設定

All in One SEO Packプラグインでは「All in One SEO Pack」‐「一般設定」メニューで設定します。テーマでGoogleアナリティクスを設定済みの場合は、ここで設定しないように注意しましょう。

All in One SEO PackのGoogleアナリティクス設定

まとめ

テーマとプラグインの両方でGoogleアナリティクス設定を行わないように注意してください。また、理由もなくアクセスが倍増したら、喜んでいないでチェックしてみてください。「倍増」というのがツボです。2回カウントしているのが原因なので。

WordPressでポートフォリオ（作品集）を見せる機能がほしいとか、画像一覧と詳細ページをうまく連携したいという声をよく聞きます。

そこで、作品集や業務実績、お客様の声などに活用できる「ポートフォリオ」機能を追加する方法を紹介します。プラグインで解決するのでPHPを編集する必要はありません。仕上がりイメージは次のようになります。

WordPressに追加したポートフォリオ（作品集）機能の例

ショートコードを編集するだけで画像サイズも簡単に変更することができます。

画像サイズの変更も簡単

単純に作品集を表示したいだけなら「投稿」の「作品集」カテゴリーで済ませることもできますが、「ポートフォリオ」メニューとして切り離すことで「最近の投稿」に混ぜることなく、ポートフォリオだけをまとめて見せられるメリットもあります。

画像の一覧と詳細ページを連携して作品集や実績を見せることを考えている方は参考にしてください。

「ポートフォリオ」メニューの作成

「ポートフォリオ」メニューを追加するにはカスタム投稿タイプを使います。そのため、Custom Post Type UIプラグインをインストールします。

Custom Post Type UIプラグインのインストール

インストール後、カスタム投稿タイプを追加するため、「CPT UI」‐「Add/Edit Post Types」メニューを開きます。

カスタム投稿タイプの追加メニューを開く

作成するカスタム投稿タイプの名前とメニューのラベルを設定するため、カスタム投稿タイプ名（Post Type Slug）(1)に「portfolio」と入力し、メニューのラベル（Plural Label・Singular Label）(2)(3)には「ポートフォリオ」と入力します。

カスタム投稿タイプ名とメニューラベルの入力

画面を下にスクロールして「Add Post Type」ボタンをクリックすると作成完了です。

ポートフォリオ（個々の作品・実績）の入力

「ポートフォリオ」‐「新規追加」メニューからポートフォリオ（個々の作品・実績）を入力します。この編集画面の使い方は「投稿」などと同じです。タイトルと本文を入力して「公開」ボタンをクリックすれば作成完了です。アイキャッチ画像も設定しておきましょう。

ポートフォリオの新規追加

ポートフォリオの表示

入力したポートフォリオを表示するため、List category postsプラグインをインストールします。ショートコードを使ってカスタム投稿を表示できる便利なプラグインです。

List category postsプラグインのインストール

「固定ページ」‐「新規追加」メニューを開いて、ポートフォリオを表示する固定ページを作成します。

ポートフォリオを表示するページを作成

本文に入力したのはポートフォリオを表示するList category postsプラグインのショートコードです。具体的には次のようになります。

[catlist post_type="portfolio" thumbnail=yes no_post_titles=yes]

ショートコードのオプションを簡単に説明しておきます。

• post_type="portfolio" --- カスタム投稿タイプ「portfolio」を一覧表示します。
• thumbnail=yes --- サムネイル画像を表示します。
• no_post_titles=yes --- タイトルを非表示にします。

表示結果は次のようになります。レイアウトは調整が必要ですが、ひとまずポートフォリオが一覧表示されれば問題ありません。

ポートフォリオが表示される

うまく表示できない場合、カスタム投稿タイプ「portfolio」のアーカイブページのURLと固定ページのスラッグ「portfolio」がバッティングしている可能性があります。「CPT UI」‐「Add/Edit Post Types」メニューから「portfolio」の編集画面を開き、「Has Archive」が「False」に設定されているか確認しましょう。

URLのバッティングを避けるためアーカイブを無効に

よくわからなければ、固定ページのスラッグを無難な名前（例：portfolios）に変更してみてください。

一覧表示されたポートフォリオの画像をクリックするとポートフォリオの詳細ページが表示されるはずです。

画像クリックで表示されるポートフォリオの詳細ページ

一覧表示で画像を見せて、詳細ページで具体的な情報を見せるという使い方がイメージできたでしょうか。ポートフォリオの一覧表示と詳細表示に問題がなければ、続いてレイアウトを調整しましょう。

ポートフォリオのレイアウト調整

レイアウトを調整するCSSの例を紹介します。子テーマのstyle.cssなどに入力してください。

.lcp_catlist li {
    display: inline-block;
    margin: 5px;
}

ここでは上から下に表示されるポートフォリオをインラインで（横に）表示するように変更して余白を設定しただけですが、細かいスタイルはテーマによって異なる場合があります。うまくいかない場合はWordPress個別サポートにご相談ください。

表示結果は次のようになります。画像を1ページにまとめて表示できるイメージができたでしょうか。

レイアウト調整後のポートフォリオ

ポートフォリオの表示バリエーション

List category postsプラグインのショートコードで細かいオプションを設定することで、表示形式を変更することができます。いくつかの例を紹介します。

表示件数の設定

numberpostsを使うと表示件数を指定することができます。

[catlist post_type="portfolio" numberposts=5 thumbnail=yes no_post_titles=yes]

これにより、ポートフォリオが5件のみ表示されます。

表示件数を5件に設定

画像サイズの設定

thumbnail_sizeを使うと画像サイズを指定することができます。次の例では、「medium」（中サイズ画像）に設定しています。

[catlist post_type="portfolio" thumbnail_size=medium thumbnail=yes no_post_titles=yes]

ポートフォリオの画像が大きくなります。

画像サイズを大きくする

中サイズ（medium）を含めて次のような区分を指定することができます。初期設定のサムネイル（幅150px、高さ150px）では画像がトリミングされる可能性があるので都合の良い画像サイズを探ってみてください。

• thumbnail --- サムネイル
• medium --- 中サイズ
• large --- 大サイズ
• full --- フルサイズ

タイトルの表示

ショートコードから「no_post_titles=yes」を削除するか「no_post_titles=no」に設定すれば、ポートフォリオのタイトルが表示されます。

[catlist post_type="portfolio" thumbnail=yes]

ただし、タイトルと画像が横に並んでしまうのでレイアウト調整が必要です。

タイトルと画像が横に並んでしまう

レイアウトを調整するCSSの例を紹介します。

.lcp_catlist li a {
    display: block;
    font-size: 12px;
}

表示結果は次のようになります。

ポートフォリオのタイトルと画像を表示

タイトルを画像の下に表示

タイトルと画像の上下を入れ替えるには次のようなCSSを使う方法があります。ポートフォリオをFlexboxという柔軟なレイアウトパーツに設定して、その子要素のタイトルと画像の順番を入れ替えています。

/* 1つのポートフォリオをFlexboxで表示 */
.lcp_catlist li {
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    float: left;
    margin: 2px 2px 10px;
}

/* タイトルを画像の下に */
.lcp_catlist li a:first-child {
    -webkit-order: 1;
    order: 1;
    font-size: 12px;
}

表示結果は次のようになります。

ポートフォリオのタイトルを画像の下に表示

まとめ

以上、カスタム投稿タイプを使ってWordPressにポートフォリオ機能を追加する方法を紹介してきました。ショートコードを編集すれば、まだまだ表示形式をカスタマイズすることができます。詳しくは以下のList category postsプラグインのページを参考にしてください。

List category posts

WordPressでホームページを使って作っているとページにリンクを入れることもあります。そんなとき「こちらをクリック」のようなリンクを作っていませんか？それでも間違いではありませんが、SEO的にはもう少しおすすめな方法があります。特定の場面でよく見る「18歳未満はこちら」のリンクを例にリンクの重要性を説明します。

「被リンクが多い」が上位表示のカギ

リンクはSEO的にリンク先が重要なページだと伝える役割を持ちます。結果として、リンクされる（被リンク）ページの評価を高めるのに役立ちます。

リンクはリンク先の評価を高める

役立つページや面白いページが多くのサイトからリンクを集めることをイメージすれば理解できると思います。被リンクの多いページは評価に値するということです。

役立つページや面白いページは多くのリンクを受ける

「被リンク」は検索順位を決める指標にも使われ、おおざっぱにいえば被リンクの多いページは検索結果で上位表示されやすくなります。

サイト内でも「被リンクが多い」を演出できる

リンクというと外部サイトにしてもらうイメージですが、同じサイト内でも「被リンク」の考え方は同じです。特に意識しなくてもサイト内ではさまざまなページにリンクが貼られています。グローバルメニューだけを考えてみてもわかるでしょう。

特に意識しなくてもサイト内のさまざまなページにリンクが貼られている

SEO対策として意識的にサイト内のおすすめページにリンクを集めたり、記事やページ間でリンクを貼り合うことで、検索エンジンに「このページは重要です」を伝えることができます。これはSEOの内部対策として機能します。

サイト内部で被リンクの多いページを演出できる（SEOの内部対策）

被リンク戦略を手軽に実施できる「関連記事」

さまざまなページに手作業でリンクを貼るのは面倒ですが、そんなときに役立つのが関連記事プラグイン（例：WordPress Related Posts）です。サイト内のさまざまなページに自動でリンクを貼ってくれます。また、古い投稿も関連記事として表示される場合があります。「最近の投稿」では埋もれがちなページにもSEO対策を実施できるということです。

関連記事は「あのページ重要ですよ」を演出してSEO対策にも役立つ

関連記事はサイトを閲覧するユーザーに役立つだけでなくSEO的にも非常に効果があります。必須パーツと言っても良いでしょう。

リンクの設置場所も重要

関連記事プラグインがSEOに役立つ理由はもう1つあります。それは、記事を読み終わった後の本文下にリンクを設置できる点です。これは都市伝説かもしれませんが、ページ内にあるリンクの重要度は場所によって若干異なります。たとえば、ヘッダー、フッター、サイドバーにあるリンクは、このページに関連するリンクというより、サイト全体で共通のリンクなので、このページとの関連性という意味では重要度が低くなります。

ヘッダー・フッター・サイドバーはページとの関連度が低いかも

それに対して本文下のリンクは、まさにこのページの内容に関連するリンクなので、このページに関連した重要なページだと伝えることができます。つまりサイドバーに表示される「最近の投稿」よりも、記事の本文下に設置された関連記事のリンクの方が、リンク先ページの評価を高めるのに役立ちます。

記事の本文下のリンクは重要

ちなみに、リンク元のページの評価が高いほど、リンク先の評価を高めるのに貢献します。自作自演で作った「評価の低いサイト」から10本のリンクを貼るよりも、誰もが知っている超有名サイトから1本のリンクをもらう方が効果は絶大だということです。

リンクのアンカーテキストも重要

リンクは場所だけでなくアンカーテキスト（リンクの文字）も重要です。アンカーテキストはリンク先のページがキーワードと関連していることを伝える効果を持ちます。ですから、Excel講座のページにリンクを貼る場合、「詳しくはこちら」でリンクすると、リンク先は「詳しくはこちら」に関連するページだと認識されてしまうかもしれません。言うまでもなく「Excel講座」や「Excel講座の申し込み」というアンカーテキストでリンクを貼る方が効果的です。

リンクの効果を高めるにはアンカーテキストが重要

アンカーテキストの重要性は「18歳未満とYahoo! JAPAN」が有名です。多くの大人向けコンテンツのサイトが「18歳未満」や「18歳未満はこちら」というアンカーテキストで「Yahoo!Japan」にリンクを貼っています。年齢の低いユーザーに閲覧制限をかけるリンクです。

膨大なサイトが同じアンカーテキストでリンクを貼ると…

そのため、「18歳未満はこちら」で検索するとYahoo!JapanやGoogleが上位表示されてしまいます。

「18歳未満はこちら」で検索するとYahoo! JAPANが1位に

言うまでもなくYahoo! JAPANやGoogleが未成年向けコンテンツで満載というわけではありません。いかにリンクのアンカーテキストが重要かという事例です。

さて、プラグインを使って関連記事を表示する場合、記事のタイトルがアンカーテキストになるのが一般的です。ですから、「記事のタイトルに検索キーワードを入れることが重要！」なのです。SEO的に重要な「ページのタイトル」（titleタグ）になるだけでなく、関連記事のアンカーテキストにも検索キーワードが入ることになるからです。

記事タイトルに検索キーワードを入れれば関連記事のアンカーテキストも安心

まとめ

以上、SEOにおけるリンクの重要性を説明してきました。都市伝説半分ですが、今後のサイト制作の参考にしてください。

ここまでの内容から、狙ったページが上位表示されるための被リンク（リンクされる）戦略をまとめておきます。

• 多くのページからリンクされること
• 記事が終わる本文下からリンクされること
• 適切なアンカーテキストでリンクされること

• 記事のタイトルに検索キーワードを入れる
• 関連記事を本文内（本文下）に表示する
• 効果を上げたいページへのリンクを各ページの下に入れる

このサイトで紹介したWordPressの使い方やカスタマイズ関連の記事をまとめておきます。WordPressのインストール、ホームページ作成手順から、便利なプラグイン、定番トラブルまで100本くらいあります。CSSカスタマイズやBizVektor関連記事は整理できたら掲載します。WordPressを独学で乗り切るときの参考にしてください。

古い記事もありますが、ご容赦ください。

インストール・ホームページ作成

• WordPressのインストール（さくらインターネット）
• WordPressの初期設定（10個のメニュー）
• ホームページの作成手順（たたき台サイトの作成）

ドメイン・フォルダ設定

• ムームードメインで取得したドメインをさくらインターネットで使う
• お名前.comで取得したドメインをロリポップで使う
• 「ユーザー名.sakura.ne.jp/フォルダ名」のWordPressを独自ドメインで表示する
• サブディレクトリにインストールしたWordPressをルートディレクトリ表示に変更する
• WordPressをインストールしたフォルダ名を変更する方法

プラグイン（まとめ）

• いつか役立つWordPressプラグイン60本まとめ【2016年版】

初期設定や既定の動作を変更するプラグイン

• すべての投稿のアイキャッチ画像を一括設定するAuto Post Thumbnailプラグイン
• アイキャッチ画像を自動設定する（先頭画像やYouTube動画から）
• 投稿の表示順を変更するIntuitive Custom Post Orderプラグイン
• カスタム投稿のパーマリンクを変更するCustom Post Type Permalinksプラグイン
• ページごとに違うサイドバーを表示するWooSidebarsプラグイン
• 公開中のページを下書きで修正できるWP Post Branchesプラグイン
• 編集画面から前後の投稿に移動できるAdmin Post Navigationプラグイン
• 管理画面でオリジナルのCSSを読み込むAdd Admin CSSプラグイン
• ログイン画面のURLを変更するSiteGuard WP Pluginプラグイン
• 公開期限やイベント終了後に記事を非公開にするPost Expiratorプラグイン
• サイトにパスワードでアクセスを制限するPassword Protectedプラグイン
• エディタにタグを追加できるAddQuicktagプラグイン
• 文字サイズを変更できるTinyMCE Advancedプラグイン
• ビジュアルエディタで画像の回り込みを解除できるTinyMCE Clearプラグイン
• サイトをメンテナンス中にしてアクセス制限をかけるMaintenanceプラグイン

画面パーツ系プラグイン

• 人気記事を表示するWordPress Popular Postsプラグイン
• 最新記事の一覧表示に役立つList category postsプラグイン
• 投稿者情報（アバター画像・最近の投稿）を表示する方法
• カスタム投稿をサイドバーに表示するCustom Post Type List Widgetプラグイン
• アコーディオンメニューを設置するJQuery Accordion Menu Widgetプラグイン
• サイドバーで親子カテゴリーを開閉するjQuery Categories List Widgetウィジェット
• ファイルダウンロード機能を作成するWordPress Download Managerプラグイン
• コメント欄を一括で非表示にするDisable Commentsプラグイン
• 画面スクロール時にサイドバーを固定するStandard Widget Extensionsプラグイン
• 郵便番号から住所を自動入力できるzipaddr-jpプラグイン

ツール系プラグイン

• サイトをバックアップするBackWPupプラグイン
• サイトを簡単に移行できるDuplicatorプラグイン
• WordPressバックアップに使えるプラグインを3つ紹介
• 「WordPressが重い」の原因をチェックできるPlugin Performance Profilerプラグイン
• テストデータを削除するWordPress Database Resetプラグイン
• 子テーマをワンクリックで作成できるOne-Click Child Themeプラグイン
• カスタムCSSを入力できるSimple Custom CSSプラグイン
• 現在のテンプレート名を調べるQuery Monitorプラグイン
• 投稿と固定ページを変換するpTypeConverterプラグイン

「こんなこともできる」のプラグイン

• 営業日カレンダーを表示できるBiz Calendarプラグイン
• ページや投稿をグリッドにレイアウトできる「WP Canvas」
• 口コミ機能を追加できるWP Customer Reviewsプラグイン
• カテゴリーごとに違う画像を表示できるCategories Images
• 記事下に広告やリンクバナーを表示できるWp-Insertプラグイン
• 「続きを読む」で文章やクイズの答えを開けるExpanderプラグイン
• アンケートを実施できるWP-Pollsプラグイン

システム作成プラグイン

• Trust Formによる確認画面付き問い合わせフォームの作成
• 「MTS Simple Booking C」による予約システムの作成
• 「不動産プラグイン」による物件検索システムの作成
• 英会話教室などに役立つ「オンラインレッスン予約システム」プラグイン
• 多言語対応サイトを作成するWPMLプラグイン

基礎知識（カスタム投稿タイプ）

• カスタムフィールド・カスタム投稿タイプ・カスタムタクソノミーの違いと活用例
• 「投稿」とは別に管理したい「スタッフブログ」のようなメニューを追加する方法
• 投稿入力フォームのカスタマイズ（カスタム投稿タイプ＋カスタムフィールド）

基礎知識（CSSカスタマイズ）

• 子テーマを作成する
• BizVektor＋インスペクタによるCSSカスタマイズ入門

基礎知識（画像）

• 画像に枠線を付ける「画像枠線」ボタンの作成
• 画像のリンク先の初期設定「メディアファイル」を「なし」に設定する
• 大サイズ画像のサイズが「設定」‐「メディア」の設定と異なる理由
• 大きい画像はWordPress上でサイズの変更やトリミングもできます
• the_post_thumbnailで表示したアイキャッチ画像のサイズがおかしいとき

基礎知識（その他）

• WordPressでユーザー追加時の「権限」の使い分け
• Stinger5のトップページに3カラムのパーツ「3PRエリア」を組み込む
• WordPressユーザーが守るべき「コピペの流儀」
• 投稿のリビジョンは下書き保存ボタンで増えるが自動保存でドンドン増えるわけではない
• BackWPupでバックアップしたWordPressサイトをローカルPCに復元する方法
• TwitterやFacebookなどのリンクアイコンを手軽に表示できる「Font Awesome」
• 簡単すぎて危険なパスワードにひと手間かけて強度アップするヒント

トラブル（画面が真っ白に！）

• 「データベース接続確立エラー」と表示されるとき
• WordPressアドレスとサイトアドレスを間違って変更した場合の対処法
• 「WordPress初心者は操作禁止！」の“危険なメニュー”ベスト3
• 原因不明のトラブルには「最近インストールしたプラグイン」を削除！
• 日本語ドメインを設定したら画面が真っ白になったとき
• 消してしまったWordPressサイト、まだ復旧できるかも？！
• WordPressで画面が真っ白になったら「Fatal error」を探せ！
• トラブル発生時に役立つレンタルサーバーのFTPツール
• phpMyAdminでWordPressユーザーのパスワードをリセットする方法
• さくらインターネットのコントロールパネルにログインできないとき

トラブル（管理画面の使用中に困った）

• パーマリンクにハイフン（-2）が付加されてしまう
• 入力した先頭の空白が消えてしまう
• 入力した改行タグや段落タグが消えるとき
• ビジュアルエディタにペーストした文章の行間が開いてしまう
• ショートコードが効かない！その原因は「全角」？！
• 「突然、サイドバーが下に落ちた！」の謎

トラブル（サイトの動作がおかしい）

• アップ後に画像が表示されないときは「ファイル名の大文字と小文字」をチェック！
• 納品されたサイトの固定ページが編集画面から修正できない！
• ホームページも「見えない部分の施工不良」に注意！
• 「.htaccessを更新する必要があります」でパーマリンクを設定できないとき
• そのバックアップ、危険です！wp-config.phpの中身が丸見えに！

トラブル（カスタマイズがうまくいかない）

• WordPressのテンプレートファイルを編集したら文字化けしたとき
• CSSの変更が反映されないときはセレクタの優先順位をチェック
• ショートコードをdo_shortcodeで呼び出しても画面に何も表示されないとき
• テーマを変えたらアイキャッチ画像が縮んでしまったとき
• テンプレートから消すとトラブルが発生するwp_head・wp_footer・the_post
• bloginfo('URL')でサイト名が表示されてしまう仕組み

PHPのカスタマイズ

• WordPressテンプレートのPHP、どこに何が書いてあるかリスト（Twenty Twelve編）
• 投稿やカスタム投稿にカテゴリーやカスタム分類を指定して一覧表示する
• テンプレートで見かける「if (!is_front_page())」の意味は？

WordPressサイトで新着情報といえば一覧表示するパターンが多いですが、プラグインを使えばもう少し違ったパターンでレイアウトすることができます。

ここでは、グリッドレイアウトを作成できるWP Canvas - Shortcodesプラグインと投稿を一覧表示できるList category postsプラグインを組み合わせて、固定ページに新着情報をレイアウトする例を紹介します。

具体的なショートコードは省略しますが興味がある方はWordPress個別サポートで対応いたしますので気軽にご相談ください。

複数カテゴリーの新着情報を2列に表示

複数カテゴリーの新着情報を一覧表示する場合、横に並べて表示したいこともあります。PHPとCSSを駆使すると面倒ですがプラグインを使えば簡単です。WP Canvasプラグインで2列のレイアウトを作って、その中にList category postsプラグインで好きなカテゴリーの新着情報を一覧表示すれば完成します。

2つのカテゴリーの新着情報を横に並べて表示

サイドバーなしのテンプレートに対応したテーマであれば3つのカテゴリーを横に並べてもよいでしょう。

3つのカテゴリーの新着情報を横に並べて表示

画像付き最新記事1件＋タイトル一覧5件

有料テーマでよく見るレイアウトですが、2カラムを使って左に最新の1件のみ画像付きで表示し、右には5件の新着情報を表示するレイアウトも可能です。1カテゴリーの新着情報の見せ方に変化を付けることができます。

左に画像付き最新記事・右に記事タイトルを一覧表示

タブ形式で表示する新着情報

複数カテゴリーを表示したいけどコンテンツ幅が気になる場合は、タブ形式でカテゴリーの新着情報を表示する方法があります。狭い範囲に多くの情報を整理することができて便利です。

タブ形式で複数カテゴリーの新着情報をスッキリまとめる

新着ではない「おすすめ記事」の表示

新着情報では埋もれてしまう古い記事を個別にピックアップして「おすすめ記事」として表示することもできます。3列、4列にレイアウトするイメージですが、このパーツを2つ作れば6記事、8記事くらいまで表示することもできるでしょう。

新着ではない「おすすめ記事」をピックアップして個別に表示

画像が横にスライドするコンテンツカルーセル

おすすめ記事や紹介したいサービスがいくつもある場合は、3列や4列だと足りないかもしれません。その場合、画像が横にスライドしていくコンテンツカルーセルにまとめる方法があります。ショッピングサイトなどでよく見るスタイルです。狭い幅を活かして多くの記事やページ、商品、サービスを紹介できます。

複数ページが横にスライドするコンテンツカルーセル

画像だけを見せるポートフォリオ（作品集）

画像を強調してポートフォリオ（作品集）を見せたい場合はアイキャッチ画像などを一覧表示する方法があります。

画像を並べたポートフォリオ（作品集）

画像サイズを変えて変化を付けてもよいでしょう。

ポートフォリオの最新3件のみ画像サイズを大きくする