ユウキです。
今回は WordPress の初期設定と、当ブログでも利用させていただいてる TCD テーマ「MAG」のカスタマイズについて解説いたします。
ページ最後まで読んでくださった方を対象に公式 LINE にてサポートしていますので、これから TCD テーマを使ってブログを始めようとしていたり、当ブログと同じ環境で進めてみたいと思われていれば、参考にしてみてください。
MAG を知らない方向けに少し紹介すると、2016年6月29日にリリースされたブロガーのための WordPress テーマです。
リリースされてから既に4年近く経過していますが、TCD のきめ細かなサポートもあって、今でも十分に使えるものです。
Google のウェブマスター（サイト管理者）向けツールで、ページの表示速度や修正案を教えてくれる Lighthouse のモバイル表示スコアでは95点でした。（2020年3月21日時点）
▼クリックするとポップアップします▼
ブログの立ち上げ時期はドメインパワーが弱いので、コントロールできる部分には力を入れる必要があるわけですが、内部構造の最適化という面でもとても頼りになる存在です。
ただ、「MAG」には1点デメリットがあって、デフォルトではHタグの構造的にSEOに弱いため、テーマファイルの編集が必要です。
「MAG」のデメリットと修正方法について詳細はこちらの記事を参考にどうぞ。
とはいえ、デメリットを補うデザイン性と、一度の購入で複数サイトに使用可能な面はコスパがいいですよね。
TCD シリーズはデザインプラスからリリースされて約10年が経ち、ユーザー数は10万人を超えた WordPress テーマです。
必要なポイントを抑えているテーマですし、長期的にサポートしてもらえる安心感と信頼感も魅力に感じる一因です。
まだテーマが決まらず迷われているのでしたら、2019年12月20日にリリースされた TCD テーマ「Be」をおすすめします。
「Be」であれば、サイトロゴの H1 タグなど SEO 関連の問題は解消されているので安心ですし、デザイン変更もワンタッチで便利なブロガー向けの WordPress テーマです。
こちらも読んでくださった方を対象に公式 LINE にてサポートしているので、参考にしてみてください。
それでは本題の WordPress 設定と TCD「MAG」のカスタマイズを進めていきます。
WordPressテーマのインストールだけでは駄目
はじめにWordPressテーマをインストールするわけですが、インストールしただけではデザインや機能が簡素で、デモサイトの印象とは違います。
デザインを整えるためにはCSSなどテーマファイルを編集する必要があるので、初めてのWordPressだと難しそうに感じますよね。
「こんなはずじゃなかったのに…」
と投げ出さないためにも、これから解説する手順で設定してみてください。
WordPressの基本設定について
先にWordPress側の基本設定をしておきましょう。
以下、5つの設定項目について順に変更してください。
一般
一般設定は画像を参考に必要があれば変更してください。
サーバー契約から WordPress インストールの際に、SSL とメールアドレスの設定が完了していれば、編集が必要なのはキャッチコピー（説明文）の記載だけです。
メンバーシップ以下の設定はそのままで大丈夫です。
エックスサーバーで SSL の設定とメールアカウントの追加がまだでしたら、こちらを参考にしてください。
投稿
投稿設定の変更は【更新情報サービス】のみです。
現在、ping 送信を行う必要性はブログランキングくらいしかありませんので、参加していない場合は不要となります。
ブログランキングに参加を検討している場合、現時点では以下の3つで十分だと思います。
参加した場合は、専用 URL で ping 送信を行うことで更新情報を通知することができます。
表示
表示設定の変更では、フィードの各投稿に含める内容の【抜粋のみを表示】を選択して変更を保存しましょう。
【全文を表示】に設定すると、フィード購読者がいる場合、ブログに訪れなくても記事を読むことができ、アクセスの機会を低下させてしまうかもしれないからです。その他は変更不要です。
ディスカッション
ディスカッション設定の変更は画像を参考にしてください。画像はコメント機能を利用する場合です。
【他のコメント設定】の項目でチェック不要個所の理由は、メンバーシップ登録の必要が生まれてコメントが入りづらくなるためです
ブログ上でコメントを受け付けない場合は、【デフォルトの投稿設定】→【新しい投稿へのコメントを許可】のチェックを外して変更を保存しましょう。
メディア
メディア設定の変更は、画像の【大サイズ】を変更します。
WordPress にアップロードする画像は、自動的にこの設定サイズに調整され複製されてしまうためですが、【サムネイルサイズ】と【中サイズ】に関しては、割り当てられている箇所もあるので変更しません。
WordPress テーマの本文最大幅が分からない場合、簡単に調べる方法は Chrome のデベロッパーツールを使う方法です。
WEB サイトのページでマウスを右クリックすると開く窓から【検証】を選び、
表示された検証ツールの左上にあるマークをクリック後、調べたい位置を選ぶと、画像のように詳細情報が分かります。
パーマリンク
パーマリンク設定は、【共通設定】→【投稿名】にチェックを付けて、変更を保存します。
これで各投稿のURLが変更可能になります。
HTML の構造上、投稿名の前にカテゴリー名を入れた方が SEO で有利という意見もありますが、後から変更したい場合の自由度がなくなるため、ここ投稿名のみにしておきましょう。
プライバシー
プライバシー設定は不要です。後で固定ページからプライバシーポリシーの編集をします。
WordPressの一般設定はこれで完了です。
WordPressテーマのインストールとカスタマイズ
次は用意したWordPressテーマをインストールして、カスタマイズ項目を変更しましょう。
テーマのインストール
先ずはテーマのインストールです。
【外観】→【テーマ】→【新規追加】→【テーマのアップロード】と進めていきます。
【ファイルを選択】をクリックして、用意したテーマのZIP（圧縮）ファイルを選択後、【今すぐインストール】をクリックします。
画像のように表示されたら【有効化】をクリックして、インストール完了です。
テーマのカスタマイズ
次はインストールしたMAGのカスタマイズを進めましょう。
以下3つの項目を参考にしてください。
カスタマイザーで設定
【外観】→【カスタマイズ】へ進めます。サイトはまだ画像のような状態です。
サイトアイコンを設定しましょう。タブに表示されるこの部分ですね。
設定方法は、【サイト基本情報】→【サイトアイコンを選択】と進んで画像を選びます。
サイトアイコンを用意していない場合は、ICOOON MONOというサイトが便利ですので、好みのアイコンを選んでみてください。
初期状態は装飾とフォントがいまいちなので、【サイト基本情報】→【追加CSS】と進んで、以下のコードを追加します。
/* h2 */
.post_content .style2a { margin:3em 0 1.5em; padding:.8em .6em .7em; font-size:22px; font-weight:700; border-top:none; border-bottom:none; border-left:4px solid 【指定のカラー】; background: 【指定のカラー】; }
/* h3 */
.post_content .style3a { margin:2em 0 1em; padding:.5em .6em .3em; font-size:22px; font-weight:700; border-top:none; border-bottom:dotted 2px 【指定のカラー】; border-left:4px solid 【指定のカラー】; }
/* h4 */
.post_content .style4a { margin:2em 0 1em; padding:.5em .8em .3em; font-size:18px; font-weight:600; border-top:none; border-bottom:none; border-left:none; background: linear-gradient(transparent 80%, 【指定のカラー】 95%); }
/* h5 */
.post_content .style5a { margin:2em 0 1em; padding:.4em .6em .2em; font-size:18px; font-weight:600; border-top:none; border-bottom:none; border-left:4px solid 【指定のカラー】; background:none; }
body, input, textarea {
font-family: "メイリオ", Meiryo, "游ゴシック", YuGothic, "ヒラギノ角ゴシック", Hiragino Sans, sans-serif;
}
上記の追加CSSで、H2～4のタグ装飾が変わり、メイリオフォントの表示が優先されるようになります。
【指定のカラー】の部分は、HTML Color Codes を参考に好みのカラーコードを指定してみてください。
TCD「MAG」以外の場合、見出しタグは「.style」や「H」で、フォントは「body」にすると適用されると思います。
ブログ全体の背景色を変更したい場合は、以下のコードを追加します。
body { background:【指定のカラー】; }
カスタマイザーでの設定はこれで完了です。その他の装飾カスタマイズに関しては別の記事にて紹介したいと思います。
次はウィジェットの設定に進みましょう。
ウィジェット
ウィジェットは【外観】→【ウィジェット】へ進めます。画像のように表示されます。
以下のページにウィジェットを追加します。
- トップページ、トップページ（スマホ用）
- アーカイブページ、アーカイブページ（スマホ用）
- 記事ページ、記事ページ（スマホ用）
- 固定ページ、固定ページ（スマホ用）
各ページ共通で、以下のウィジェットをドラッグ＆ドロップで追加しましょう。
- デザインユーザープロフィール
- 検索
- デザインされた記事一覧（tcd バージョン）
- カテゴリー一覧（tcd バージョン）
追加したウィジェットの設定は好みで変更してください。記事一覧は直近3つ、抜粋抜きにするとスッキリ見えますよ。
【フッター右側】に、デザインされた記事一覧2（tcd バージョン）も追加しておきます。
私は3カラムを使用しないので設定していませんが、必要に応じて任意で使ってください。
ウィジェットの設定完了です。次に行きましょう。
TCDテーマオプション
次はTCDテーマオプションの設定です。
【外観】→【TCDテーマオプション】→【基本設定】へ進むと画像のように表示されます。
【色の設定】項目は、メインカラーが各見出しの背景色など、第2カラーがリンクのマウスオーバー時のカラー、第3カラーがメニューのマウスオーバー時のカラーに適用されます。
好みのカラーコードを指定してみてください。
【基本設定】をスクロールすると絵文字の設定があります。不要なのでチェックを外しておきましょう。
【ロゴの設定】は、トップページのヘッダーに表示された画像です。表記したサイズを参考に作成してみてください。
設定しない場合はブログのタイトルがテキスト表示されます。後で編集できるので、横に置いて進めても構いません。
ロゴの作成をする際は、Canva というサイトが無料で使えて手軽で便利ですよ。
個人的に使っているのは TechSmith の Snagit という有料の買い切りソフトで、スクリーンショットや画面録画ができて、png ファイルで保管された編集途中の画像を再編集できたり、使い勝手もよくて重宝しています。
無料試用版もあるので、よかったら試してみてください。
【トップページ】と【アーカイブページ】は共通で記事のフォントサイズを16px、オンマウス時の画像エフェクトをズームに変更します。
【記事ページ】の【記事本文のフォントサイズ】も同様に変更します。
【項目の表示設定】は画像のようにタグ、投稿者名、トラックバックのチェックを外しておきます。
コメントを表示しない場合はコメントのチェックも外します。
もし、SNSアカウントを作成済みであれば、 Facebook OGP と Twitter Cards の設定もできます。
設定詳細は TCD 公式サイトにサポートページがあります。各ページのリンクを記載します。
【ヘッダー】は変更不要です。【フッダー】は画像の箇所を好みで変更してください。
TCDテーマオプションの設定完了です。次へ進めましょう。
プラグインのインストール
次はプラグインのインストールと設定です。
これが完了すれば、WordPress の初期設定は完了で、ブログ執筆を始められます。あと少しですね！
WordPress のプラグインは、デフォルトの機能やテーマでは足りない部分を補うために使う拡張機能で、はじめからインストールされているものがあり、画像の2つは使わないので、削除しておいてください。
削除できたら、【新規追加】→【プラグインの検索】へ進み、以下のリストを参考に検索してインストールを進めていきましょう。
提案するプラグインのリストはインストール数の多いメジャーなものばかりで、更新もされているため安心して利用できます。
All in One SEO Pack
All in One SEO Pack は、WordPress の SEO 対策を簡単な設定で最適化してくれる無料ツールで、「MAG」の機能をカバーしてくれるプラグインです。
TCD テーマと一緒に使用する場合、設定項目は2つで【一般設定】と【 XML サイトマップ】で、SNS 表示を最適化するための【ソーシャルメディア】設定は不要です。
詳しい設定についてはこちらの記事を参考にどうぞ。
WebSub/PubSubHubbub
WebSub/PubSubHubbub は、投稿を公開したり更新した際に送信される Ping を Hub サーバーに通知するためのプラグインです。
Ping 通知の目的はインデックスの促進ですが、Google は Ping サーバーを停止しており、代わりに Hub サーバーを提供しています。
プラグインの設定は不要なので、有効化だけしておきましょう。
インデックス促進の効果を高めるには、併せて XML サイトマップと RSS サイトマップをウェブマスターツールに登録することが重要です。
上記プラグインの All in One SEO Pack を利用して登録しておくことをおすすめします。
BackWPup
BackWPupは、あなたのWordPressデータを自動でバックアップしてくれるプラグインです。
レンタルサーバーでも大抵バックアップされていますが、何かトラブルがあった際にすぐに復旧できる保険ですね。
無料で使えるクラウドサービスのDropboxと連携させます。
SiteGuard WP Plugin
SiteGuard WP Plugin は、WordPress 管理ページへ、ブルートフォース攻撃やリスト攻撃などの、
悪意あるログインを試みる攻撃から保護してくれるプラグインです。
主な機能として、管理ページのログイン URL を変更できるため、入り口が分からなくなります。
ただし注意点として、セキュリティ機能の影響でログインできなくなる方もいらっしゃるため、
SiteGuard WP Plugin は不要と紹介されるサイトもありますが、正しく設定して必要なことをメモに残しておかれれば問題ありません。
Broken Link Checker
Broken Link Checkerは、WordPress内でエラーになったリンクを見つけて報告してくれるプラグインです。
記事の修正作業でお世話になりますよ。
Disable Gutenberg
Disable Gutenberg は、WordPressの記事編集で使用するブロックエディターを、以前のクラシックエディター画面に変更してくれるプラグインです。
ブロックエディタは「MAG」の一部機能が使えないため、作業性を高めるためにインストールしましょう。
ちなみに、WordPress 公式プラグインの Classic Editor は2021年末でサポート終了予定とのことですが、Disable Gutenberg は2022年以降も継続してサポートしてもらえるようです。
Does not “expire” in 2022!
TinyMCE Advanced
TinyMCE Advancedは、クラシックエディターの拡張プラグインです。
このプラグインの目的は、クラシックエディターの項目をカスタマイズするだけでなく、HTML コードの改善もあります。
プラグインを使わない場合、HTML コードが意図しない編集（改行タグの除去）を自動で行い、記事のデザインが崩れる恐れがあります。
プラグインをインストールしたら、以下の画像のように設定します。
以下のチェックボックスにチェックすることで、改行タグの除去と <br> タグの表記を停止して、すべての行で <p> タグが適用されるようになります。
Table of Contents Plus
Table of Contents Plus は、記事のHタグから目次を自動生成してくれるプラグインです。
画像のような目次とリンクが簡単にブログ上部へ表示できます。
目次の自動生成以外に、ユーザー向けの HTML サイトマップ作成もできます。
あまり知られていないかもしれませんが、ショートコードを利用することで、サイトマップは自動更新されていきますし、組み合わせで細かな設定もできるので便利ですよ。
実際にサイトマップはどのように表示されるか、こちらのページよりご覧ください。
WP Multibyte Patch
WP Multibyte Patchは、元々WordPressが英語を対象としているため、日本語を認識させて文字化けさせないようにするプラグインです。
Akismet Anti-Spam
Akismet Anti-Spamは、はじめからWordPressにインストール済みのプラグインです。
コメントスパムと問合せフォームのスパムを除外してくれる機能として利用します。
Contact Form 7
Contact Form 7は、WordPressにメールの問い合わせフォームを設置するプラグインです。
Contact Form 7だけだと、メールスパムが頻繁に届くので、防止策で Akismet のコードを設定しましょう。
設定はとても簡単で、Akismet プラグインの設定後、画像のようにコードを追加して保存すれば完了です。
[text* your-name akismet:author] [email* your-email akismet:author_email]
以下に reCAPTHA についても記載いたしますが、サイトスピードが著しく低下するため、おすすめはしません。
セキュリティ対策の観点では優秀な機能ですので、求める意図に応じて使い分けましょう。
WEBサイト保護サービス「reCAPTCHA」
reCAPTCHAは、Googleが無料提供しているスパムメールなどの不正攻撃からWEBサイトを保護してくれるサービスで、画像のように「私はロボットではありません」のチェックボックスなどを表示してくれます。
登録後、Contact Form 7にてAPIキーを設定すると利用できます。
Invisible reCaptcha for WordPress
Invisible reCaptcha for WordPressは、reCAPTCHAに登録した後、WEBサイト全てのページ右下に表示される画像を見えないようにして、デザイン性を高めてくれるプラグインです。
Contact Form 7 と reCAPTCHA を利用する際はセットで使いましょう。
Easy FancyBox
Easy FancyBoxは、記事に添付したメディアファイルなどをポップアップで表示してくれるプラグインです。
通常メディアリンクを使うと、メディアのURLに移動してしまい、ブラウザの戻る操作が分からないユーザーであった場合、サイトから離脱してしまう可能性があります。
Easy FancyBox を利用することで、解像度の大きな画像ファイルを見てもらいたい場合にユーザーの利便性が高まります。
▼クリックするとポップアップします▼
WP-Optimize
WP-Optimizeは、WordPress内の不要なデータを削除して、動作を軽くするためのプラグインです。
主に記事を書いた際に自動で作成されている【リビジョン】などを削除するのに利用します。
まとめ
お疲れ様でした。
これで一通りの準備が終わったので、デザイン面はブログ運営を進めながら必要に応じて変更してみてください。
プラグインについてはあらためて詳細な設定方法を記事にしていきますね。
急いで設定を進めたい場合は、各プラグインの名前を Google 検索すると解説された記事が出てきますので、いくつか参考にしながら設定してみてください。
この記事を読んでくださった方限定で、TCD「MAG」の設定をサポートいたします。
気軽に公式 LINE へメッセージにてお知らせください。
私経由で購入希望の場合はこちらからどうぞ。
次回は WordPress 投稿の使い方について解説します。
SEO 対策も含めて詳細にお伝えしていますので、参考にどうぞ。
WordPress テーマを何にするかでまだ迷われていれば、テーマの選び方と注意点について解説した記事を参考にどうぞ。
