はてなブログからWordPressへの移行 〜WordPressの設定編〜

ブログ運営

前回の記事ではワードプレスを設置し、新ホームページを自分のパソコンからだけ見られるようにしました。

今回は、私がホームページ公開前に設定した内容をお伝えします。
参考リンクも多数ご紹介しますので、ぜひご利用ください。

スポンサーリンク

テーマのインストール

ワードプレスには『テーマ』というものがあり、これをインストールすることで外観や機能が大きく変わります。

私がおすすめするテーマは『Cocoon』です。
このテーマは、

  • 無料
  • 高機能

と良い事ずくめです。

現在、当ブログでもCocoonを使用しています。

テーマのインストール方法については、作者様のサイトをご覧ください。

Cocoonテーマをインストールする方法
WordPressにCocoon親テーマと子テーマをインストールして利用するおすすめのインストール方法です。

必ず、親テーマと子テーマの両方をインストールしてください。
有効化するのは『子テーマ』のほうです

また、今後CSSを変更する場合は子テーマに書き込んでください
でないと、テーマのアップデート時に変更が全て消えてしまいます。

記事のインポート

前回の記事ではてなブログからエクスポートした記事データを、ワードプレスへインポートします。

私はこちらのサイト様を参考にしました。

はてなブログからWordPressへ引っ越し! 最新の移行手順をまとめる(エックスサーバー編)
しばらく投稿を休んでいました、さかがみです。   別にサボっていたわけではありません。その間に気づい ...

画像の移行

記事をインポートしただけでは、画像は移動されません
記事中に表示されている画像は、全てはてなフォトライフに残ったままです

そのため、記事中の画像をレンタルサーバーに移動させる必要があります。

私はこちらのサイト様を参考に作業をしました。

【Wordpress】はてなフォトライフから画像ファイルを一括移行する(記事中で利用されている画像ファイルのみ) - 踊るびあほりっく
はてなフォトライフからWordpressへ画像ファイル(画像URL)を移行する方法をまとめました。

補足1:画像のURL変更

基本的な操作は上のサイト様を参考にしましたが、私は画像のURLを次のように置換しました。

置換前:

https://cdn-ak.f.st-hatena.com/images/fotolife/J/はてなID/(\d{4})(\d{2})\d{2}

置換後:

//独自ドメイン/wp-content/uploads/$1/$2

上の\d{4}は「数字4個」、\d{2}は「数字2個」を表す正規表現です。
\d{4}\d{2}\d{2}で「YYYY MM DD」形式の「年月日」を表しています。

このように正規表現を駆使することで、一発で置換できるというわけです。

また、置換後の先頭に『https:』を入れていないのは、ネームサーバーの切り替え前はSSL化ができない(URLがhttp:〜になる)からです。

URLの先頭を『//』から始めることで、SSL化されていれば『https:』で、されていなければ『http:』で自動で接続されるようになります。

補足2:altとtitleを削除

はてなブログの場合、画像のaltとtitleに「f:id」から始まる妙な文字列が設定されています。

これが非常に気になるため、画像URLの置換と同じ要領で削除しました。

同じく『Search Regex』で正規表現を使い、次のように置換してください。

alt

置換前:

alt="f:id.+?"

置換後:

alt=""

title

置換前:

title="f:id.+?"

置換後:

title=""

記事の修正

記事をインポートしただけでは、

  • アイキャッチ画像が設定されていない
  • 見出しタグがおかしい

など、色々なエラーが残っています。

それらの修正方法については、こちらのサイト様が参考になりました。

はてなブログ移行後にWordPressで行う修正マニュアル|BLOGのメモ帳
はてなブログからWordpressへの引越し作業第2弾!前回の記事で、はてなブログの記事データをWordpressにイン

上のサイト様では『Classic Editor』というプラグインを使っておられますが、私はおすすめしません。

理由は、

  • 新しくワードプレスを始めた方なら、最新の編集環境に早く慣れたほうが良い
  • プラグインが不安定化した場合はプラグインの削除を余儀なくされ、編集方法を一から覚え直すことになる

と考えているからです。

アイキャッチ画像について

上のサイト様でも述べられていますが、アイキャッチ画像は手動で設定したほうが良いです。

私もいくつか「アイキャッチを自動で設定するプラグイン」を試してみましたが、どれもまともに動きませんでした。

これを機に、新しくアイキャッチ画像を作り直すのも手です。

