【WordPress】テーマCocoonの設定

ルビ表示切替

---

以前、WordPressの無料テーマであるCocoonを適用しました。

今回はCocoonを使うための設定をしていきたいと思います。

 

Cocoonの設定をしましょう

Cocoonを有効化すると、左ペインに「Cocoon設定」というメニューが追加表示されます。

「Cocoon設定」をクリックしてみてください。

すると、Cocoonの設定をするため項目がタブで分類ぶんるいされ表示されています。

 

それぞれ、何をするのか確認していきましょう。

 

全体

サイト全体の背景色やフォント、サイドバーの表示位置などを設定します。

 

ヘッダー

画面上部に表示されるヘッダーのレイアウトを設定します。

ヘッダー全体、ロゴ部、グローバルナビメニュー部それぞれの設定ができます。

 

スキン

Cocoonの基本的機能はそのままに、

サイトの外観がいかんを簡単に変更できます。

 

広告

広告の表示有無や表示位置、表示個所かしょなどを設定します。

 

タイトル

ブラウザのタグ部分、ならびにタグをマウスオーバーしたときに表示されるタイトルの表示設定をします。

 

SEO

検索エンジンにインデックスさせるサイト内のページを設定する。

例えば、あるサイトの一覧ページを検索結果で見たことがある方はいらっしゃいますか？

ない、と答えられる方ばかりだと思います。

このように検索結果に表示させたくないページを設定することができます。

 

OGP

Open Graph protocol。

SNS等でシェアされたときに、タイトルやサムネイル画像が正しく表示させるための設定です。

 

アクセス解析・認証

アクセス解析の有無や、外部解析サービスとの連携れんけいのための設定をします。

 

カラム

コンテンツやサイトバーの幅、余白、枠線わくせんの太さ等を設定します。

 

インデックス

投稿の一覧画面での表示方法、表示順などを設定します。

 

投稿

投稿画面で、ページ送りやパンくずリストなどの表示方法等を設定します。

 

固定ページ

固定ページでのコメントやパンくずリストなどの表示方法等を設定します。

 

本文

本文の行の余白やリンクアイコン、リンクの開き方、

投稿・固定ページでの投稿・更新・投稿者名の表示等の設定をします。

 

目次

目次を表示させるページ、表示条件等を設定します。

 

SNSシェア

SNSへのシェアボタンの表示有無、表示対象のSNS、

表示方法等を設定します。

 

SNSフォロー

サイトをまた見たいと思ってもらえた時に

フォローする方法を選んでもらうためのボタンを表示する設定をします。

 

画像

アイキャッチの画像表示有無や、画像表示方法、

アイキャッチ画像が設定されていない場合に表示する代わりの画像等を設定します。

 

ブログカード

内部/外部のURLを挿入したときにアドレスのまま表示せず、

タイトルやアイキャッチ画像付きのカードとして表示させるか、

その表示方法について設定します。

 

以下がブログカードの例です。

【WordPress】無料テーマ「Cocoon」に変えてみる

ルビ表示切替 ローカル環境は作りましたが、 今はまだ何も手を加えていない初期しょき状態となっています。 今回は、ここに無料で優秀ゆうしゅうと評判ひょうばんのテーマ「Cocoon」を適用してみたいと思...

nekopress.castelodelego.org

2021.04.19

 

コード

phpやCSSなど、プログラミングのコードを本文に表示する方法（背景色やフォント色など）を設定します。

コードのフォーマット

 

コメント

各ページにコメントをいただくときのフォームの表示方法を設定します。

 

通知

訪問者ににお知らせしたい内容（通知、警告、エラー）を、サイトヘッダー下に表示する通知メッセージを設定します。

通知メッセージの内容や、背景、フォント色などを設定します。

特に通知がない場合は、設定画面のチェックボックスのチェックを外します。

 

アピールエリア

訪問者にアピールしたいことがあるときに、

アピール内容や表示ページ、表示方法などを設定します。

 

カルーセル

カルーセルは、メリーゴーランドのことです。

メリーゴーランドはくるくる回ります。

 

おすすめの記事などを回転表示させるための設定をします。

表示対象の記事や、表示方法、自動切換えの有無などを設定します。

 

フッター

Copyrightなどのクレジットの表示方法や表示位置、

背景色や画像などを設定します。

 

ボタン

ページトップに、トップへ戻るボタンを設置するかを設定します。

 

モバイル

モバイル画面で、モバイルメニューの表示設定をします。

 

404ページ

ページが見つからなかったときに表示する画像、メッセージを設定します。

 

AMP

AMPは、Webページの情報をあらかじめキャッシュし、読み込むファイルを制限することによって、モバイルで高速表示させるための仕組みのことです。

AMP表示の対象や、ロゴ画像などの設定をします。

 

管理者画面

管理画面の表示項目や管理者パネルの表示個所等を設定します。

 

ウィジェット

Cocoonには多くのウィジェットがあります。

ウィジェット管理画面に表示するウィジェットを選択するための設定をします。

 

ウィジェットエリア

Cocoonでは、細かくウィジェットの表示エリアを設定することができます。

ウィジェット管理画面に表示するウィジェットエリアを選択するための設定をします。

 

エディター

投稿・固定ページで記事を編集する際に使うエディターを設定します。

WordPressのデフォルトのエディターは、
Gutenbergという名で、

ブロック単位で編集をすることができます。

これを無効化することで、HTMLを書いたことがある方にはなじみのある画面で編集することが可能となります。

 

API

Amazon、楽天、Yahoo、もしもアフィリエイト等を利用できるようにするための設定をします。

 

その他

SSLやファイルシステム、JavaScript、JQueryのバージョン等に関する設定をします。

 

リセット

Cocoonで設定したものを初期化します。

 

テーマ情報

Cocoonの環境設定のまとめ情報です。

Cocoonに関して問合せをする際に利用する情報です。

 

まとめ

このCocoon設定画面だけでも、かなりの設定ができます。

変更箇所がまとまっているため、とてもわかりやすい設定画面です。

プレビュー画面もついており、

確認しながら設定ができるのもいいところです。