移転しました。

約1秒後に自動的にリダイレクトします。

EWWW Image Optimizerの設定と使い方【画像圧縮のWordpressプラグイン】

WordPressプラグイン

WordPressのプラグイン「EWWW Image Optimizer」の設定方法と使い方を解説します。

EWWW Image Optimizerを使うと以下のことができます。

  • 画像を圧縮して表示速度を高速化する
  • 自動で圧縮してくれるので手間なし
  • 画像の品質を高レベルで保ってくれる
  • まとめて圧縮もできる

WordPressでブログを運用していくと、画像の枚数が多くなり表示速度の低下につながります。

表示速度はSEOの指標の一つですし、遅いサイトはユーザーが離脱してしまうのでデメリットしかありません。

EWWW Image Optimizeをインストールすることで、画像を適切に圧縮してくれるので表示速度の高速化に役立ちます。

実際にWordPressにインストールしてから設定までは以下の流れになります。

EWWW Image Optimizer のインストール

WordPressの「プラグイン」⇒「新規追加」から、「 EWWW Image Optimizer 」を検索してインストールして有効化してください。

となりに「 EWWW Image Optimizer Cloud」がありますが、現在の設定画面は英語なので日本語対応の「 EWWW Image Optimizer 」をインストールしてください。※機能的な違いはありません。

EWWW Image Optimizer の初期設定

プラグイン画面から「 EWWW Image Optimizer 」の設定を行います。

初期設定画面が表示されるので、「サイトを高速化」と「今は無料モードのままにする」にチェックをして次へをクリックしてください。

サイトの推奨設定はそのままでOKです。設定を保存をクリックしてください。

完了をクリックすれば初期設定は完了です。

EWWW Image Optimizerの設定

初期設定後に１つだけ変更しておくべき項目があります。

「設定」⇒「 EWWW Image Optimizer」にいき、「Enable Ludicrous Mode」をクリックしてください。

「変換」をクリックして「サイトやネットワークの管理者は、以下の設定を無視するメディアライブラリの変換リンクを、他のユーザーが使えないようにできます。」にチェックをして変更を保存します。

この設定は、画像の拡張子が自動変換されるのを無効にしてくます。※勝手に変換されると画質が悪くなることがあります。

EWWW Image Optimizerの設定はこれで完了です。

EWWW Image Optimizerの使い方

EWWW Image Optimizerの使い方はとてもシンプルです。

アップロード画像の自動圧縮

EWWW Image Optimizerは画像を自動圧縮して最適化してくれるので、特にやることはありません。

圧縮サイズの確認もできますが、特に意識する必要はありません。

アップロード済み画像の一括最適化

EWWW Image Optimizerの便利な機能に、すでにアップロード済みの画像を一括最適化する機能があります。

「メディア」⇒「一括最適化」にいき、「最適化されていない画像をスキャンする」をクリックしてください。

最適化できる画像数が表示されるので「最適化」をクリックしてください。

一括最適化が完了しました。

EWWW Image Optimizer まとめ

今回はプラグイン「 EWWW Image Optimizer 」を使った画像圧縮のやり方を解説しました。

画像サイズが大きいとサイト表示速度の低下になり、SEO的にもマイナスになりますし、ユーザーが離脱するリスクがあります。

このプラグインは簡単に設定や一括最適化ができるので、入れておいて損はありません。

XMLサイトマップの作成方法【WordPressプラグイン】

WordPressプラグイン

WordPressでブログを始めたら、自分のブログの記事一覧や更新情報を検索エンジンに教える必要があります。

XMLサイトマップとは、サイト内の各ページのURL、最終更新日、更新頻度などを記述したXML形式のファイルになります。

Google（グーグル）などの検索エンジンにサイトマップを送ることで、 クローラー（サイトを回遊するロボット）が サイトの構造を理解して各ページをインデックスして検索エンジンに表示されるようになります。

XMLサイトマップがなくてもインデックスはされますが、スムーズにインデックスさせるために作っておくことをおすすめします。

最近のGoogleはインデックスが遅い傾向があり、いつまで経っても検索で表示されないといった現象も起きています。こうした現象に対策するためにも、XMLサイトマップを作っておきましょう。

SEOには直接影響ありませんが、XMLサイトマップを作ったほうがインデックス処理時間が早くなる傾向があります。

WordPressでXMLサイトマップを作る方法

WordPressでXMLサイトマップを作る場合、プラグインを利用することをおすすめします。

おすすめのXMLサイトマップ生成のプラグインは「XML Sitemaps」になります。

XML作成手順と設定方法を解説します。

XML Sitemapsのインストール

WordPressのプラグイン「新規追加」から、「XMLSitemaps」を検索して「今すぐインストール」をクリックしてください。

インストールが完了したら「有効化」してください。

「設定」⇒「XML Sitemap」に移動してください。

XML Sitemapsの各種設定

各種設定について説明します（ほとんどの項目はそのままで大丈夫です。）

「基本的な設定」は変更なしでOKです。

各項目の意味は以下になります。

Notify Google about updates of your site記事作成や更新するごとにGoogleに通知します（Yahooも）。
Notify Bing (formerly MSN Live Search) about updates of your site記事作成や更新するごとにBingに通知します。
サイトマップのURLを仮想robots.txtファイルに追加robots.txtにXMLサイトマップURLが記述されます。
Try to automatically compress the sitemap if the requesting client supports it.サイトマップが圧縮されます。
XSLTスタイルシートを含めるXML文書形式を変換します。
HTML形式でのサイトマップを含めるHTML形式でサイトマップを生成します。