私のオススメは『Canva』という無料サイトを使うことです。
高クオリティなアイキャッチ画像がすぐに作れます。

ブログのアイキャッチなら、『SNS』→『ブログバナー』で作ると良いですよ。

目次の削除について

はてなブログからインポートした記事には目次が残っており、そのままではワードプレス側の目次と一緒に二重に表示されてしまいます。

そこで、上のサイト様で紹介されているように、『Search Regex』というプラグインを使用して削除します。

私は正規表現を使って以下のように置換しました。

置換前:

<ul class="table-of-contents">[\s\S]+?</ul>

置換後:

<!--mokuji-->

これで特に問題は起きなかったです。

置換後に<!--mokuji-->を残しているのは、目次があった位置があとから分かるようにするためです。
念のため以上の意味はありません。

リンクカード下のリンクの削除

はてなブログでブログカード方式のリンクを張っていた場合、一番下にもリンクが残ります。

邪魔なので、『Search Regex』で次のように削除しました。

置換前:

<cite class="hatena-citation">(.*?)</cite>

置換後は空白にしておいてください。

かんたんリンクの修正

WordPressへの移行後に記事の編集をすると、もしもアフィリエイトのかんたんリンクが表示されなくなります。

Search Regex』と正規表現を使って、かんたんリンクのコードの改行を削除すると直ります。

WordPressの設定

私が行った設定のうち、主だったものをご紹介します。

メタ情報の非表示化

デフォルトでは、サイドバーに「メタ情報」という項目が表示されます。
通常は表示する必要がありませんので、消してしまいましょう。

設定ページの「外観」→「ウィジェット」→「サイドバースクロール追従」に入っている「メタ情報」ウィジェットを削除すれば消すことができます。

投稿日の時刻の非表示化

デフォルトでは、記事の投稿日欄に時刻まで表示されます。
これも、必要なければ消してしまいましょう。

設定ページの「設定」→「一般」→「時刻形式」を「カスタム」にし、入力欄を空白にすることで時刻を非表示にできます(コメントの時刻も非表示になります)。

私はついでに、週の始まりを「月曜日」から「日曜日」に変更しました。

コメントの入力時にメールアドレスを要求しない

デフォルトでは、コメント時にメールアドレスの入力が必須になります。

スパム対策なのでしょうが、訪問者がコメントするハードルがかなり上がると思うので、メアドの要求はやめたほうが良いでしょう。

設定ページの「設定」→「ディスカッション」にある「コメントの投稿者の名前とメールアドレスの入力を必須にする」のチェックを外します。

「コメント投稿者がCookieを保存できるようにする〜」も不要なので、ついでにチェックを外しておきましょう。

ただし、これだけでは、入力が必須ではなくなるだけで入力欄は残ってしまいます。

そこで、こちらのサイト様の「方法1:CSSで不必要な項目を削除!」を使い、入力欄を非表示にしました。

WordPressのコメントを非表示にする方法!邪魔なメールアドレス、ウェブ欄を駆逐!
WordPressのコメントフォームにある不必要な項目(メールアドレス、ウェブサイト、「メールアドレスが公開されることはありません」、「次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。」)を消す方法。

URL形式の変更

はてなブログ時代にカスタムURLを多用していた方は、次のように設定するのがオススメです。

「設定」→「パーマリンク設定」の「カスタム構造」にチェックを入れ、/entry/%postname%と入力します。

一からブログを始める方は、URLに日付を含まない「投稿名」にチェックを入れると、URLが短くなって見やすいです。

Cocoonの設定

テーマのインストール・記事のインポートができたら、息抜きも兼ねて少しカスタマイズをしてみましょう。

とはいえ、Cocoonは高機能ですから、デザインに凝ろうと思えばいくらでも凝れてしまいます。

そのため、ひとまず最低限の体裁だけ整えて次に行くことをおすすめします

スキンの設定

Cocoonには『スキン』という機能があり、これを利用することでさらに外観を変えることができます。

スキン紹介・仕様など
Cocoonの外観を着せ替えるスキン機能に関する情報の紹介です。

まずはスキンでお気に入りの外観に変更し、それでも気に入らない部分をカスタマイズしていくと良いでしょう。

アイコンの設定

タブの横やブックマークに表示される『ファビコン』の設定方法です。

サイトアイコンを設定する方法(ファビコン、アップルタッチアイコン等の設定)
テーマ用のファビコン、アップルタッチアイコン、マイクロソフトメトロスタイルの、タイル表示に使用するアイコンの設定です。

