挨拶
はじめまして、こうへいです。趣味でDIYや電子工作、プログラミングをするため、制作物や制作過程などをアップしていく予定です。備忘録や実績として使えればいいなぁと考えてます。よろしくお願いします。
ブログ開設の流れ
はじめにこのブログを開設するまでの流れについて解説したいと思います。主に以下のサイトを参考にしました。エックスサーバーにて、レンタルサーバーとドメインを契約した後、サーバーにWordPressを埋め込んで設定する、というような流れです。
レンタルサーバーの契約（Xserver）
Webページを作成して全世界に公開するためには、ブログ用ソフトウェアや作成した記事などをインターネット上で保存しておく場所（サーバー）が必要となります。私は以前からエックスサーバーで契約していましたので、こちらのレンタルサーバーを継続で利用します。X10プラン（スタンダード）だと約13,000円 / 年で契約できます。
ドメインの契約（Xdomain）
レンタルサーバーを契約した後はドメインも契約する必要があります。ドメインとは、インターネット上の住所のことで〇〇.comとか〇〇.jpなど（このブログのドメインはgadgetton.net）のことです。既にあるドメインは契約できないため、被らないように設定する必要があります。
エックスサーバーではドメインの契約もしてくれるので、サーバーと一緒に契約しました。トップレベルドメイン（以下で説明）によって値段は多少変わりますが、だいたい1,300円 / 年ぐらいだったかと思います。
ドット（. ）以降の文字はトップレベルドメインと呼ばれ、サイト自体の印象に直結します。〇〇.comや〇〇.jp、〇〇.netなどはよく利用されており、比較的信頼性の高いサイトが多いです。名前の響きやイメージにこだわらないのであれば、何を選んでも良いと思います。
サーバーとドメインの紐付け
契約したサーバーとドメインが紐づくようにお互いに設定してあげる必要があります。私はどちらもエックスサーバーで契約していたため、サーバーへドメインを追加するのみで大丈夫でした。
ブログ用ソフトウェアの導入（WordPress）
ここまでで、Webページを作成して公開する準備ができましたが、Webページの作成にはプログラミングが必要となるため、とても難易度が高いです。そこで、ブログ作成に特化したソフトウェアをサーバーへインストールします。最も有名なものにWordPressというソフトウェアがあるため、こちらを利用します。エックスサーバーでは、サーバーの設定パネルからドメインを選択してWordPressを簡単にインストールすることができます。
テーマの設定
ここまではサーバーやドメインなど裏側の設定がメインでしたが、ここからはブログのデザインの設定をしていきます。
Cocoonのインストール
無料で使えるWordPressテーマの中でCocoonというテーマが目に留まったので、こちらを使います。以下からCocoonの親テーマと子テーマを両方ダウンロードした後、WordPress画面から外観→新規追加→テーマのアップロードまで移動し、親テーマ、子テーマの順でインストール＆有効化を行います。親テーマのみで利用し始めて途中でアップデートすると、カスタマイズした結果が消えてしまう恐れがあります。そのため、親テーマを参照している子テーマを有効化してカスタマイズしていきます。これにより、親テーマをアップロードするとカスタマイズ部分は残したままアップデートが実行されます。
WordPressの設定
さきにWordPressの設定を行います。WordPress画面から設定→一般まで移動し、以下を設定します。
- サイトのタイトル ： Gadgetton
- キャッチフレーズ ： 色々なガジェットを作成・紹介
また、ブログの編集者としてデフォルトでWordPressのユーザ名が表示されていますが、これを変更します。WordPress画面からユーザー→ユーザー一覧→編集まで移動し、以下を設定します。
- ニックネーム ： koooheeeiii
- ブログ上の表示名 ： koooheeeiii
さらに、投稿画面の表示が見づらいため変更します。WordPress画面から投稿→投稿一覧→表示オプションまで移動し、以下を設定します。
- カラム→タグ ： オフ
- カラム→コメント ： オフ
サイト全体の設定
サイト全体の設定を行います。WordPress画面からCocoon設定→全体まで移動し、以下を設定します。
- サイトキーカラー ： #ff9244（ヘッダ画像に合わせて）
- サイト背景色 ： #1D2327（ヘッダ画像に合わせて）
ヘッダの設定
ヘッダと呼ばれるWebサイトの一番上の帯を設定します。ヘッダはどのページにも表示され、ブログの顔となる存在なのでとても重要です。WordPress画面からCocoon設定→ヘッダーまで移動し、以下を設定します。
- ヘッダーロゴ ： ヘッダーロゴ画像
- キャッチフレーズの配置 ： 表示しない（ロゴ画像に含めた）
- ヘッダー背景 ： ヘッダー背景画像
- ヘッダー全体色 ： #1D2327（Webページのテーマ色に合わせて）
私はPowerPointを使って、図形を描いたりフリー素材を組み合わせたりして、ヘッダ背景とタイトルの画像を作成しました。
サイトアイコン（ファビコン）の設定
ファビコンと呼ばれるWebサイトのアイコンを設定します。これはブラウザのタブの左側に表示される画像のことです。WordPress画面から外観→カスタマイズ→サイト基本情報まで移動し、以下を設定します。
- サイトアイコン ： サイトアイコン画像
SNSボタンの設定
Cocoonを有効化するとはじめからSNSボタンがいくつか配置されていますが、正直邪魔なだけですので消してしまいます。WordPress画面からCocoon設定→SNSシェアまで移動し、以下を設定します。
- トップシェアボタンの表示 ： 非表示
- ボトムシェアボタンの表示 ： 非表示
さらに、WordPress画面からCocoon設定→SNSフォローまで移動し、以下を設定します。
- フォローボタンの表示 ： 非表示
ウィジェットの設定
メニューの一番下にメタ情報が配置されていますが、これも邪魔ですので消します。WordPress画面からCocoon設定→ウィジェットまで移動し、以下を設定します。
- メタ情報 ： 除外
NO IMAGE設定
アイキャッチ画像を設定していない投稿だとNO IMAGEと表示されてしまうため、その場合にはサイトアイコンをアイキャッチ画像にするよう変更します。WordPress画面からCocoon設定→画像まで移動し、以下を設定します。
- NO IMAGE設定→NO IMAGE画像 ： サイトアイコン画像
ブログカードの設定（Pz-LinkCard）
この記事を書いていて気づいたのですが、デフォルト設定では外部のリンクを貼るときにブログカードと呼ばれる形式で表示してくれません。ブログカード形式で表示することで多くの情報を見やすく表示できるためとても便利です。この機能を利用するためにPz-LinkCardというプラグインを追加します。WordPress画面からプラグイン→新規追加まで移動し、Pz-LinkCardで検索してインストール＆有効化します。ただ、この状態だと毎回以下のショートコードを書く必要があり、さらに中央表示してくれないなど、まだまだ不便です。
[blogcard url="https://***.com"]そこで、Pz-LinkCardの設定を変えます。WordPress画面から設定→Pzカード設定まで移動し、以下を設定します。
- 基本→基本の設定→簡単書式設定 ： ノーマル
- 配置→配置の設定→余白→中央に寄せる ： 有効化
- 配置→配置の設定→余白→幅 ： 空白
- 配置→配置の設定→余白→長さ ： 空白
- エディター→エディターの設定→URL行を変換 ： 有効化
- エディター→エディターの設定→外部リンクのみ ： 有効化
Pz-LinkCardの設定では、以下のサイトを参考にしました。
プライバシーポリシー・免責事項の記載
以下のページを参考に、プライバシーポリシーと免責事項のページを作成しました。
コメント