「Additional Pages」も変更なしでOKです。

例えばWordPressをサブディレクトリやサブドメインにインストールしている場合、追加することで別ページを登録することができます。

「投稿の優先順位」は”優先順位を自動的に計算しない”にチェックしてください。

コメント数にすると、予期しないページに優先権が行ってしまうからです。

「Sitemap コンテンツ」も変更なしでOKです。

もしカテゴリーページをXMLに含めたい場合はチェックしてください。

「Excluded Items」も変更なしでOKです。

サイトマップに含めたくないカテゴリーなどがあるときだけ設定してください。

「Change Frequencies」は以下の設定にすることをおすすめします。

デフォルトから変更した箇所のみ赤枠で囲っています。

「投稿」は、ブログなら投稿ペース（今回は毎日を想定）に合わせてください。

「優先順位の設定 (priority)」は変更なしでOKです。

現在、SEOでこの数値は無視される仕様に変更になりました。

設定が完了したら「設定を更新」をクリックしてください。

ドメイン/sitemap.xmlにアクセスすると以下のようにXML生成の記録が表示されます。

Search Console（サーチコンソール）にXMLサイトマップを送信

XMLサイトマップの生成が完了したら、Search Consoleにサイトマップを送信します。

Search Consoleからサイトマップ送信することで、早くインデックスされる可能性が高くなります。

「新しいサイトマップの追加」に生成したサイトマップのURLを入れて「送信」をクリックしてください。

これでXMLの登録は完了です。

WordPress XMLサイトマップの設定まとめ

今回はプラグイン「XML Sitemaps」を使ったサイトマップの生成～登録方法を解説しました。

こちらでおすすめのWordPressプラグインも紹介しているので参考にしてください。

CSSボタン【サンプル集】コピペOKのデザインまとめ

HTML・CSS

ベーシック

ベーシックなボタン
コードを見る

<a href="" class="btn_basic">ベーシック</a>
        

.btn_basic{
  text-decoration: none;
  display: inline-block;
  width: 100%;
  max-width: 300px;
  padding: 1em 0;
  text-align: center;
  border-radius: 1.8em;
  color: #fff;
  background-color: #DF5E5E;
}
ベーシック・四角
コードを見る

<a href="" class="btn_sbasic">ベーシック・四角</a>
        

.btn_sbasic{
  text-decoration: none;
  display: inline-block;
  width: 100%;
  max-width: 300px;
  padding: 1em 0;
  text-align: center;
  color: #fff;
  background-color: #DF5E5E;
}

グラデーション

グラデーション
コードを見る

<a href="" class="btn_gradation">グラデーション</a>
        

.btn_gradation{
  text-decoration: none;
  display: inline-block;
  width: 100%;
  max-width: 300px;
  padding: 1em 0;
  text-align: center;
  border-radius: 1.5em;
  color: #fff;
  background-image: linear-gradient( 68.3deg,  rgba(245,177,97,1) 0.4%, rgba(236,54,110,1) 100.2% );
}
グラデーション四角
コードを見る

<a href="" class="btn_sgradation">グラデーション四角</a>
        

.btn_sgradation{
  text-decoration: none;
  display: inline-block;
  width: 100%;
  max-width: 300px;
  padding: 1em 0;
  text-align: center;
  color: #fff;
  background-image: linear-gradient( 68.3deg,  rgba(245,177,97,1) 0.4%, rgba(236,54,110,1) 100.2% );
}
グラデーション別ver.
コードを見る

<a href="" class="btn_gradation2">グラデーション別ver.</a>
        

.btn_gradation2{
  text-decoration: none;
  position: relative;
  display: inline-block;
  width: 100%;
  z-index: 1;
  max-width: 300px;
  padding: 1em 0;
  text-align: center;
  background: linear-gradient( 68.3deg,  rgba(245,177,97,1) 0.4%, rgba(236,54,110,1) 100.2% );
  border-radius: 1.5em;
}
.btn_gradation2::before{
  content: "";
  position:absolute;
  top:0;
  left:0;
  z-index: -1;
  box-sizing: border-box;
  border-radius: 1.5em;
  padding: 4px;
  width: 100%;
  height: 100%;
  background: #fff;
  background-clip: content-box;
}
グラデ別ver.四角
コードを見る

<a href="" class="btn_sgradation2">グラデ別ver.四角</a>
        

.btn_sgradation2{
  text-decoration: none;
  display: inline-block;
  width: 100%;
  max-width: 300px;
  padding: 1em 0;
  text-align: center;
  color: #EC366E;
  border: 4px solid #EC366E;
  border-image: linear-gradient( 68.3deg,  rgba(245,177,97,1) 0.4%, rgba(236,54,110,1) 100.2% );
  border-image-slice: 1;
}

二重線

二重線
コードを見る

<a href="" class="btn_wline">二重線</a>
        

.btn_wline{
  text-decoration: none;
  display: inline-block;
  width: 100%;
  max-width: 282px;
  margin: 9px;
  padding: 8px 0;
  text-align: center;
  box-shadow: 0 0 0 3px #DF5E5E, 0 0 0 6px #fff, 0 0 0 9px #DF5E5E;
  border-radius: 1.5em;
  color: #DF5E5E;
  box-sizing: border-box;
}
二重線・四角
コードを見る