トップページのスタイルの変更

当ブログでは、トップページをカテゴリごとの表示に変更しています。

Cocoonのフロントページを「タブ切り換え」や「カテゴリごと表示」にする方法
フロントページの表示形式を変更する設定方法です。Cocoonではこれまで一般的なインデックスリストしかありませんでした。

グローバルメニューの設定

ホームページの上の方に表示される、メニューバーを設定します。

グローバルナビのメニューを設定する方法
主にパソコンなどで表示されるグローバルナビメニューの設定方法です。サブキャプション機能で補足説明を入力することも可能です。

ヘッダーロゴの画像化

ブログタイトルを画像化し、ロゴと一体化させました。

設定方法はこちら。

ヘッダーのロゴを画像に変更する方法
ヘッダーにあるロゴを用意した画像に変更する設定方法です。

ロゴの作成には『COOL TEXT』という無料サイトを使いました。

Font Awesome5の設定

現在、CocoonではデフォルトでFont Awesome4を使用します。

しかし、いずれは最新のFont Awesome5を使うことになるでしょうから、最初から慣れておくことをおすすめします。

Font Awesome5を利用する方法
サイトで利用されているアイコンフォントをFont Awesome5に変更したり、Font Awesome4に戻したりする方法です。

アナリティクス・サーチコンソールの設定

こちらの設定はサイト公開後に行ってください。

Google Analyticsでアクセス解析する方法
Google AnalyticsのトラッキングIDをテーマに登録する方法です。
Google Search Consoleに登録する方法
Google Search Console用のサイト認証タグを表示させてサイト登録を行う方法です。

コメント入力欄の変更

私のブログではコメントを承認制にしているため、その旨を文言に追加しました。

「Cocoon設定」の「コメント」タブから設定してください。

ついでに、コメントするハードルを下げるために、「コメント入力欄表示」を「常に表示」に変更しています。

404ページの設定

読者の利便性を上げるため、404ページにトップページへのリンクを設置しました。

「Cocoon設定」→「404ページ」→「404ページメッセージ」に以下のコードを記述しています。

お探しのページは見つかりませんでした。
<div style="text-align:center; font-size:150%;">
<a href="トップページのURL">トップページへ</a>
</div>

インラインコードの有効化

インラインコードとは、¥dのように、文中にソースコードを表示するときに使用します。

デフォルトでは機能しなかったため、下のサイト様を参考にCSSを編集しました。

WordPressテーマ「Cocoon」でインラインコードのスタイルが表示されないときの対処法
「インラインコード」のスタイルがうまく表示されない イヌ:なんでか、うまいこといかないんですよ。 ウサギ:どういうことなの? イヌ:たとえば、var dog = 'いぬ'; と書くよね。 ウサギ:うん。 イヌ:ビジュアル ...

その他の設定

ほかの設定をしたい場合、作者様のマニュアルを参考にすることが一番です。

テーマ利用マニュアル
テーマの利用方法を見やすく一覧にしたマニュアルです。

大抵のことはデフォルトの機能でできてしまいますし、大抵のトラブルはマニュアルを読めば解決できます。

そのほか、私が参考にしたサイト様を列挙します。

Cocoonテーマの初期設定。サグラダファミリア的マニュアルを攻略せよ。
Cocoonテーマの初期設定についての投稿です。マニュアルどこから読めばよいか迷っている方の参考に。
決定版!WordPressテーマ「Cocoon」を導入したらはじめに読む記事。
この記事は無料WordPressテーマCocoonを導入したらはじめに読みたい記事です。
WordPressテーマ「Cocoon(コクーン)」の最低限やっておきたい初期設定
高機能で有名な WordPress の無料テーマ「Simplicity(シンプリシティー)」その Simplicity を作られているわいひら@寝ログさん が、後継として新たに開発されている無料 WordPress テーマが「Cocoon(

繰り返しになりますが、テーマのカスタマイズは最低限に留め、ホームページ公開後にぼちぼちやっていくのがおすすめです

プラグインの導入

ホームページ公開前(=ネームサーバーの切り替え前)に、プラグインを一通り入れて動作確認をしたほうが良いです
公開後に不具合が出ると非常に焦りますので。

おすすめのプラグインについては、こちらの記事をご覧ください。

トラブルシューティング

私が遭遇したトラブルと、その解決策はこちらの記事にまとめてあります。

コメント

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