【ブログ初心者向け】ワードプレスでブログを始める時にやるべき設定まとめ

プロ引きこもりのヒキコモリズム井上(@luckyman0302)だ。

ぼくは本気でブログやってマネタイズまでするなら、経験上ワードプレスで最初からやることをおすすめしてる。はてなやライブドアもいいんだけど、あくまでレンタルのため消されるリスクは消せない

かといって数百記事ためてから移行となると超めんどくさいので、はやめにシフトすることをおすすめしてるよ(趣味ブログとかアフィリエイト程度ならはてななどでも問題ない)

この記事では、ワードプレスでブログ運営をするあなたのために、必要な設定に関してまとめていくので参考にしてね

１、まずワードプレスをインストールしよう！

まずはワードプレスのインストールを。ここはサーバー次第で若干変わるんだけど、おすすめはxサーバー。ここは自動インストール機能があるので簡単。

まずはエックスサーバーにてサーバー＆ドメイン契約

まずはサーバーとドメインの契約を済ませよう。超簡単。動画載せとくね

エックスサーバーの詳細はこちら

ドメインは何とればいい？

けっこう迷う人が多いので書いておく。基本的には.comか.netでいいかと！ここらへんは好み。で、ドメインは名前で取得するのがミソ。ブログ名だと変わる可能性があるため。ぼくがブログ名になってるのは、WPに移行する際に名前で作ったドメインがバグって終了したからw

例) yamadatarou.com

名前が被った場合は、適当に暗号いれればOK。生年月日などはセキュリティ上やめとくべし。

例) yamadatarou999.com

２、ワードプレスの自動インストールをしよう

次に自動インストール。これは超簡単。エックスサーバー前提で共有。

反映までに24時間くらいかかるので、ここまで終わったらちょっとコーヒーブレイクでも。焦らない焦らない。あ、ログイン情報はメモ帳にメモっとくべし！

３、反映するまでの間にテーマを選ぼう！

ワードプレスでおすすめなのは、有料テーマを使うこと。有料テーマであれば、CSSをそこまでいじらなくってもいろんな機能がついてくるので楽できる。ブロガーはあくまで書くことが仕事で、デザイン制作にそこまで時間をかけるのはナンセンス。

おすすめは買い切り10,800円のSTORKです。これはデフォルトでいっぱい機能がついてるから超おすすめ！スマホビュー特化だから時代的にも。お金出す価値ある！

関連記事👉 ワードプレステーマSTORKをおすすめする4つの理由

2018年現在、ぼくは上記テーマから乗り換えてるので、現在のオススメをまとめてみました

参考にどうぞ！

関連記事👉 プロブロガー厳選！ワードプレスのブログテーマおすすめ4選

機能の使い方や設定方法は販売者のサイトの「使い方」を読むべし！

ここのテーマのいいところはサポートがしっかりしてること。サイトにもまとまってるし、そこから問い合わせれば割とレスポンスよく返信がもらえる。

テーマのことはテーマの開発者に聞くがベスト！日本人なので安心。外人開発者だと問い合わせたくてもできない。英語だし。

>>公式サイトの使い方ページ(STORK)

「同じテーマみんな使ったら被らない？」って思う方、どうせ他のテーマでもかぶるから気にしない！

４、ワードプレスにログインできるようになったらテーマをインストール

３でダウンロードしたテーマを、インストールしよう。ここで親テーマ子テーマとでてくるけど、子テーマもインストールしておこう。親テーマだとアップデートがあった際に自分が書いたCSSが消えたりするので注意。

ワードプレスへのテーマのインストール方法動画

>>子テーマの扱い方はこちらを参照ください(STORK)

そのあと上記の手順通りに子テーマもインストール→有効化すればOK。ちゃんとできてると「外観→テーマ」でこんな画面になる。

▲こんな感じ

５、プラグインをインストールしよう！

