ブログサイト引っ越し顛末記:Ameba Owndからエックスサーバー+ワードプレスへ(2023.03.31)

ブログあの手この手

ブログ開始の経緯

2017年6月に現役を引退したのを機にブログを開始した。50代半ばに山登りの趣味に復帰し、山愛好家のSNS「ヤマレコ」に山行記録をアップしてきた。非常によくできたサイトで、簡単に山の記録を作成できて重宝してきたのだが、引退を機に山以外にも発信したくてブログサイトを立ち上げた次第だ

当時はブログ作成についての知識もないまま、Ameba Owndという新しくサービスを開始したサイトを選んで始めた。しばらくして気づいたのだが、ブログサイトとして有名なアメブロの関連サイトで、主にホームページを作成するのに適したサービスだった

Ameba Owndについて

ブロック形式でホームページをデザインできる仕様になっており、初心者でも比較的容易にサイトを立ち上げることができた。6年近く使ってきて私なりの評価を以下にまとめてみた

良かった点

  • HTMLやCSSなど、専門的な知識がなくても、サイトを構築できる
  • 種類は限定的ではあるが、サイトをデザインするテーマが用意されており、そのテーマを選ぶことで自分のイメージに近いサイトを作成できる
  • ブロック方式を採用しており、タイトルやヘッド画像、投稿欄のデザインをはじめ、サイドバーと呼ばれる領域にプロフィール、新着情報、人気記事、カテゴリー、アーカイブなどのモジュールをドラッグして構成することができる
  • ブログの作成も容易で、写真や動画のはめ込み、外部リンクの設定なども簡単にできる
  • 1GBまでは無料で使用でき、それ以上の容量は有料になるが、良心的な料金設定である
  • CSSやHTMLのコードを追加することで、限定的ながらカスタマイズできる
  • 何よりも、素人の私でも短期間にブログサイトを立ち上げることができた

残念だった点

  • ページ内リンクを貼ることができず、投稿記事の構成を分かりやすくするための目次から各見出しへジャンプさせることができない(高度なCSSやHTMLなどの知識があればできるようだが・・)
  • 図表を簡単に挿入できない(エクセル表をHTMLコード変換して表を作成することはできた)
  • 山の記録に歩行ルート図や標高グラフを入れてそれらを連動させることができない(別々に固定画像として挿入することはできた)
  • ワードプレスのような広く普及しているブログ作成ツールではなく、独自のプラットフォームを用いているため、一般的なHTMLコードを作成しても上記のようなニーズを満たすことが難しい場合が多い
  • 問い合わせに対するサポートが限られる(特に技術的な質問に対して)。また応対する担当者によってサポートの質が異なる。懇切丁寧な方がいる一方で、総じてお仕着せのマニュアル通りのそっけない対応が多い印象
  • 他のメジャーなブログサイトに比べ、ユーザーコミュニティが小さく、ネット検索しても解決策の投稿記事が見つからない
  • メジャーな他サービスからの乗り換えについては、データの引っ越しなどのサポートがあるが、逆の場合(他へ移る場合)はほとんどサポートも対応もない(今回の引っ越しでも、データ移管に必要なFTPへのアクセスができないとか、自動的に新サイトへリダイレクトする設定もできないし、サポートもない)
  • 私の使用目的には関係ないが、ブログで広告収入を得ようとする場合は、Googleなどの検索との親和性が低いため、閲覧数を稼げない(ようだ)
  • サイトの引っ越しの場合、上述のようにリダイレクト設定ができないため、これまで蓄積した閲覧実績を新サイトに引き継ぐことができず、ゼロから実績を積み上げる必要がある。引っ越し当初は閲覧数や広告収入は相当落ちると思われる(広告リンクの貼り付けをブロックしている私には関係ないが)
  • 2022年6月27日(月)をもってAmeba Owndアプリの提供が突然終了し、PC版のみの利用になった。「Ameba Owndの特性により、各種カスタマイズをされるお客様が多く、そのご要望にアプリが応えられていない状況が続いて」いたことによる提供の終了と説明された。スマホ用の設計はワードプレスのスマホ表示よりも良くできていた。PCを持たないスマホ世代の若者にとっては致命的なサービス終了だと思う
  • 将来的にAmeba Owndが閉鎖される懸念を払拭できなくなった(他のブログサイトでもありうることではあるが)

新サイトへの引っ越しを決めるにあたって

引っ越し方針

  • Ameba Owndで感じた種々の不便を解消すること
  • 将来的な汎用性、拡張性を担保すること
  • 実績があり信頼できるサービスであること
  • 万一のサービス停止などによる引っ越しにも容易に対応可能であること
  • 技術的サポートやノウハウなどの情報が得られること(サービスプロバイダー、ユーザーコミュニティ、ネット検索など)
  • 良心的な料金設定であること

