先日、一つWordPress(ワードプレス)のサイトを立ち上げたときに「Cocoon(コクーン)」という無料のテンプレートを使ってみました。私が今、このブログで使っている「simplicity2」の後継バージョンで、わいひらさん作です。
以下、ざっと感想や備忘録など。(全然整理されていないので、ご容赦を)
まずは第一印象など
親テーマと子テーマがあり。
親テーマからインストールしないと怒られるw
とにかく「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 で「スタイル」という項目を追加したら、機能が多すぎて驚いた
投稿するときにアラート
公開していいですか?と聞かれる(丁寧ですねw)
更新日の日付
更新した日付を表示、非表示、更新日の消去、更新日の設定から選択できる⇒確かにこれは便利かも!
リダイレクト設定
まだ使ってはいないが、ページごとに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)
いじり過ぎると、またいろいろな問題が発生しますねw
SNSボタンでちょいと苦労(苦労話)
記事下に表示されるSNSボタンが、導入スキンデフォルトの設定だと、小さいものになってしまう。(しかも左寄せ)CSSをいじって何とかしようと思ったが、せいぜい中央に移動させられるぐらい。そこで、プラグインを導入して解決。
導入プラグイン:Share Buttons by AddThis
設定のポイント:
①基本設定を行ったプラグインを「Active」にする
②Settingの「position」のチェックをすべてはずす(=自動挿入機能をOFF)
③WordPress側の「ウィジェット」>「記事本文下」>「テキスト」で指定のショートコードを貼り付け
④Cocoon設定>SNS>本文下の表示チェックをはずす
※これをはずさないと、ボタンが二重になってしまう
これで、好きな場所に表示されるようになった!
自動挿入だと、予期せぬ場所に配置されることもある。
以上です。
雑な備忘録ではありますが、無料でここまで機能がついているのは本当にスゴイ。わいひらさんに敬意を表します。
ご相談はお気軽に!
![](https://web-neta.net/wp-content/uploads/2019/05/Fotolia_229586425_Subscription_Monthly_M-680x454.jpg)