<a href="" class="btn_swline">二重線・四角</a>
        

.btn_swline{
  text-decoration: none;
  display: inline-block;
  width: 100%;
  max-width: 282px;
  margin: 9px;
  padding: 8px 0;
  text-align: center;
  box-shadow: 0 0 0 4px #B089E0, 0 0 0 6px #fff, 0 0 0 8px #B089E0;
  color: #945FD5;
  box-sizing: border-box;
}
二重線別ver.
コードを見る

<a href="" class="btn_wline2">二重線別ver.</a>
        

.btn_wline2{
  text-decoration: none;
  display: inline-block;
  width: 100%;
  max-width: 292px;
  margin: 4px;
  padding: 13px 0;
  text-align: center;
  box-shadow: 0 0 0 1px #fff, 0 0 0 4px #DF5E5E;
  border-radius: 1.5em;
  color: #FFFFFF;
  background-color: #DF5E5E;
  box-sizing: border-box;
}
二重線別ver.四角
コードを見る

<a href="" class="btn_swline2">二重線別ver.四角</a>
        

.btn_swline2{
  text-decoration: none;
  display: inline-block;
  width: 100%;
  max-width: 292px;
  margin: 4px;
  padding: 13px 0;
  text-align: center;
  box-shadow: 0 0 0 1px #fff, 0 0 0 5px #B089E0;
  color: #FFFFFF;
  background-color: #B089E0;
  box-sizing: border-box;
}
二重線別ver.
コードを見る

<a href="" class="btn_wline3">二重線別ver.</a>
        

.btn_wline3{
  text-decoration: none;
  display: inline-block;
  position: relative;
  width: 100%;
  max-width: 300px;
  padding: 21px 0 13px;
  text-align: center;
  border: solid 4px #DF5E5E;
  box-sizing: border-box;
}
.btn_wline3::before{
  content: "";
  position: absolute;
  top: 4px;
  bottom: -12px;
  right: -15px;
  left: 7px;
  border: solid 4px #DF5E5E;
}

破線

破線
コードを見る

<a href="" class="btn_dashedline2">破線</a>
        

.btn_dashedline2{
  text-decoration: none;
  display: inline-block;
  width: 100%;
  max-width: 300px;
  padding: 13px 0;
  text-align: center;
  border-radius: 1.5em;
  border: dashed 4px #DF5E5E;
  box-sizing: border-box;
}
破線・四角
コードを見る

<a href="" class="btn_sdashedline2">破線・四角</a>
        

.btn_sdashedline2{
  text-decoration: none;
  display: inline-block;
  width: 100%;
  max-width: 300px;
  padding: 13px 0;
  text-align: center;
  color: #945FD5;
  border: dashed 4px #B089E0;
  box-sizing: border-box;
}
破線別ver.
コードを見る

<a href="" class="btn_dashedline">破線別ver.</a>
        

.btn_sdashedline{
  text-decoration: none;
  display: inline-block;
  width: 100%;
  max-width: 290px;
  margin: 5px;
  padding: 12px 0;
  text-align: center;
  box-shadow: 0 0 0 5px #B089E0;
  border: dashed 2px #fff;
  color: #FFFFFF;
  background-color: #B089E0;
  box-sizing: border-box;
}
破線別ver.四角
コードを見る

<a href="" class="btn_sdashedline">破線別ver.四角</a>
        

.btn_sdashedline{
  text-decoration: none;
  display: inline-block;
  width: 100%;
  max-width: 290px;
  margin: 5px;
  padding: 12px 0;
  text-align: center;
  box-shadow: 0 0 0 5px #B089E0;
  border: dashed 2px #fff;
  color: #FFFFFF;
  background-color: #B089E0;
  box-sizing: border-box;
}

点線

点線
コードを見る

<a href="" class="btn_dottedline">点線</a>
        

.btn_dottedline{
  text-decoration: none;
  display: inline-block;
  width: 100%;
  max-width: 300px;
  padding: 12px 0;
  text-align: center;
  border-radius: 1.5em;
  border: dotted 5px #DF5E5E;
  box-sizing: border-box;
  color: #DF5E5E;
  font-weight: bold;
}
点線・四角
コードを見る

<a href="" class="btn_sdottedline">点線・四角</a>
        

.btn_sdottedline{
  text-decoration: none;
  display: inline-block;
  width: 100%;
  max-width: 300px;
  padding: 12px 0;
  text-align: center;
  border: dotted 5px #B089E0;
  box-sizing: border-box;
  color: #945FD5;
  font-weight: bold;
}

シャドウ

シャドウ
コードを見る

<a href="" class="btn_shadow">シャドウ</a>
        

.btn_shadow{
  text-decoration: none;
  display: inline-block;
  width: 100%;
  max-width: 300px;
  margin: 4px;
  padding: 1em 0;
  text-align: center;
  box-shadow: 4px 4px 8px 0px rgba(195,136,65,0.6);
  border-radius: 1.8em;
  color: #FFFFFF;
  background-color: #DF5E5E;
}
シャドウ・四角
コードを見る

<a href="" class="btn_sshadow">シャドウ・四角</a>
        

.btn_sshadow{
  text-decoration: none;
  display: inline-block;
  width: 100%;
  max-width: 300px;
  margin: 4px;
  padding: 1em 0;
  text-align: center;
  border: 1px solid #D1BCED;
  box-shadow: 4px 4px 8px 0px rgba(194,165,231,0.5);
  color: #945FD5;
}

