初心者でも迷わないWordPressの始め方や使い方を全部図解で解説!

WordPressの始め方や使い方

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

  • ロリポップでWordPressを始める場合の手順
  • エックスサーバーでWordPressを始める場合の手順
  • ミックスホストでWordPressを始める手順

すべて図解で解説していきます。

スポンサーリンク

独自ドメインを取得とレンタルサーバーの比較

ロリポップ!でWordPressを始める手順

エックスサーバーでWordPressを始める手順

MixHost(ミックスホスト)でWordPressを始める手順

WordPressを始める前の基礎知識編

最初にしておくべきWordPressの初期設定

WordPress記事投稿の方法と基礎

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

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

サイト作成関連

無料ブログからの引越し方法

サーバーの移転方法

WordPressを始めるのに必要なものや料金

準備

WordPressを始めるのに必要になるのが「ドメイン」と「サーバー」です。

サーバーが土地でドメインが住所という感じでイメージしてもらえばOKです。

ドメインを取得と料金

ドメインは自分のサイトのURLになる部分です。

このサイトで言うとドメインは「affiliate150.com」で取得してます。

末尾の部分は「.com」「.net」「.org」「.info」「.jp」など色々な種類がありそれぞれ価格が違ってきます。

ドメインは買い切りではないので、毎年更新費用がかかります、とは言っても.comなどで年間1,200円前後くらいなので、月額すると100円くらいです。

ムームードメイン料金表
※画像はムームードメインでのドメイン料金

ドメイン取得できる所は色々ありますが、初心者におすすめなのは分かりやすくて使いやすい「ムームードメイン」です。

ムームードメインでのドメイン取得はこちらの記事で紹介してます。

【ムームードメイン】独自ドメインの取得方法と注意点。ドメイン更新時の料金も確認を!

レンタルサーバーの契約と料金

WordPressに必要なサーバーの部分ですが、レンタルサーバーを利用します。

個人利用であれば安いもので月額250円(ロリポップのライトプラン)から月額1,000円(エックスサーバーのX10プラン)くらいが目安と思ってOKです。

レンタルサーバーも色々種類がありますが、

  • ロリポップ:料金安く必要十分な機能(初心者向け)
  • エックスサーバー:料金やや高めで高機能(万人向け)
  • ミックスホスト:料金は中間くらいで高機能(2016年に誕生したばかり)

という感じです。何が違うの?と一言で言うのは難しいですが、表示スピードやセキュリティーそれからアクセスが集中した時にどらだけ耐えられるかという部分が違ってきます

アクセスの集中に耐えられないとサイトが表示されなかったり、表示がすごく遅いという状態になってしまうためチャンスロスになってしまいます。

機能重視か料金重視かという部分で迷うと思いますが、一応サーバーの比較記事もどうぞ。

ロリポップとエックスサーバーを比較!レンタルサーバーはどっちがおすすめ?

WordPressの機能・無料ブログとの違い

WordPressは冒頭でも書いたように独自ドメインで運用していきます。

無料ブログはアパートを借りている状態でWordPress(独自ドメイン)は持ち家というイメージでOKです。

無料ブログは無料というメリットがありますが、デメリットも多いです。

1.無料ブログサービス側の広告が最初から多く設置されているため(特にスマホページ)収益化しにくい
2.利用規約違反でブログが削除される(商用禁止のブログもあるので注意)
3.評価を引き継ぐ引っ越しが難しい(できない)
4.容量が少ない

という感じですね。利用規約の変更などもありますし、採算がとれないサービスが終了したりもします。

WordPress(独自ドメイン)はドメイン料金とレンタルサーバー料金は必要になりますが、サイトの評価を積み上げる事で、検索順位的な恩恵もありますし、なによりブログが削除される心配をしなくても良いというのは安心感あります。

WordPressではおしゃれで高機能なテーマが豊富

WordPressデザインテーマ

WordPressでは無料のテーマ(テンプレート)と有料のテーマがあります。

無料のテーマからカスタマイズしても良いですし、有料テーマを選択するのもありです。

有料テーマ使うと最初から最強装備をした状態でサイトを始める事ができるため、記事の執筆に集中する事ができます。

WordPressの投稿画面は普通の無料ブログと同じような感じです。文字色を変更したり、リストを作ったりも簡単にできます。

WordPress投稿画面

カスタマイズが苦手な方でもメニューの設定だけで全体の配色やヘッダー画像などが変更できるテーマもあります。

WordPressカスタマイズ設定

既にSEO対策(サーチエンジン最適化)がされているテーマもかなり多いので有利です。

機能を付け足しできるプラグイン