プラグインをインストールしよう。プラグインはワードプレスブログにいろんな機能を入れてくれるサポートツールです。以下におすすめとその設定法をピックしておく。☆は絶対いれようぜなプラグイン。

プラグインダウンロード方法

追加すべし！なプラグイン

以下を追加しておこう！☆は必須だ！

☆Akismet

これはスパム防止のためのもの。必ずいれとこう！

>>akismetの有効かと設定方法

☆All In One SEO Pack

SEO対策やSNSにシェアした際のサムネイル反映などに使うもの。これ重要。

>>All In One SEO Packの設定方法

☆BackWPup

バックアップを自動でとるプラグインです。いざ消えたときのために入れとこう！なんどもブログ消えてるぼくが言うから間違いない。

>>設定方法

☆Black Studio TinyMCE Widget

編集画面でビジュアルエディタが使えるようになるもの。編集のしやすさが違うのでインストール決定。

>>Black Studio TinyMCE Widgetのインストールと設定

☆Broken Link Checker

被リンク切れを自動で判別して、修正までできる神プラグイン！被リンク切れしてるとSEO的に不利なのでこまめにチェックしておきたいよね。

>>設定方法と使いかた

Contact Form 7

お問い合わせフォームを設置するプラグイン。こんな感じの。メルマガ配信スタンドを契約してる方はメルマガスタンド埋め込んでもいいけど、そうでない方はこれでサクッと作ろう！企業だとSNSメッセを使わないこともあるので、利用すべし！

>>設置方法(インストールしたあとの手順)

Display Widgets

指定のコンテンツを特定のページだけに表示したり、非表示にしたりをできるプラグイン。大人なコンテンツだったりがある場合、これでアドセンスを表示させないことができたりして安心。きわどい記事で攻めたい人はいれとくべし！なもの。

>>設定方法と使い方

☆Google Authenticator

これは絶対いれとこう！セキュリティ面で重要。ワードプレスは自由度の高さゆえ、セキュリティに弱い。実際ぼくは3年前に一回クラッキングされて消されてる。ワードプレスはコンテンツで消されることはないけど、クラッキングで消されることはある。それを防ぐために必要。

このプラグインはいわゆるワンタイムパスワードでログインを二重ロックできるもの。ネットバンクみたいな感じ。これがあれば最悪ログインのアイパスが漏れても不正アクセスは防げる。絶対いれるべし！複数サイトにも適応可能。

>>設定方法

☆Google XML Sitemaps

サイトマップを自動生成するプラグイン。サイトマップがあるとGoogleパイセンがサイトの構造を理解しやすくSEOで有利になるのでいれとこう。

>>設定方法＆使い方

☆Jetpack by WordPress.com

いろんな機能が一括でつかえるようになるもの。ただ、パブリサイズ共有(SNSへの自動投稿)は、Facebookには使わない方がおすすめ。

>>機能説明と設定方法

☆Movable Type and TypePad Importer

無料ブログ→ワードプレスに乗り換えるときに記事データを移転するプラグインです。そんな滅多には使わないけど、使う際に必要。あとで書く移行作業のところで必要。

>>使い方など

☆PS Auto Sitemap

読者向けサイトマップページを作成できるプラグイン。こんなの。

>>設定方法

Ptengine – Real time web analytics and Heatmap

PTエンジンというヒートマップ分析をワードプレスのダッシュボード内で使えるようになるプラグイン。PTエンジンってなんだ？っていうのはこちらの記事を。便利。

>>プラグインの設定方法はこちら

☆PubSubHubbub

Googleに速攻インデックスをプッシュできるプラグイン。重要。ないよりはある方がいい.Googleウェブマスターツールも使うとよりいい。

>>設定方法

Q2W3 Fixed Widget

サイドバー追尾できるもの。指定したサイドバーウィジェットが一定のスクロール比率で追尾する。ぼくのサイトもそうなっている。

>>設定方法などはこちらを参照に