WordPressの使い方【初心者が最初に覚えること】

ブログ

WordPressを設置してもらったけど使い方がわからないウェブ担当の方や、こらからブログを始める方に向けたWordPressの使い方を解説します。

まずは最低限の使い方を覚えれば、Wordpressでサイトを運用することができるようになります。

Wordpressの管理画面ログイン

Wordpressを更新するには、管理画面へのURLにアクセスしてログインする必要があります。

  1. http(s)://ドメイン名/wp-admin/
  2. http(s)://ドメイン名/wp-login.php

どちらのURLでもログイン画面にアクセスできます。

ドメイン名の部分を、あなたのサイトのドメインに書き換えてアクセスしてください。

アクセスをすると以下の画面になるので、ユーザー名（メールアドレス）とパスワードを入力して「ログイン」をクリックしてください。

ログインに成功すると、ダッシュボード（WordPress初期画面）に移動します。

もしログインのパスワードを忘れたときは「パスワードをお忘れですか？」をクリックしてください。

ユーザー名かメールアドレスを入力して「新しいパスワードを取得」をクリックすると、登録したメールアドレス宛にパスワード再発行メールが送信されます。

パスワード再発行メールが届くので、赤枠をクリックしてパスワードの再発行を行いましょう。

ユーザー名（メールアドレス）を忘れた場合、phpMyAdminというツールを使って確認するしかありません。初心者の方には難易度が高いので、ログイン情報は忘れないように気を付けてください。

ダッシュボードの構成

ログインに成功すると、ダッシュボードに移動します。

左メニューの赤枠の項目について説明します。

項目内容
投稿記事の作成・編集を行えます。
メディアWordPressで使う画像や動画を管理できます。
アップロードや編集機能もあります。
固定ページ固定ページの作成・編集を行えます。
コメント読者からのコメントの管理ができます。
外観WordPressのデザインの設定ができます。
プラグインプラグインの管理ができます。
ユーザーWordPressのユーザー追加・編集・削除がができます。
権限の設定もできます。
ツールWordPressデータのエクスポートやインポートができます。
設定各種設定が行えます。

上記の項目をすべて覚える必要はありません。

「投稿」「メディア」「固定ページ」「外観」「プラグイン」を使えれば、WordPressでサイトを運用できます。

まずは、一番使う「投稿」の使い方を説明します。

投稿の使い方

「投稿」をクリックすると投稿一覧画面になります。「新規追加」で記事の追加ができます。

記事は「ブロックエディター」と呼ばれる機能を使います。

ブロックエディタ（Gutenberg）は記事の装飾ができる機能です。ブロックエディタの使い方を理解すれば直感的に記事を書くことができるようになります。

本文にフォーカスを当てると、右側に「＋」ボタンがあります。ブロックごとに記事の装飾ができます。

ブロックごとに装飾した形が以下の緑枠になります。

※「外観」で選んだテーマやプラグインによって、利用できるブロックの種類が増えることがあります。

テーマによっては、以下のように装飾の幅が広がるものもあります。

記事の公開

記事が完了して公開するときは右上にある「公開」をクリックしてください。

記事の途中で保存する場合は、公開の左側にある「下書き保存」で保存できます（公開されません）。

また記事のデザインを見たい時は「プレビュー」で確認することができます。

WordPressの投稿は外観の「テーマ」によって使える機能が異なります。

初期テーマではできることが少ないのですが、テーマによっては上記の黄色の枠のような装飾も簡単に行うことができます。

メディアの使い方

メディアは画像の追加/編集/削除ができる機能になります。

投稿や固定ページで追加した画像は、ここで確認することができます。

画像を追加するときは「新規登録」をクリックしてください。

画像をクリックすると、詳細の確認や削除をすることができます。

記事に使用している画像を削除をすると、記事で表示されなくなるので注意してください。

固定ページの使い方

※1 固定ページは「プライバシーポリシー」や「お問い合わせ」のような、ブログ記事とは違うページを作るときに利用します（設計次第なので使わなくてもOK)。

使い方は「投稿」と同じでブロックエディターで編集することができます。

外観の使い方

外観を変更することで、デザインを変えることができます。

WordPressをインストールすると、初期でいくつかのテーマが一緒にインストールされています（赤枠のもの）。

テーマは初期のものでも良いのですが、カスタムしやすいテーマに変更することをおすすめします。

テーマを変えることで、記事の執筆スピードが速くなったり、サイトが見やすくなったりとメリットがたくさんあるからです。

WordPressのテーマを変える方法は3つあります。

管理画面の「新しいテーマを追加」からテーマを探す

WordPressに登録されているテーマが表示されるので、好きなデザインを探してください。

画像にフォーカスを当てると「詳細＆プレビュー」になるので、プレビューでどんなデザインかを確認してください。

使ってみたい場合は「インストール」をクリックして「有効化」をクリックしてください。

配布サイトからダウンロードして追加する

WordPressに登録されているテーマ以外にも、テーマを提供（無料と有料）してくれるサイトがあります。

こうした配布されているテーマを追加する方法を解説します。

テーマの「新規追加」をクリックしてください。

「テーマのアップロード」をクリックして「ファイルを選択」で使うテーマを選択します。

テーマをアップロードする場合、zipファイルにする必要があります。ほとんどの配布元サイトではzipファイルで準備されているので、そのままアップロードしましょう。