WordPressにはプラグイン機能があります。プラグインはスマホのアプリのようなもので、必要な機能をインストールするだけで装備する事ができます

  • 検索順位の改善への対策ができる機能(All in One SEO Pack)
  • 自動バックアップ機能(BackWPup)
  • リンク切れをお知らせ機能(Broken linke checker)
  • ページの先頭に戻るボタン(scroll top)
  • 公開した記事がすぐにインデックスされる機能(PubSubHubbub)
  • 好きなSNSボタンを選んで設置(WP Social Bookmarking Light)
  • サイト内検索の検索数と検索ワード解析(Search Meter)
  • 人気記事を自動集計して表示(WordPress Popular Posts)
  • よく使う単語やタグを登録しておける機能(AddQuicktag)
  • キャッシュを利用して表示速度高速化(WP Super Cache)
  • ブログ全体から指定した文字列を検索して一括置換(Search Regex)
  • 関連記事を自動で表示(YARPP)
  • アップロードした画像を一括圧縮して表示速度の改善(EWWW Image Optimizer)

こんな感じでまだまだ無数にありますし、無料で使える物がほとんどです。

私自身が使っているプラグインはこちらで紹介しています。

WordPressでおすすめのプラグインまとめ

WordPressの方が無料ブログより収益が出やすい

WordPressを収益化

無料ブログの一番の問題点として「スマホページの広告」があります。

無料ブログは無料で使える代わりにスマホページは広告だらけです。何が問題かと言うと、最近の訪問者の方の半数以上はスマホからのアクセス(どんどん割合が増えてます)。

私のサイトのデータですが最近のPCとスマホの訪問者の割合はこんな感じ。

%e3%83%87%e3%83%90%e3%82%a4%e3%82%b9%e5%89%b2%e5%90%88

  • モバイル(スマホ):73.1%
  • PC:25.89%
  • タブレット:1.02%

スマホからの訪問者が7割を超えてますよね。つまりスマホページを最適化して収益化しないとお話にならない状況です

無料ブログの場合はスマホページの一番効果的な場所が全部占領され消せない広告が設置されていますし、広告が多いため、表示速度やサイトの離脱率が高くなります。

これは無料ブログを使う大きなデメリットの1つです。

特にクリック数に応じて報酬がもらえるアドセンス広告などを設置するのであれば無料ブログではなくWordPressを検討した方が良いです

PV(ページビュー)が増えるほどスマホページの最適化だけで収益がビックリするくらい違ってきますよ(^^)

WordPressならプラグインやちょっとした施策で表示速度を上げる事ができる

表示速度が遅いのはサイトの離脱率を上げてしまうため、訪問者だけでなく検索エンジンの評価も下げてしまいますので、サイトの速度改善は大事です。

WordPressなら画像を圧縮したり読み込みを後回しにして表示速度を上げるプラグイン、キャッシュを利用して高速化するプラグインなど表示速度を早くするための施策も色々できます。

WordPress表示スピード高速化のための施策とプラグインまとめページ

以上WordPressの始め方や必要なもの、料金などを紹介してみました。

アフィリエイトで稼ぐ方法まとめページへ

最終更新日:2018/07/19

サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

ブログの更新はこちらから

初心者でも迷わないWordPressの始め方や使い方を全部図解で解説!”に92件のコメントがあります。