Shortcodes Ultimate

ぼくはあまり使ってないけど、いろんなショートコード(暗号のイメージ)でいろんな編集ができるもの。あんま使わない気もするけど凝りたい人はどうぞ。

>>機能や設定方法解説

☆SNS Count Cache

SNSのシェア数をキャッシュして、サイトの高速化ができるプラグイン。

>>設定方法など

Table of Contents Plus

目次を表示できるプラグインで、目次の表示階層やデザインもいじくれる。あると読者のユーザビリティが上がるのでいれとくといい。挿入場所も変えられるけど、一つ目の見出し上がベター。

>>設定方法など

☆TinyMCE Advanced

ビジュアルエディタの編集画面がカスタムできるプラグイン。使いやすくできるのでおすすめ！

>>使い方と設定

☆WordPress Ping Optimizer

記事送信後、自動でping送信してインデックスを早めるためのプラグイン。やることないのでいれとこう！設定も超楽。

>>設定方法と登録すべきping一覧

WordPress Popular Posts

人気記事を自動で選出して表示するもの。

>>設定方法

WordPress Related Posts

関連記事を自動表示するプラグイン。記事下で回遊を起こすためにいれとこう。とはいえ、あくまで回遊をしやすくさせるものだから、効果は絶対ではない。表示させる際はリストがおすすめ。

>>設定方法と使い方

WP Multibyte Patch

日本のワードプレスならデフォルトで入ってるはず。特段大きな効果や設定はないけど、有効にしておこう。

>>設定などはこちら

☆WP User Avatar

STORKの場合、プロフ写真をプラグインで表示させられる。2つ方法があるけど、このプラグインでやったほうが簡単なのでおすすめ。

>>設定や使い方はこちらの記事

６、はてなブログなどからの移転の場合(超注意！)

ここでは無料ブログからの移転について。結論から言うと、ぼくは失敗した。ワードプレス→無料ブログの移転は簡単なんだけど、逆の情報がほぼなかった。なので慎重にやるようにしよう。

ちなみにここで上記プラグインのMovable Type and TypePad Importerを使います。

アメブロから移転する場合

アメブロ→ワードプレスに行くのは比較的に簡単。ツールもあるし。が、デメリットがある。

アメブロは独自ドメイン運営がそもそも不可なので、移転＝新しく始めるに等しい(amebaドメインだから引き継げない)。

ということ。つまり、評価を引き継げないから単純にPVガクっと落ちるし、集客力も下がる。なので、ぼくだったらワードプレスに移転する…という投稿をアメブロのトップにおいてそこから誘導し、記事は移転しない。

>>それでも丸ごと移転したい！って方はこちらがわかりやすいです。

ライブドア→ワードプレスに移転

ライブドアからは詳しい情報がありますな！サクッとその記事だけ載せておく。

>>こちらが最高に詳しい記事

FC2→ワードプレスに移転

これも詳しいステップバイステップで書かれているサイトがあったので紹介。FC2ユーザーは大変参考になるはず。

>>こちらを参照にどうぞ！

はてなブログ→ワードプレスに移転

ぼくがやった時はなかったのに、今になって情報が出てきてた。ぼくのときはマジでなかったからな..。早く移転しすぎもよくなかったか…。笑

ぼくがドメインがバグったのはたぶん301リダイレクト設定をやってしまったからだと思う。それ、できないらしい。はてなぶろぐは。それなのにやっちゃったので終わったんだと仮定している。(記事の移転自体は楽だけど、URL引き継ぎなどで苦戦した。)

今は幸い情報が出てるので、以下に質がいいものを羅列する。それを参照しつつ、慎重にやっていくことをおすすめするよ。

1. http://anshinmoufu03.tokyo/tumblrtowordpress
2. http://meitaku-floor.com/hatena-wordpress-idou/
3. http://zerotsuku.hatenablog.com/entry/2016/01/18/122219

