cocoonのテーマおすすめ!コーポレートサイトのカスタマイズ!乗り換え設定編!

cocoonに乗り換えました。

1 コクーン(cocoon)のテーマスキンのおすすめ
2 コクーン(cocoon)のコーポレートサイト例(サイト型)のカスタマイズ
3 コクーン(cocoon)の設定を引っ越し・移行、Simplicityからの乗り換え時やること
4 コクーン(cocoon)のカスタマイズ【基本編】

コクーン(cocoon)のテーマスキンのおすすめ

Cocoonのテーマスキン一覧をみるとたくさんの方がテーマを作っているのですね。

ただ、個人的に自分デザインしたい方なので、デフォルトのテーマをカスタマイズしています。

Cocoonの前にわいひらさんがつくったSimplicityからの愛用者です。Simplicityっぽさを残すため、サイドバーは正方形にしています。cocoonの設定でできます。

他のサイトではSwellを使っています。テーマを乗り換えるのは結構大変なので、最初に決めた方がよいですね。

【比較】SWELL/stork19/JIN:R/sango【テーマの違い、どっち!】 | ithands

コクーン(cocoon)のコーポレートサイト例(サイト型)のカスタマイズ

基本トップページがそれっぽく作ることからはじめましょう。作り方はトップページを固定ページに割り当てること、日付も不要なら設定から簡単に消せるため消しましょう!

ただSwellの方が機能が揃っているのでトップページは簡単に作れます。スライダや動画も割り当てできます。

SWELL

【比較】SWELL/stork19/JIN:R/sango【テーマの違い、どっち!】 | ithands

もしもCocoonで作る場合はスライダー系の有料プラグインなどが必要かなと思います。個人的にも以前導入していました。ただ、料金体系が変わってしまったので、今後、新しいものを導入する予定です。

あとはHtmlやCSS、できたらPHPの知識があればできるでしょう。

CSS設計のおすすめ本・教材、Udemyの動画、デザインレシピ

コクーン(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

コクーンってやっぱすごい！

コクーンを使っていると、有料も含めてほかのテーマは使いたくなくなるのですよね…。

他のテーマは一括置換するか、プラグイン対応するしかありません。

External Links – nofollow, noopener & new window

コクーン(cocoon)のカスタマイズ【基本編】

まずは基本的な設定について覚書。

ロゴ

乗り換えの場合は選択すると、すでに前に使ったものを選べます。

Cocoon 設定 > Cocoon 設定 > ヘッダー > ヘッダーロゴ > 選択

キャッチフレーズ

キャッチフレーズはどちらかというと表示しない派です。

Cocoon 設定 > Cocoon 設定 > ヘッダー > キャッチフレーズの配置 > 表示しない

コンテンツ幅の変更

Cocoon 設定 > Cocoon 設定 > カラム > コンテンツ幅

どうしようか迷ったのですが、700ピクセルのアイキャッチを使っていたため、とりあえず800から700に変更しました。もちろん、アイキャッチのサイズを変更する方法もあります。

なお、chromeでズームがかかっているとカラム落ちしてしまう場合がありますので、注意してください

10インチのタブレットやipadでも2カラムになるため、使いやすいですね。ネットサーフィンする際もサイドバーが表示されたサイトの方が使いやすいです。

グローバルメニューの調整

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 設定 > インデックス > 投稿関連情報の表示

下記は記事やカテゴリなどの一覧に実際に表示される日付です。「投稿日の表示」のチェックを外し「更新日の表示」をチェックしました。

2か所変えるとよいです。

並び順：更新日（降順）

投稿関連情報の表示：更新日の表示

次の記事の日付です。

Cocoon 設定 > Cocoon 設定 > SEO > 表示する日付の「更新日のみ表示」

もしくは、投稿日・更新日を表示

ブログカードは更新日も表示できますが、ブログカードには日付は必要ないと判断して「なし」にしました。

Cocoon 設定 > Cocoon 設定 > ブログカード > 日付表示は「なし」

代わりにはてブを表示しました。カスタマイズ方法は以下で解説しています。

スマホでフッターエリアを表示

スマホでフッターウィジエットを表示しました。情報は共通の方がいい派なので。

/************************************
** スマホでフッターエリアを表示
************************************/

@media screen and (max-width: 768px) {
  .footer-widgets {
    display: block;
  }
}

Google Analyticsの設定

公式サイトに書いてあったため、割愛。

ページが存在しません | Cocoon

Google Search Consoleの設定

公式サイトに書いてあったため、割愛。

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の検索はこちらです。

Font Awesome

スマホメニューを固定にする

Cocoon設定 > モバイル > モバイルボタンの固定表示

また、以下のチェックをいれています。

[ヘッダー・フッターモバイルボタン]

[ サイトヘッダーロゴを表示する ]をオフ。もともとあるロゴが消去され、2重に表示される現状が改善されます。

公式の解説はこちらです。

フッターモバイルボタンの設定方法

ヘッダーモバイルボタンの設定方法

ebookbrainではそれ以外にスマホメニューを固定するプラグインを使っています。

Wordpressでスマホのヘッダーメニューを固定するプラグインまとめ

【おまけ】Gutenbergのテストをしたけどソース的に使いたくない?

Gutenbergをテストしました。

しかし、Gutenbergをやめて、テキストでソースをみると、wp:paragraphなどの記述があります。

wp:paragraphは段落の意味。他にもGutenbergで作った記事をみると意図しないところにbrタグなどが入っていて、やはり好きになれないです。

そして、問題なのは、wp:paragraphがあるとビジュアルとテキストを切り替えたとき、pタグが勝手につくようです。

このような仕様が嫌になり、Classic Editorを使うことにしました。cocoonはClassic Editorに対応しています。詳細はプラグインの記事をみてください。

Cocoon(コクーン)のfunctions.phpカスタマイズ!

Cocoonのカスタマイズデザイン編

デザイン編はこちらです。

Sango風例!?Cocoonをおしゃれにデザインカスタマイズ