WordPressテーマ「Cocoon」でのホームページ作成手順

スポンサーリンク
環境設定

本ホームページでは、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上にもたくさんの情報がありますが、きちんと理解して使いたい場合には、一度書籍も読んでおいた方がいいかもしれません。

スポンサーリンク
スポンサーリンク
環境設定
スポンサーリンク
シェアする
さとやまノート