7 Jul 2019
TCDの「Louge」という有料テーマを使い「通販めし」というブログを書くことにしました。
後学のために初期設定の手順を記録しておこうと思います。
TCD「Louge」を購入しようと思っている方はぜひ参考にしてください。
1. 文字の大きさを設定する
初期設定は 14px でした。
この大きさだと小さく感じられたので、16pxにしました。
文字の大きさを変えるには、
で、フォントサイズという項目の数字をいじることで調節できます。
2. サイトの横幅を調節する
初期設定は 890px でした。
かなり圧迫感を感じたので、1000pxに広げました。
サイトの横幅を変えるには、
で、サイトの横幅という項目で調節できます。
3. ファビコンを設定する
ファビコンというのはブログのタイトルの横にある小さな記号のことです。
今回運営するブログのタイトルは「通販めし」なので、「め」の文字を形取ったファビコンを設定しました。
僕はあまりこの手の才能がないので、プロの方（→ 「coconala」に出店している「にゃろねこ」さん）に作ってもらいました。
設定の仕方は簡単です。
で、サイトのタイトル・キャッチフレーズなどとともに、ファビコン（→ サイトアイコン 512×512ピクセル以上）も設定できます。
4. 投稿画像に枠線をつける
このブログでは写真以外の図柄に枠線をつけることにしました。
色々検索した結果、以下のブログの案を採用しました。
にこのコードを記載し、
ビジュアルエディターを使用しているときに、画像をクリックして、編集（鉛筆印）をクリックし、「画像CSSクラス」にクラス名（上の記事だと waku）を打ち込めばOKです。
5. ヘッダー画像を設定する
タイトルはそのままだと文字になります。
どうせならかっこ良いものを貼りたくて、こちらもプロの方（→ 「coconala」に出店している「イナリデザイン」さん）に作ってもらいました。
設定の仕方は簡単です。
で、設定できます。
説明書きを転記します。
6. カテゴリーとタグを調節
カテゴリーとタグの見栄えを良くするためにCSSで調節しました。
特に下の２つの記事はとても役にたちました。
7. Akismet Anti-Spam (アンチスパム)というプラグインをインストール、有効化。
これがあることにより、スパムメールを予防することができます。
これを有効化しないと一日２００通くらい訳の分からないメールが来ます（汗）
プリインストールされているので、有効化するだけです。
APIキーの設定も忘れないようにしましょう！
8. クラシックエディターというプラグインをインストール、有効化。
WordPress のバージョン5.0（Gutenberg）になり、死ぬほど使いにくくなりました（滝汗）
なんでこのアップデートを許可したのか、担当者を小一時間説教したいレベルです。
Classic Editor をインストールし、有効化すると、旧エディターを使うことができます。
9. AddQuicktag というプラグインをインストール、有効化。
このプラグインは使用頻度の高いショートコードを登録して使うことができます。とても便利です。
このプラグインがない WordPress など考えられません。
残念なことに、TCDの「louge」にはAddQucikはプリインストールされていません。
AddQuicktag プラグインをインストールして、あれこれ設定しましょう！
10. TinyMCE Advanced というプラグインをインストール、有効化。
このプラグインを使うと、ビジュアルエディタを使用しているときに、編集項目を追加することができます。
文字を大きくしたり、書体を変えたり、表を作るボタンを追加することができます。
11. WordPress Popular Posts というプラグインをインストール、有効化
このプラグインを使うと、ブログ内の人気記事を表示することができます。
２カラムにしている人は記事の脇に人気ランキングを載せることができるので、見栄えが良くなると思います。
12. Category Order and Taxonomy Terms Order というプラグインをインストール、有効化
WordPress でカテゴリーを作ると通常、その順序は入れ替えることができません。
何度もカテゴリーを追加すると、配列がぐちゃぐちゃになり、見辛くなります。
そういう時はこのプラグインの出番です！
後からでもカテゴリーの順番を入れ替えることができるので、分かりやすいブログになります。
オススメのプラグインです！
13. Easy Fancy Box というプラグインをインストール、有効化
このプラグインを使うことで、画像をポップアップ（拡大）させることができます。
背景色や、拡大する際の速さなども選ぶことができるので、見た目にもかっこいいブログになります。
ただし、リンク先を「メディアファイル」にしないと作動しないので注意が必要です。
14. Contact Form 7 というプラグインをインストール、有効化
このプラグインを使うことで、「お問い合わせフォーム」を作成することができます。
装飾を施すこともできるため、見た目にもカッコよくなります。
[注意] 15. で紹介する「Login No Captcha reCAPTCHA」で機能させるためには reCAPTCHA の「v3」のキーを取得する必要があります。
で v3 のサイトキーを打ち込む必要があります。
15. PS Auto Sitemap というプラグインをインストール、有効化
このプラグインを使うとブログにサイトマップを表示できます。
画面下部にある、グレーの「サイトマップ」という文字をクリックしてみてください。
16. Login No Captcha reCAPTCHA というプラグインをインストール、有効化
これがあると、スパムメールを防ぐことができます。
よく見かける「私はロボットではありません」を WordPress に追加することができます。
このプラグインを使用するには Google reCAPTCHA Key の取得が必要です。
少しでも間違えると、こんな感じになり、WordPress にログインできなくなります。php並みに怖い・・・
Xサーバー側に助けを求めたら「ご運用WordPressの『カスタマイズ』において発生した問題については当サポート対象外項目といたしており、本件について具体的な解決策を提示することはかないません。」とにべもなく断られてしまいました（笑）
半日かけてあれこれ調べた結果、以下の記事に出会いました。
FTPソフト（僕は、FileZillaを利用しました）を使用し、該当するプラグインを削除するのが良いと分かりました。
とすると、以下のような画面が出てきます。
該当するプラグインを消すと上手く行きました。
FTPソフトとは何をを知るには、サルワカさんの以下の記事が参考になります。
サルワカさんの記事にはとてもお世話になっています。
そう遠くない将来、SANGO を購入すると思います。
17. TablePress というプラグインをインストール、有効化
このプラグインを使うと、コードを書かずに綺麗な表を作ることができます。
成分や配送料一覧などに使うと思います。
18. PuSHPress というプラグインをインストール、有効化
自分が書いた記事を検索結果に表示させるには、Google のクローラーに見てもらう必要があります。
このクローラーは Web ページから Web ページへと移動しているので、被リンクが少ない記事（サイト）は当然、インデックスが遅くなります。
そんな時はこの PushPress の出番です！
このプラグインを使うと、Webページを検索エンジンに瞬時にインデックスしてもらえます。
WordPress で記事を書くときには欠かせないプラグインです。
19. Image Watermark というプラグインをインストール、有効化
ブログに載せる画像に透かしを入れるプラグインです。
このアプリを使うの上の画像のように、写真に透かしを入れることができます。
初期設定がうまくいかず、何度もやっていたら、画像の透かしがおかしくなってしまいました。
最終的には画像の名前を変えて変換したらうまくいきました。
20. SSL設定をする
この「通販めし」のドメインを登録するときに、Xサーバーの管理画面でSSL化をしました。
実はまだやることがあります（素人には分からないですよね・・・）
さらに「Webサイトの常時SSL化」というところから、さらに 「.htaccess編集」というものをする必要があるそうです。
サーバーパネルに戻り、「.htaccess編集」をクリックします。
自分のドメインを選択し、「.htaccess編集」をクリックする。
「Webサイトの常時SSL化」にあるコードを下に書き足します。
このコードは画像です。コピーする場合は、下のサイトを参照してください。
21. Google アナリティクスの追加
このサイトでも分析ができるように Google アナリティクスに追加することにしました。
この初期設定は３年ぶりなので、忘れていることが多かったです。
・アナリティクスにログイン
・管理という場所をクリック（歯車のアイコンが目印）
・「＋プロパティを作成」をクリック
・ ウェブサイトの名前やサイトのURLなどを打ち込み「トラッキングIDを取得」をクリック
→ http:// と https:// の区別は必要
・取得した「トラッキングイID」を「外観＞テーマエディター」の header.php のソースコードに直接書き込む。
→ 場所は headタグの直後
[参照]「Googleアナリティクス 導入時の設定・設置方法【初心者向け】」
[参照]「WordPressにGoogle Analyticsを設定する方法」
22. タグをCSSでカスタマイズ
そのままだと、タグが文字になってしまい、見栄えが悪かったので、以下の記事を参考に修正をしました。
[参照] [WEB-ASHIBI STINGER7：タグクラウドのデザインをカスタマイズする方法]
まとめ
３年ぶりの初期設定でした。
忘れていることが多く、一つ一つ調べながらやっていたら、１週間もかかってしまいました（汗）
必要なプラグインは随時追加するとして、そろそろブログの記事を書き始めようと思います。
第一弾は「シャーベット」です。
すでに届いているので、「ブツ撮り」「試食」「執筆」と進めていきます。
美味しい食べ物に出会えるといいなぁ〜。