コメントの反映には時間がかかる場合があります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

  1. きこ

    いつもお世話になっております(^^)
    しげぞうさんの記事を参考にさせていただいてブログを作って数カ月経ちました。
    私も本当にしげぞうさんには感謝しております。
    ありがとうございます。

    実はたまにスマホからブログを見ると、画像が全然違う記事の画像になっていたりすることがあります。
    どうしてこんな風になるのでしょうか。
    解決方法があれば教えてください。
    あと先程はスマホでの表示がおかしくて、カテゴリーが全部一番上に出てしまったり明らかに表示がおかしくて記事の中を見てもタグが全部表示されてしまっていました。
    ちょっと検索してみてツイッターを貼っているのが原因かもしれないと思ったので、ツイッターを消したらおかしい表示はとりあえず直りました。
    原因はツイッターなのか分かりませんが何かご存じでしたらアドバイスお願い致します。
    (急ぎではないのでお時間ある時で大丈夫です)

  2. しげぞう 投稿作成者

    わか様

    わざわざコメントありがとうございます。無事に報酬も発生するようになったということで私も自分の事のように嬉しいです。報告ありがたい!もう既に報酬が発生しているという事ですので、それは自信になると思いますし、自分の工夫次第で新しいコンテンツ、新しいブログも増やしていけると思います。

    現在私もこのブログの修正中で、過去の記事とか本当に内容がダメダメな記事も多いので、せっせと修正を繰り返している所です。これが終わればもっと良いブログにできると思いますし、新しい情報も追加していく予定なので、今後もどうぞよろしくお願い致します。

  3. わか

    しげぞう様

    初めまして!専業主婦0歳児子育て中のわかと申します。
    実はしげぞう様の記事と出会って昨年の春からアフェリエイトを始めました。

    初心者で右も左も分からなかった私ですが、お陰様で現在では家計の助けになるくらいの収入を得られています!
    途中出産を挟んだ為、メンテナンスや記事アップなど現在ほとんどできていない状況ですが;^_^A
    しげぞう様の記事を丸々鵜呑みにして作ったサイトでここまで成功出来るとは正直思っておらず笑、感動です!

    少し子育てが落ち着いたら少しずつパワーアップしたサイトにして、主婦なりに社会貢献&家計貢献⁇したいと思っています。

    しげぞう様、このような分かりやすい&実用的なサイトを作ってくださってありがとうございます!しげぞう様がますます活躍されて、ますますの幸せをゲットできる事を心よりお祈りしています☆

  4. りた

    しげぞう様

    大変お忙しい中のご返信、誠にありがとうございます。

    結論から申しますと、無事解決致しました!ただ、色々誤解を招くコメントをしてしまい。お手数おかけしました。

    というのも、実はスマホのヘッダー部分における枠をmemo1、PC記事内の枠をmemoにしていました。しかし、今見た所、スマホのヘッダー部分はmemoのまま使用していました。memo1に直したところ、所望の配置にできました!
    また、実はしげぞう様に何度もご相談するのは迷惑と思い、PC用の枠「memo」のスマホのサイズに悩んでいました。修正頂けたこと、本当に助かりました泣

    大変ご迷惑おかけしました。
    今後共、また何か質問すると思いますが、何卒宜しくお願い致します。

  5. しげぞう 投稿作成者

    りた様

    コメントありがとうございます。早速見てきたのですが、この部分は「div class=”memo”」となっているようですので、「.memo1」ではなく、「.memo」での記述が反映されます。それで、ここの記述が原因でスマホでのレイアウトがはみ出している感じになってますので、これを修正する必要がありそうです。

    この「.memo」のスタイルシートの記述ですが、おそらくこのような記述をしている部分があると思います。

    ここでwidth:400pxと指定してありますが、これを「width」ではなく、「max-width:400px;」と変更して下さい。それで次に条件分岐してある「.memo」があるはずです。

    このように指定されている部分があると思いますが、ここのwidthは指定する必要ありません。これを削除すれば自動で最適なサイズになるかと思いますので、この部分は削除してから確認してみてください。「margin」も効いていると思いますので、「.memo1」ではなく、「.memo」でスタイルをあてて見て下さい。

    それとコメントの部分で一部表示されない部分があり、ちょっと内容が分からないので、再度この後半部分をコメント頂けたら嬉しいです。多分タグ的な物なら半角ではなく、一部でも全角に変換して教えて頂けると助かります。

    これからちょっと用事があるので、返信は来週になっていまいますが、コメント自体はチェックしてますので、どうぞよろしくお願い致します。

  6. りた

    しげぞう様

    いつもご無沙汰しております。りたと申します。
    本日は、スマホにおけるアイキャッチ画像の位置に関する質問です。

    本日、スマホのヘッダー部分にオススメ記事を挿入しました。無事、達成することができたのですが、アイキャッチ画像との余白を狭めたいと考えております。

    以前、しげぞう様が教えて下さったコードをお借りして、margin-bottomをいじったのですが、余白が縮まらず苦戦しております。

    /* 全体を囲う部分 (スマホ用)*/
    .memo1 {
    padding: 15px;
    border: solid 5px #FFFF00;
    background-color: #f5f5f5;
    margin-bottom: 0px; ⇒この部分です!/* 下のコンテンツとの余白 */
    }

    お手数ですが、お手隙の際に、スマホのアイキャッチ画像と私が挿入したオススメ記事の余白を狭めるコードを教えて頂けないでしょうか?

    何卒、宜しくお願い致します。

    ネットで調べてみると、を挿入すれば良いとわかりました。

    これは、個別の記事ではなく、あるカテゴリー(個別ページ、月アーカイブなど)に向けて挿入するのでしょうか?
    また、しげぞう様はどのような記事をno indexにしていますでしょうか?

    お手隙の際に、ご回答し頂けると幸いです。何卒、宜しくお願い致します。