コツは、マジで焦らず腰をすえてやること。早くやりきるのは大事なんだけど、速さにこだわるとぼくのように凡ミスしてドメインパワーをドブに捨てることとななる。 ぼくは一晩ですべてやりきろうとしたので、凡ミスしてもうた。

焦らなーい。焦らなーい。

仮にドメインがバグっても案ずることなかれ

たとえばぼくのぶろぐはドメインが変わったので15万PV以上だったのが現在5万PV程度になっている。半年かけてここまできた。ただ、影響力ってのは残るので仮に0スタートになっても、今までとは全然違うスタートが切れる。仮にまだ数字でてない段階であれば、気にしなければいい。

広告にマネタイズを頼ってる場合、こういう不慮の事故に弱いので、なるだけ広告以外のマネタイズをしておこう。ぼくはもともと広告以外でやってたのでPV落ちても収益は普通に上がっている。

あんまりこわがらずに運営しよう！あとは、今のブログとは別のメディアをワードプレスで作って分散させるのも手。

７、デザインの詳細をCSSでいじる(コードあげます)

ここから先はSTORKでないテーマでも使えるはず。もちろん、テーマごとで使われてるコードなどが違うので微妙にエラー起こすとかはありえる。そこらへんはしっかりバックアップとった上でテストを。あくまでSTORK推奨！

>>STORKを購入する

まずはワードプレスのどこをいじるのか？

「外観」→「テーマの編集」→「スタイルシート(style.css)」と遷移して見てほしい。そうするとこの画面になるはず！

デフォルトで入ってるコードは絶対消さないように！注意！

見出しデザインをいじくる

見出しは好みもあるので各自で詳細はいじってほしいんだけど、基本使うのは見出し2~4または見出し3~5でOK。ただSTORKの場合デフォルトのだと2が背景色付きになってるので、サイトの色彩が合わないことがあったりする。ぼくはモノトーン好きなので、２は使わず3~5をいじってる。

ヒキコモリズムでいう吹き出しぽい上下線が見出し3、上下線のみは見出し4、　縦線のみは見出し5。見出し2を使わないとSEO不利と勘違いされるけど、あくまでGoogleは階層を理解するために見出しを見るので、重要なのは大見出し→中見出し→小見出しと使うこと。

なので、ぼくのCSSをそのまま利用する場合は3~5で使ってね。

見出し３

以下のCSSを。

/* 見出しのリセット */
.entry-content h3,
.entry-content h3::before,
.entry-content h3::after {
background: none;
border: none;
border-radius: 0;
}
.entry-content h3 {
position: relative;
color: #111;
padding: 10px 15px;
background-color: #fff;
border-radius: 0px;
border-top: 3px solid #000000!important;
border-bottom: 3px solid #000000!important;
margin-left: -10px;
margin-right: -10px;
}
.entry-content h3::before{
position: absolute;
top: 100%;
left: 32px;
width: 0;
height: 0;
border-width: 10px;
border-style: solid;
border-color: transparent;
border-top-color: #000000;
content: ”;
}

@media only screen and (max-width: 320px) {
.entry-content h3 {
padding: 10px 32px;
}
}

デフォルトのCSSを打ち消して、新たなCSSを反映させる構図。

• 線の色を変えたい：#000000の色コードを変える。この記事にまとまってる。
• 文字色を変えたい：#111を変える
• 線の太さを変えたい：border-top: 3pxの3pxの数字を変える

見出し4

以下のCSSを。

/* 見出しのリセット */
.entry-content h4,
.entry-content h4::before,
.entry-content h4::after {
background: none;
border: none;
border-radius: 0;
}
.entry-content h4 {
padding: 10px 15px;
color: #111;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
margin-left: -10px;
margin-right: -10px;
}

見出し５

以下のCSSを。

