cocoonに乗り換えました。
目次
- 1 コクーン(cocoon)のテーマスキンのおすすめ
- 2 コクーン(cocoon)のコーポレートサイト例(サイト型)のカスタマイズ
- 3 コクーン(cocoon)の設定を引っ越し・移行、Simplicityからの乗り換え時やること
- 4 コクーン(cocoon)のカスタマイズ【基本編】
- 4.1 ロゴ
- 4.2 キャッチフレーズ
- 4.3 コンテンツ幅の変更
- 4.4 グローバルメニューの調整
- 4.5 グローバルメニューのマウスオーバー色を調整
- 4.6 シェア数の表示
- 4.7 コピーライトの表示を変更
- 4.8 関連記事を非表示にする
- 4.9 関連記事下の前後ページを非表示にする
- 4.10 日付は更新日のみ表示
- 4.11 スマホでフッターエリアを表示
- 4.12 Google Analyticsの設定
- 4.13 Google Search Consoleの設定
- 4.14 Font Awesomeの切り替え
- 4.15 スマホメニューを固定にする
- 4.16 カテゴリを2列にする
- 4.17 【おまけ】Gutenbergのテストをしたけどソース的に使いたくない?
- 4.18 Cocoonのカスタマイズデザイン編
コクーン(cocoon)のテーマスキンのおすすめ
Cocoonのテーマスキン一覧をみるとたくさんの方がテーマを作っているのですね。
ただ、個人的に自分デザインしたい方なので、デフォルトのテーマをカスタマイズしています。
Cocoonの前にわいひらさんがつくったSimplicityからの愛用者です。Simplicityっぽさを残すため、サイドバーは正方形にしています。cocoonの設定でできます。
他のサイトではSwellを使っています。テーマを乗り換えるのは結構大変なので、最初に決めた方がよいですね。
コクーン(cocoon)のコーポレートサイト例(サイト型)のカスタマイズ
基本トップページがそれっぽく作ることからはじめましょう。作り方はトップページを固定ページに割り当てること、日付も不要なら設定から簡単に消せるため消しましょう!
ただSwellの方が機能が揃っているのでトップページは簡単に作れます。スライダや動画も割り当てできます。
もしもCocoonで作る場合はスライダー系の有料プラグインなどが必要かなと思います。個人的にも以前導入していました。ただ、料金体系が変わってしまったので、今後、新しいものを導入する予定です。
あとはHtmlやCSS、できたらPHPの知識があればできるでしょう。
コクーン(cocoon)の設定を引っ越し・移行、Simplicityからの乗り換え時やること
Simplicityから乗り換えた場合の覚書です。
コクーンは設定ファイルの移行も簡単です。そのため、引っ越しやテストサーバーでのテストも簡単にできます。
cocoonの設定をエクスポート
Cocoon設定 > バックアップ > バックアップファイルの取得
バックアップはテキストファイルです。
cocoonの設定のインポート
Cocoon設定 > バックアップ > 「参照」でファイルの選択 > 設定の復元
ウィジェットが消えた
ウィジェットが外れているため、外観 > ウィジェットから修正すればいいだけ。
cocoonはWordPressの新しいウィジエット対応は?
テーマをCocoonに切り替えると、Cocoonは古いウィジエットが表示されるようです。
ただ、新しいウィジエットは使いにくいためこのままでよい気がします。
アイコンボックスの置換
Simplicityのアイコンボックスをコクーン用に置換しました。class名が変わったようです。置換しなくても問題なく表示できるよう対応されていましたが、コクーン用に統一しました。cssで装飾する際に2つで管理したくなかったからです。
<div class="information"></div>
<div class="question"></div>
<div class="alert"></div>置換後は以下のとおりです。
<div class="information-box"></div>
<div class="question-box"></div>
<div class="alert-box"></div>simplicityからcocoonにアクセス解析を移行する
アクセス解析は設定しなおさないといけません。simplicityの設定をメモ帳にめもるのが早いでしょう。
外観 > カスタマイズ > アクセス解析
target=”_blank”問題も対応
target=”_blank”の問題は一時期、話題になりましたよね。
クリックタグを導入するとき、target=”_blank”とrel=”noopener”をセットにしました。
テストしたところ再現はしませんでしたが、、Android+Chrome環境でリンク先を開けない環境があるみたいなので。
またセキュリティの問題は、こちらのデモをみるとわかりやすいです。自サイトが操作されていますよね。
そして、Googleの見解は次のとおりです。
一般的に、外部リンクを新しいウィンドウまたはタブで開く場合は、必ず rel=”noopener” を追加してください。
サイトで rel=”noopener” を使用して外部アンカーを開く | Tools for Web Developers | Google Developers
ちなみに、似たものとしてnoreferrerがあります。個人的にGutenbergは使っていないため問題ないのですが、Gutenbergは自動的につくようです。noreferrerはアフィリエイトリンクなどのリフィラーが参照できないなので消します。
この問題の対応方法はtarget=”_blank”はそもそもつけないか、つけるならGoogleのいうようにnoopenerとセットにしましょう。
現在、コクーンは対応されています。
よりセキュリティーを高くするのであれば、「target=”_blank”の際はnoreferrerを追加」も有効にしておいた方が良いかも。ただrelにnoreferrerを追加してしまうと、リファラが取れなくなる難点もあります。 pic.twitter.com/WKOkOkxIyD
— わいひら@寝ログ (@MrYhira) August 8, 2019
コクーンってやっぱすごい！
コクーンを使っていると、有料も含めてほかのテーマは使いたくなくなるのですよね…。
他のテーマは一括置換するか、プラグイン対応するしかありません。
コクーン(cocoon)のカスタマイズ【基本編】
まずは基本的な設定について覚書。
ロゴ
乗り換えの場合は選択すると、すでに前に使ったものを選べます。
Cocoon 設定 > Cocoon 設定 > ヘッダー > ヘッダーロゴ > 選択
キャッチフレーズ
キャッチフレーズはどちらかというと表示しない派です。
Cocoon 設定 > Cocoon 設定 > ヘッダー > キャッチフレーズの配置 > 表示しない
コンテンツ幅の変更
Cocoon 設定 > Cocoon 設定 > カラム > コンテンツ幅
どうしようか迷ったのですが、700ピクセルのアイキャッチを使っていたため、とりあえず800から700に変更しました。もちろん、アイキャッチのサイズを変更する方法もあります。
グローバルメニューの調整
Cocoon 設定 > Cocoon 設定 > ヘッダー > グローバルメニュー幅の「メニュー幅をテキストに合わせる」
これは便利です。
ついでにグローバルナビの矢印を消します。
/* グローバルメニューを矢印を消す */
.navi-in .has-icon div::before{
display: none;
}
/* グローバルメニュのフォントサイズの変更 */
.navi-in a {
font-size: 12px;
}
フォントサイズは小さめにします。メニューに情報がたくさん入るようにするけど、読めるサイズにします。
昔は下記で消えたようですが、少し変わったようです。
/************************************
** グローバルメニュー
************************************/
/* グローバルメニューを矢印を消す */
.navi-in > ul > .menu-item-has-children > a::after{
display: none;
}
/* グローバルメニュのフォントサイズの変更 */
.navi-in a {
font-size: 12px;
}
グローバルメニューのマウスオーバー色を調整
.navi-in a:hover {
color: #8fb0a9 !important;
background: none !important;
}
優先度の関係でうまく反映できなかったため、!important;を使いました。コード的にはこちらがわかりやすいですけど、!importantを使わずごちゃごちゃ書く方法はありそうです。
シェア数の表示
デフォルトでなぜかシェア数が表示されていないようです。
Cocoon 設定 > Cocoon 設定 > SNSシェア > 本文上シェアボタンの「シェア数の表示」のチェックをオン
Cocoon 設定 > Cocoon 設定 > SNSシェア > 本文下シェアボタンの「シェア数の表示」のチェックをオン
本文上と本文下は別れているため、2ヵ所対応が必要です。
コピーライトの表示を変更
地味ですけど、フッターよりコピーライトの表示を変更できます。
Cocoon 設定 > Cocoon 設定 > フッター > クレジット表記
関連記事を非表示にする
このサイトは関連記事を表示していますが、サイトによってはいらないことがあるかもしれません。
Cocoon 設定 > Cocoon 設定 > 投稿 > 表示 > 「関連記事を表示する」のチェックを外す
関連記事下の前後ページを非表示にする
関連記事下の前後ページを非表示にします。順番に関連性の高い記事を投稿していることは皆無で、関連性の薄い記事が表示されることが多いため。
Cocoon 設定 > Cocoon 設定 > 投稿 > ページ送りナビ設定 > 「ページ送りナビを表示する」のチェックを外す
日付は更新日のみ表示
まず、ブログの記事に表示する日付を更新日のみにします。
忘れがちですが、インデックスの設定に日付があるようです。
Cocoon 設定 > Cocoon 設定 > インデックス > 投稿関連情報の表示
下記は記事やカテゴリなどの一覧に実際に表示される日付です。「投稿日の表示」のチェックを外し「更新日の表示」をチェックしました。
Cocoon 設定 > Cocoon 設定 > SEO > 表示する日付 の「更新日のみ表示」
ブログカードは更新日も表示できますが、ブログカードには日付は必要ないと判断して「なし」にしました。
Cocoon 設定 > Cocoon 設定 > ブログカード > 日付表示は「なし」
代わりにはてブを表示しました。カスタマイズ方法は以下で解説しています。
スマホでフッターエリアを表示
スマホでフッターウィジエットを表示しました。情報は共通の方がいい派なので。
/************************************
** スマホでフッターエリアを表示
************************************/
@media screen and (max-width: 768px) {
.footer-widgets {
display: block;
}
}
Google Analyticsの設定
公式サイトに書いてあったため、割愛。
Google Search Consoleの設定
公式サイトに書いてあったため、割愛。
htmlタグの再取得が必要な場合は次のとおりです。
設定 > 所有権の確認 > htmlのタグ
Font Awesomeの切り替え
Font Awesome 4とFont Awesome 5の切り替えが可能です。
Cocoon設定 > 全体 > サイトアイコンフォント
指定方法は次のとおりです。font-familyとfont-weightの指定も必須です。
font-family: 'Font Awesome 5 Free', sans-serif; content: '\f05a'; font-weight: 900;
font-weight: 900;は塗りつぶしバージョンの場合はそうなります。他に400があります。
Font Awesome 5の検索はこちらです。
スマホメニューを固定にする
Cocoon設定 > モバイル > モバイルボタンの固定表示
また、以下のチェックをいれています。
[ヘッダー・フッターモバイルボタン]
[ サイトヘッダーロゴを表示する ]をオフ。もともとあるロゴが消去され、2重に表示される現状が改善されます。
公式の解説はこちらです。
ebookbrainではそれ以外にスマホメニューを固定するプラグインを使っています。
カテゴリを2列にする
インデックスが少しわかりにくいけど、ここにありました。
Cocoon設定 > インデックス > 縦型カード2列
【おまけ】Gutenbergのテストをしたけどソース的に使いたくない?
Gutenbergをテストしました。
しかし、Gutenbergをやめて、テキストでソースをみると、wp:paragraphなどの記述があります。
wp:paragraphは段落の意味。他にもGutenbergで作った記事をみると意図しないところにbrタグなどが入っていて、やはり好きになれないです。
そして、問題なのは、wp:paragraphがあるとビジュアルとテキストを切り替えたとき、pタグが勝手につくようです。
このような仕様が嫌になり、Classic Editorを使うことにしました。cocoonはClassic Editorに対応しています。詳細はプラグインの記事をみてください。
Cocoonのカスタマイズデザイン編
デザイン編はこちらです。
コメント