ブログのアレコレ

初心者が本格的なブログを作る方法。ワードプレスへの引越しもOK!

今回は「ブログをどうせやるなら本格的に始めたい!」という方に向けて、ワードプレスでのブログの作り方、このSYUMI LABOと同じデザインのブログを作る方法も紹介します。

猿の友達A
猿の友達A
そんな人いる?
筆者
筆者
いやいや、たぶん1人くらいはいてる…はず

もう既にはてなブログをお持ちで、「ワードプレスに引っ越したい!」という方の参考も兼ねています。この機会にドメインを変更したい方も方法を紹介しているので、参考にどうぞ!

独自ドメインの移設については、お名前.comで取得されてる方には参考になる記事です

 

 

初心者が本格的なブログを作る方法。ワードプレスへの引越しもOK!

僕自身もブログを始めるにあたり、いきなり有料版でブログを始めました。たぶんこの記事に興味を持ってくれている方と同じだと思いますが、「1年くらいやって、おもんなかったら辞めよ」です笑

2019年から始めたブログ運営ですが、収益は毎月サラリーマンのお小遣い以上貰っているので周りからは羨ましがられる事も増えました。

何より「続けてきて良かったな!」と思えるのは“手に職“と言いますか、自分に特殊能力が備わった様な気がして、生き方が自由になったような気にもなれています。

猿の友達A
猿の友達A
だいぶ良く言うね!
筆者
筆者
これくらい許してください笑

ブログ運営なんてたかが月千円ちょいなんで、今回はササぁーっと、この見て貰っているブログと同じモノを作る方法も紹介していきます。

はてなブログからワードプレスへの引越しをする方は、サーバーの準備などと別で追加の作業(記事を移したり)をすればOKなのでお付き合いください

ドメインを変更して引っ越しする方法も大丈夫です。僕も変更して引っ越しました

 

ブログを作る前に用意するモノ(全ての人が必要です)

まずブログを始める前に準備するモノから始めます。

準備するモノ

  • サーバー
  • 独自ドメイン

 

ワードプレスでブログ運営する為には情報の処理を行ってくれるサーバーは必ず必要です。

サーバーは探せば超安価なモノもありますが、要らぬトラブルに巻き込まれぬよう今回はエックスサーバーの1番安いプラン(X10、月1100円位)を使います。

プランは扱えるデータ容量で変更を検討しますが、月間で100万pvを超えるようでしたら1つ上のX20へ!

Xサーバー公式

はてなブログからワードプレスへの引越しをする方は既にお持ちだと思いますが、ブログの住所とも言える独自ドメインの取得・設置も合わせて行います。

独自ドメインと聞いても馴染みがないですが、簡単にいえばオリジナルURLです。有名なamazon.comのようなカッコイイドメインを設置しましょう。

 

エックスサーバーの登録

まずはエックスサーバーのサイトで登録・設定を行っていきます。

 

お試し期間が10日間あるので急がずに設定を進められますが、案外すぐに終わります笑

 

お申し込みはこちら>10日間無料お試し

 

  • サーバーIDはドメインではないので覚えやすいモノを
  • プランは基本、1番安いX10
  • クイックスタートは全て設定を行ってくれますが、追加料金が掛かります。個人的には無しでOK!

 

一通り個人情報を埋める>認証>設定完了メールを受け取れば登録完了です!

 

サーバーの登録はお試し期間で登録しているので、忘れない間に自動更新へ切り替えてください。10日間を過ぎると使えなくなります。

設定完了メールが届きますが設定はまだまだあります笑。登録が完了だと思ってください

 

