先日、一つWordPress（ワードプレス）のサイトを立ち上げたときに「Cocoon（コクーン）」という無料のテンプレートを使ってみました。私が今、このブログで使っている「simplicity2」の後継バージョンで、わいひらさん作です。
以下、ざっと感想や備忘録など。（全然整理されていないので、ご容赦を）
まずは第一印象など
親テーマと子テーマがあり。
親テーマからインストールしないと怒られるｗ
とにかく「Cocoon設定」が充実し過ぎている。あまりに機能があり過ぎて、どことどの画面が紐づいているかわからず、マニュアルを見たり検索で調べたり。
驚いたのは「目次」。ページ内リンクの目次が自動的につく。（H2、H3などヘッドラインタグを使っていると自動的に挿入される）通常はプラグインを設置しないとつかないのですが、Cocoonはあらかじめテンプレートにこの機能が実装されていました。
今後使ってみたい機能、追加予定のもの
・ヘッダー部分、バーになるお知らせのところ（目立つ！）
Cocoon 設定 ＞ 「通知」 の機能
・CTAの設置
https://wp-cocoon.com/cta/
・モバイル版、フッターボタンの色変更
https://bibabosi-rizumu.com/cocoon-slidein-menu-button/
・ExUnitを入れてみたい
制作者へのリスペクト
無料なのに高機能だし、CSSでカスタムされたテンプレートが結構充実しているしで驚きました。これ、本当に無料でよいの？と。simplicity を開発したわいひらさん、サポートやフィードバックを通して、蓄積してきたユーザーの希望を、新テンプレートのにガッチリ反映させたのでしょう。
以下、Cocoonのカスタム備忘録
選択したテンプレート（子テーマ）
Cocoon 設定＞スキン
現在「 Fuwari -御召茶(おめしちゃ)- [作者: アオイ]」を選定
使ってみた機能（Cocoon 設定の画面）
あちこちいじってみた感想などを一通り。パーツごとの備忘録も。
全体
・サイトのキーカラーはそのまま（子テーマのまま）
・リンク色を青に
・サイトフォントは遊ゴシックのままだが、文字を黒へ(#333)
・太さ（ウェイト）を700まで上げた（デフォルトは500）
→ その後、いろいろ調整し一旦500へ戻す（ここは継続調整）
※Win8だとどうしても薄くなってしまうが他のデバイスではきれい
ヘッダー
・ロゴを作ってアップロード（Canvaで）
・ヘッダーロゴサイズは、500*100に
・キャッチフレーズの配置は最初ありにしてたが「表示しない」で決着
・グローバルナビメニュー色は、スキンの背景色と同色、あわせてナビ文字色変更
※ヘッダー背景画像やヘッダー色も設定できるが、ガチャガチャするので非設定
インデックス
・カードタイプを「大きなカード（先頭のみ）」に設定すると、かなりかっこいい
（トップページのコンテンツ部分、目次の体裁）
本文
外部リンク設定＞アイコン表示→「アイコンの表示」にチェック入れる
SNSシェア
「本文下シェアボタン」を、大きめのボタンに設定しているのだが、実表示反映されないのは、「スキン（子テーマ）」のせいらしい
アピールエリア ※大事！
トップページのメインビジュアル上に配置される写真、文言、ボタンなど
ここは何度か設定し直した。高さの指定もできてスゴイ
カルーセル
・メインV下の、動くサムネール部分「フロントページのみで表示」、カテゴリは「未分類」のまま（カテゴリがない状態で作成しているので）
・「オートプレイを実行」にチェック
※これは、他のページにも表示でも良いかも
フッター
・フッターロゴは表示が汚くなるので、無しにした
・「フッター表示タイプ」＞「メニュー＆クレジット（中央揃え）」に
・クレジット表示も変更できる
設定：ディスカッション＞コメント表示
設定部分で、やっておいた方がいいよ、という箇所。
・自分あてのメール通知＞コメントがモデレーションのために保留されたとき→のチェックをはずす
ウィジェット系（広告）
ウィジェット系も大事！特に広告を配置するなら、広告専用エリアがあるかどうかも大事ですよね。Cocooonにはちゃんとあります。もちろん。
フッター
・フッターの3カラムにそれぞれ要素を配置
・右カラムに広告挿入（楽天）
サイドバー
・サイドバーに広告挿入（楽天）
投稿画面について
投稿画面、クラシックエディタを使うのであればTinyMCE Advancedを入れておくのがおすすめ。テンプレートのせいなのかは不明なのですが、「スタイル」の機能が多くてびっくり。
スタイルボタンの追加
TinyMCE Advanced で「スタイル」という項目を追加したら、機能が多すぎて驚いた
投稿するときにアラート
公開していいですか？と聞かれる（丁寧ですねｗ）
更新日の日付
更新した日付を表示、非表示、更新日の消去、更新日の設定から選択できる⇒確かにこれは便利かも！
リダイレクト設定
まだ使ってはいないが、ページごとに301リダイレクトができる（凄すぎ・・・！）
追加したプラグイン
その他、こんなプラグインを追加しています。
Classic Editor
Contact Form 7
Duplicate Post
TinyMCE Advanced
（あとから）
SNS用プラグイン Share Buttons by AddThis
追加したCSS
CSSボタンを調整するのに書いたCSS。備忘録として残しておきます。
/* 送信ボタン */
input.sub-btn {
width: 300px;
height: 60px;
background: #DD4B39;
color: #FFF;
font-size: 1.1em;
font-weight: bold;
letter-spacing: 0.2em;
border: 1px solid #ffae13;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-ms-transition: 0.3s;
transition: 0.3s;
}
/* 送信ボタンホバー */
input.sub-btn:hover{
background: #FFF;
color: #DD4B39;
}
@media screen and (max-width: 768px) {
.footer-widgets {
display: block;
}
}
.list .entry-card-title{font-weight: 900;}
CSSに関するメモ
解説している人は軒並みテーマ＞外観の中のCSSを触る画面からやれ！と書いているが、私は「外観」＞「カスタマイズ」＞「追加CSS」で操作。
フォームのボタンがへっぽこだったのと、スマホ版になったときに、フッターが表示されなかったので、そこを修正。（コピペサイトから貼り付け）
トップページ記事カードで、見出しのフォントが弱かったので、CSSを追加（font-weight)
追加のカスタム（備忘録02）
いじり過ぎると、またいろいろな問題が発生しますねｗ
SNSボタンでちょいと苦労（苦労話）
記事下に表示されるSNSボタンが、導入スキンデフォルトの設定だと、小さいものになってしまう。（しかも左寄せ）CSSをいじって何とかしようと思ったが、せいぜい中央に移動させられるぐらい。そこで、プラグインを導入して解決。
導入プラグイン：Share Buttons by AddThis
設定のポイント：
①基本設定を行ったプラグインを「Active」にする
②Settingの「position」のチェックをすべてはずす（＝自動挿入機能をOFF）
③WordPress側の「ウィジェット」＞「記事本文下」＞「テキスト」で指定のショートコードを貼り付け
④Cocoon設定＞SNS＞本文下の表示チェックをはずす
※これをはずさないと、ボタンが二重になってしまう
これで、好きな場所に表示されるようになった！
自動挿入だと、予期せぬ場所に配置されることもある。
以上です。
雑な備忘録ではありますが、無料でここまで機能がついているのは本当にスゴイ。わいひらさんに敬意を表します。
ご相談はお気軽に！
