本ホームページでは、WordPressの無料テーマ「Cocoon」を用いています。
ここでは、「Cocoon」でのホームページ開設手順について説明します。
なお、WordPressインストールまでの作業手順については こちら をご参照ください。
WordPressテーマ「Cocoon」のインストール
- 「Cocoon」のダウンロードページ（こちら）から、「Cocoonテーマ」、「Cocoon子テーマ」をそれぞれダウンロードします。
- WordPress編集画面にて、「外観」＞「テーマ」をクリックします。
- 「新規追加」をクリックします。
- 「テーマのアップロード」＞「ファイルを選択」で、ダウンロードした「Cocoonテーマ」を選択して「開く」をクリックします。
- 「今すぐインストール」をクリックします。
- 上記を実施したところ、「辿ったリンクは期限が切れています」というメッセージが表示され、インストールができませんでした。調べたところ、原因はメッセージの文面とは全く異なるもので、ファイルサイズが大きすぎるためにデータがアップロードできないというエラーのようです。「Cocoon」のダウンロードページに、データがアップロードできない場合の対処法が記載されているので、それに従って「Cocoon低サイズ版（要自動アップデート）」をダウンロードし、それをインストールしました。しばらく経ってから（今回の場合は、他の作業をしていたので、2時間程度が経過していました）、「外観」＞「テーマ」を確認すると、「Cocoon」親テーマに「新しいバージョンに更新できます」と表示されているので、「今すぐ更新」をクリックします。これでCocoonテーマの最新バージョンをインストールしたのと同等の状態になります。
- 「テーマのアップロード」＞「ファイルを選択」で、ダウンロードした「Cocoon子テーマ」を選択して「開く」をクリックします。
- 「今すぐインストール」をクリックします。インストールが終わったら「有効化」をクリックします。
各種設定（一般設定）
本項での設定内容は、「Cocoon」のマニュアルページ（こちら）を参考にしています。
- 「外観」＞「カスタマイズ」＞「サイト基本情報」で、「サイトのタイトル」、「キャッチフレーズ」、「サイトアイコン」を入力します。
- 「設定」＞「表示設定」で、「ホームページの表示」で「固定ページ」を選択し、「ホームページ」で「トップ」を、「投稿ページ」で「ブログ」を選択します。
- 「設定」＞「ディスカッション」で、「デフォルトの投稿設定」で、「新しい投稿に対し他のブログからの通知 (ピンバック・トラックバック) を受け付ける」、「新しい投稿へのコメントを許可」のチェックを外します。
- 「設定」＞「メディア」で、「サムネイルのサイズ」を「300×0」、「中サイズ」を「500×0」、「大サイズ」を「800×0」に変更します。
- 「設定」＞「パーマリンク設定」で、「共通設定」で「投稿名」を選択します（デフォルトで「投稿名」になっていました）。あとは、実際に記事を投稿するたびに、「パーマリンク」＞「編集」で、スラッグを半角英数字のみに変更することとします。
各種設定（Cocoon設定）
本項の設定は、「Cocoon」のマニュアルページ（こちら）を参考にした上で、自分の好みやブログの用途を加味して実施しています。
設定内容は、ページ最上部、最下部の「変更をまとめて保存」をクリックすれば反映されます（複数の設定内容を、まとめて変更することができます）。
- 「Cocoon設定」＞「全体」タブ：「サイトフォント」＞「文字サイズ」を18px→16pxに変更、「サイト背景色」で白を選択、「サイドバーの位置」で「サイドバー右」を選択します。
- 「Cocoon設定」＞「ヘッダー」タブ：「ヘッダーロゴ」＞「選択」でロゴマークを選択します。今回は幅400pxのものを採用しました。なお、スマホで縦画面表示した時に、ロゴが画面の端ギリギリまで表示されてしまうので、ロゴの画像データには、左右に若干の余白を入れておきました。
- 「Cocoon設定」＞「OGP」タブ：「ホームイメージ」＞「画像のアップロード」で「選択」をクリックします。画像を選択して「画像の選択」をクリックします。これは、ホームイメージ（TwitterやFacebookでサイトのトップページを共有した時に表示されるサムネイル）の設定です。
- 「Cocoon設定」＞「投稿」タブ：「投稿関連情報の表示」で、「投稿日の表示」、「更新日の表示」、「投稿者名の表示」のチェックを外します。
- 「Cocoon設定」＞「本文」タブ：「投稿情報表示設定」＞「投稿関連情報」で、「投稿日の表示」、「更新日の表示」、「投稿者名の表示」のチェックを外します。
- 「Cocoon設定」＞「SNSシェア」タブ：「トップシェアボタン」＞「メインカラムトップシェアボタンを表示」のチェックを外し、「ボトムシェアボタン」＞「表示切替」で、表示するボタンを「Twitter」、「Facebook」、「LINE@」の3つにします。
- 「Cocoon設定」＞「SNSフォロー」タブ：「フォローボタン」＞「本文下のフォローボタンを表示する」のチェックを外します。
- 「Cocoon設定」＞「画像」タブ：「NO IMAGE設定」＞「NO IMAGE画像」で「選択」をクリックします。画像を選択して「画像の選択」をクリックします。
- 「Cocoon設定」＞「ブログカード」タブ：「日付表示」で「なし」にチェックを入れます。
- 「Cocoon設定」＞「アピールエリア」タブ：「高さ」で「400」を、「エリア画像」で画像データを選択します。「タイトル」、「メッセージ」、「ボタンメッセージ」、「ボタンリンク先」を入力、「ボタンリンクの開き方」、「ボタン色」を設定します。
- 「Cocoon設定」＞「フッター」タブ：「フッター表示タイプ」で「メニュー＆クレジット（中央揃え）」を、「クレジット表記」で「© 2020 さとやまノート.」を選択します。
各種設定（個別設定）
本ホームページでは、トップページを「固定ページ」にしていますが、トップページにはシェアボタンや投稿者名などを表示させたくありません。
そのため、「Cocoon」のマニュアルページ（こちら）を参考にして、不要な情報が非表示になるよう変更します。
- 「外観」＞「カスタマイズ」＞「追加CSS」で以下を入力し、「公開」をクリックします。
/*フロント固定ページのタイトルを非表示*/
.home.page .entry-title{
display: none;
}
/*フロント固定ページのシェアボタンを非表示*/
.home.page .sns-share{
display: none;
}
/*フロント固定ページのフォローボタンを非表示*/
.home.page .sns-follow{
display: none;
}
/*フロント固定ページの投稿日を非表示*/
.home.page .post-date{
display: none;
}
/*フロント固定ページの更新日を非表示*/
.home.page .post-update{
display: none;
}
/*フロント固定ページの投稿者名を非表示*/
.home.page .author-info{
display: none;
}これで、ようやくホームページの体裁が整いました。
なお、私がWordPressの使い方を習得するのにあたっては、以下の書籍を参考にさせていただきました。
リンク
WordPressについては、Web上にもたくさんの情報がありますが、きちんと理解して使いたい場合には、一度書籍も読んでおいた方がいいかもしれません。
