これまでの経緯
ワードプレスを使い始める前に、Ameba Owndを利用してブログ作成していた。最初から当たり前のように標準で装備されていたフォローボタン機能が、ワードプレスやテーマのCOCOONには見当たらず正直なところ困惑してきた。色々とネットで調べたのだが、フォローボタンを簡単に設定できる専用のプラグインもなかなか見つからない。
仕方ないので、feedlyやRSSをフォローボタンに用い、「更新情報を購読」できるようにした。ほぼ１年経過したが予想した通りフォロー登録はない。まぁ、勝手気ままなしょうもない記事ばかり書いているので当然と言えば当然の結果なのだが・・。
Ameba Owndには小さいながらもユーザーコミュニティのようなものがあった。新着情報が流れたり「アウトドア」などの分野別の記事情報などもあり、今と同じような拙ない記事を書いていたにもかかわらずフォロー登録してくださった方がいた。やっと二桁に届く程度のフォロワー数ではあったが、それでもフォローされているというだけで、それなりに「気合」が入った（笑）。
feedlyやRSSは会員登録するなどの設定が面倒くさく、使い勝手は決して良くない。あれこれ調べて見つけたのが、プラグインのJetpackの中に含まれる「ブログ購読」機能だ。希望者はメールアドレスを入力して購読ボタンを押せば、更新情報がメールで届く仕組み。他のブログサイトと同じような仕組みで、会員登録などの手間もない。元々がニュースレターやメルマガの購読に使われる “subscribe”機能であることから「購読」という言葉になっているのだが、個人的には語感に引っ掛かるところがあってこれまで設置をためらってきた。
引っ掛かっている主な点は以下の通り：
・セキュリティ機能など盛りだくさんのJetpackをフォロー登録機能のために使用すること（バックアップやセキュリティ機能は他のプラグインなどを使用している）
・『ブログ購読』という文言が有料っぽいイメージを与える
・Jetpackの購読ボタンなどのデザインがしっくりこない
今回、ワードプレスに移行して１年ほど経過するので、やむなくJetpackの「ブログ購読」機能を用い、引っ掛かっている点をカスタマイズして設置することにした。ド素人が見よう見まねでコードに手を入れてカスタマイズしたので一抹の不安はあるが、テストしてみたところとりあえず機能しているようなので、以下に備忘録としてまとめた。
Jetpackのブログ購読のインストール
プラグインの導入
まずダッシュボードのプラグインから「新規プラグインを追加」を選択し、Jetpackをインストールする。Jetpackのプラグインには複数の製品があるので、「JetpackーWPセキュリティ、バックアップ、高速化、成長」というプラグインを選択してインストールする。
ウィジェットへの追加
ダッシュボードの「外観」→「ウィジェット」で「ブログ購読（Jetpack）」を選択し（下のスクショの例では、左側の上から3つ目）、サイドバーなど好みの位置に設置する。
以下が得られたデフォルトのブログの購読画面。
ここがポイント：
ウィジェットに「ブログ購読（Jetpack）」が見つからない場合は、ダッシュボードから「Jetpack」→「設定」を選択し、以下のメニューバーの右端にある検索ボタン（虫眼鏡アイコン）をクリックし、購読と入力する。
表示された下のメールマガジンの画面で、一番上の「訪問者が新しい投稿を購読したり、メールでコメントしたりできるようにします」をオンにすれば、ウィジェットに「ブログ購読（Jetpack）」が現れるようになる。
ショートコードの活用も
あるいは、ウィジェットで「カスタムHTML」を選択して好みの位置に配置し、ボックスに以下のメール購読のショートコードをコピペする。このショートコードは、ウィジェットだけでなく本文中などいろいろな場所に挿入して表示させることができる。
[jetpack_subscription_form]デフォルト仕様に手を入れた点
導入して得られた「ブログをメールで購読」の画面をそのまま使うには、以下のような抵抗感がある。
１．タイトル
デフォルト：「ブログをメールで購読」の購読に違和感
変更案：「ブログのフォロー登録」とする
２．メールアドレス入力欄
デフォルト：アドレスを入力して大丈夫か不安を覚える（公開や悪用など）。入力ボックスの横幅が微妙に中途半端。「メールアドレス」の文言がそっけない
変更案：横幅はサイドバーの画面目一杯に延ばす。文言を「メールアドレスを入力」にする。また登録者の不安を軽減する文言を追加する。例えば、「購読は無料で、いつでも解除できます。またメールアドレスが公開されることはありません」のように
３．購読ボタン
デフォルト：ボタンが異常に大きく、すぐ上のアドレス入力欄と不釣り合い。またアドレス入力欄とくっついている。「購読」の文字も大きく強調されすぎで「購読」の文言にも違和感あり
変更案：アドレス入力欄と適度な隙間を空ける。ボタンの縦幅を15ｍｍ（PCの場合）から10ｍｍ程度に狭める。文言を「登録」に変更してフォントを小さくする。他のボタン（検索ボタン）と同じように黒のボタンの角を少し丸める。
フォロー登録のカスタマイズ
カスタマイズ例
以下が引っ掛かる点をカスタマイズして得られた私のフォロー登録の仕様。
アドレス入力や登録解除などに関する不安払拭のために、アドレスが公開されないこと、購読が無料であること、いつでも登録解除できることを記載した（かえって怪しまれるという意見もあるが）。
以下にカスタマイズしたもの（左）とデフォルト（右）を並べてみた。サイドバーの「検索」や「カテゴリー」など他の機能と違和感が無くなり、統一感が増したと思っている。当初は『新着ブログの受信登録』『フォローはこちらから』などを考えたが、『ブログのフォロー登録』とした（気が変わったら、タイトル含めて仕様を変更するかもしれない）。
カスタマイズ不要かも
次項に示すようなカスタマイズをしなくても、デフォルトのコードでカスタマイズのような表示になるかもしれない。ネットで調べると、カスタマイズしなくてもデフォルトで違和感のない表示になっている例を見かけることがある。違和感の有無にかかわらず、体裁を気にしなければカスタマイズは不要。
上に示したデフォルトの仕様は、私のワードプレスやCOCOONの変更、インストールしたプラグインなどによる影響があるのかもしれない。まずはカスタマイズする前に「ブログ購買（Jetpack）」やショートコードを用いたウィジェットでどのような表示になるかを確認し、気になるようであれば私と同じカスタマイズへ進むことを推奨する。
CSSへのコード追加
以下が追加したCSSコード。ダッシュボードの「外観」→「追加CSS」を選択し、以下のコードを追加する。「追加CSS」でJetpackの投稿設定画面が出てくる場合は、下線部分の「カスタマイザーにアクセス」をクリックして進む。
/* フォロー登録 email入力欄の幅変更 */
#subscribe-email input {
width: 100%;
}
/* フォロー登録ボタンのカスタマイズ */
#subscribe-submit button {
border-radius: 4px;
padding: 14px 8px 14px 8px;
margin: 9px; margin-left: 0px;
font-size: 14px;
width: 19%;
}手を加えた点
１）文言の変更
ウィジェットに表示された以下の画面で、枠で囲まれた入力欄の文言を直接カスタマイズした。
２）購読者数の表示削除
下部にある「合計購読者数を表示しますか？」のレ点を外した。デフォルトではレ点が入っており、デフォルト画面にあるように「２人の購読者に加わりましょう」というメッセージが表示される。なお「２人」となっているのは、購読機能を設置するにあたって私とカミさんのメールアドレスを使用して登録のテストをしながら作業したので既購読者数が２名になっている（笑）
３）メールアドレス入力ボックスの変更
メールアドレス入力のボックスをサイドバーの横幅一杯に伸ばした（width設定）。
４）フォローボタンの変更
① フォローボタンの４隅
４隅に丸みを作り、検索ボタンなど他のボタンと同じ仕様にした（border-radius設定）。
➁ 文字の大きさ
文字サイズを検索ボタンの文字と同じ大きさにするため、比較しながら数字を変えて設定した（font-size設定）。
③ 文字の配置
ボタン内の文字と枠線との隙間の大きさを揃えた（padding設定）。
④ ボタンの大きさと位置修正
ボタンの横幅を検索ボタンと同じにした（width設定）。また縦幅も同じになるように、文字と枠線の間につくる空間の大きさを設定した（padding設定）。さらに、すぐ上のメールアドレス入力欄との間に適度な隙間ができるように設定した（margin設定）。
なお、文字と上下左右の枠線との隙間を定義する「padding: 14px 8px 14px 8px」は、プレビュー画面での表示状態を確認しながら微調整を繰り返して数値を設定した。
コードについて
１）padding、marginについて
paddingは文字と枠線の間の空間を、marginは枠線の外側の空間を定義するもので、以下のような定義の仕方になる：
1つだけ指定する場合は上下左右がすべて同じ幅
2つの値を指定する場合は上下・左右の順に幅を指定
3つの値を指定する場合は上・左右・下の順に幅を指定
4つの値を指定する場合は上・右・下・左の順に幅を指定
２）border-radiusについて
border-radiusは、枠線の４隅に丸みを作るもので、この数字を大きくすれば角の丸みが大きくなる。登録ボタンの事例では、25pxにすると以下のようにカプセル（俵）のようなボタンにすることができる。
３）色について
今回はデフォルトの色仕様を用いたが、背景色や文字の色を変えたい場合は、以下のコードを追加して、#xxxxxxに好みの色の番号を入力すればよい。
background-color: #xxxxxx;
color: #xxxxxx;色のコードは以下のサイトなどで調べることができる。
PCではうまくいったけど・・
上述のカスタマイズによってPC画面でのボタン表示については、意図通りに検索ボタンとほぼ統一性を持たせることができた。ところが、スマホ画面でのボタン表示は微妙に違いが見られ、検索ボタンと一致させることができなかった。PCとスマホの両方の出来栄えを確認しつつ、さらに微調整を続けてCSSの設定値を決定したのが、上記したCSSコードである。最初に投稿をアップした時の設定からもちょこちょこと数値を変えている（すみません）。
元々、デフォルト仕様においても、PC画面では登録ボタンがやたらと大きく表示される一方で、スマホ画面ではそこまで違和感のない大きさで表示されていた。どうしてこのような違いが生じるのか、ド素人の私には理由がよく分からない。残念だが統一性については現在のレベルで良しとすることにした。
ところで、paddingなどの数値を少しづつ変えて微調整していると、数値を変えても画面ではほとんど変わらなくなったり、元に戻そうとして数値を戻すと突如として大きく姿を変えてしまうことがある。このような時は、コピペ元から追加CSS欄に再度ペーストし直すと元に戻る。なぜこのようになるのかも不明なのだが、私の経験則になっている。
登録時の応答メール文のカスタマイズ
登録ボタンをクリックした際に、登録者にはアドレスの認証メールが送られ、認証するとウェルカムメールが送られる。ダッシュボードの「設定」→「表示設定」で以下のような「フォロワー設定」ボックスが表示されるので、両方の応答メールとも自分で文言をカスタマイズできる。
最後に
Jetpackの「ブログ購読」機能を用いてサイドバーに追加し、上述のようなカスタマイズを行った。
このプラグインをインストールした場合、COCOONなどでコメント欄を設置していると、コメント欄の下にブログをフォローするというような確認の文章が追加される。
ダッシュボードから「設定」→「ディスカッション」を選択して表示される画面の一番下に、以下のように「Jetpack購読設定」として「ブログをフォロー」の項目がある。デフォルトでは『コメントフォームに「ブログをフォロー」オプションを表示』というレ点を入れる箇所がオンになっているので、この文言が不要な場合はレ点を外し、変更を保存する。
コメントフォームに「ブログをフォロー」オプションを表示する場合は、サイドバーなどにあえてブログ購読の設定をしなくてもよいかもしれない。一方で、ダブルで設置したい人もいるだろう。このあたりは個人の好みで決めればよい。
私自身はサイドバーを選択してコメント欄の下には表示しないことにした。個人的な希望を言えば、プロフィールの一番下にさりげなくフォローボタンがあり、クリックするとメアド入力画面になるような機能があればベストなのだが・・。残念ながら今のところ見つけたプラグインはイマイチな感じで導入を見送っている。
それにしても、くどくどと長い備忘録になってしまった。仕方ない。これくらい書き込んでおかないと、やり方をさっぱり思い出せないほど老化が進みつつあるので・・
コメント入力欄