独自ドメイン取得(Xserverドメイン

独自ドメインの取得はお名前.comが有名で僕自身も使っています(月数百円)

 

しかしエックスサーバーでは定期的に新規登録に限り、ドメイン料が無料になるキャンペーンが行われます。キャンペーン中はエックスサーバーで独自ドメインを取得する方がお得になるので、今回は2つの方法を紹介しておきます。

 

無料ドメインのキャンペーンを受ける方法

ドメインの無料キャンペーンはサーバーを新規登録とセットが条件なので、手順に気をつけてください!

Xserverドメイン

 

  • STEP1
    サーバー登録
    先程行ったサーバー登録の完了を確認
  • STEP2
    本契約・支払い完了

    10日間のお試しから自動更新など本契約へ。支払い完了を確認

  • STEP3
    ログイン

    エックスサーバートップ>ログイン

  • STEP4
    各種特典のお申し込み

    ログイン後、左にある【各種特典のお申し込み】内に無料ドメインの取得方法あり

  • STEP5
    好きな文字列を検索

    好きな文字列を検索すると、他人と被っていなければ取得が可能です

ここまでで独自ドメインの取得は完了ですが、設置方法はお名前.comでの取得の後で説明します。

 

独自ドメインの取得(お名前.com

次にお名前.comでの独自ドメインの取得方法です

お名前.com公式

 

  • STEP1
    好きな文字列で検索

    サイトトップでドメインになる文字列を検索

  • STEP2
    ドメインを選択

    検索した文字列が他人と被っていなければ、取得可能です

  • STEP3
    オプション設定

    Whois情報公開代行にチェック

  • STEP4
    契約完了
    内容を確認後、契約完了。支払いは忘れないように自動更新がオススメ

Whois情報公開代行とは、本来ドメイン保持者に課せられる名前や住所の公開の義務を、お名前.comの情報に変えた上で公開してくれるというサービスです。数百円掛かりますが、プライバシーが守られます。

 

サーバーと独自ドメインを紐付ける

新規登録したサーバーと取得したドメインを設置していきます。

新しく借りたお店(サーバー)を住所登録(ドメイン)する感じに似てる

 

  • STEP1
    ログイン>サーバー管理

    エックスサーバートップからログイン>IDの横にあるサーバー管理へ

  • STEP2

    サーバーパネル内のドメイン設定を選択

  • STEP3
    ドメイン名を入力

    ドメイン設定追加>取得したドメインを入力。推奨されている2つの項目はチェック。確認へ

これでサーバーと独自ドメインは紐付きました!

はてなブログの方は安心してください。独自ドメインを紐付けても、まだサーバーが切り替わっていないので、はてなブログのままです。

 

ワードプレスをインストールする

サーバーパネルに1度戻り、下部にあるWordpress簡単インストールをクリック

 

上部のWordPressインストール>必要な情報を埋めていきます。

  • ユーザー名・パスワードはブログで作業する為に使います
  • キャッシュの自動削除:ONのまま
  • データベース:自動でデータベースを生成する

これでブログサービスであるワードプレスの準備も整いました!

一から作ってきた方は「ワードプレスのテーマを決める」まで飛んで、その先の作業を進めましょう。

 

【引越し専用】hostsファイルの書き換え

ここからは、はてなブログからワードプレスへ引越しされる方専用です。

現状でサーバーを切り替えてしまうと、全ての記事が表示されない&急いで記事を見れるようにしてもデザインまでは間に合いません。

そこで自分だけがアクセスできるようにして、先にワードプレスでの作業を済ませてから、はてなブログからワードプレスへリダイレクトするという方法で進めていきます。

 

Macの場合

Finderで移動>フォルダへ移動を選択

 

小窓へ「private/etc/hosts」と入力し、移動

 

hostsファイルが表示されたら1番下に「IPアドレス+半角スペース+ドメイン名」を追加します。IPアドレスはエックスサーバーログイン>サーバーパネル>サーバー情報の中にIPアドレスが表示されています。

またhostsファイルは直接上書きできないので、1度複製するかコピーしたモノに追記し、上書きします。

 

これでワードプレストップからログイン出来るはずです。ログインは「ドメイン名+/wp-admin/」で検索すると直接管理画面にも飛べます

変更したhostsファイルは全ての準備が整ったら、忘れる前に元に戻してしまいましょう

 

Windowsの場合

Windowsの場合は「Windowsキー+Rキー」>「ファイル名を入力して実行」>名前に「drivers」と入力し「OK」>etcファイルの中にあります。

左下の検索窓に「drivers」でもhostsファイルを見つけられるハズ。

Windowsの場合も直接上書きはできないので、テキストエディタのメモ帳を右クリック>「管理者として実行」>「ファイル」→「開く」からhostsファイルの1番下に「IPアドレス+半角スペース+ドメイン名」を追加し上書きを完了します。

 

これでワードプレストップからログイン出来るはずです。ログインは「ドメイン名+/wp-admin/」で検索すると直接管理画面へと飛べます

変更したhostsファイルは全ての準備が整ったら、忘れる前に元に戻してしまいましょう

 

ワードプレスでの設定

これで皆さんが自身のワードプレス管理画面へと入れるようになったと思います。ここからはワードプレスでの設定を行っていきます。

自身のワードプレス管理画面へはワードプレストップから入れますが、1番わかりやすいのは検索窓に「設定したドメイン名+/wp-admin/」を入れ、検索してみてください。

 

ワードプレスのテーマを決める

ダッシュボード>外観>テーマ

テーマとはブログデザインに使えるテンプレートの事です。このブログ「SYUMI LABO」ではJIN(ジン)という有料のテーマを使っています。

勿論テーマには無料のモノも多く、使いやすい無料テーマだとCocoon(コクーン)が1番有名です。僕自身がJINと悩んだのはSANGO(サンゴ)THE THOR(ザ・トール)

テーマは皆さんの好みで選ぶべきだと思いますが、できれば有名で利用者の多いテーマをオススメしておきます。

利用者が多いと比例して、カスタマイズなど情報が多い

 

お疲れ様でした!0からブログ作りをされた方は、これでブログサイトのできあがりです。

今はまだコンテンツとなる記事がないのであまりしっくりこないかもしれませんが、記事が増えるに連れ愛着も湧いて来ることでしょう!

収益化を目指している方は、無料ブログで使えるおすすめアフィリエイトサイト!登録方法・使い方を参考にどうぞ。

 

ブログ運営に役立ちそうな記事を何本か紹介しておきますので、良かったら参考にして貰えると嬉しいです。

 

ブログテーマに悩んだら?書ける事と書き続けられる事は似ているが違う

ブログ運営を始める上で、どんなコンテンツを作っていくか?に悩まれている方向け

【はてな・ワードプレス】SEOを意識して検索上位を狙う方法

評価を受けるのは良質な記事です。記事内ではタイトルの付け方から、アクセス数が稼げる無料サイトなども紹介しています

ブログのアイキャッチ画像とは?アイキャッチの作り方と設定方法

アイキャッチ画像はコンテンツの顔です。設定方法からお洒落なアイキャッチが作れる無料サイトなど紹介

アドセンス広告に合格する為の準備と申請方法

ブログ運営が上達するとGoogleから広告料を受け取る事ができます。その為の準備も紹介しています

もしもブログサイトが上手く表示されない場合は、記事の1番最後に怪しい箇所を提示しているので参考にしてください!

 

【引っ越し専用】記事を移す

最終的にはてなブログの記事からワードプレスの記事にリダイレクトするので、ワードプレス内に同じ記事を用意します。ここでやることは2つです。

  • パーマリンクの変更
  • 記事のエクスポート→インポート

 

ほとんどの方が、はてなブログではカスタムURLを設定していたと思いますが、標準のフォーマットのままだった方も大丈夫です。

 

ダッシュボード>設定>パーマリンクの設定>カスタム構造を選択

カスタムURLで投稿していた場合

「/entry/%postname%/」を入力

標準フォーマットで投稿していた場合

「/entry/%year%/%monthnum%/%day%/%hour%/%minute%/%second%/」を入力

これで記事をワードプレスに移す際にはてなブログで設定したURLを引き継ぐので、得ているSEO的評価の変化も少なくなるはずです。

 

僕自身は基本はカスタムURLでしたが、設定を忘れていて標準のURLもチラホラ。まとめてのパーマリンクの書き換えはどちらか一方でしか出来ません。

多い方でパーマリンクは設定し、対応できなかった記事は手動で書き換えます。(手動変更は記事編集で出来ます。はてなとほぼ同じ!)

 

はてなブログの記事をエクスポート→インポート

はてなブログダッシュボード>設定>詳細設定>はてなブログタグのリンク>記事本文にはてなブログタグのリンクを付与しないにチェックを入れる

 

ダッシュボード>設定>詳細設定>エクスポート>記事のバックアップと製本サービスを選択

 

ダウンロードしたファイルは直接ワードプレスにインポートするので、分かりやすい場所で保存しておいて下さい。

 

ワードプレスへ記事をインポートする方法

ここからはワードプレスでの作業です。プラグインが登場しますが、プラグインはワードプレスで使える便利なツールです。

 

管理画面>プラグイン>新規追加>右上の検索窓に「Movable Type・TypePad インポートツール」と入力。

この「Movable Type・TypePad インポートツール」はワードプレスへ記事をインポートするのに便利なプラグインです。いますぐインストール→有効をクリック

 

ツール>Movable TypeもしくはTypepadの「インポーターの実行」をクリック

 

小さくて見えづらいですが白色の「ファイルを選択」に、先ほどダウンロードしたはてなブログの記事が入ったファイルをインポートします。

 

見出しの変更(例 h3→h2)

はてなブログでの大きな見出しはh3から始まりますが、ワードプレスではh2が1番大きな見出しになるので置き換えていきます。

しかし手動で行うには少々面倒なのでプラグインを使って進めていきます。

 

管理画面>プラグイン>新規追加>検索窓に「Search Regex」と入力。インストールし有効化

 

管理画面>ツール>Search Regex

Search Regexでは文字列を検索して、指定した新たな文字列へと置き換える事ができます。このツールを使って見出しのサイズを整えていきます。

はてなブログよりワードプレスは、すべての見出しがワンサイズ大きい

 

手順

  1. 検索窓にh3
  2. 置き換え窓にh2
  3. 検索ボタンをクリックし、変更箇所確認
  4. 正しく表示されていれば置き換えをクリック

 

h3をh2に変更する事によって、ブログ内からはh3見出しが無くなりました。この手順を守って次はh4→h3へ、h5→h4へ置き換えます

 

時間に余裕があればやった方が良い修正・設定

ここからは時間に余裕がある方や、完璧を目指す方は参考にしてください。見出しの置き換えまでで大きなトラブルは起きないと思いますが、僕自身が行った修正と便利だったプラグインも紹介しておきます。

筆者
筆者
はてなブログからワードプレスへ移る時に、一番難解なのがプラグインの取捨。色々探すにも時間が取られるので、「何か書いてあったなぁ」程度でも覚えておいたほうがラクだと…

 

目次を消す・目次をつける

ワードプレスでは、はてなブログ時代の目次[contents]のデザインが効かないので、消去した方が良いです。消去は手動でするしかありませんが、新しく目次を付ける場合は「Rich Table of Contents」(プラグイン)がデザイン的にも綺麗で便利です。

Rich Table of Contentsを設定しておけば、「h2見出しが3個以上の記事に自動で目次挿入」や、デザインをテンプレから選ぶなどが可能

 

アイキャッチ画像の差し替え

はてなブログ時代にはアイキャッチサイズの指定等、あまり気にしなくても綺麗に表示出来ていましたが、ワードプレスでは綺麗に表示されない事があります。

画像サイズが大きすぎる場合はプラグインでどうにかなりますが、小さすぎる場合は差し替える必要が出てきます。

 

「Regenerate Thumbnails」

Regenerate Thumbnailsはブログ内の画像からサムネイル画像を再生成してくれます。画像サイズやテーマの変更時にも役立ちます。

XO Featured Image Tools

XO Featured Image Toolsは投稿の画像からアイキャッチ画像を自動生成します。

EWWW Image Optimizer

EWWW Image OptimizerはNextGEN GalleryやGRAND Flagallery を含む WordPress 内の画像のファイルサイズを縮小します。サイトのスピードアップに役立ちます。

 

画像データの一括ダウンロード

記事のインポートが済めば今まで通り画像が表示されています。ですが表示される画像は、はてなフォトライフからデータを引っ張っている状態なので、はてなサーバーに何か問題が起これば表示されなくなる危険もあります。

この件に関してはコチラの記事が1番分かりやすいので、参考にどうぞ!

 

【引っ越し専用】エックスサーバーへ切り替え

お疲れ様でした!長々と作業をしてきましたが、ワードプレスのデザイン等が落ち着いた方は、ネームサーバーをエックスサーバーに切り替えて作業は完了になります。

 

お名前.com→エックスサーバーへ切り替え

お名前.com Naviにログイン>ドメイン>ドメイン機能一覧>ネームサーバーの切り替え

 

  1. 使用するドメインを選択
  2. 初期ではネームサーバーの欄が2つまでしか表示されていませんが、赤く囲った“+“ボタンで5つまで増やします
  3. ネームサーバー1→「ns1.xserver.jp」
  4. ネームサーバー2→「ns2.xserver.jp」と順にネームサーバー5まで埋め、変更

ネームサーバー1〜5は基本皆さん同じ文字列のハズですが、このネームサーバーの確認方法はエックスサーバー>サーバー管理>サーバー情報に記載があるので確認してください

 

DNSレコードの変更

はてなブログProで運営を始めた頃「サブドメインが〜…」という情報を元にコピペした方も多い事でしょう。忘れた方の為に過去設定した箇所から振り返ります。

 

おなまえ.com Naviにログイン>DNS>ドメインのDNS設定

 

DNSレコードを設定する>ドメイン名を選択クリック、「次へ」クリック>DNSレコード設定を利用する欄の「設定する」をクリック

 

ページ中程にある、過去CNAMEで設定した項目で「削除」にチェックを入れ進めます。

この項目が完了するとブログサイトは完全にワードプレスへと移行します

パーマリンク(カスタムURL)の変更がまだ完了していない方は先に変更を!

 

はてなブログからワードプレスへリダイレクト(ドメイン変更にも有効)

現在はてなブログの記事とワードプレスの記事は同じドメイン・同じURLになっていると思います。という事は同じ記事が2つある事になるので、ワードプレスの記事にリダイレクトして「本家はワードプレス」という事をGoogleなどに理解して貰う必要があります。

 

はてなブログダッシュボード>デザイン>ヘッダ>タイトル下

 

<script>
<!–
var newDomain = “https://ドメイン名”; // 変更箇所
var path = location.pathname;
var url = newDomain + path;
var link = document.getElementsByTagName(“link”)[0];
link.href = url;
// 0秒後にジャンプ
setTimeout(“redirect()”, 0);
function redirect(){
location.href = url;
}
–>
</script>

変更箇所となっている「ドメイン名」を自身のモノに変更して、ヘッダ>タイトル下に書き加えます。変更後、はてなブログの記事からワードプレスの記事へ飛ぶか?確認してください。

 

はてなブログでの作業

リダイレクトする事によって、はてなのアクセス数はワードプレスへと流れ始めます。はてなの解約時期ですが、検索エンジンのキャッシュが切り替わるまでしばらく時間がかかるはずです。

その間にはてなの詳細設定でnoindexにしておきましょう

ドメインを変更する場合

僕自身もドメインを変更しワードプレスへ引っ越しましたが、アクセス数よりもサーチコンソールの順位が納得いくまでは、はてなブログは残しておく事を強くオススメします。

経験上主要な記事の検索順位には問題は無さそうですが、ドメインがキーワードになっている場合、変更後にそのワードが抜ければふるい落とされる記事もあるかもしれません。

当方、現在引っ越し後1ヶ月程経過しアクセス数は70%程。3ヶ月様子を見るつもりです

 

【SSL化】最後に確認を

これで全ての作業は完了しましたが、僕自身が引っ越した時に1番上手く行かず悩んだ箇所を紹介しておくので、皆さんも確認しておいてください!

 

エックスサーバーログイン>サーバー管理>ドメイン欄のSSL設定

画像はSSL設定に入ったところですが、ドメイン名の横の独自SSLが1個となっています。これは無料のSSL化がちゃんと有効になっている証です。

サーバー契約当初に“独自SSLを有効“にした筈なのに有効になっておらず、しばらくサイトのhttps化ができずに表示されないトラブルが起こりました。

 

ちゃんとSSL化(http→https)が出来ていれば、ブログサイトも表示されている事でしょう!

 

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です