「今すぐインストール」をクリックしてください。

アップロードが完了したら「有効化」をクリックしてください。

テーマが有効化されました。

テーマによって設定が違うので、設定を行ってサイトを公開してください。

WordPressの外観は「ウィジェット」や「メニュー」など、テーマごとに使える機能があります。サイトに合った設定をすることで、テーマを最大限に使うことができます。

ブロガーなどに人気のWordPressテーマには以下のものがあります。

人気のWordPressテーマ
  • Cocoon
  • AFFINGER6
  • JIN
  • SANGO
  • THE SONIC

この他にもあるので、これからサイトやブログを始める方は、こうしたテーマを使うのもおすすめです。

プラグイン

WordPressは初期状態でもサイトやブログを運営することができます。

ですが、使っていくうちに「こんな機能があったらいいな…」といった要望が出ることも多いです。

プラグインはWordPressに新しい機能を追加する方法になります。※なんでもできるわけではありませんが、今はプラグインも多くできることが凄く増えました。

プラグインを管理する方法を解説します。

プラグインの追加

「プラグイン」の「新規追加」をクリックしてください。

「キーワード」で追加したいプラグインを検索します。

希望するプラグインが見つかったら「今すぐインストール」をクリックしてください。

インストールが完了したら「有効化」をクリックしてください。

有効化したら必要な設定を行って下さい。（設定が不要のプラグインもあります）

プラグインの管理方法

インストール済みのプラグインは一覧画面で管理することができます。

「有効化」でプラグインを有効にできます。「削除」でプラグインを削除できます。

有効化されているプラグインを無効にする場合は「無効化」をクリックしてください。

プラグインは便利なのですが、使い方によってはサイトの表示が遅くなるなどの弊害もあるので注意してください。

WordPress使い方まとめ

WordPressは慣れてくると記事作成が簡単になり、ウェブの知識がない方でも更新ができるようになります。

カスタマイズ性も高く、プラグインやテーマを利用すればSEOやセキュリティの強いサイトに作りこむこともできます。

最初は難しいですが、少しづつ覚えていけば自分でサイトを更新することができるようになりますよ。

WordPressで気を付けたいこと

WordPressを導入しているサイトで、バージョンアップをしていないサイトも少なくありません。

WordPressのアップデートを行わないとセキュリティが弱くなり外部から攻撃されたときにデータを損失するリスクがあります。

業者に作ってもらってバージョンアップをせずそのままにしているサイトも多いので、セキュリティまで考えてアップデートは必ず行いましょう。

今はレンタルサーバーなどでもバックアップ機能がありますが、復元は簡単ではないのでしっかりとアップデートは行いましょう。

WordPress（ワードプレス）の初期設定【最低限やっておくべき7項目】

ブログ

WordPressをインストールしたあとに、やっておくべき初期設定について

ワードプレスをこれからインストールするなら、「WordPressが使えるレンタルサーバー比較」を参考にしてください。

  1. 一般設定
  2. 表示設定
  3. ディスカッション設定
  4. メディア設定
  5. パーマリンク設定
  6. ニックネーム設定
  7. サンプルページの削除

最初にすべきはこれらの設定になります。

一般設定

ダッシュボードの「設定」⇒「一般」で一般設定を行いましょう。

「サイトのタイトル」は、サイトやブログの名前になるので覚えやすいものにしておきましょう。

キャッチフレーズは任意になりますが、初期だと「Just another Wordpress site」となるので変更しておきましょう（不要であれば空欄でもOKです）。

WordPressアドレスとサイトアドレスは、基本的にそのままで良いのですが「https://」となっているかだけ確認しておいてください。

http://⇒https://に変更すると一度ログアウトになるので、再度ログインしてください。

表示設定

表示設定はそのままでも問題ないのですが、トップページに表示する記事数を変更する場合だけ「1ページに表示する最大投稿数」を変更してください。

※利用するテーマのレイアウトに合わせることをおすすめします。

ディスカッション

ディスカッションで必要なのはコメントの設定になります。

他人からのコメントが不要な場合は「新しい投稿へのコメントを許可」のチェックを外してください。

もしコメントを許可する場合でも、「コメントの投稿者の名前とメールアドレスの入力を必須にする」のチェックは外さないようにしましょう（スパム対策）。

※これだけで完全なスパム対策は難しいので、別途プラグインを使うことをお勧めします。

メディア設定

メディア設定は初期のままでもOKなのですが、画像のサイズを変更するときは数字を変えましょう。

パーマリンク設定

パーマリンクは記事のURLになります。

パーマリンクは自由に設定できる「投稿名」を選びましょう。

※パーマリンクの設定はプラグインで行うことも可能です。

ニックネームの設定

Wordpressの投稿者名は、初期状態でログインの時に使用する「ユーザー名」が設定されています。

この状態にしておくと、ログインユーザー名が誰でもわかってしまうのでセキュリティ的に良くありません。

「ユーザー」→「プロフィール」からニックネームとブログ上の表示名を変更しましょう。

サンプルページの削除

Wordpressは初期状態で投稿と固定ページにサンプルページがあるのですが、不要なのでゴミ箱へ移動しましょう。

CPIレンタルサーバーWordPress ブログの始め方

CPI レンタルサーバー

CPIでWordPress（ワードプレス）を使ったブロ ストールする手順について解説します。

