WordPressブログの始め方と使い方まとめ！【初心者向け】

WordPressブログ

2020.11.07 2018.07.19

独自ドメインの取得方法、WordPressを始めるためのおすすめのレンタルサーバーの比較、WordPressの設置などWordPressの始め方、カスタマイズ、プラグインまでの記事をまとめてみました。

レンタルーサーバーの比較とドメインの取得、WordPressのインストールまで

WordPressを始めるにはドメインとサーバーが必要です。最初にドメインの取得とレンタルサーバーを決めるところからスタート。

契約したレンタルサーバーでドメインを設定してWordPressをインストール

ドメイン取得とレンタルサーバーが決まったらドメインの設定をしてWordPressをインストールしていきます。

各サーバーでのWordPressの始め方は以下の記事をどうぞ。

エックスサーバー

ConoHa Wing

【図解】ConoHa Wing（コノハウイング）申し込み方法から使い方までのまとめ

ロリポップ！

MixHost（ミックスホスト）

【図解】MixHost(ミックスホスト)の申し込みから使い方までのまとめ

JETBOY

WordPressのテーマ選びと基本的な設定

WordPressのテーマとしては有料のテーマをおすすめするサイトもありますが、当サイトでは無料で高機能、利用者も多い「Cocoon」をおすすめしてます。

Cocoonのインストールと設定、必要なプラグインを紹介。

WordPress記事投稿の方法と基礎

WordPressのカスタマイズの前にやっておく事

WordPressおすすめプラグインと表示速度高速化

無料ブログからWordPressへ引越し・移転する方法

無料ブログからWordPressへ引っ越し・移転する方向けの記事です。

サーバーの引っ越し・移転方法の記事

現在利用しているレンタルサーバーを変更したいという方向けの記事です。

その他

