WordPress の設定と TCD テーマのカスタマイズ

ブログの始め方

WordPress の設定と TCD テーマのカスタマイズ

この記事は約 7 分で読めます。

ユウキです。

今回は WordPress の初期設定について、TCD テーマ「MAG」をベースに解説します。

「Be」のカスタマイズについても併せて解説するので参考にしてみてください。

この記事が役に立つ読者
  • これから WordPress を始める方
  • WordPress の設定を確認したい方
  • TCD「Be」のカスタマイズについて知りたい方
  • TCD「MAG」のカスタマイズについて知りたい方

WordPressテーマのインストールだけでは駄目

WordPressテーマのインストールだけでは駄目

はじめに WordPress テーマをインストールしますが、インストールだけではデザインが簡素で、デモサイトの印象とは違います。

デザインを整えるためには各項目の設定が必要なので、初めて WordPress を使う方にはハードルが高いですよね。

「こんなはずじゃなかったのに…」と投げ出さないためにも、これから解説する手順で設定してみてください。

WordPressの基本設定

WordPressの基本設定について

先にWordPress側の基本設定をしておきましょう。以下、5つの設定項目について順に変更していきます。

一般

一般設定は画像を参考に変更してみてください。

サーバー契約から WordPress インストールの際に、SSL 設定と管理者メールアドレスの設定が完了していれば、ここで必要な編集はキャッチコピー(説明文)の記載だけです。

メンバーシップ以下の設定はそのままで大丈夫です。

WordPressの一般設定

エックスサーバーで SSL 設定と Web メールアカウントの作成がまだでしたら、こちらを参考にどうぞ。

投稿

投稿設定の変更は【更新情報サービス】のみです。

現在、ping 送信を行う必要性はブログランキングのみで、参加していない場合は不要となります。

ブログランキングに参加を検討している場合、現時点では以下の3つで十分だと思います。

参加した場合は、専用 URL にて ping 送信を行うと、更新情報を通知することができます。

WordPress の投稿設定、更新情報サービスについて

表示

表示設定の変更は、フィードの各投稿に含める内容の【抜粋のみを表示】を選択して変更を保存します。

【全文を表示】に設定すると、フィード購読者がいる場合、ブログに訪れなくても記事を読むことができ、アクセスの機会を低下させてしまうかもしれないからです。その他は変更不要。

WordPressの表示設定

ディスカッション

ディスカッション設定の変更は画像を参考にしてください。設定方針はコメント機能を利用する場合となります。

【他のコメント設定】の項目でチェック不要個所の理由は、メンバーシップ登録の必要が生まれてコメントが入りづらくなるためです

ブログ上でコメントを受け付けない場合は、【デフォルトの投稿設定】→【新しい投稿へのコメントを許可】のチェックを外して変更を保存しましょう。

WordPressのディスカッション設定

メディア

メディア設定の変更は、画像の【大サイズ】を記事本文の横幅に併せて変更します。

WordPress にアップロードする画像は、自動的にこの設定サイズに調整され複製されてしまうためですが、【サムネイルサイズ】と【中サイズ】に関しては、割り当てられている箇所もあるので変更しません。

メディア設定の大サイズを変更

  • TCD「Be」:横幅 730 px
  • TCD「MAG」:横幅 690 px

WordPress テーマの記事本文の横幅が分からない場合、簡単に調べる方法は Chrome のデベロッパーツールを使ってみてください。

WEB サイトのページでマウスを右クリック、開いた窓から【検証】を選択して、

WEB サイトの表示サイズを確認する方法1

表示された検証ツールの左上にあるマークをクリック後、調べたい位置を選べば画像のように詳細情報が分かります。

WEB サイトの表示サイズを確認する方法2

パーマリンク

パーマリンク設定は、【共通設定】→【投稿名】にチェックを付けて、変更を保存します。

WordPressのパーマリンク設定

これで各投稿のURLが変更可能になります。

パーマリンク設定でURL変更する方法について