使用するツール選択

はてなブログやアメブロなど、Ameba Owndに代わる既存の人気ブログサイトは、利便性が高いものの同様な問題に直面する可能性が高いので、世界中で最も広く使われているブログ作成ツールのワードプレスを選択することとした

また、レンタルサーバーについては、以下のメジャーなものに絞って検討した。 

ConoHa WING/GMOインターネット株式会社

エックスサーバー/エックスサーバー株式会社

mixhost/アズポケット株式会社

各社ともサービス内容は以下のように同じ

  • サーバーの設定
  • 独自ドメイン(URL)の無料設定
  • ワードプレスの無料インストールサービス
  • ワードプレスの簡易移行サービス(私の場合はワードプレスを使っていなかったので関係ない)
  • ワードプレスのテーマ「COCOON」のインストールサービス
  • 無料SSL対応
  • バックアップサービス

各社とも料金設定に大きな違いはなく、上記のサービスなどをセットで提供している。その中で、ちょうど半額キャンペーンを行っていたエックスサーバーを利用することにして一番長い3年契約を選択した(データ容量300GB月額990円⇒495円)。3年間半額で使用できるのはありがたい

さらに他社からのデータ移管サービス(実額33,000円)が無料でついていたが、私の場合はAmeba Owndという特殊なプラットフォームで、かつFTP接続できないため、データの取り出しができなかった。また、ワードプレスを使用していなかったので、仮にFTP接続してデータを移管できたとしても、ワードプレス形式でデータを作成することはできないためデータ移管サービスの利用はできなかった

引っ越しタイミング

これまで使用してきたAmeba Owndの年契約(容量無制限、年額9,600円)の更新が5月1日であることから、更新前に引っ越しを完了できるように考慮した。データは移管サービスが利用できず、後述するように手作業による移動になるため、ざっくり1か月くらいはかかるだろうと見積り、作業開始時期を逆算した

ちょうどエックスサーバーが半額キャンペーンを3月24日まで実施していたので、3月15日にエックスサーバーを契約し、ワードプレスを使用できる環境を整え始めた

ワードプレスに期待する点

  • 図表の挿入、目次の自動作成、ページ内リンクなど不便さを感じていた点を解消できること
  • プラグインの機能を追加することで、歩行ルート図と連動した標高グラフの作成など、やりたかったことが実現できること
  • 移管する投稿記事をすべてワードプレスで作成することで、将来的なデータ移管を容易にできること
  • 技術的な問題点の解決方法やノウハウなどを容易に得られること(ネットで検索すると、解決方法やノウハウに関する多くのブログが見つかる)
  • ネット検索以外に、ユーザーコミュニティへ質問することで、他ユーザーや製作者側からクイックな回答が得られる
  • バージョンアップや技術的な改善などが継続して行われており、機能性の向上やセキュリティ向上が図られる
  • バックアップが自動作成される

新サイトの作成

新サイトへ移行するにあたって、「野風に吹かれて」のブログサイトのイメージを刷新し、新たに再出発することも検討したが、以下の作成方針に落ちついた

作成方針

  • 従来の「野風に吹かれて」のイメージを踏襲し、継続性を持たせる
  • ヘッド画像やタイトル、メニュー、サイドバーなどの構成は、従来サイトを複製して閲覧者が違和感を持たないようにする(訪問者はそれほど多くはないが)
  • ブログサイトのイメージ刷新などは、新サイトが定着したのちに検討する

テーマの選定(COCOON)

テーマとはブログ作成のプラットフォームのようなもの。作成当初は、ワードプレスに無料で用意されている膨大なテーマから、従来のサイトのテーマに比較的近いものを数パータン選択してサイトを再デザインした。海外で作成されたテーマが圧倒的に多く、機能のメニューや取扱説明などが英語やスペイン語などで書かれ、日本語対応しているものは限定されていた

Ameba Owndのようにブロックデザインできるテーマも多くあったが、使い方を理解するのに手間取った。日本語ですらどうやって使ったらいいのかなかなか要領を得ないのに、英語で理解するのはさらに困難を極めた

2-3日悪戦苦闘し、結局はエックスサーバー契約時にプレインストールされたCOCOON(日本人が作成したテーマ)を使用することに落ち着いた(笑)。プレインストール時に、親テーマと子テーマの両方がセットアップされており、子テーマでデザインのカスタマイズを試行錯誤してみると、非常によくできたテーマであることが実感できた

COCOONのカスタマイズ

ワードプレスでは頻繁にバージョンアップが行われるが、自分好みにデザイン等をカスタマイズした場合、バージョンアップの際にデフォルトに戻ってしまう。それを避けるために、テーマのコピー版である子テーマを作成しておき、カスタマイズは子テーマで行う必要がある