きこより:
2016年3月15日 11:41 PM
しげぞう様
早速の返信ありがとうございます。
結果から先に報告させていただきますと、スマホでの画像表示がおかしくなっていたのはやはりTwitterをサイドメニューに貼っていたせいだったようです。
（PCでは正常ですがスマホの画像表示がたまに違う画像に変わったりしていたのです）
ちょっと焦ってしまってついコメントしてしまいました。
Twitterを消してから数日様子を見てますが今のところ大丈夫なのでそうだと思います。
しげぞうさんが怪しいと言われた「WP File Cache」ですが、実は少し前にインストールしていました。
ですが速度も全然変わらないし逆に遅くなったような気がしてすぐに停止しました。
しげぞうさんのコメントを見てから少し検索したんですが「WP File Cache」というのは危ないようですね・・・削除すると不具合が出る場合があるとか見ました。
私はたまたま削除はしていなかったのでセーフでした。
怖いのでこのまま触らないようにしようと思います。
私のスマホでの画像不具合は「WP File Cache」を入れる前からだったので今回は関係ないと思います。
（キャッシュ系のプラグインはこのプラグインのみです）
私のサイトはしげぞうさんの記事の完全コピーのようなサイトです（笑）
なのでプラグインは必要最低限のものしか使っていません。
（しげぞうさんのおすすめプラグインのみ）
最近サイトの速度が遅いのがとても気になっていて、自分で検索して簡単にできそうな「WP File Cache」をインストールしてしまいました。
やはりプラグインは安易に使わないほうがいいですね。
自分のサイトが完成してからはあまりしげぞうさんのサイトに来なくなっていたので、また新しい記事もすべて熟読させていただきたいと思います。
その上で分からない時は質問等させていただくかもしれませんので宜しくお願い致します。
ありがとうございましたm(__)m
しげぞうより:
2016年3月13日 7:29 AM
きこ様
コメントありがとうございます。まず、スマホから見ると画像が違うという部分ですが、これはPCとスマホで違う画像が表示されるという事でしょうか？PCとスマホでの表示を両方確認してみてください。
画像の問題でもTwitterの問題でもこのような不具合を出すというのはプラグインが怪しいと私は思います。特にキャッシュ系のプラグインが悪さをするとこのような症状が出る場合があります。きこ様がどのようなプラグインを使っているかまでは分かりませんが、個人的に怪しいと思うのは「WP File Cache」あたりかなと思います。使っているかは分かりませんが。
もしこのプラグインを使っているのであればプラグインの停止。もしこのプラグインを使っていないのであれば他のキャッシュ系のプラグインも停止してみてください。
プラグインの停止をしたら一度ブログを開いて「Ctrl」と「F5」を一緒に押してリロードしてから確認して下さい。
また、ほとんどのキャッシュ系のプラグインは「設定」でキャッシュをクリア（削除）できる設定があると思いますので、キャッシュを一度クリアしてみるのもいいかもしれません。もしそれでも症状がでるようであれば再度コメント頂けると助かります。
追記：私の記事が参考になるのは非常に嬉しいです、ありがとうございます！今後もよろしくお願いします！
きこより:
2016年3月13日 3:43 AM
いつもお世話になっております(^^)
しげぞうさんの記事を参考にさせていただいてブログを作って数カ月経ちました。
私も本当にしげぞうさんには感謝しております。
ありがとうございます。
実はたまにスマホからブログを見ると、画像が全然違う記事の画像になっていたりすることがあります。
どうしてこんな風になるのでしょうか。
解決方法があれば教えてください。
あと先程はスマホでの表示がおかしくて、カテゴリーが全部一番上に出てしまったり明らかに表示がおかしくて記事の中を見てもタグが全部表示されてしまっていました。
ちょっと検索してみてツイッターを貼っているのが原因かもしれないと思ったので、ツイッターを消したらおかしい表示はとりあえず直りました。
原因はツイッターなのか分かりませんが何かご存じでしたらアドバイスお願い致します。
（急ぎではないのでお時間ある時で大丈夫です）
しげぞうより:
2016年2月9日 3:12 PM
わか様
わざわざコメントありがとうございます。無事に報酬も発生するようになったということで私も自分の事のように嬉しいです。報告ありがたい！もう既に報酬が発生しているという事ですので、それは自信になると思いますし、自分の工夫次第で新しいコンテンツ、新しいブログも増やしていけると思います。
現在私もこのブログの修正中で、過去の記事とか本当に内容がダメダメな記事も多いので、せっせと修正を繰り返している所です。これが終わればもっと良いブログにできると思いますし、新しい情報も追加していく予定なので、今後もどうぞよろしくお願い致します。
わかより:
2016年2月9日 3:07 PM
しげぞう様
初めまして！専業主婦0歳児子育て中のわかと申します。
実はしげぞう様の記事と出会って昨年の春からアフェリエイトを始めました。
初心者で右も左も分からなかった私ですが、お陰様で現在では家計の助けになるくらいの収入を得られています！
途中出産を挟んだ為、メンテナンスや記事アップなど現在ほとんどできていない状況ですが;^_^A
しげぞう様の記事を丸々鵜呑みにして作ったサイトでここまで成功出来るとは正直思っておらず笑、感動です！
少し子育てが落ち着いたら少しずつパワーアップしたサイトにして、主婦なりに社会貢献&家計貢献⁇したいと思っています。
しげぞう様、このような分かりやすい&実用的なサイトを作ってくださってありがとうございます！しげぞう様がますます活躍されて、ますますの幸せをゲットできる事を心よりお祈りしています☆
りたより:
2016年2月6日 9:09 PM
しげぞう様
大変お忙しい中のご返信、誠にありがとうございます。
結論から申しますと、無事解決致しました！ただ、色々誤解を招くコメントをしてしまい。お手数おかけしました。
というのも、実はスマホのヘッダー部分における枠をmemo1、PC記事内の枠をmemoにしていました。しかし、今見た所、スマホのヘッダー部分はmemoのまま使用していました。memo１に直したところ、所望の配置にできました！
また、実はしげぞう様に何度もご相談するのは迷惑と思い、PC用の枠「memo」のスマホのサイズに悩んでいました。修正頂けたこと、本当に助かりました泣
大変ご迷惑おかけしました。
今後共、また何か質問すると思いますが、何卒宜しくお願い致します。
しげぞうより:
2016年2月6日 5:12 PM
りた様
コメントありがとうございます。早速見てきたのですが、この部分は「div class=”memo”」となっているようですので、「.memo1」ではなく、「.memo」での記述が反映されます。それで、ここの記述が原因でスマホでのレイアウトがはみ出している感じになってますので、これを修正する必要がありそうです。
この「.memo」のスタイルシートの記述ですが、おそらくこのような記述をしている部分があると思います。
```
.memo {
    padding: 15px;
    width: 400px;
    border: solid 5px #ff0;
    background-color: #f5f5f5;
    margin-bottom: 40px;
}
```
ここでwidth：400pxと指定してありますが、これを「width」ではなく、「max-width:400px;」と変更して下さい。それで次に条件分岐してある「.memo」があるはずです。
```
@media screen and (max-width: 599px)
.memo {
    width: 280px;
}
```
このように指定されている部分があると思いますが、ここのwidthは指定する必要ありません。これを削除すれば自動で最適なサイズになるかと思いますので、この部分は削除してから確認してみてください。「margin」も効いていると思いますので、「.memo1」ではなく、「.memo」でスタイルをあてて見て下さい。
それとコメントの部分で一部表示されない部分があり、ちょっと内容が分からないので、再度この後半部分をコメント頂けたら嬉しいです。多分タグ的な物なら半角ではなく、一部でも全角に変換して教えて頂けると助かります。
これからちょっと用事があるので、返信は来週になっていまいますが、コメント自体はチェックしてますので、どうぞよろしくお願い致します。
りたより:
2016年2月6日 4:39 PM
しげぞう様
いつもご無沙汰しております。りたと申します。
本日は、スマホにおけるアイキャッチ画像の位置に関する質問です。
本日、スマホのヘッダー部分にオススメ記事を挿入しました。無事、達成することができたのですが、アイキャッチ画像との余白を狭めたいと考えております。
以前、しげぞう様が教えて下さったコードをお借りして、margin-bottomをいじったのですが、余白が縮まらず苦戦しております。
/* 全体を囲う部分（スマホ用）*/
.memo1 {
padding: 15px;
border: solid 5px #FFFF00;
background-color: #f5f5f5;
margin-bottom: 0px; ⇒この部分です！/* 下のコンテンツとの余白 */
}
お手数ですが、お手隙の際に、スマホのアイキャッチ画像と私が挿入したオススメ記事の余白を狭めるコードを教えて頂けないでしょうか？
何卒、宜しくお願い致します。
ネットで調べてみると、を挿入すれば良いとわかりました。
これは、個別の記事ではなく、あるカテゴリー（個別ページ、月アーカイブなど）に向けて挿入するのでしょうか？
また、しげぞう様はどのような記事をno indexにしていますでしょうか？
お手隙の際に、ご回答し頂けると幸いです。何卒、宜しくお願い致します。
りたより:
2016年2月3日 12:45 PM
しげぞう様
りたと申します。ご返信および図によるご丁寧な対応
誠にありがとうございます。
プラグイン「All in One SEO」はあったのですが、各投稿記事の下に「Robots Meta NOINDEX」というチェックボックスがあることに気づきましたでした泣
私のいつものど素人な質問に対して、毎回ご丁寧かつ迅速に回答して頂けること
頭があがりません。
最近では、ブログたサイトに興味を持った友人には、しげぞう様のサイトをめちゃくちゃオススメしています笑
こんあことでしか恩返しできないですが、ご容赦下さい。
今後共、宜しくお願い致します。
しげぞうより:
2016年2月3日 10:19 AM
りた様
コメントありがとうございます。「noindex」についてはプラグイン「All in One SEO」を利用しています。このプラグインを使う事で個別記事でもカテゴリーなどのページでも好きな部分を「noindex」する事ができます。基本的に重複の多い、タグページや月アーカイブなどはnoindeでOKですが、カテゴリーは「noindex」しない方が良いです。
カテゴリーも個別記事の集まりなので、「no index」をする方も多いですが、実は最近このカテゴリーを活用してPVを伸ばし、離脱率を下げる方法を発見しました。これについては3週間後くらい？に記事公開予定です。3週間か1ヶ月後には公開できると思いますので、少々お待ち下さいませ。
とりあえずカテゴリーはインデックスしても大丈夫です。All in Oneの設定で、次のようにしておきます。
記事の「noindex」についてですが、「All in One」のプラグインを入れておけば各投稿記事の下に「Robots Meta NOINDEX」というチェックボックスがありますので、これにチェックを入れるとその記事が「noindex」になります。
基本的に低品質な記事には「noindex」を入れます。直帰率の高いページや、内容の薄いページ、重複する部分が多いコンテンツなどです。ただ、私の場合は個別記事を「noindex」する事はほとんどありません（例外はありますが）。あまり読まれていないページに関しては「他の記事へ統合してリダイレクトする」もしくは「記事自体を削除」しています。
現在私も過去記事の統合と修正をしている最中ですので、これが終われば改めてその辺も記事にしていきます。
りたより:
2016年2月2日 11:07 PM
しげぞう様
いつもご無沙汰しております。りたと申します。
本日は、noindexの方法について、お聞きしたく、ご質問させて頂きました。
ネットで調べてみると、を挿入すれば良いとわかりました。
これは、個別の記事ではなく、あるカテゴリー（個別ページ、月アーカイブなど）に向けて挿入するのでしょうか？
また、しげぞう様はどのような記事をno indexにしていますでしょうか？
お手隙の際に、ご回答し頂けると幸いです。何卒、宜しくお願い致します。
しげぞうより:
2016年1月30日 4:35 PM
りた様
返信ありがとうございます。
「今月PV数およびアフィリエイト報酬が、爆上がりしました。特に、アフィリエイトに関しては、今までの平均額より10倍以上もの額が発生しました！（ただし、７割の発生が、まだ未確定なので、なんとも言えませんが。。）」←これは本当にスゴすぎ（笑）
りた様がしっかり良記事を更新されている事や新しいチャレンジでどんどん進んでいるのもTwitterから感じている所です。私も自分の事のように嬉しく思っていますし、まだまだこれからも伸びるハズと思っています。ある程度アクセス解析ができたら収益を上げる記事への誘導のアイディアもさらに出てくると思いますので、今後も期待しております。
また何かあればいつでもコメント下さいませ。私も負けないように頑張りマス！
りたより:
2016年1月30日 4:25 PM
しげぞう様
ご回答、誠にありがとうございます。しげぞう様のお陰で、無事、所望通りのカスタマイズを達成することができました。
毎度のこと、本当にありがとうございますm(_ _)m
またご質問するかもしれませんが
その際は、何卒宜しくお願い致します。
余談ですが、今月PV数およびアフィリエイト報酬が、爆上がりしました。特に、アフィリエイトに関しては、今までの平均額より10倍以上もの額が発生しました！（ただし、７割の発生が、まだ未確定なので、なんとも言えませんが。。）
正直、ここまでこれたことに、私自身、驚いております。しげぞう様のサイトがなければ、ここまできていません泣本当に感謝しても、感謝しきれません。
僭越ながら、私はしげぞう様のサイトのロールモデルでありたいと思ってます。これからも頑張っていきますので、温かい目で見守って頂けたら幸いです！
しげぞうより:
2016年1月30日 12:47 PM
りた様
コメントありがとうございます。ブログも拝見して来ましたので、早速回答してみたいと思います。
まず、この枠の部分なんですが、「div」で囲ってある部分ですよね。この「div」に直接スタイルを書き込んでありますが、ここは「div class=”●●”」のようにclass名だけを付けておき、スタイルシートで装飾するのが良いと思います。そうしておけばまた同じような枠を使う時に「div class=”●●”」と囲うだけでそのスタイルが反映されるようになりますので便利です。対策は後程書きます。
また、枠線内の下の無駄な余白についてはこの部分に「ul」タグを使っていますよね。これがデフォルトで下に余白が設定されています。これをスタイルシートで調整すればいいのですが、それだと他の部分の「ul」タグにも影響が及びます。そのため、この部分も「ul class=”●●”」のようにclass名を付けて差別化すると良いです。
という訳で上記２点を変更するためにまずはその記事の投稿画面を開いての枠の部分を次のようにしてみてください。
```
<div class="memo">
<ul class="no-space">
<li>テキスト</li>
<li>テキスト</li>
<li>テキスト</li>
</ul>
</div>
```
できたら保存しておきます。次にスタイルシートを変更しますので、子テーマのスタイルシートに次の記述を追加して装飾をしていきます。
```
/* 全体を囲う部分 */
.memo {
    padding: 15px;
    border: solid 5px #FFFF00;
    background-color: #f5f5f5;
    margin-bottom: 40px;  /* 下のコンテンツとの余白 */
}

/* これは要らないかもですが、一応 */
ul.no-space {
    margin: 0;
}
```
最後の質問のスマートフォンでの条件分岐ですが、基本的にタブレットのブラウザサイズが600pxからだったと記憶してますので、スマートフォンの場合はブラウザサイズが「599px以下の場合」という条件分岐をして、スマートフォンで変更したい部分だけを記述したらOKです（スタイルシートです）。
```
@media screen and (max-width: 599px) {

この中にスマートフォン用のスタイル

}
```
こんな感じで条件分岐の中にスマートフォンだけ変更したい部分を入れてみて下さい。この条件分岐はおそらくスタイルシートの中に何度か登場していると思いますので、探してその中にいれてもOKですし、スタイルシートの一番下に追加してもOKです。
りたより:
2016年1月29日 7:19 PM
しげぞう様
いつもご無沙汰しております。りたと申します。
WPにおける枠線のカスタマイズについて、ご質問させて下さい。
現在、このような枠線を使っていますが、気になることが３点あります。
⇒URL
・枠線内における下に、無駄な余白ができてしまうこと
・枠線外の次の文章に１文開けたいが、詰められてしまうこと
・PCとスマホで枠線の幅を調整したい
ただいま、苦戦している次第です。お手隙の際に、何かアドバイスして頂けたら幸いです。
何卒、宜しくお願い致します。
シネマックスより:
2016年1月11日 1:09 PM
しげぞう様
確かに記事数が書けない内容でワードプレスで作っても当たる確率が少ないですもんね!!
そのために無料ブログで作成をして当たりを見て移行するんですね!!
とても参考になりました。ありがとうございます。
僕の場合はキーワード選定はするのですが、割と見切り発車気味なので、しっかり構成を練ってからブログを増やしていきたいと思います(汗)
余談ですがキーワード選定をして上位表示させるためのコツを掴むのはなかなか難しいですね!!
日々奮闘中です(>_<;)
ちょくちょくしげぞう様のサイトを拝見させていただいているので、また色々と勉強&参考にさせていただきます!!
しげぞうより:
2016年1月11日 7:56 AM
シネマックス様
返信ありがとうございます。私の場合はブログ作成の前に大まかな設計図を作っています。それで大体どれくらいの記事数になるか把握しておきます。もし記事数が100記事、200記事を超えるコンテンツが作れると思った場合には最初からWordPressで作成しますし、それ以下の場合は最初は無料ブログ（Seesaa）で作成してます。
記事数が少ないブログに関しては無料ブログで作成して、上手く上位表示されて収益を上げると判断したらWordPressへリダイレクト。上手く行かない場合には関連性のある別のブログへの統合を考えます。
シネマックスより:
2016年1月10日 2:40 AM
しげぞう様
マルチサイトは利用されてないんですね！
僕も色々調べてみたのですが、上手くできる自信が全くなかったので、しげぞう様なら何かわかるかなと思い質問しました(>_<)
しげぞう様は複数のサイトを作る際は全てワードプレスで作成されているのですか？
しげぞうより:
2016年1月7日 3:49 PM
シネマックス様
明けましておめでとうございます。今年もどうぞよろしくお願い致します。
質問のマルチサイト機能ですが、私は利用はしておりませんので詳しくは分かりません。すみません。一時期マルチサイト機能を利用しようかと思った時期もあったのですが、中途半端な知識でもし不具合などがあった場合に対処する自信がなかったので見送りました。
現在はマルチサイト機能は使ってませんが、特に不自由な部分はありませんのでおそらくこの機能は使う事がないと思いますが、もし気が変わって使う場合にはまた調べて勉強して記事にしていきますね。
シネマックスより:
2016年1月7日 3:16 PM
しげぞう様
お久しぶりです。
それと明けましておめでとうございます。
早速ですがしげぞう様はワードプレスでサイトを作る際にはマルチサイトを利用していますか?
またマルチサイトを利用しているのであればその方法や手順など詳しく教えていただけないでしょうか?
色々調べてはいるのですがさっぱりわかりません(T.T)
宜しくお願いします。

12 3…5 次へ »