前回「エニシスエンジニアサポートからFrankuLOGへリニューアル」という記事で、ブログサイトのお引越しとリニューアルについてお知らせをしました。
今回は、サイトのお引越しで具体的にどんなことをしたのかについてご紹介します。
お引越しの手順とリニューアルの手順、リニューアルする際に大変だったことをまとめていますので、ぜひ参考になさってくださいね。
Webサイトのお引越しとは
サイトのお引越しとは、Webサイト（ホームページ）を別の場所に移すことです。
- もっと費用のかからないサーバーへ変えたい
- 今運用しているWebサイトの一部を独立させたい
- ホームページの内容をリニューアルすると同時に、URLも変えたい
といった場合に、Webサイトのお引越しをします。
今までと同じURLを入力したのに、表示されたホームページが違ったことはありませんか？
それはWebサイトがお引越ししたからです。
リダイレクトといって、以前のURLから自動的に新しいURLへ遷移するように設定されています。
エニシスエンジニアサポートからFrankuLOGへリニューアルするにあたっておこなったことは、
- URLを変更する（お引越し）
- Webサイトのデザインを変更する（リニューアル）
- 記事の内容を、サイト目的に合わせて加筆・修正する（リニューアル）
の3つです。
お引越しの手順
サイトのお引越しは、少々やっかいな作業。サイトの引っ越し代行業者もいるくらいです。
できるだけ簡単に、確実にお引越しをしたい。
そんなとき便利なのが「プラグイン」です！
Webサイトのお引越しに役立つツールは、ちゃんと用意されています。
サーバーとドメインを取得した後の大まかな手順は、以下の通りです。
- 引っ越しする前に、Webサイトのバックアップをとる
- WordPress管理画面から「All-in-One WP Migration」をインストール
- エクスポートする
- 引っ越し先のWordPressにもAll-in-One WP Migrationをインストール
- インポートする
- 「Search Regex」をインストールして、パーマリンクの設定を確認する
詳細は、↓こちらの記事が参考になります。
記事では、ローカルサイト→WordPressへお引越しになっていますが、WordPress→WordPressでも同じやり方です。
リニューアルの手順
Webサイトのお引越しが終わったら、続いてリニューアル作業にとりかかります。
ひとつずつ進めていきます！
ワイヤーフレームを確認する
ワイヤーフレームはWeb制作の計画書のようなもの。
デザインやコンテンツの配置だけでなく、細かく指示が書かれています。
それを確認し、あらかじめやり方を調べたり、不明点は質問したり、ワイヤーフレームどおり再現できるよう下準備をします。
テーマを変える
今回は、LightningからCocoonへテーマを変更します。
エニシスエンジニアサポートは、「Lightning」というテーマを使用していました。
サービスの紹介とブログを兼ねたWebサイトだったため、Lightningがちょうどよかったのです。
しかし、FrankuLOGは情報発信のための「ブログサイト」。
SEO対策や表示高速化が施され、記事を継続して投稿しやすいCocoonが適しています。
Webサイトの目的に合わせて使いやすいテーマを選ぶことは、とても重要です。
トップページを整える
詳細部分を適宜やりとりしながら、サイトの顔「トップページ」を整えます。
- ロゴやファビコン画像を入れる
- メニュー表示
- 記事の配置
- 見出しをカスタマイズ
など、ワイヤーフレームの通りに配置していきます。
ロゴや画像は、FrankuLメンバーのWebデザイナー清水に作成してもらいました！
ここで使用されたメインカラーを、見出しの背景に設定しています。（ちょっとだけカスタマイズしました。）
サイドバーを整える
サイドバーにFrankuLのプロフィールやURLを入れます。
プラグインを使って、SNSと連動させました。
ブログの構造を整える
記事のカテゴリーとタグの整理して、一部の記事を非公開にしました。
すでに公開した記事を「非公開」にするのは勇気がいります。
それでも決断したのは、読者が「読んでよかった・有益だった」思える記事だけに厳選したから。
伝えたいことと離れてしまった記事を除外するのも、リニューアル時の大切な作業です。
お引越し＆リニューアル作業で大変だったこと
お引越し＆リニューアル作業が、全てスムーズに進んだわけではありません。なかなかうまくいかなかったこともあります。
今後サイトのお引越し＆リニューアル作業を考えている方は、こんな点に気をつけてください。
プラグインの影響でサイトが右寄りに！
お引越し前に使用していたプラグイン「VK BLOCKS/VK pattern」の影響で、サイトが右寄りになってしまいました。
スマホやノートパソコンで見た時は異常がないのですが、大きな画面だとサイト全体が右にずれています。
「VK BLOCKS/VK pattern」を無効化したところ、無事に修正できました。（注1）
URLが変更になれば、分析ツールなども入れなおすことになります。
後々予期せぬ問題がおきないよう、プラグインは全てインストールしなおす方がよいでしょう。
記事のレイアウトが崩れた
Lightningの投稿機能は、カテゴリーごとに分割して表示させることはできません。記事は全て同じ場所に投稿されます。
そこで、エニシスエンジニアサポートのブログでは「インタビュー」と「便利ツールや情報」の2種類の記事を、カテゴリーごとに投稿できるように設定していました。
一方、Cocoonは管理画面から簡単にカテゴリーをわけることができます。ブログに特化したテーマだけに、使いやすくできていますね。
Cocoonのデフォルト設定でブログの構造を整えたところ、見事にレイアウトが崩れてしまいました……
特に、html/cssで手書きしていた目次や枠（フレーム）が、大変な状態に。
1記事ずつ該当箇所を確認し、全て修正しました。
Instagramとの連動に四苦八苦
SNSはサイドバーに表示させる設定をしました。
しかし、インスタグラムと連動させるプラグイン「Smash Balloon Instagram Feed」を使用したところ、スマホ画面でうまく表示されません。（2022年5月現在）
Cocoonとの相性が良くないのか、こんな画面になってしまいます。
そこで、PCではサイドメニューに、モバイルではフッターに表示されるように設定しました。（注2）
サイドバーのプロフィール設定
FrankuLOGでは、サイドバーにFrankuLのプロフィールを表示させています。そして、記事の最後には、記事作成者の名前を載せています。
しかし、Cocoonのデフォルト設定でサイドバーにプロフィール表示させると、投稿記事のサイドバーがFrankuLではなく、記事作成者のプロフィールになってしまいました。
つまり、FrankuLのプロフィールはトップ画面にしか表示されないという状態。
こちらはカスタムHTMLにソースを入れ込むことで解決しました。
お引越し＆リニューアル完了
山あり谷ありのお引越し＆リニューアル作業でしたが、なんとか形にすることができました！
自分で調べて試してもイメージ通りにならない時は、その都度代表川角にサポートを要請。
ひとつずつ不具合を解消していきました。
問題が解決したときの爽快感たるや、言葉に表せません！
そして、問題にぶつかるたび、とても勉強になります。
「そんな考え方をするんだ！」
「見落としていたポイントはここか！」
「そこは確認しなかったな」
スムーズにいかなかったことの全てが、学びにつながっているのです。
相談できる相手がいるって、本当に心強い。
心強いだけでなく、自分が成長するための「種」をもらうことができます。
1人で頑張ることに疲れてしまった時は、ぜひ周りの人にサポートをお願いしてくださいね。
こうして無事にお引越し＆リニューアルが終わったFrankuLOGですが、実は本当に大変だったのは「この後」。
最も困難を極めたのは、記事のリライトでした。
次回は、ブログ記事のリライトとやっとの思いでつかんだコツを公開します。