Cocoon(WordPress無料テンプレート)を使ってみた感想や備忘録的メモ

先日、一つ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シェア

「本文下シェアボタン」を、大きめのボタンに設定しているのだが、実表示反映されないのは、「スキン(子テーマ)」のせいらしい
https://wp-cocoon.com/community/cocoon-theme/sns%E3%82%B7%E3%82%A7%E3%82%A2%E3%83%9C%E3%82%BF%E3%83%B3%E8%A8%AD%E5%AE%9A%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6/
ここに回答あり

アピールエリア ※大事!

トップページのメインビジュアル上に配置される写真、文言、ボタンなど
ここは何度か設定し直した。高さの指定もできてスゴイ

カルーセル

・メインV下の、動くサムネール部分「フロントページのみで表示」、カテゴリは「未分類」のまま(カテゴリがない状態で作成しているので)
・「オートプレイを実行」にチェック
※これは、他のページにも表示でも良いかも

フッター

・フッターロゴは表示が汚くなるので、無しにした
・「フッター表示タイプ」>「メニュー&クレジット(中央揃え)」に
・クレジット表示も変更できる

設定:ディスカッション>コメント表示

設定部分で、やっておいた方がいいよ、という箇所。

・自分あてのメール通知>コメントがモデレーションのために保留されたとき→のチェックをはずす

ウィジェット系(広告)

ウィジェット系も大事!特に広告を配置するなら、広告専用エリアがあるかどうかも大事ですよね。Cocooonにはちゃんとあります。もちろん。

フッター

・フッターの3カラムにそれぞれ要素を配置
・右カラムに広告挿入(楽天)

サイドバー

・サイドバーに広告挿入(楽天)

投稿画面について

投稿画面、クラシックエディタを使うのであればTinyMCE Advancedを入れておくのがおすすめ。テンプレートのせいなのかは不明なのですが、「スタイル」の機能が多くてびっくり。

スタイルボタンの追加

TinyMCE Advanced で「スタイル」という項目を追加したら、機能が多すぎて驚いた
http://xxxxxxxxxxxxxxxxxxxxxxxxxxxxx(ほんの一部)

投稿するときにアラート

公開していいですか?と聞かれる(丁寧ですね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>本文下の表示チェックをはずす
※これをはずさないと、ボタンが二重になってしまう

これで、好きな場所に表示されるようになった!
自動挿入だと、予期せぬ場所に配置されることもある。

以上です。

雑な備忘録ではありますが、無料でここまで機能がついているのは本当にスゴイ。わいひらさんに敬意を表します。

ご相談はお気軽に!

ホームページ制作やSNSの導入・活用支援、ITコンサルティング、講師や執筆などに携わっています。集客やウェブ活用、SNSの運用などでお困りの方は、ぜひご相談ください。

お問い合わせはこちら >>

シェアする

  • このエントリーをはてなブックマークに追加

★フォローお待ちしております!★