皆さま、おはようございます、こんにちは、こんばんわ。.Redと申します。
今回の記事は、前回記事の続きになります。よろしくお願いします。
今回のアイキャッチ画像は、えらいどや顔やね～
Cocoonの設定は任せろ！ってことなの？
そうです。そうです。
Cocoonを愛してやまない、ワタクシ.Redが
記事を書く前にやっておきたい設定を、
今回こそ、全て皆様にお届けいたします！
おっさん前回もそんなこと言ってたけど
大丈夫かぁ？なんか隊長不安やわぁ
今はやる気満々ですよ。
俺のCocoon愛を皆、受け止めれるかな？
そっちの方が不安だぜ（棒読）
- 設定が多くて、何から手を付けたら良いか分からない
- 必要なWordPressの設定とCocoonの設定が整理できてない
- 必要な設定とカスタマイズがごっちゃになっている
- 既に設定したはずなのに、心配で何度も設定を確認してしまう
- とにかく設定を早く済ませて、今すぐ記事を書きたい
- 必要な設定は全て終わった。と安心して記事作成にとりかかりたい
- 必要な設定は全て終わった。と安心してカスタマイズしていきたい
- とにかくCocoonを愛している。わいひらさんリスペクト
この記事は3部に渡ってお届けいたします。
- Cocoonをインストールしたのなら、今すぐ行うべき13個の設定
- 続！Cocoonを使うなら、記事を書く前に行うべき7個の設定 ←今ここ！
- Cocoonの設定が終わったら、今すぐ入れたいプラグイン11個+α
はじめに
皆さん設定とカスタマイズがごっちゃになっていませんか？私はなっていました。この記事はCocoon設定にフォーカスを当てて書いています。つまり、カスタマイズは後まわし。
カスタマイズは、記事が出来てからの方が
全体のバランスとか見やすいもんね。
なので、初期設定と思って貰えればいいです。
長くなるので、私が行う最低限だけど、
この設定をやっておけば、後で何度も見直す事は
無くなるんじゃないかなぁ。知らんけど。
Cocoon設定の全体タブの設定
まずは、全体タブだ！
全体タブは、ここにあるよー。
変更をまとめて保存すると、現在の状態を
プレビューで確認することができるんだ。
至れり尽くせりだね。
キーカラーの設定
サイトのキーカラ―の設定だよ。
カスタマイズの部類になるので、飛ばそうと思ったけど、
色変更くらいすぐだし、注意点する事があるようなので書いておくね。
グローバルナビメニュー・サイドバーの見出しなど、サイトのメインとなる色が変更できます。
サイトキーカラ―を設定する場合、
テキストも設定した方が良いようです。
[解決済] Cocoon 設定、全体より『サイトキーカラー』を設定した際CSSを触ってないのに記事内h2タグのフォントが白くなる
サイトフォントの設定
サイトフォントも注意点があるから、
カスタマイズの部類だけど、書いておくね。
- サイトフォント：フォント・フォントサイズを変更できます。
- モバイルサイトフォント：フォントサイズを変更できます。
- 文字の太さ：スライダーを左右に動かしてフォントの太さを調整できます。
- 変更をまとめて保存で、フォントプレビューで確認できます。
ん？注意点って何なのよ？
Googleフォントを利用すると、Page Speed Insightsにて、スクロールせずに見えるコンテンツのレンダリングをブロックしているJavaScript/CSSを排除するが表示されます。
私は出来る限りプラグインなどは使用したくありませんし、フォントは変更せず使用しています。デフォルト＝わいひらさんセンスなので、センスのない私が色々やるより良いはず（笑）変更は自由だぁぁぁーー
なるほど。
相変わらずおっさん小心者やなぁ。
その他の色の設定
サイト背景色・サイト背景画像・サイト幅の均一化・サイトリンク色・サイト選択文字色・サイト選択背景色などが設定できる。ここは個性が出せる部分なのでカスタマイズしたくなる部分だが、ある程度記事ができあがってから、ゆっくりカスタマイズしたほうが良いかも。
なるほど。
ヘッダーを画面一杯に表示させたい場合、
サイト幅の均一化はチェックを外しておけば
良いってことやね。了解！
その他の設定
サイドバーの位置はいつでも変更できるし、こちらの設定はデォルトで良いかも。良く考えて設定しないといけないのは、固定ページをＴＯＰにしている企業サイトや、ワンカラムのサイト、ＬＰＯページなどのサイドバーの表示状態。これは自分の作りたいサイトに合わせて設定するほかない。
全体タブの設定のまとめ
Cocoon設定の全体タブの設定方法・注意ポイントをまとめました。Cocoonのサイトを見ても、そのままでもカッコいいと私は思います。記事を早く書くための（私の為の）設定なので、カラ―などの個性が出せる部分は、あなたに合ったカスタマイズを行ってください。
Cocoon設定のヘッダータブの設定
ここから、ヘッダータブの設定だよー。
ヘッダーレイアウトの設定
ヘッダーレイアウトはプレビューではイメージが掴みにくかったので、
実際に表示した画面のスクリーンショットを載せておきます。
センターロゴ（デフォルト）
- センターロゴ（デフォルト）
センターに表示されたロゴの下に、センター表示のグローバルメニューが表示される。 - センターロゴ（トップメニュー）
センターに表示されたロゴの上に、センター表示のグローバルメニューが表示される。 - センターロゴ（スリム）
センターロゴ（デフォルト）と同じ配置だが、ヘッダーがスリムになっている。 - センターロゴ（スリムトップメニュー）
センターロゴ（トップメニュー）と同じ配置だが、ヘッダーがスリムになっている。 - トップメニュー
ロゴとグローバルメニューの横並び。グローバルメニューはセンター表示？ - トップメニュー（右寄せ）
ロゴとグローバルメニューの横並び。グローバルメニューは右表示 - トップメニュー小
トップメニューと同じ配置だが、ヘッダーがスリムになっている。 - トップメニュー小（右寄せ）
トップメニュー（右寄せ）と同じ配置だが、ヘッダーがスリムになっている。
ロゴを利用する場合、ヘッダーの大きさを意識して（ロゴサイズ）ロゴを作るといい。
あ、これもカスタマイズか・・・
ふっ・・・まぁいい・・・
・・・・・・・・
ヘッダーの高さとロゴの設定
これもカスタマイズだよね？
ぐっ・・・
そんな上手くまとめられないよ＞＜；
ロゴなんか先に設定しておいたら後が楽なの！
そういう事にしておいてー。
- ヘッダーの高さは最大800pxモバイルは最大600pxまで設定できる。
- ヘッダーロゴを設定する場合は、ヘッダーロゴサイズも記入しよう。
キャッチフレーズとヘッダー背景画像の設定
おい！おっさん！いい加減にしろ！
これもカスタマイズじゃねーのかYO!YO!
細かいことでYO!YO!うっせーなー！
ヘッダーとか出来たらテンション上がんじゃねーか！
記事書く気にもなるんじゃねーか！
この皮っかむりMEEEEEEEEE——N!
おまunk;/kgmvep￥ｋ殺おｇじｊ死ｓｆ!!!!!!!!!!!!!!
- キャッチフレーズの配置：キャッチフレーズの非表示・表示場所の設定ができる。キャッチフレーズを表示させたい場合、設定 → 一般設定のキャッチフレーズを入力する。
- ヘッダー背景画像：表示させたい背景画像を設定できる。
- ヘッダー背景画像の固定にチェックを入れると、背景が固定されます。
ヘッダー背景画像を設定する場合：背景画像は、EWWW Image Optimizerでは圧縮してくれないと、どこかで見たので、下記の圧縮パンダで画像圧縮後、アップロードしてください。
その他のヘッダー色設定
えーい！モゥついでだ！こちらで
ヘッダー全体色・ヘッダー色（ロゴ部）・グローバルナビメニュー色の
設定ができます。
完全に開き直りよった！
グローバルナビメニュー幅の設定
グローバルメニューが増えてくると、ＰＣでは横一列表示になっていても、タブレットでは二列表示になっている場合がある。そんな時は、トップメニュー幅を調整するといい。
ヘッダータブの設定まとめ
最後に当サイトのヘッダー設定を残しておく。
いつ変更するか分からないが、参考にしていただけたらと思います。
高さ：250
高さ（モバイル）：180
ヘッダーロゴサイズ：幅 289PX 高さ 67px
キャッチフレーズの配置：ヘッダーボトム（デフォルト）
ヘッダー背景画像：幅 1100PX 高さ 250px
Cocoon設定のタイトルタブの設定
あぁ～べっぴんさんやなぁ・・・
ちょっとちょっと。
心の声が漏れてるよ。じゃじゃ漏れやんか・・・
次はここだよね？
フロントページ設定
イテテ・・・
フロントページの設定はしっかりやっておこう。
- プレビュー：検索エンジンに表示されるタイトルと説明文になります。
- フロントページタイトル：自由形式を選択で、好きなタイトルが付けれます。
- サイトの説明：デフォルトは空欄になっていますので、入力推奨です。
- メタキーワード：SEO的に効果が薄いということなので、お好きに。
投稿・固定ページ設定
メタキーワードを入力しない場合、念のため
メタキーワードタグを出力するのチェックを外す。
カテゴリーページ設定
メタキーワードを入力しない場合、念のため
メタキーワードタグを出力するのチェックを外す。
タイトル共通設定
ページタイトルとサイト名のセパレーターの選択ができます。
どっちを選ぶかセンスが問われるぜー！
タイトルタブの設定まとめ
Cocoon設定のタイトルタブの設定方法・ポイントをまとめました。現在キーワード設定はＳＥＯ的には効果が薄いですが、フロントページの説明文はしっかり設定しておきましょう。
投稿ページ・固定ページ・カテゴリーページの説明文は、それぞれページ毎に記入できるようになっています。
Cocoon設定のOGPタブの設定
IGPじゃないよOGPだよ
OGP設定
OGP設定は少し面倒くさいので後回しにしたくなります。
GoogleやFacebookの説明文は、まるで役所のような不親切な説明文を読んでいる気がして私は大の苦手です。設定画面もしょちゅう変更されますし、中々理解する事が出来ないのですが、いつかはやらないといけないので、重い腰を上げることにしました。私のような方も多いはず。
Facebookの使い方が分からない私がいう事ではないですが、画像付きで詳しく解説しますので、ぜひ設定しておくことをお勧めします。
やってみると簡単なので記事作成前にサクッと済ませておきましょう。
- ＯＧＰの有効化にチェックを入れます。
- Facebook APP IDにAPP IDを入力します。
Facebook APP ID の取得方法（2018年7月）
Facebookにログインが完了している状態で
以下リンクからお進みください。
以下、画像付きで説明を進めていきます。
新しいアプリを追加をクリックします。
新しいアプリIDを作成します。
- 表示名：分かりやすい名前（私はtaisakubu_OGPとしました。）
- 連絡先メールアドレス：あなたのメールアドレスを入力
- アプリIDを作成してください：最後にクリックしてください。
アプリIDの取得が完了しました。
続いて、ベーシック設定に進みます。
(*´Д｀)はぁはぁ・・・
- アプリドメイン：httpsからあなたのサイトを記入してください。
- プライバシーポリシーのURL:未入力だと「公開」設定が完了できません。
- カテゴリー：あまり深く考えないでオッケー。どれか選択してください。
- 変更を保存をクリックしてください。
プライバシーポリシーURLの入力について：新しく作ったWordPressサイトの場合、固定ページにプライバシーポリシーが下書きで保存されているはずです。後で編集するとして、とりあえず公開してしまいます。公開したプライバシーポリシーページを記入してください。
ウエブサイトをクリックしてください。
ウエブサイトの項目ができた。
- サイトURL:あなたのサイトURLを入力してください。
- 変更を保存をクリックしてください。
プラットフォームを追加するよ。
- プラットフォームを追加をクリックしてください。
- 変更を保存をクリックしてください。
クィックスタート！クィックィ
- アプリレビューをクリックしてください。
- OGPを公開しますか？：「はい」にしてください。
- アプリを公開しますか？：確認をクリックしてください。
お疲れさまです！
新しいアプリIDをFacebook APP IDに記入してください。
Twitterカード設定
- Twitterカードの有効化：Twitterカードタグの挿入にチェックを入れます。
- Twitteカードタイプ：サマリー(summary)・大きな画像のサマリー(summary_large_image)の選択ができます。
ホームイメージの設定
よくここまで、付いてきた！
OGPはこれで最後だよ。
- 画像のアップロード：ホームページのイメージ画像をアップロードします。
- 変更をまとめて保存：最後にクリックしてください。
OGPタブの設定まとめ
Cocoon設定のOGPタブの設定方法と、Facebook アプリIDの取得、設定方法のポイントをまとめました。いつかは設定しないといけないものなので、記事を書く前にパパッと終わらせておきましょう。私は、Facebookの必要性がまだ分かっていませんが（笑）
Cocoon設定のAMPタブの設定
OGPの設定でうんざりしてないかぃ？
次はサクッと終わるAMP設定だよ。
AMP設定
ＡＭＰ…アンプ…あんぷ…あんぽ…あんぽｎ…あんぽんたん！
- ＡＭＰの有効化：AMP機能の有効化にチェックを入れる
- AMPロゴ：ＡＭＰのロゴを設定しよう
- AMP除外カテゴリー：AMPを作成しないカテゴリーが選べます
OGPタブの設定まとめ
接続スピードが上がれば将来的にはAMPは必要ないと聞きましたが、現状では是非AMPを意識したサイト作成を心掛けて行きたいものですね。
最初から対応していけば楽だねー。
ロゴはヘッダーレイアウトで設定した同じロゴでいいよん。
AMP除外はページ毎にできるので、カテゴリー除外する必要はないかもね。
Cocoon設定の管理者画面タブの設定
自分のサイトのチェックを行うのに本当に便利
投稿一覧設定
管理者メニュー：アドミンバーに独自管理メニューを表示にチェックを入れると
上の画像のアドミンバーが表示される
メモの内容を表示する：投稿ページ・固定ページなど、
それぞれのページでメモが残せるようになるよ。
投稿画面の右サイドバーにメモする場所が出現する。
ここにメモを残すと、投稿一覧にメモが残るんだ。
ほぅ。これは地味に便利だね～
管理者パネルの設定
上の画像（アドミンバーの部分）は、管理者パネルの表示を全て表示にし、全ての項目にチェックを入れた状態です。ページを公開したら、アドミンバーで色々チェックできるので本当に便利です。わいひらさんありがとう。
管理者画面タブの設定まとめ
こんな地味で便利なメモ機能と、ボタン一発で色々チェックできる超便利なアドミンバー。設定でチェック入れるだけで使えるのは、本当にありがたいです。まさに神は細部に宿るです。是非設定しておきましょう。
Cocoon設定のアクセス解析タブの設定
みんな大好きアクセス解析だよー。
アクセス解析設定
ここはチェックを外しておこう。
外さないとサイト管理者のアクセスも集計されるんだ。
タグマネージャーの設定方法は、以下が詳しいよ。
Google-Analyticsの設定方法はこちらの記事が詳しいです。
Google-Serch-Consoleの設定方法はこちらの記事が詳しいです。
アクセス解析タブの設定まとめ
タグマネージャ登録をすると
アナリティクスのトラッキングID登録は不要なようです。
でも、タグマネージャーにアナリティクスの
トラッキングIDは設定しないといけないんだよね？
Cocoon高速化の設定
最後にCocoon高速化を設定しよう
ブラウザキャッシュの設定
ブラウザキャッシュを有効化しよう
縮小化を全てチェックしよう
- HTML縮小化：チェックを入れる
- CSS縮小化：チェックを入れる
- JavaScript縮小化：チェックを入れる
Cocoon高速化の設定まとめ
Cocoon高速化設定も、全てチェックするだけの超簡単設定。是非有効化しておこう。
CSS・JavaScriptの縮小化は、除外ファイルを指定できるので、アドミンバーなどでチェックしてエラーが出るファイルは除外指定しよう。
この記事のまとめ
皆さん、お疲れさまでした！
長い記事を最後まで読んでいただき
ありがとうございました！
いや、本当になげーし！
途中寝ちゃってたよ。
くどいおっさんだぜ！
初期設定は、どうしても1記事にまとめておきたかったんですよ。
見ながら設定できるしね。（2記事目だけど・・・）
今回の記事はかなり長くなってしまいました。行った設定は赤い部分で、私はCocoonの初期設定だと思っています。 広告は設定を忘れてはいけない部分だと思いますが、複数記事が出来てからの設定が良いと思いますので、今回は説明を省きました。（今後もしないだろうけど）
その他の設定は人それぞれ違うでしょうし、個性の出せる部分です。設定しないのもまた個性。とにかく今回の目的は「記事に集中できる初期設定」がテーマでした。本当に長文を読んでいただき、ありがとうございました。
次回は、記事を書く前に入れておきたいプラグインを紹介するよ。
そんなに長くないから読んでプリーズ！
コメント
Google-Analyticsの設定が分からなくてこちらにたどり着いたのですが
他の設定も含めいろいろ勉強になりました ありがとうございます。
自分への健忘録ですが、お役に立てて良かったです＾＾
質問があります。
モバイル画面でメタディスクリプションを表示させたいのですがどうすればできますか？
cocoonの設定で疑問などがあれば、本家フォーラムをご利用ください。
ブログ初心者がテーマをコクーンにし取り組んでます。.Redさんの記事がとても分かりやすく参考にさせてもらっています。ひとつご教示願いたくコメント欄より失礼します。投稿記事終了部分と下部関連記事の間にも投稿記事か紹介されてます。その箇所を削除したいのですがその方法が書かれた記事はありますでしょうか？探しきれず…。こういう内容をコメントして良かったかも迷ったのですがヨロシクお願いします。
cocoonの設定で疑問などがあれば、本家フォーラムをご利用ください。
cocoonでブログを始めた初心者です。
いろいろ調べて .REDさんのブログにたどり着きました。
ツイッターを埋め込むと不具合が生じやすいのですが、原因わかりますか？
公開できているときもピンクのバーで「更新できませんでした。」とでていたのですが、保存しながら、何とか公開できていました。
苦労して書き上げ、公開しようとしたら途中までしかできず・・・
どこかのサイトにログアウト、ログインとあり、やってみたら、すべて消えてしまった！
そんなことを繰り返して、ストレス倍増です。
初心者すぎて、フォーラムでの書き込みができません。
いろいろ細かなことを何を書いていいのかわからないのです・・・
教えていただけたら助かります。
https://taisakubu.com/twitter-timeline/
↑
こちらの記事でどーぞ