今回WordPressをインストールするのは「SV-Basic」シェアードプランになります。

CPI【公式サイト】

【CPI】WordPressブログの始め方

STEP.1 CPIの申込

こちらのCPI公式サイトにアクセスをして、レンタルサーバーをクリックして「シェアードプランお申し込み」をクリックしてください。

「レンタルサーバのみご契約（ドメイン取得済み）」にチェックをして、月額費用を選択してください（長期割引があります）。

CPIでドメインを取得する場合は「ドメイン取得代行＋レンタルサーバご契約」を選択して下さい。ドメインとサーバーを一元管理したい場合におすすめです。

ドメインの料金は他社が安い場合もあるので、金額を確認してから決めることをおすすめします。

ドメイン名を入力して「CPIのDNSサーバーを利用する」にチェックして「次の画面へ進む」をクリックしてください。

「このオプションを申し込む」の「標準装備のSSLを無料で申し込む」をチェックして「次の画面へ進む」をクリックしてください。

有料SSLは料金が高くなるため必要よく検討してください。

申込内容を確認して「同意する」にチェックをしたら「確認する」をクリックしてください。

契約情報を入力して「次の画面へ進む」をクリックしてください。

認証用メールアドレスを選択して、登録担当者を入力します。

完了したら、「CP/CPSに同意する」にチェックをして「次の画面へ進む」をクリックしてください。

内容を確認して「お申し込み」をクリックしてください。

申込の完了です。メールが届くので確認をしてください。

申込後、サーバー設定が完了したら、サーバー情報が記載されている以下のメールが届きます。時間がかかるので、営業日当日15時までの申込で当日中に設定が完了します。

パスワードのメールは別途送信されます。

データベース情報のパスワードは、WordPressのインストールに必要なので忘れないようにしてください。

STEP.2 WordPressのインストール

メールに記載されているコントロールパネルURLにログインします。

メニューの「WEB」をクリックしてください。

「簡単インストール」の「WordPress」をクリックしてください。

インストール先ディレクトリの「html」をクリックして、「ご利用事項に同意の上」をチェックして「インストールする」をクリックしてください。

インストールが完了しました。

CPIの簡単インストールは、WordPressのファイル一式をサーバー上に載せているようです。設定は別途必要になります。

「さあ、始めましょう！」をクリックしてください。

データベースの情報を入力してください。

データベース名、ユーザー名、データーベースのホスト名、テーブル接頭辞はそのままでOKです。パスワードはサーバー設定完了メールに記載されていたデータベースのパスワードを入力してください。

「インストール実行」をクリックしてください。

WordPressの情報を入力してください。サイトのタイトルなどは後から変更可能です。

インストール完了です。「ログイン」をクリックして、WordPressにログインしてください。

設定したログイン情報でWordPressにログインすることができます。

CPIのWordPressインストールはこれで完了です。

CPIでWordPressを始める

CPIのメリット

  • 自動バックアップ
  • テストサイトが使える
  • 電話・メールでのサポート
CPI【公式サイト】

StarServer（スターサーバー）WordPress ブログの始め方

スターサーバー レンタルサーバー

StarServer（スターサーバー）で WordPress（ワードプレス）を使ったブログの始め方を解説します。

今回WordPressをインストールするのは「ライト」プランになります。

スターサーバーはこの他に「スタンダード」、「ハイスピード」、「エンタープライズ」プランがあります。

エコノミープランはWordPressが利用できないので注意してください。

スターサーバー【公式サイト】

【スターサーバー】WordPressブログの始め方

STEP.1 スターサーバーの申込

こちらのスターサーバー公式サイトにアクセスをして、ライトプランの「まずは2週間無料お試し」をクリックしてください。

Netowl（ネットオウル）のログイン画面になるので、「新規会員登録」をクリックしてください。

Netowlはスターサーバーやスタードメインなどを運営している企業になります。

認証のためにメールアドレスを入力してください。

認証メールが送信されたのでメールを確認してください。

認証IDを入力して「登録フォームへ移動」をクリックしてください。

登録情報を入力して「利用規約に同意する」にチェックをして、「確認画面へ」をクリックしてください。

キャンペーン情報やニュースリリースは不要であればチェックを外してください。

内容を確認して「SMS認証・電話認証をする」をクリックしてください。

認証コード送信のため、電話番号を入力してください。

電話に届いた認証コードを入力してください。

認証コード入力に成功すると以下の画面になるので少し待って下さい。画面が切り替わらない時は「移動する」をクリックしてください。

Netowlのメンバー管理ツール画面になるので、決済情報の登録の「登録する」をクリックしてください。

決済情報を入力してください。

内容を確認して「この内容で登録する」をクリックしてください。

サービス選択画面になるので、レンタルサーバーを使うの「申し込む」をクリックしてください。

「ライト」プランの「申し込む」をクリックしてください。

お申し込み情報を入力して「確認画面へ」をクリックしてください。

サーバーIDはこのままでも問題ありませんし、好きな英数字に変更してもOKです。

内容を確認して「この内容で申し込む」をクリックしてください。少し時間がかかるので待っていてください。

申込完了です。

STEP.2 独自ドメインの申込

WordPressを独自ドメインで運用するため「スタードメイン管理」で新規ドメインの取得を行います。

「新規取得」をクリックしてください。

取得したいドメイン名の入力と、末尾（.comなど）を選択して「ドメイン名をチェック」をクリックしてください。

取得できますとなったら、「取得する」をクリックしてください。

