前回の記事ではワードプレスを設置し、新ホームページを自分のパソコンからだけ見られるようにしました。
今回は、私がホームページ公開前に設定した内容をお伝えします。
参考リンクも多数ご紹介しますので、ぜひご利用ください。
テーマのインストール
ワードプレスには『テーマ』というものがあり、これをインストールすることで外観や機能が大きく変わります。
私がおすすめするテーマは『Cocoon』です。
このテーマは、
- 無料
- 高機能
と良い事ずくめです。
現在、当ブログでもCocoonを使用しています。
テーマのインストール方法については、作者様のサイトをご覧ください。
記事のインポート
前回の記事ではてなブログからエクスポートした記事データを、ワードプレスへインポートします。
私はこちらのサイト様を参考にしました。
画像の移行
記事をインポートしただけでは、画像は移動されません。
記事中に表示されている画像は、全てはてなフォトライフに残ったままです。
そのため、記事中の画像をレンタルサーバーに移動させる必要があります。
私はこちらのサイト様を参考に作業をしました。
補足１：画像の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}は「数字４個」、\d{2}は「数字２個」を表す正規表現です。\d{4}\d{2}\d{2}で「YYYY MM DD」形式の「年月日」を表しています。
このように正規表現を駆使することで、一発で置換できるというわけです。
また、置換後の先頭に『https:』を入れていないのは、ネームサーバーの切り替え前はSSL化ができない（URLがhttp:〜になる）からです。
URLの先頭を『//』から始めることで、SSL化されていれば『https:』で、されていなければ『http:』で自動で接続されるようになります。
補足２：altとtitleを削除
はてなブログの場合、画像のaltとtitleに「f:id」から始まる妙な文字列が設定されています。
これが非常に気になるため、画像URLの置換と同じ要領で削除しました。
同じく『Search Regex』で正規表現を使い、次のように置換してください。
alt
置換前：
alt="f:id.+?"置換後：
alt=""title
置換前：
title="f:id.+?"置換後：
title=""記事の修正
記事をインポートしただけでは、
- アイキャッチ画像が設定されていない
- 見出しタグがおかしい
など、色々なエラーが残っています。
それらの修正方法については、こちらのサイト様が参考になりました。
アイキャッチ画像について
上のサイト様でも述べられていますが、アイキャッチ画像は手動で設定したほうが良いです。
私もいくつか「アイキャッチを自動で設定するプラグイン」を試してみましたが、どれもまともに動きませんでした。
これを機に、新しくアイキャッチ画像を作り直すのも手です。
私のオススメは『Canva』という無料サイトを使うことです。
高クオリティなアイキャッチ画像がすぐに作れます。
ブログのアイキャッチなら、『SNS』→『ブログバナー』で作ると良いですよ。
目次の削除について
はてなブログからインポートした記事には目次が残っており、そのままではワードプレス側の目次と一緒に二重に表示されてしまいます。
そこで、上のサイト様で紹介されているように、『Search Regex』というプラグインを使用して削除します。
私は正規表現を使って以下のように置換しました。
置換前：
<ul class="table-of-contents">[\s\S]+?</ul>置換後：
<!--mokuji-->これで特に問題は起きなかったです。
置換後に<!--mokuji-->を残しているのは、目次があった位置があとから分かるようにするためです。
念のため以上の意味はありません。
補足：リンクカード下のリンクの削除
はてなブログでブログカード方式のリンクを張っていた場合、一番下にもリンクが残ります。
邪魔なので、『Search Regex』で次のように削除しました。
置換前：
<cite class="hatena-citation">(.*?)</cite>置換後は空白にしておいてください。
Cocoonの設定
テーマのインストール・記事のインポートができたら、息抜きも兼ねて少しカスタマイズをしてみましょう。
とはいえ、Cocoonは高機能ですから、デザインに凝ろうと思えばいくらでも凝れてしまいます。
そのため、ひとまず最低限の体裁だけ整えて次に行くことをおすすめします。
スキンの設定
Cocoonには『スキン』という機能があり、これを利用することでさらに外観を変えることができます。
まずはスキンでお気に入りの外観に変更し、それでも気に入らない部分をカスタマイズしていくと良いでしょう。
アイコンの設定
タブの横やブックマークに表示される『ファビコン』の設定方法です。
トップページのスタイルの変更
当ブログでは、トップページをカテゴリごとの表示に変更しています。
グローバルメニューの設定
ホームページの上の方に表示される、メニューバーを設定します。
ヘッダーロゴの画像化
ブログタイトルを画像化し、ロゴと一体化させました。
設定方法はこちら。
ロゴの作成には『COOL TEXT』という無料サイトを使いました。
Font Awesome５の設定
現在、CocoonではデフォルトでFont Awesome４を使用します。
しかし、いずれは最新のFont Awesome５を使うことになるでしょうから、最初から慣れておくことをおすすめします。
アナリティクス・サーチコンソールの設定
その他の設定
ほかの設定をしたい場合、作者様のマニュアルを参考にすることが一番です。
大抵のことはデフォルトの機能でできてしまいますし、大抵のトラブルはマニュアルを読めば解決できます。
そのほか、私が参考にしたサイト様を列挙します。
繰り返しになりますが、テーマのカスタマイズは最低限に留め、ホームページ公開後にぼちぼちやっていくのがおすすめです。
プラグインの導入
ホームページ公開前（＝ネームサーバーの切り替え前）に、プラグインを一通り入れて動作確認をしたほうが良いです。
公開後に不具合が出ると非常に焦りますので。
おすすめのプラグインについては、こちらの記事をご覧ください。
トラブルシューティング
私が遭遇したトラブルと、その解決策はこちらの記事にまとめてあります。
コメント