/* 見出しのリセット */
.entry-content h5,
.entry-content h5::before,
.entry-content h5::after {
background: none;
border: none;
border-radius: 0;
}
.entry-content h5 {
padding: 5px 10px;
color: #111;
border-left: 4px solid #000000;

}

カエレバ、ヨメレバのカスタム

カエレバ、ヨメレバとは？はこちらの記事を。これの表示をちょっとオシャレにするためのものが以下のコード。CSSは以下を。

/*————————————–
ヨメレバ・カエレバ（レスポンシブ）
————————————–*/
.kaerebalink-box,
.booklink-box,
.pochireba{
background: #f9f9f9;
margin: 1em 0;
padding: 1em;
min-height: 160px;
border: 5px #eee solid;
border-radius: 0.5em;
-webkit-box-shadow: 0 0 25px #f1f1f1 inset;
-moz-box-shadow: 0 0 25px #ddd inset;
-o-box-shadow: 0 0 25px #f1f1f1 inset;
box-shadow: 0 0 25px #f1f1f1 inset;
}
.kaerebalink-image,
.booklink-image,
.pochireba img{
width:30%;
float:left;
margin:0 1em 0 0;
text-align: center;
}
.kaerebalink-name a,
.booklink-name a,
.pochi_name a{
font-weight:bold;
font-size:1.2em;
}
.pochi_name a{
margin-bottom: 0.8em;
display: block;
}
.kaerebalink-powered-date,
.kaerebalink-detail,
.booklink-powered-date,
.booklink-detail,
.pochi_seller,
.pochi_time,
.pochi_post{
font-size:0.6em;
}
.kaerebalink-link1,
.booklink-link2{
margin-top:0.5em;
}
.kaerebalink-link1 div,
.booklink-link2 div{
display: inline-block!important;
font-size:0.8em!important;
margin-right:0.2em!important;
}
.kaerebalink-link1 div a,
.booklink-link2 div a{
display: block;
width: 12em;
text-align: center;
font-size: 1.3em;
background: #888;
color: #fff;
border-bottom: 5px #777 solid;
border-radius: 0.3em;
padding: 0.2em 0.7em;
text-decoration: none;
margin: 0 0.2em 0.7em 0;
line-height: 1.8;
}
.kaerebalink-link1 div a:hover,
.booklink-link2 div a:hover{
border-bottom-width: 3px;
color:#fff;
text-decoration: none;
position: relative;
bottom: -2px;
opacity: 0.6;
filter: alpha(opacity=60);
}

.booklink-link2 .shoplinkamazon a,
.booklink-link2 .shoplinkkindle a,
.kaerebalink-link1 .shoplinkamazon a{
background: #E47911;
border-bottom-color: #C26A15;
}
.booklink-link2 .shoplinkrakuten a,
.kaerebalink-link1 .shoplinkrakuten a{
background: #bf0000;
border-bottom-color: #800000;
}
.booklink-link2 .shoplinkyahoo a,
.kaerebalink-link1 .shoplinkyahoo a{
background: #7B6696;
border-bottom-color: #3B3049;
}

.kaerebalink-link1 div a img{
margin:0;
}
.pochireba-footer,.booklink-footer{
clear:left;
}
@media screen and (max-width: 640px){
.kaerebalink-box,.booklink-box,.pochireba{
min-height:100px;
}
}

そうすると、この記事のように表示される。カエレバからコードとる際は「amazlet風1」を。

強調時に文字にハイライトをつける

ビジュアルエディタのBの文字が強調(太字にする)。こちらに蛍光ペンでマーカーいれる感じにカスタマイズ。

.entry-content strong {
background: linear-gradient(transparent 60%, #FFDAB9 40%);
}

マーカーの色は#FFDAB9を変えればOKです。

行間や文字サイズや文字デザインを程よい感じに

.entry-content {
font-size:18px;
line-height : 1.7 ; /*行間*/
}
.entry-content p {
margin-bottom: 1.8em; /*段落の余白*/
}
}