レジストラの選択は「Netowl」でOKです。支払いはクレジットの他にプリペイドもあります。

入力して「利用規約に同意する」にチェックをしたら「確認画面へ」をクリックしてください。

内容を確認して「この内容で決済する（確定）」をクリックしてください。

申し込みが完了しました。

STEP.3 独自ドメインの設定

独自ドメインの設定を行うため「スターサーバー管理」をクリックしてください。

「サーバー管理ツール」をクリックしてください。

「ドメイン設定」をクリックしてください。

「ドメイン追加」をクリックしてください。

「スタードメイン管理のドメインを追加する」をクリックしてください。

スタードメイン以外のドメインを使う場合は「他社管理のドメインを追加する」をクリックしてください。

先ほど取得したドメインを選択してください。

確認をして「確定する」をクリックしてください。

ドメインが追加されました。FTP情報はメモをしておいてください。

続いてWordPressのインストールを行うので「簡単インストール」をクリックしてください。

STEP.4 WordPressのインストール

WordPressを利用するドメインを選択します。今回はwebone-sendai.meを使います。

「追加インストール」をクリックしてください。

WordPressの「インストール設定」をクリックしてください。

WordPressの情報を入力して「確認画面」をクリックしてください。

ブログ名などは後から変更も可能です。

内容を確認して「確定する」をクリックしてください。

インストールが完了しました。

独自ドメインを新規で追加した場合、以下の画面になりドメインの浸透に少し時間がかかるので待っていてください。

設定完了後に、設定したログイン情報でWordPressにログインすることができます。

スターサーバーのWordPressインストールはこれで完了です。

STEP.5 SSLの設定

WordPressのインストールが完了したら、SSLの設定を行います。

スターサーバー管理ツールの「SSL設定」をクリックしてください。

SSLを設定するドメインの「選択」をクリックしてください。

「無料独自SSL追加」をクリックしてください。

対象のドメインが選択されていることを確認して「独自SSL設定を追加する（確定）」をクリックしてください。

CSR情報はチェックしないでOKです。

設定が完了しました。

少し時間を待って「https://～」でアクセスできることを確認してください。

設定が完了すると鍵マークがつきます（Google Chrome）。

これでSSLの設定は完了です。

スターサーバーでWordPressを始める

スターサーバーのメリット

  • 独自ドメイン無料
  • 安い料金プランでブログが始められる
スターサーバー【公式サイト】

heteml（ヘテムル） WordPress ブログの始め方

ヘテムル レンタルサーバー

heteml（ヘテムル）で WordPress（ワードプレス）を使 ったブログの始め方を解説します 。

今回WordPressをインストールするのは「ベーシック」プランになります。

ヘテムルはこの他に「プラス」プランがあります。

ヘテムル【公式サイト】

【ヘテムル】WordPress ブログの始め方

STEP.1 ヘテムルの申込

こちらのヘテムル公式サイトにアクセスをして、「簡単登録でお申し込み」をクリックしてください。

ヘテムルドメイン、ヘテムルID、パスワード、メールアドレスを入力して「規約に同意して本人確認へ」をクリックします。

SMSによる本人認証を行います。

携帯電話に届いた4桁の認証コードを入力します。

申込完了になります。

契約をする場合は、契約者情報を入力します。お試し期間は契約者情報を設定しないで、このまま利用できます。

STEP.2 独自ドメインの取得（ムームードメイン）

ヘテムルでは独自ドメインの取得ができないため、他社でドメインを取得してヘテムルのDNSを設定する必要があります。ヘテムルはムームードメインを推奨しているので、今回はムームードメインでドメインを設定します。

ムームードメインに新規登録をします。

メールアドレスとパスワードを入力して、利用規約に同意するにチェックして「本人確認へ」をクリックしてください。

SMS認証を行います。

携帯電話に届いた認証コードを入力して「本人確認をして登録する」をクリックしてください。

ムームードメインの登録が完了しました。

続いて「ドメインを検索する」で取得したい独自ドメインを検索します。

ドメインを入力して「検索する」をクリックしてください。

取得可能なドメインが表示されるので、取得したい独自ドメインを「カートに追加」してください。

「お申し込みへ」をクリックしてください。

以下のメッセージが出た場合、「OK」を押してムームードメインで個人情報の設定を行います。

コントロールパネルが表示されるので、お客様情報を入力します。

入力後、以下のメッセージが表示されるので「OK」をクリックしてください。

ユーザー情報の変更が完了したので「OK」をクリックしてください。

右上のカートボタンをクリックして、独自ドメインを取得手続きをします。

「お申し込みへ」をクリックしてください。

WHOIS公開情報にチェックをして、ネームサーバー（DNS）をheteml（ヘテムル）にします。

今回はヘテムルのレンタルサーバーを利用するので、「2.ドメインの利用方法をお選びください」は「選択しない」にチェックしてください。

ムームーメールは「利用しない」でOKです。

お支払い情報を入力して「次のステップへ」をクリックしてください。

内容を確認して「取得する」をクリックしてください。

ドメインの取得中になります。

ドメインの取得が完了しました。

先ほどネームサーバー（DNS）をheteml（ヘテムル）に設定したので、ムームードメインの設定は完了です。

STEP.3 独自ドメインの設定（ヘテムル）

ヘテムルのコントロールパネルにログインをします。

「独自ドメインの設定」をクリックしてください。（右メニューの「ドメイン・メール」でもOKです）

