前回の記事ではワードプレスを設置し、新ホームページを自分のパソコンからだけ見られるようにしました。
今回は、私がホームページ公開前に設定した内容をお伝えします。
参考リンクも多数ご紹介しますので、ぜひご利用ください。
テーマのインストール
ワードプレスには『テーマ』というものがあり、これをインストールすることで外観や機能が大きく変わります。
私がおすすめするテーマは『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>置換後は空白にしておいてください。
WordPressの設定
私が行った設定のうち、主だったものをご紹介します。
メタ情報の非表示化
デフォルトでは、サイドバーに「メタ情報」という項目が表示されます。
通常は表示する必要がありませんので、消してしまいましょう。
設定ページの「外観」→「ウィジェット」→「サイドバースクロール追従」に入っている「メタ情報」ウィジェットを削除すれば消すことができます。
投稿日の時刻の非表示化
デフォルトでは、記事の投稿日欄に時刻まで表示されます。
これも、必要なければ消してしまいましょう。
設定ページの「設定」→「一般」→「時刻形式」を「カスタム」にし、入力欄を空白にすることで時刻を非表示にできます（コメントの時刻も非表示になります）。
私はついでに、週の始まりを「月曜日」から「日曜日」に変更しました。
コメントの入力時にメールアドレスを要求しない
デフォルトでは、コメント時にメールアドレスの入力が必須になります。
スパム対策なのでしょうが、訪問者がコメントするハードルがかなり上がると思うので、メアドの要求はやめたほうが良いでしょう。
設定ページの「設定」→「ディスカッション」にある「コメントの投稿者の名前とメールアドレスの入力を必須にする」のチェックを外します。
「コメント投稿者がCookieを保存できるようにする〜」も不要なので、ついでにチェックを外しておきましょう。
ただし、これだけでは、入力が必須ではなくなるだけで入力欄は残ってしまいます。
そこで、こちらのサイト様の「方法1：CSSで不必要な項目を削除！」を使い、入力欄を非表示にしました。
URL形式の変更
はてなブログ時代にカスタムURLを多用していた方は、次のように設定するのがオススメです。
「設定」→「パーマリンク設定」の「カスタム構造」にチェックを入れ、/entry/%postname%と入力します。
一からブログを始める方は、URLに日付を含まない「投稿名」にチェックを入れると、URLが短くなって見やすいです。
Cocoonの設定
テーマのインストール・記事のインポートができたら、息抜きも兼ねて少しカスタマイズをしてみましょう。
とはいえ、Cocoonは高機能ですから、デザインに凝ろうと思えばいくらでも凝れてしまいます。
そのため、ひとまず最低限の体裁だけ整えて次に行くことをおすすめします。
スキンの設定
Cocoonには『スキン』という機能があり、これを利用することでさらに外観を変えることができます。
まずはスキンでお気に入りの外観に変更し、それでも気に入らない部分をカスタマイズしていくと良いでしょう。
アイコンの設定
タブの横やブックマークに表示される『ファビコン』の設定方法です。
トップページのスタイルの変更
当ブログでは、トップページをカテゴリごとの表示に変更しています。
グローバルメニューの設定
ホームページの上の方に表示される、メニューバーを設定します。
ヘッダーロゴの画像化
ブログタイトルを画像化し、ロゴと一体化させました。
設定方法はこちら。
ロゴの作成には『COOL TEXT』という無料サイトを使いました。
Font Awesome５の設定
現在、CocoonではデフォルトでFont Awesome４を使用します。
しかし、いずれは最新のFont Awesome５を使うことになるでしょうから、最初から慣れておくことをおすすめします。
アナリティクス・サーチコンソールの設定
コメント入力欄の変更
私のブログではコメントを承認制にしているため、その旨を文言に追加しました。
「Cocoon設定」の「コメント」タブから設定してください。
ついでに、コメントするハードルを下げるために、「コメント入力欄表示」を「常に表示」に変更しています。
インラインコードの有効化
インラインコードとは、¥dのように、文中にソースコードを表示するときに使用します。
デフォルトでは機能しなかったため、下のサイト様を参考にCSSを編集しました。
その他の設定
ほかの設定をしたい場合、作者様のマニュアルを参考にすることが一番です。
大抵のことはデフォルトの機能でできてしまいますし、大抵のトラブルはマニュアルを読めば解決できます。
そのほか、私が参考にしたサイト様を列挙します。
繰り返しになりますが、テーマのカスタマイズは最低限に留め、ホームページ公開後にぼちぼちやっていくのがおすすめです。
プラグインの導入
ホームページ公開前（＝ネームサーバーの切り替え前）に、プラグインを一通り入れて動作確認をしたほうが良いです。
公開後に不具合が出ると非常に焦りますので。
おすすめのプラグインについては、こちらの記事をご覧ください。
トラブルシューティング
私が遭遇したトラブルと、その解決策はこちらの記事にまとめてあります。
コメント