{font-family:”Avenir Next”, sans-serif;}

こんな感じかな…。最低限これ。

８、SSL化対策

これは単純に「サイトのセキュリティレベルをあげて信頼性あるサイトにする対策」ってイメージで捉えてほしい。レンタルブログの場合は勝手に対応してくれるけど、ワードプレスや独自ドメインの場合は自分でやる必要がある。

https://となってるのがそれ。

SSL化対策のメリットとデメリット

これは絶対にやるべきってものではないので、メリットデメリットを知った上で自己判断でどうぞ。ぼくはSSL対策はした。

メリット

• SEOに有利。GoogleがSSLサイトは評価の対象にしてる
• 知ってる人は信用してくれる
• 決済をサイト内でさせる場合、信頼性がある。(暗号化されるので)

デメリット

• アドセンスなどの広告で対応してない場合が多い。単価落ちる可能性：これは今は大丈夫っぽい
• ASPの広告でまだhttp://のままのがあり、これをいれると完璧なSSL対応は不可
• ハイパーめんどくさい

完璧にSSL対策させようとすると、すんごい面倒です。なのでやるかどうかの線引きとして以下の感じでいいかと！

1. 広告に頼る場合はSSL化はしない
2. 自社サービスメインの場合、する

実際のやり方

エックスサーバーを活用するといい。ここなら独自ドメインが無料でSSL化できる。実際の手順は以下のサイトがわかりやすいのでおすすめ。

1. SSL化対策作業の参考記事
2. SSL化対策作業の参考記事②

９.オリジナルヘッダーを作成しよう！

人はブログの世界観やブランドを判断するとき、以下の3つの評価軸でみる。

1. ビジュアル
2. 発信内容とそのテイスト
3. 著者の醸し出す雰囲気

そして人にはメラビアンの法則っていうのがあり、見た目が9割。それはブログも同じで、見た目が一番印象に残る。で、それが一番ブログで顕著なのは「ヘッダー」です。ここは看板の役割。ぼくのヒキコモリズムもヘッダーがオリジナルか？それろもデフォルトのテキストか？ではだいぶ印象が違うでしょ？

おすすめは、自分で作る＜プロに頼むこと。そこに時間かける必要はないんじゃない？ってのがぼくの持論。デザイナーになりたいなら自分でやる方がいいけど。あとだいたい人気ブログはヘッダーデザインしてる。

ヒキコモデザイン工房に依頼ください

ぼくの専属デザイナーである脳内アーティストSHUN INANUMAさんがデザイン相談＆デザイン制作してくれます。安くていいものを作ってくれるので鬼おすすめ！！デザインイメージとかブログタイトルはぼくも相談に乗れますので、以下のページにあるLINE＠から相談ください。2人で対応します。

• SHUN INANUMAって？なあなたはこちらを
• ヒキコモデザイン工房はこちら

ワードプレスのブログが作れたら、あとは書こう！

ここまでやったらワードプレスブログのアウトラインはほぼできてるはずだ。ぱっと見いい感じなってるはず。あとは細々したのは記事書きながら調整していけばOK。

あとはまず記事をかくこと、つまり生産することが大事。けっきょくブログは記事ありきなので、書くこと第一！どんな見た目よくても記事がないならそれは相手のいないテニスみたいなもの。しっかり書いていこう。書けば文章もうまくなるしね。書かないとうまくはならない。

また、マネタイズをしていきたい場合はある程度の戦略を知った上で方向性を決めていくといい。最初は深く考えなくっても、後からけっきょく必要になってくるから。ただアドセンスやアフィリエイトリンク貼ってるだけでは稼げないからね。

そのあたりはブログ運営虎の巻を読んでもらうとわかるので見てみてほしい。そこまでしたくないってあなたも、以下にブログに役立つ本をまとめたのでどうぞ参考に。

▶️プロブロガー推薦！ブログで稼ぐなら必読の本をすべてまとめておく