「独自ドメインを設定する」をクリックしてください。

以下のメッセージが表示されますが、ムームードメインで独自ドメインを取得済みなので「OK」をクリックしてください。

ムームードメインで取得したドメインを「取得されているドメイン」に入力してください。

公開フォルダは独自ドメインと同じでOKです（変更しても問題ありません）。

以下のメッセージが表示されたら「独自ドメインを登録する」をクリックしてください。

ムームードメインでドメインを取得して数分～数時間経過しないとドメインが浸透していないため、このメッセージが表示されることがあります。

ドメインの登録完了です。

STEP.4 無料SSLの設定

ドメインの登録が完了して、数分から数時間経過したら無料SSLの設定も行いましょう。

ドメイン一覧で対象ドメインの「詳細を見る」をクリックしてください。

「設定変更」をクリックしてください。

「無料独自SSLを設定する」にチェックを入れて「変更する」をクリックしてください。

設定が完了しました。反映されるまで数分待ってください。

ドメイン一覧で「SSL設定中」になっていればOKです。

STEP.5 WordPressのインストール

「簡単インストール」をクリックしてください。

WordPressの「インストール画面へ進む」をクリックしてください。

インストール先URLは独自ドメインを設定します。

独自ドメインが表示されない場合は反映が完了していないため、時間をおいてから再度試してみて下さい。

データベースは「自動生成」でOKです。

以下のメッセージが表示されたら「OK」をクリックしてください。

設定完了後に、設定したログイン情報でWordPressにログインすることができます。

ヘテムルのWordPressインストールはこれで完了です。

ヘテムルでWordPressを始める

ヘテムルのメリット

  • 自動バックアップ
  • サーバー稼働率99.99%
  • 電話サポートあり
ヘテムル【公式サイト】

お名前.comレンタルサーバー WordPress ブログの始め方

お名前.com レンタルサーバー

お名前.comで WordPress（ワードプレス）を使ったブログの始め方を解説します。

今回WordPressをインストールするのは「RSプラン」になります。

お名前.comはこの他に「ホームページエディタープラン」、「Microsoft 365メールプラン」プランがあります。

お名前.com【公式サイト】

【お名前.com】WordPress ブログの始め方

STEP.1 お名前.comの申込

こちらのお名前.com公式サイトにアクセスをして、「レンタルサーバーを申し込む」をクリックしてください。

契約期間の選択と、独自ドメインを取得する場合は「独自ドメインを一緒に申し込む」を選択してください。

メールアドレスとパスワードを入力して「次へ」をクリックしてください。

STEP.2 独自ドメインの取得

取得したい独自ドメインの検索を行います。

取得可能なドメイン一覧が表示されるので、取りたいドメインにチェックをして「料金確認へ進む」をクリックします。

料金を確認して「次へ」をクリックしてください。

「Whois情報公開代行メール転送オプション」と「ドメインプロテクション」は必要であればチェックしてください（なしでもOKです）。

会員情報を入力します。

支払い情報を入力して「次へ」をクリックします。

クレジットカード以外でのお支払いは、「その他の支払い方法はこちら」をクリックしてください。

お名前.comの申込は完了です。

支払いが確認できサーバーの準備ができたら「 [お名前.com] レンタルサーバー　サーバー設定完了」メールが届きます。

 [お名前.com] レンタルサーバー　サーバー設定完了メールが届いたら、WordPressのインストールを行います。※少し時間がかかります。

STEP.3 WordPressのインストール

お名前.com Naviにログインします。

レンタルサーバーを選択して、コントロールパネルにログインします。

初期パスワードの変更が表示されるので、パスワードの変更を行ってください。

パスワードは強力な文字列にしないと「変更する」を押すことができません。もし変更するをクリックできなければ、こちらのサイトで強度最強のパスワードを作ってください。

変更後、サーバの説明があります。

WordPressのインストール画面になるので「作成する」をクリックしてください。

「新規作成」を選択します。

www.をつけてサイトを運用するなら、URLに「www.」を追加するにチェックしてください。

「情報を入力する」をクリックしてください。

ホームページのタイトルとメールアドレス、パスワードを入力します。タイトルなどは後から変更も可能です。

パスワードは強力な文字列にしないと「変更する」を押すことができません。もし変更するをクリックできなければ、こちらのサイトで強度最強のパスワードを作ってください。

内容を確認して「作成する」をクリックしてください。

以上で完了です。

設定完了後に、設定したログイン情報でWordPressにログインすることができます。

STEP.4 SSLの設定

お名前.com Naviにログインして、コントロールパネルの「ログイン」をクリックします。

メニューの「セキュリティ」⇒「SSL証明書」をクリックします。

「申し込む」をクリックします。

無料SSLを選択して「確認する」をクリックします。

「完了する」をクリックします。

一覧画面で無料SSLが「設定中」⇒「有効」になればOKです。

URLにアクセスして、鍵マーク（ブラウザはchrome）になれてSSL化されています。

お名前.comのWordPressインストールはこれで完了です。

長期契約の割引がお得なので、公式サイトなどの運営にもおすすめのレンタルサーバーです。

WordPressを利用するなら、候補の一つとして検討してみてください。

お名前.comでWordPressを始める

お名前.comのメリット

  • 独自ドメインが無料
  • サーバー稼働率が99.99％
  • 電話サポートアリ
お名前.com【公式サイト】