バージョンアップの際に、先にカスタマイズされた子テーマの構成情報を読み取りに行き、バージョンアップ後にその情報が反映されてカスタマイズが維持される仕組みのようだ。子テーマの作成は容易なので、推奨のCOCOON以外のテーマを選択しても、子テーマでのカスタマイズ対応は容易である。もちろんカスタマイズを一切しないという場合は、親テーマをそのまま使用し続けることも可能

COCOONは無料テーマとは思えないほど機能が充実しており、ワードプレス解説本やサイトで推奨されていることが納得できる。利用者が多いので、ワードプレスと同様、ユーザーコミュニティが大きく、質問事項に対する回答やノウハウなどの情報が得られやすい。COCOON製作者も頻繁に情報提供してくれている

とはいえ、初心者がCOCOONの機能を理解して自分のブログサイトをデザインするには一定の習熟が必要。私も上述した作成方針に沿うように体裁を整えるまでに2‐3日は悪戦苦闘した。ラーニングカーブが徐々に上がると、カスタマイズのスピードも上がり、次第に形になっていったのが嬉しかった

今回のカスタマイズでどうしてもうまくいかなかったのが、ヘッド画像とプロフィールの位置構成。従来のAmeba Owndのテーマ「Vanilla」では、ヘッド画像の右横にプロフィールを配置していた。しかしながらCOCOONでそれを実現できる方法が見つからず、プロフィールをサイドバーに配置すると、ヘッド画像の右下に配置されてしまう

おそらくCOCOONでもヘッド画像の横にプロフィールを配置できるのだろうが、現時点では分からない。将来のサイトイメージの刷新と合わせて今後の研究課題となった(後記:あの手この手で従来サイトを複製したが、公開初日から手を加え続けて冒頭の画像のように少しずつマイナーチェンジしつつある)

引っ越し作業

上述したようにデータ移管サービスを利用できなかったため、以下のデータ移管手順で記すように手作業で一つひとつブログ記事を移管する方法を取った。

COCOONの下準備

ヘッダー画像の選定とアップロード

ブログサイトの顔ともいうべきヘッダー画像を選び、アップロードする。私は以前と同じヘッダー画像を使用した

カテゴリー設定

投稿記事の分類カテゴリーを階層構造も含めて定義しておく。私の例では、

「よもやま話⇒レビュー」のような階層

カテゴリーとメニューは全く同じでなくてもよいが、整合性を持たせておくと都合よい

メニューバーの設定

設定したカテゴリーからメニューバーに表示する項目を選択し順番などの体裁を整える。カテゴリーで設定した階層と同様にメニューバーの階層構造も定義しておく(同じ階層構造にしておくことをお勧めする)

スラッグ設定

カテゴリーのスラッグを設定する