HTML の構造上、投稿名の前にカテゴリー名を入れた方が SEO で有利という意見もありますが、後からカテゴリーの変更ができず自由度がなくなるため、投稿名のみにしておくのがおすすめです。

プライバシー

プライバシー設定は不要です。後で固定ページからプライバシーポリシーの編集をしますが、その際は当サイトのページを参考にしていただいて構いません。

WordPressの一般設定はこれで完了です。

WordPress テーマのインストールとカスタマイズ

WordPressテーマのインストールとカスタマイズ

次は用意した WordPress テーマをインストールして、カスタマイズしていきましょう。

テーマのインストール

先ずはテーマのインストールです。【外観】→【テーマ】→【新規追加】→【テーマのアップロード】と進めていきます。

WordPressテーマのインストール新規追加

WordPressテーマのアップロード

【ファイルを選択】をクリックして、用意したテーマのZIP(圧縮)ファイルを選択後、【今すぐインストール】をクリック。

WordPressテーマのアップロード方法

画像のように表示されたら【有効化】をクリックしてインストール完了です。

WordPressテーマのインストール完了

カスタマイザーの設定

次はカスタマイザー側の設定を進めます。以下3つの項目を参考にしてください。

まずは【外観】→【カスタマイズ】へ進めます。「MAG」の場合、サイトはまだ画像のような状態。

MAGカスタマイズ設定画面

サイトアイコンの設定

サイトアイコンを設定すると、ブラウザのタブに画像のようなアイコンが表示されます。

サイトアイコンの表示イメージ

設定方法は【サイト基本情報】→【サイトアイコンを選択】と進んで画像を選びます。

サイトアイコンを用意していない場合は、ICOOON MONO というサイトが便利ですので、好みのアイコンを選んでみてください。

サイトアイコンの設定方法

カスタム CSS ※TCD テーマの場合、テーマオプション側に追加する

初期状態では見出し装飾や囲み枠装飾がいまいちなので、CSS を追加します。

【サイト基本情報】→【追加CSS】と進んで以下の記事を参考にコードを追加してみてください。

カスタマイザーで追加CSSの設定

見出し装飾はこちらを参考にどうぞ。

囲み枠装飾はこちらを参考にどうぞ。

ブログ全体の背景色を変更したい場合は、好みのカラーコードと一緒に次のコードを追加してみてください。


