はてなブログを無料版からproに移行しました。独自ドメイン取得、スマホ版デザインcssの設定、Amazonアソシエイツの再審査など、proへの移行に合わせて行った作業をまとめました。
こんにちは、あるこじ(@arukoji_tb)です。
はてなブログについて、これまで無料版を利用していましたが、ふと思い立って有料版であるはてなブログproに移行しました。はてなブログproへの移行（独自ドメインへの変更）に際し、行った各種作業について書いてみました。
自身が行った移行作業の全体像を示し、その際に実際に参考にした記事を紹介しつつ、かつ自分でproへの移行（独自ドメインへの変更）をやってみて引っかかった点や新たに気づいた点について言及します。
上記について整理する中で、移行に関する説明記事を提供して下さった多数の方のおかげで移行作業が行うことができた事を改めて実感しました。各種の設定情報等を公開頂いている皆様にお礼申し上げます。
なお、作業実施時期は2019年3月である旨を補足しておきます。
0. 前提の確認
移行作業実施について記述するにあたり、移行前提となる本ブログの移行前の状況と移行目的について記載します。本記事が参考になるかどうかの判断材料として下さい。
0-1. ブログの利用・設定状況
- はてなブログ無料版を2018年1月頃にて登録。
- 記事数は70件程度。
- アクセス数は大体200〜300pv/day
- Amazonアソシエイト登録済
- グーグルサーチコンソール、グーグルアナリティクスを設定済
0-2. pro版移行の目的
スマホ版サイトの見た目を綺麗にしたい
アクセスの履歴をグーグルアナリティクスでチェックしてみると、ほぼ8割がモバイルからのアクセスでした。そのため、年度が変わる機会に綺麗にしたいと考えました。
ドメインを独自のものにしたい
気分の問題ですが、はてなブログのドメイン（私の場合はhateblo.jp）ではなく、自身のドメインで管理してみたくなりました。
1. pro版への移行（独自ドメインの利用設定）
この項ではpro版の契約と独自ドメインの取得、そしてそれらのはてなブログとの関連付けまでを書いています。
1-1. はてなブログproの利用登録
はてなブログproの利用登録を行います。こちらについては、公式の案内を元に行えば、詰まる箇所は無いと思います。
登録プランの話ですが、私は1年プランで契約しました。このプランなら契約しても10,000円は切るので、途中でやめたとしても勉強代として払える範囲かなと考えました。金額的にお得なのは2年プランですが、2年いきなり契約するのは二の足を踏みました。
自身が登録するまで知らなかったのは、お名前.comとのコラボキャンペーンをやっているということ。pro版の契約ページに行ってみると、このキャンペーンについてのリンクが張ってあります。
workドメイン（補足:URLの末尾がworkになるということ）限定ですが、pro版を利用する場合には1年分の利用権がプレゼントされるようです。workドメインを元から使いたい方は無料なら嬉しいかもしれません。
ただ、workドメインは元々そこまで利用料が高くないんですよね……試しに私の利用しているarukojiで調べてみると、1年間の利用料は50円でした。なので、正直あまりお得感はないですね。
また、はてなブログproの30日間無料体験キャンペーンは既に終了していると思われる点も付記しておきます。以前、無料体験のキャンペーンが行われていたのを知っていたので、自分も利用前にそのキャンペーンを使えば約1ヶ月分得するなあと思っていたのですが、2019年3月時点では探せど探せど30日間無料期間キャンペーンのページは見つからずじまいでした。なお、いつキャンペーンが終わったのかについても調べてみたのですが、自分には見つかりませんでした。不十分な情報ですみません。
1-2. 独自ドメインの取得（購入）及び はてなブログproの連携設定
はてなブログproにする人の多くの狙いは独自ドメインにすることと思います。私も同様でしたので、独自ドメインを取得（購入）しました。
本作業にあたり、参考にさせて頂いたのが下記のページです。ドメインの取得からはてなブログpro側の設定まで書かれていて、大変参考になりました。
私は、利用料が比較的安価なのと一般的なイメージから.comのドメインを購入しました。
なお、上記手続きの中で一点、困惑した点がありました。ドメイン購入時におけるwhois情報公開代行に関する説明の箇所です。
「whois情報公開代行の設定を忘れないように購入時に設定する」旨の注意を上記ブログ記事のみならず、様々な記事で見かけたのですが、私が契約した際にはそのwhois情報公開代行の設定を行うためのチェックボックスが見つかりませんでした。スマートフォンから契約しようとした際に画面に登場しなかったので、念のため自宅PCからも登録画面を確認したのですが、いずれも見つからなかったです。
しかし、登録後の連絡ではwhois情報公開代行の設定がきちんとされていました。そのため、少なくとも2019年3月時点ではデフォルトでwhois情報公開代行が設定されるものと思われます。
ちなみに、whois情報公開代行メール転送オプションというものもあるのですが、これは情報公開代行とは別物の設定で有料となります。私は申し込みを行いませんでした。上記オプションの理解については、下記ページの説明が分かりやすかったです。
2. ブログ管理関連
1の項でブログのpro版への移行、独自ドメイン化までが完了した状態となりました。
この項ではpro版になって開放される設定の見直しやドメイン変更に伴う環境の最新化について書いています。
2-1. pro版のみ利用可能な詳細設定の変更
はてなブログproになると、それまで利用できなかった設定が利用可能になります。【ダッシュボード】→【設定】→【詳細設定】と移勸することで詳細設定が可能です。今回、自分が実施した設定について、以下記載します。
トップページの表示形式を一覧形式に変更
無料版ではトップページについて「全文形式」のみが選択できる状態でした。これをぱっと見の視認性が高い、「一覧形式」に設定しました。
キーワードリンクの除去
無料版では各種単語について、説明画面に遷移するためのリンクが自動的に張られていました。このリンクについて、除去されるよう設定しました。
はてなの広告を非表示
無料版では自動的に広告が挿入されるようになっていました。これについて、非表示に設定しました。
ヘッダ・フッタ（PC版）を非表示
無料版ではPC版での表示時、「はてなブログ」のヘッダおよびフッタが自動的に表示されるようになっていました。これについて、非表示に設定しました。
2-2. スマホのデザイン見直し
詳細設定が完了したら、今回はてなブログproに移行するための目的の一つであった、スマホ版デザインの見直しに取り掛かりました。
スマホ版レスポンシブデザインの設定解除
まず、元々私はPC版とスマホ版でレスポンシブ対応しているデザインテンプレートを利用していました。今回はスマホ版のみcssを設定するため、レスポンシブ設定を解除することが必要でした。レスポンシブ設定の解除を行わないと、いくらスマホ版のcssを修正しても全くサイトに反映されないことになります。
レスポンシブ設定の解除は【ダッシュボード】→【デザイン】→【スマートフォンのアイコン】→【詳細設定】で「レスポンシブデザイン」のチェックを外すことで可能です。
スマホ版デザインcssの設定
スマホ版のデザインcssの設定は【ダッシュボード】→【デザイン】→【スマートフォンのアイコン】の「ヘッダ」「記事」「フッタ」から設定可能です。
スマホ版のデザインcssを編集する際に大いに参考にさせて頂いたのが下記のページです。
上記ページを参照しながらcssを編集する上で、注意した点を以下に書いていきます。
変更を反映するボタンを押し忘れない
デザインcssを修正した際には設定画面で「変更を反映する」ボタンを押下し、反映させることを忘れないように気をつけましょう。ボタンを押下しない限り、スマホ版にデザイン変更が反映されることはありません。
設定をいっぺんに導入しない
上記ページで説明されている全てのcss設定について、一気にまとめて設定すると上手くいかなかった場合に、どこの部分が原因で上手くできていないのかが分からなくなります。そのため、各項目毎に設定・反映してみて、問題なく動いているかどうかをチェックしながら作業を進めましょう。
画面に表示される文字列・リンクするURLの記述が何処かを見極める
cssの記述は、色をどうするか・幅をどうするかといったデザインに反映させるための①どのサイトでも共通の記述部分と、画面にどんな文字を表示するか・何処へのリンクを貼るかといった②各サイトで異なる記述部分とに分かれます。
注意が必要なのはもちろん②に関してです。きちんと自身のサイトの名称／文言／URLが反映されるように記述が必要な箇所を見極めるようにしましょう。
色設定やcss記述について自分好みに修正を行う
cssを導入して問題なく動く事が全体的に確認できたら、徐々に自身の好みに近付けていきましょう。修正する上で必要になるのは、下記2点に関する情報かと思います。
- カラーコード
- cssの書き方
今回、この2点を確認する上で私が参考にしたサイトについて、以下にリンクを張っておきます。
全体のデザインcss記述の一部をスマホのデザインcssにもコピー
ここまで行って一段落……と思ったら、一点、対応が漏れていた事が分かりました。それがこの作業です。
どういう事かというと、私はこれまで一部のデザイン設定について、無料版でも設定可能なデザインcss（【ダッシュボード】→【デザイン】→【設定（レンチのマーク）】→【デザインcss】で設定可能）の箇所に記述を追加していました。そして、そこで設定した内容が、上で説明を書いたレスポンシブデザインの設定によって、PC版とスマホ版の双方の表示に反映されていました。しかし、スマホ版のみ独自にcssを設定する都合でデザインテンプレートのレスポンシブ反映の設定を外した結果、上記のデザインcssで記載した内容もスマホ版には反映されなくなることを見落としていたのです。これは盲点でした。
そのため、今後も必要なcss記述についてコピーした上でスマホ版のデザインcssの設定箇所にペーストしました。これで元々自身で設定していたcss記述について、スマホ版にも元通り適用されるようになりました。
2-3. グーグルサーチコンソール/グーグルアナリティクスの設定
ドメイン変更に伴い、元々導入していたグーグルサーチコンソールとグーグルアナリティクスについても新サイトを参照先とするように変更する必要がありました。
こちらの設定については下記ページの情報を参考にさせて頂きました。
実際にやってみて気付かされたのは、当たり前のことかもしれませんが、新ドメインになると検索情報の洗い替えには時間（日数）が掛かるという事です。ドメイン変更の手続きを済ませたらグーグルサーチコンソール等の内容が一瞬で切り替えられるのかと思っていましたが、認識が甘かったです。
3. 広告設定関連
2の項までで、はてなブログproへの移行に伴う設定見直しや環境周りの最新化までが完了した状態となりました。
この項では新ドメインのサイトにおける広告導入関連の手続きについて書いています。
3-1. Amazonアソシエイツのサイト追加申請（再審査）
新サイト追加の手続きについて
新サイトについて、Amazonアソシエイツに認めてもらうための届け出が必要です。これに関しては、下記のサイトの内容が大変参考になりました。
実際にやってみて引っかかった点
今回の移行で一番手間取ったのが、実はここでした。単純に新サイトのURLをAmazonアソシエイツの画面で追加すればよいだけと勘違いしていましたが、上でご紹介したページで説明のあった通り、新サイトに対して改めて審査してもらうことが必要なんですね。
そして、かつてAmazonアソシエイツの審査を受けて認証してもらったのだから、新サイトも簡単に審査通過できるだろうと思っていましたが、これは大きな勘違いでした。過去、審査された状態からサイトのコンテンツが増えた事で再審査の際に規約に引っかかる箇所が見つかり、サイト追加を認められなかった（つまり審査落ち）のです。
おまけに審査落ちした場合、Amazonアソシエイツの登録が認められていない状態でAmazon商品へのリンクを張るのは禁止されている事から、現在のリンクを急ぎ全て削除する旨のアナウンスを受ける結果となりました……。
最終的には、Amazon商品へのリンクの全削除、規約違反となっていると推測できる箇所の見直し、そして再審査の依頼を急いで行いました。なお、再審査の際には以下の内容を審査依頼の連絡文面に記載しました。
- 規約違反となっていたことについての謝罪
- Amazonリンクを全削除したことの連絡
- 規約違反と思われる箇所が何処かを自分なりに考え、その点について実際に対応した旨の説明
- 再審査の手数を掛けることのお詫び
平身低頭とはまさにこの事です。その後、再審査の結果、新サイトの追加について認められたため全削除したAmazon商品へのリンクを再度張り直して現在に至ります。
なお、再審査依頼から追加OKの連絡が来るまで私の場合はおよそ14時間ほど掛かったことも付記しておきます。
私の例では、規約違反があった状態で新サイトの追加依頼を行なったのがまずかったと思います。おそらく規約違反がない状態（つまり審査落ちしないと考えられる状態）で審査依頼を掛けて、一発通過していたのであればAmazon商品へのリンクが張られていたとしても、そこは甘受してもらえた可能性が高いです。そう考える根拠は、上記のAmazon商品へのリンクを削除する旨の通知が来たのは、審査落ちを2回重ねた時点だったからです。初回の審査落ち時点ではその旨のアナウンスがありませんでした。そのためあくまで私の事例においてですが、2回目の審査依頼時に規約違反での審査落ちが無ければ、お咎めなしだった可能性が高かったのかなと思いました。
よって、一度サイト追加依頼をかけて審査基準を満たさない旨の返答を受け、Amazon商品へのリンク削除については幸運にも言及されていなかったのであれば、次回審査は必ず通過するくらいのつもりで自身のサイトの規約遵守状況を見直すことをおすすめします。結果的にはそれが一番、最終的な作業負荷が軽減される道だと思います。
X. まとめ
以上が、はてなブログ無料版からはてなブログproへの移行にあたって私が行ったことに関する作業内容となります。
単なる参考サイトへのリンクだけのページとならないよう、全体像を網羅的に記載した上で、できる限り自分なりの経験に基づく注意点や対応のポイント等も付記しました。今後、無料版からproへの移行を行われる方の参考になるようであれば幸いです。