スラッグとは後述するパーマリンク(https://で始まる各記事のURL)に使用するもの。日本語は文字化けするので、カテゴリーや投稿名はアルファベットでスラッグを書き、URL用の定義をシンプルにしておく。例えば、上の階層の例の場合は

「よもやま話」をmiscellany、「レビュー」をreview、とスラッグ定義した

スラッグの定義を後から変更すると、全ての記事のパーマリンクに影響しかねず、記事のURLを保存した人が再度アクセスしようとしても、URLが変わってしまっているので該当記事にアクセスできないという事態になる

パーマリンク設定

記事のパーマリンクの構成を定義しておく(https://で始まる各記事のURL)。私は以下の構成を選択した。最初の walking-in-the-wind.com は当ブログサイトのドメイン名

 https://walking-in-the-wind.com/カテゴリー/年月日/投稿名

レビュー記事の投稿名「映画 アルピニスト」の例であれば、

 https://walking-in-the-wind.com/miscellany/review/2022/07/15/movie-alpinist/

URLのカテゴリーの位置に、選択したカテゴリー(レビュー)に基づき miscellany/review/ のように自動で階層表示される

最後の movie-alpinist は私が投稿する際に手入力した投稿名のスラッグ。英語圏のブログでは、記事のタイトルをそのまま投稿名のスラッグにしているケースが多い。URLを見ただけで、何の記事か分かるので便利だ

投稿の度に投稿名のスラッグを入力するのが面倒な場合は、パーマリンク設定でデフォルトの「基本表示」を選択しておけば、自動で番号を振ってくれる。ただし、URLからは何の投稿かは判別できなくなる

サイドバー設定

プロフィール、フォロー、カテゴリー、アーカイブなど、サイドバーに表示する機能を設定する。ウィジェットと呼ばれるワードプレスが用意している機能を選択し、好みに応じて仕様を定義すれば、自動で機能するようになるので大変便利だ

プラグイン設定

必要な機能をプラグインで追加する。私の場合は、GPSログから歩行ルート図と標高グラフを作成するWP-GPX-Mapsや、データ移管作業中に新サイトを非公開にする(工事中や準備中の表示にしてコンテンツを見せなくする)ためのUnderConstructionなどのプラグインをインストールした

ワードプレスでブログを始めるための初心者向け解説サイトで、最初に導入すべきプラグインが紹介されていたので、上記のほかにも5-6個のプラグインを入れた。ところが、どれかがWP-GPX-Mapsと干渉したらしく、地図や標高グラフが表示されなくなってしまった。これらプラグインを無効の設定にしたら、地図などが正常に表示されるようになった

今後どのプラグインが干渉したのか一つひとつ有効化して干渉するかどうか調査するつもり。判明したら後記しておきたい(後記:順番にプラグインを有効化したが、どれも干渉することなく、ほとんどのプラグインを元に戻してもWP-GPX-Mapsは正常に機能し、原因は把握できなかった)

作業量

Ameba Owndで引っ越しまでに投稿した記事数は以下の通り、合計334記事

山の記録:153

ウォーキング百景:86

旅の記録:16

よもやま話:79

この中で、山の記録が記事数の上で最も多く、また個々の記録も圧倒的に写真や文字数が多く、大変な移管作業になる

データ移管手順

データ移管に関してはもっと良いやり方があるのだろうが、以下のように愚直に一つずつ手作業する方法を取った

  1. 元サイトの記事を写真付きでそのままコピーして、一つひとつマイクロソフトのワードにペーストする
  2. 元サイトの記事中の写真を一つひとつ画像コピーして、各記事のフォルダーに順番に並べる(ファイル名を頭から順に1,2,3・・のようにしておけば、貼り付ける際に番号順に行うことができて容易)
  3. ワードにコピーした記事をワードプレスに貼り付ける。この際、ワードプレスには写真が一緒に読み込まれず、点線の四角い枠となって表示される
  4. 点線の四角の枠に、手順2で保存した写真を順番に嵌め込む。Youtubeなどの動画の埋め込み画像も読み込まれないので、再設定する
  5. リンクなどをチェックし、再設定が必要なものはリンクを貼り直す(ほとんどはリンク情報が維持される)
  6. 各記事のカテゴリー選択、投稿記事名のスラッグを追加記載する
  7. SEO、メタ、タグの記述を必要に応じて行う(私のように閲覧数や広告収入を気にしないのであれば記載不要かと思う)

引っ越しを終えて

当初1か月程度を要すると見込んだ移管作業は、約2週間で終えることができた。サンデー毎日の隠居の身なので、毎日朝から深夜までPCとにらめっこした成果だ。こんなに根を詰めて一生懸命にPC作業したのは20代の頃以来か・・

ワードプレスやCOCOONの理解と設定に最初の5-6日を使ったので、実際のデータ移管だけをとれば1週間程度で終えたことになる。数をこなすうちに順調に進みだした

今回の引っ越し作業を終えた感想は以下の通り

  • ワードプレスによって各段にできることが増えた
  • 当初、期待したページ内リンクや目次の自動作成、GPS記録からのルート図や標高グラフの作成などがスラスラできるようになった
  • COCOONは無料テーマにしては素晴らしい出来で重宝した。1-2万円で有料テーマを購入すると、もっと使い勝手がよくなるらしいが、今はCOCOONで十分
  • ワードプレスやCOCOONで何度も壁にぶち当たったが、ネットには多くの解決法やノウハウを紹介するサイトが簡単に見つかり、何度も救われた
  • 中には、HTMLやCSSなどの専門知識のある方が、使い勝手を改良するためのコードを紹介していて参考になる(安易に信用すると、ハッキングなどが仕込まれているかもしれないが・・)
  • Ameba Owndの仕様で、手作業にてデータ移管せざるを得なかったが、この作業を通して習熟度が一気に上がった(笑)
  • また、一つひとつワードにコピペしたおかげで、移管作業するうちに完璧なバックアップファイルが出来上がった(笑、笑)
  • 大変な作業だったが、このタイミングでワードプレスに思い切ってデータ移管したことで、今後に起こりうる不測の事態にも柔軟に対応可能となり、枕を高くして寝られるようになった
  • 充実した機能や拡張性に満足した一方で、パワポのような柔軟性はなく、ちょっと凝ったことをしようと思うとHTMLやCSSの知識が必要になるのは残念。今後のさらなるプラグインの充実やテーマの機能アップに期待したい

最後に、当サイトをフォローしてくださっている方や、時々訪問してくださる方々には今回の引っ越しによってご迷惑をおかけすることになりましたが、ご理解賜り、引き続き拙稿を見ていただければ大変うれしく思います

しばらくはサイトのデザインや移管データの微修正を続けることになりますが、ご容赦のほどお願い致します

タイトルとURLをコピーしました