body { background: #カラーコード; }

カラーコードはこちらのサイトが参考になります。

背景を画像で設定したい場合は、メディアに画像をアップロードしてから、画像のURLと一緒に次のコードを追加してみてください。


body { background-image: url("画像URL"); }

ブログ背景色が変更される個所について

「MAG」はデフォルトのフォントが固い印象なので、見やすいメイリオフォントに変更します。「Be」はテーマオプションで変更できるので追加不要です。


body, input, textarea { font-family: "メイリオ", Meiryo, "游ゴシック", YuGothic, "ヒラギノ角ゴシック", Hiragino Sans, sans-serif; }

カスタマイザーの設定はこれで完了です。次はウィジェットの設定に進みます。

ウィジェット

ウィジェット設定は【外観】→【ウィジェット】へ進めます。(画像は MAG)

WordPressウィジェットの設定

「MAG」の場合は次のページにウィジェットを追加します。左側がパソコン表示で、右側がモバイル表示設定なので、両方設定しましょう。

  • トップページ
  • アーカイブページ
  • 記事ページ
  • 固定ページ
  • フッター左側
  • フッター右側

「Be」の場合は次のページにウィジェットを追加します。フッター以外のウィジェットを同じにする場合は、【基本ウィジェット】のみ設定でも構いません。

  • トップページ
  • ブログ記事一覧ページ
  • ブログ記事詳細ページ
  • 固定ページ
  • フッター

TCD「Be」のウィジェット設定画面

追加するウィジェットは、次にあげるものがデザイン的に整っておすすめです。設定は好みで随時変更してみてください。

  • デザインユーザープロフィール
  • 検索
  • デザインされた記事一覧(tcd バージョン)
  • カテゴリー一覧(tcd バージョン)
  • タグクラウド

【フッター】に追加するウィジェットには、こちらがおすすめです。好みで選んでみてください。

  • デザインユーザープロフィール
  • デザインされた記事一覧2(tcd バージョン)
  • カテゴリー一覧(tcd バージョン)
  • タグクラウド

フッターウィジェットの表示イメージ

ウィジェットの設定はこれで完了です。次は TCD テーマオプションの設定に進みます。

TCD テーマオプション

テーマオプションの設定については、各項目がどのように変わるのかを詳細にまとめた記事があるので、参考に設定してみてください。

「Be」はこちらの記事を参考にどうぞ。

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

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

次はプラグインのインストールと設定です。

これが完了すれば、WordPress の初期設定は完了で、ブログ記事の執筆が始められます。

当サイトでも利用しているおすすめプラグインについてはこちらの記事を参考にどうぞ。

まとめ

お疲れ様でした。

これで一通りの準備が終わったので、デザイン面の細かな修正はブログ運営を進めながら、必要に応じて変更してみてください。

次回は WordPress 投稿の使い方について解説します。

SEO 対策も含めて詳細にお伝えしていますので、こちらの記事を参考にどうぞ。

この記事のタイトルとURLをコピーする

関連記事

  1. WordPress テーマの選び方で失敗しないポイント

    ブログの始め方

    WordPress テーマの選び方で失敗しないポイント

    ユウキです。前回の記事など参考に、レンタルサーバーの契約と設定を完…

  2. TCD テーマ「Be」をレビュー|参考サイトと評判まとめ

    ブログの始め方

    WordPress テーマ「Be(TCD076)」をレビュー

    ユウキです。今回は WordPress テーマの中でも、デザイン性…

  3. WordPress に絶対に入れておきたいプラグイン 17 選

    ブログの始め方

    WordPress に絶対に入れておきたいプラグイン 17 選

    ユウキです。今回は、WordPress のポテンシャルを高めてくれ…

  4. アフィリエイトはドメイン名の選び方が重要

    ブログの始め方

    アフィリエイトはドメイン名の選び方が重要

    ユウキです。レンタルサーバーをどこにするか決めたら、次はドメイン名…

  5. WordPress の見出しデザイン 64 選|TCD「Be」と「MAG」はコピペで OK

    ブログの始め方

    WordPress の見出しデザイン 64 選|TCD「Be」と「MAG」はコピペで OK

    ユウキです。今回は TCD テーマ「Be」と「MAG」の見出し装飾…

  6. WordPress の囲み枠デザイン 30 選|TCD「Be」と「MAG」はコピペで OK

    ブログの始め方

    WordPress の囲み枠デザイン 30 選|TCD「Be」と「MAG」はコピペで OK

    ユウキです。今回は、TCD テーマ「Be」と「MAG」の囲み枠装飾…

管理人
Blog de Affili の管理人ユウキ

ユウキと申します。

経歴は飲食サービス業のマネージャー、プロップトレーダー、オンラインサロン講師などをしていましたが、組織や人間関係にうんざりして、やりたくないことを捨てました。

ブログアフィリエイトを始めたばかりの頃は 1 年で利益 8000 円。(しょぼ笑)

その後、システム構築やマーケティングを学んで、 3 ヶ月で作った仕組みから 698 万円の売り上げを達成しました。

現在は個人向けにオウンドメディア構築やウェブマーケティングをコンサルしています。

稼いでも時間や人間関係に縛られていたらしんどいだけ。ブログでそこそこ稼いで、ゆったり自分らしく暮らしましょう。

最近の記事
  1. WordPress の目次デザインをおしゃれにカスタマイズ
  2. WP Mail SMTP で Contact Foam 7 のメールが届かない問題を解決
  3. Contact Form 7 の設定とカスタマイズを解説
  4. robots.txt is not valid 4 errors found の解決方法
  5. WordPress のセキュリティ対策をするなら SiteGuard WP Plugin
惹きつけるブログはデザインから生まれる
WordPress テーマ Be(TCD076)のレビュー
PAGE TOP