続!Cocoonを使うなら、記事を書く前に行うべき7個の設定

私に任せろ!という男性 初期設定

皆さま、おはようございます、こんにちは、こんばんわ。.Redと申します。
今回の記事は、前回記事の続きになります。よろしくお願いします。

ブルー隊長
ブルー隊長

今回のアイキャッチ画像は、えらいどや顔やね~

Cocoonの設定は任せろ!ってことなの?

.Red
.Red

そうです。そうです。

Cocoonを愛してやまない、ワタクシ.Redが

記事を書く前にやっておきたい設定を、

今回こそ、全て皆様にお届けいたします!

 

ブルー隊長
ブルー隊長

おっさん前回もそんなこと言ってたけど

大丈夫かぁ?なんか隊長不安やわぁ

.Red
.Red

今はやる気満々ですよ。

俺のCocoon愛を皆、受け止めれるかな?

そっちの方が不安だぜ(棒読)

 

 この記事を読んでもらいたい人
  • 設定が多くて、何から手を付けたら良いか分からない
  • 必要なWordPressの設定とCocoonの設定が整理できてない
  • 必要な設定とカスタマイズがごっちゃになっている
  • 既に設定したはずなのに、心配で何度も設定を確認してしまう
  • とにかく設定を早く済ませて、今すぐ記事を書きたい
  • 必要な設定は全て終わった。と安心して記事作成にとりかかりたい
  • 必要な設定は全て終わった。と安心してカスタマイズしていきたい
  • とにかくCocoonを愛している。わいひらさんリスペクト

 

この記事は3部に渡ってお届けいたします。

  1. Cocoonをインストールしたのなら、今すぐ行うべき13個の設定
  2. 続!Cocoonを使うなら、記事を書く前に行うべき7個の設定 ←今ここ!
  3. Cocoonの設定が終わったら、今すぐ入れたいプラグイン11個+α

 

 

はじめに

皆さん設定カスタマイズがごっちゃになっていませんか?私はなっていました。この記事はCocoon設定にフォーカスを当てて書いています。つまり、カスタマイズは後まわし。

 

ブルー隊長
ブルー隊長

カスタマイズは、記事が出来てからの方が

全体のバランスとか見やすいもんね。

.Red
.Red

なので、初期設定と思って貰えればいいです。

長くなるので、私が行う最低限だけど、

この設定をやっておけば、後で何度も見直す事は

無くなるんじゃないかなぁ。知らんけど。

Cocoon設定の全体タブの設定

.Red
.Red

まずは、全体タブだ!

全体タブは、ここにあるよー。

Cocoon全体設定

 

.Red
.Red

変更をまとめて保存すると、現在の状態を

プレビューで確認することができるんだ。

Cocoonのプレビュー画面

ブルー隊長
ブルー隊長

至れり尽くせりだね。

 

キーカラーの設定

.Red
.Red

サイトのキーカラ―の設定だよ。

カスタマイズの部類になるので、飛ばそうと思ったけど、

色変更くらいすぐだし、注意点する事があるようなので書いておくね。

サイトのキーカラ―の設定画面

グローバルナビメニュー・サイドバーの見出しなど、サイトのメインとなる色が変更できます。

 

.Red
.Red

サイトキーカラ―を設定する場合、

テキストも設定した方が良いようです。

[解決済] Cocoon 設定、全体より『サイトキーカラー』を設定した際CSSを触ってないのに記事内h2タグのフォントが白くなる

 

サイトフォントの設定

.Red
.Red

サイトフォントも注意点があるから、

カスタマイズの部類だけど、書いておくね。

サイトフォントの設定

  1. サイトフォント:フォント・フォントサイズを変更できます。
  2. モバイルサイトフォント:フォントサイズを変更できます。
  3. 文字の太さ:スライダーを左右に動かしてフォントの太さを調整できます。
  4. 変更をまとめて保存で、フォントプレビューで確認できます。

 

ブルー隊長
ブルー隊長

ん?注意点って何なのよ?

 

 

.Red
.Red

Googleフォントを利用すると、Page Speed Insightsにて、スクロールせずに見えるコンテンツのレンダリングをブロックしているJavaScript/CSSを排除するが表示されます。

 

スピードテストの画像

 

.Red
.Red

私は出来る限りプラグインなどは使用したくありませんし、フォントは変更せず使用しています。デフォルト=わいひらさんセンスなので、センスのない私が色々やるより良いはず(笑)変更は自由だぁぁぁーー

ブルー隊長
ブルー隊長

なるほど。

相変わらずおっさん小心者やなぁ。

その他の色の設定

.Red
.Red

サイト背景色・サイト背景画像・サイト幅の均一化・サイトリンク色・サイト選択文字色・サイト選択背景色などが設定できる。ここは個性が出せる部分なのでカスタマイズしたくなる部分だが、ある程度記事ができあがってから、ゆっくりカスタマイズしたほうが良いかも。

その他の色設定

 

サイト幅の均一化は、ヘッダー・グローバルメニューの幅が変わるようだ。
ブルー隊長
ブルー隊長

なるほど。

ヘッダーを画面一杯に表示させたい場合、

サイト幅の均一化はチェックを外しておけば

良いってことやね。了解!

その他の設定

.Red
.Red

サイドバーの位置はいつでも変更できるし、こちらの設定はデォルトで良いかも。良く考えて設定しないといけないのは、固定ページをTOPにしている企業サイトや、ワンカラムのサイト、LPOページなどのサイドバーの表示状態。これは自分の作りたいサイトに合わせて設定するほかない。

その他の設定画面

全体タブの設定のまとめ

Cocoon設定の全体タブの設定方法・注意ポイントをまとめました。Cocoonのサイトを見ても、そのままでもカッコいいと私は思います。記事を早く書くための(私の為の)設定なので、カラ―などの個性が出せる部分は、あなたに合ったカスタマイズを行ってください。

Cocoon設定のヘッダータブの設定

Headを手入れする男性

.Red
.Red

ここから、ヘッダータブの設定だよー。

Cocoon設定のヘッダー設定画面

ヘッダーレイアウトの設定

.Red
.Red

ヘッダーレイアウトはプレビューではイメージが掴みにくかったので、

実際に表示した画面のスクリーンショットを載せておきます。

  • センターロゴ(デフォルト)のスクリーンショット
    センターロゴ(デフォルト)
ヘッダーデザインは全部で8種類ある。
  1. センターロゴ(デフォルト)
    センターに表示されたロゴの下に、センター表示のグローバルメニューが表示される。
  2. センターロゴ(トップメニュー)
    センターに表示されたロゴの上に、センター表示のグローバルメニューが表示される。
  3. センターロゴ(スリム)
    センターロゴ(デフォルト)と同じ配置だが、ヘッダーがスリムになっている。
  4. センターロゴ(スリムトップメニュー)
    センターロゴ(トップメニュー)と同じ配置だが、ヘッダーがスリムになっている。
  5. トップメニュー
    ロゴとグローバルメニューの横並び。グローバルメニューはセンター表示?
  6. トップメニュー(右寄せ)
    ロゴとグローバルメニューの横並び。グローバルメニューは右表示
  7. トップメニュー小
    トップメニューと同じ配置だが、ヘッダーがスリムになっている。
  8. トップメニュー小(右寄せ)
    トップメニュー(右寄せ)と同じ配置だが、ヘッダーがスリムになっている。

ロゴを利用する場合、ヘッダーの大きさを意識して(ロゴサイズ)ロゴを作るといい。

.Red
.Red

あ、これもカスタマイズか・・・

ふっ・・・まぁいい・・・

ブルー隊長
ブルー隊長

・・・・・・・・

ヘッダーの高さとロゴの設定

ブルー隊長
ブルー隊長

これもカスタマイズだよね?

.Red
.Red

ぐっ・・・

そんな上手くまとめられないよ><;

ロゴなんか先に設定しておいたら後が楽なの!

そういう事にしておいてー。

ヘッダーの高さとロゴの設定

 

 

  1. ヘッダーの高さは最大800pxモバイルは最大600pxまで設定できる。
  2. ヘッダーロゴを設定する場合は、ヘッダーロゴサイズも記入しよう。

 

キャッチフレーズとヘッダー背景画像の設定

ブルー隊長
ブルー隊長

おい!おっさん!いい加減にしろ!

これもカスタマイズじゃねーのかYO!YO!

.Red
.Red

細かいことでYO!YO!うっせーなー!

ヘッダーとか出来たらテンション上がんじゃねーか!

記事書く気にもなるんじゃねーか!

この皮っかむりMEEEEEEEEE——N!

ブルー隊長
ブルー隊長

おまunk;/kgmvep¥k殺おgじj死sf!!!!!!!!!!!!!!

ヘッダー背景画像の設定画面

 

  1. キャッチフレーズの配置:キャッチフレーズの非表示・表示場所の設定ができる。キャッチフレーズを表示させたい場合、設定 → 一般設定のキャッチフレーズを入力する。
  2. ヘッダー背景画像:表示させたい背景画像を設定できる。
  3. ヘッダー背景画像の固定にチェックを入れると、背景が固定されます。

 

.Red
.Red

ヘッダー背景画像を設定する場合:背景画像は、EWWW Image Optimizerでは圧縮してくれないと、どこかで見たので、下記の圧縮パンダで画像圧縮後、アップロードしてください。

TinyPNG – Compress PNG images while preserving transparency
Make your website faster and save bandwidth. TinyPNG optimizes your PNG images by 50-80% while preserving full transparency!

 

その他のヘッダー色設定

.Red
.Red

えーい!モゥついでだ!こちらで

ヘッダー全体色・ヘッダー色(ロゴ部)・グローバルナビメニュー色の

設定ができます。

その他のヘッダーのカラ―設定画面

 

ブルー隊長
ブルー隊長

完全に開き直りよった!

グローバルナビメニュー幅の設定

.Red
.Red

グローバルメニューが増えてくると、PCでは横一列表示になっていても、タブレットでは二列表示になっている場合がある。そんな時は、トップメニュー幅を調整するといい。

グローバルナビメニュー幅の設定画面

ヘッダータブの設定まとめ

.Red
.Red

最後に当サイトのヘッダー設定を残しておく。
いつ変更するか分からないが、参考にしていただけたらと思います。

ヘッダーレイアウト:センターロゴ(デフォルト)
高さ:250
高さ(モバイル):180
ヘッダーロゴサイズ:幅 289PX 高さ 67px
キャッチフレーズの配置:ヘッダーボトム(デフォルト)
ヘッダー背景画像:幅 1100PX 高さ 250px

Cocoon設定のタイトルタブの設定

タイトル説明文を考える女性

.Red
.Red

あぁ~べっぴんさんやなぁ・・・

ブルー隊長
ブルー隊長

ちょっとちょっと。

心の声が漏れてるよ。じゃじゃ漏れやんか・・・

次はここだよね?

Cocoon設定のタイトルタブの設定画面

 

フロントページ設定

.Red
.Red

イテテ・・・

フロントページの設定はしっかりやっておこう。

フロントページの設定画面

 

  1. プレビュー:検索エンジンに表示されるタイトルと説明文になります。
  2. フロントページタイトル:自由形式を選択で、好きなタイトルが付けれます。
  3. サイトの説明:デフォルトは空欄になっていますので、入力推奨です。
  4. メタキーワード:SEO的に効果が薄いということなので、お好きに。

 

投稿・固定ページ設定

.Red
.Red

メタキーワードを入力しない場合、念のため

メタキーワードタグを出力するのチェックを外す。

投稿・固定ページ設定の画面

 

カテゴリーページ設定

.Red
.Red

メタキーワードを入力しない場合、念のため

メタキーワードタグを出力するのチェックを外す。

カテゴリーページの設定画面

タイトル共通設定

.Red
.Red

ページタイトルとサイト名のセパレーターの選択ができます。

どっちを選ぶかセンスが問われるぜー!

 

タイトル共通設定の画像

タイトルタブの設定まとめ

Cocoon設定のタイトルタブの設定方法・ポイントをまとめました。現在キーワード設定はSEO的には効果が薄いですが、フロントページの説明文はしっかり設定しておきましょう。

投稿ページ・固定ページ・カテゴリーページの説明文は、それぞれページ毎に記入できるようになっています。

Cocoon設定のOGPタブの設定

アプリのイメージ画像

.Red
.Red

IGPじゃないよOGPだよ

cocoon設定OGPタブの設定画面

 

OGP設定

.Red
.Red

OGP設定は少し面倒くさいので後回しにしたくなります。

 

GoogleやFacebookの説明文は、まるで役所のような不親切な説明文を読んでいる気がして私は大の苦手です。設定画面もしょちゅう変更されますし、中々理解する事が出来ないのですが、いつかはやらないといけないので、重い腰を上げることにしました。私のような方も多いはず。

 

.Red
.Red

Facebookの使い方が分からない私がいう事ではないですが、画像付きで詳しく解説しますので、ぜひ設定しておくことをお勧めします。

やってみると簡単なので記事作成前にサクッと済ませておきましょう。

OGP設定の入力画面

 

  1. OGPの有効化にチェックを入れます。
  2. Facebook APP IDにAPP IDを入力します。

 

Facebook APP ID の取得方法(2018年7月)

.Red
.Red

Facebookにログインが完了している状態

以下リンクからお進みください。

Facebookにログイン | Facebook
Facebookにログインして、友達や家族と写真や近況をシェアしましょう。

 

.Red
.Red

以下、画像付きで説明を進めていきます。

developers.facebook.comのスクリーンショット

新しいアプリを追加をクリックします。

 

新しいアプリIDの作成画面

 

.Red
.Red

新しいアプリIDを作成します。

  1. 表示名:分かりやすい名前(私はtaisakubu_OGPとしました。)
  2. 連絡先メールアドレス:あなたのメールアドレスを入力
  3. アプリIDを作成してください:最後にクリックしてください。

 

.Red
.Red

アプリIDの取得が完了しました。

続いて、ベーシック設定に進みます。

ベーシック設定画面

ベーシックをクリックしてください。
.Red
.Red

(*´Д`)はぁはぁ・・・

APIの設定記入画面

  1. アプリドメイン:httpsからあなたのサイトを記入してください。
  2. プライバシーポリシーのURL:未入力だと「公開」設定が完了できません。
  3. カテゴリー:あまり深く考えないでオッケー。どれか選択してください。
  4. 変更を保存をクリックしてください。

 

.Red
.Red

プライバシーポリシーURLの入力について:新しく作ったWordPressサイトの場合、固定ページにプライバシーポリシーが下書きで保存されているはずです。後で編集するとして、とりあえず公開してしまいます。公開したプライバシーポリシーページを記入してください

 

.Red
.Red

ウエブサイトをクリックしてください。

ウエブサイト選択画面

 

.Red
.Red

ウエブサイトの項目ができた。

クイックスタート設定画面

 

  1. サイトURL:あなたのサイトURLを入力してください。
  2. 変更を保存をクリックしてください。

 

.Red
.Red

プラットフォームを追加するよ。

プラットフォームの作成画面

 

  1. プラットフォームを追加をクリックしてください。
  2. 変更を保存をクリックしてください。

 

 

.Red
.Red

クィックスタート!クィックィ

ウエブサイトのくぃっくスタート画面

 

 

クィックスタートをスキップをクリックしてください。
最後の設定画面

 

  1. アプリレビューをクリックしてください。
  2. OGPを公開しますか?:「はい」にしてください。
  3. アプリを公開しますか?:確認をクリックしてください。

 

.Red
.Red

お疲れさまです!

新しいアプリIDをFacebook APP IDに記入してください。

OGP設定の入力画面

Twitterカード設定

ツイッターカードの設定

  1. Twitterカードの有効化:Twitterカードタグの挿入にチェックを入れます。
  2. Twitteカードタイプ:サマリー(summary)・大きな画像のサマリー(summary_large_image)の選択ができます。

 

ホームイメージの設定

.Red
.Red

よくここまで、付いてきた!

OGPはこれで最後だよ。

ホームイメージの設定画面

  1. 画像のアップロード:ホームページのイメージ画像をアップロードします。
  2. 変更をまとめて保存:最後にクリックしてください。

 

OGPタブの設定まとめ

Cocoon設定のOGPタブの設定方法と、Facebook アプリIDの取得、設定方法のポイントをまとめました。いつかは設定しないといけないものなので、記事を書く前にパパッと終わらせておきましょう。私は、Facebookの必要性がまだ分かっていませんが(笑)

Cocoon設定のAMPタブの設定

AMPのイメージ(スピードメーター)

 

.Red
.Red

OGPの設定でうんざりしてないかぃ?

次はサクッと終わるAMP設定だよ。

Cocoon設定のAMPタブの設定画面

 

AMP設定

.Red
.Red

AMP…アンプ…あんぷ…あんぽ…あんぽn…あんぽんたん!

AMP設定画面

 

  1. AMPの有効化:AMP機能の有効化にチェックを入れる
  2. AMPロゴ:AMPのロゴを設定しよう
  3. AMP除外カテゴリー:AMPを作成しないカテゴリーが選べます

 

OGPタブの設定まとめ

接続スピードが上がれば将来的にはAMPは必要ないと聞きましたが、現状では是非AMPを意識したサイト作成を心掛けて行きたいものですね。

.Red
.Red

最初から対応していけば楽だねー。

ロゴはヘッダーレイアウトで設定した同じロゴでいいよん。

AMP除外はページ毎にできるので、カテゴリー除外する必要はないかもね。

Cocoon設定の管理者画面タブの設定

Cocoon管理者画面

.Red
.Red

自分のサイトのチェックを行うのに本当に便利

投稿一覧設定

.Red
.Red

管理者メニュー:アドミンバーに独自管理メニューを表示にチェックを入れると

上の画像のアドミンバーが表示される

投稿一覧の設定画面

 

.Red
.Red

メモの内容を表示する:投稿ページ・固定ページなど、

それぞれのページでメモが残せるようになるよ。

投稿ページのメモを書く場所の画像

.Red
.Red

投稿画面の右サイドバーにメモする場所が出現する。

ここにメモを残すと、投稿一覧にメモが残るんだ。

投稿一覧画面のメモ

ブルー隊長
ブルー隊長

ほぅ。これは地味に便利だね~

管理者パネルの設定

上の画像(アドミンバーの部分)は、管理者パネルの表示を全て表示にし、全ての項目にチェックを入れた状態です。ページを公開したら、アドミンバーで色々チェックできるので本当に便利です。わいひらさんありがとう。

管理者画面タブの設定まとめ

こんな地味で便利なメモ機能と、ボタン一発で色々チェックできる超便利なアドミンバー。設定でチェック入れるだけで使えるのは、本当にありがたいです。まさに神は細部に宿るです。是非設定しておきましょう。

Cocoon設定のアクセス解析タブの設定

.Red
.Red

みんな大好きアクセス解析だよー。

Cocoon設定のアクセス解析タブ

 

アクセス解析設定

アクセス解析のチェックマーク

 

.Red
.Red

ここはチェックを外しておこう。

外さないとサイト管理者のアクセスも集計されるんだ。

解析全般:サイト管理者も含めてアクセス解析するのチェックを外す。
タグマネージャーの設定
.Red
.Red

タグマネージャーの設定方法は、以下が詳しいよ。

GoogleタグマネージャのトラッキングID設定方法
タグマネージャ登録をするとアナリティクスのトラッキングID登録は不要です。

サーチコンソールとアナリティクスのID入力画面

.Red
.Red

Google-Analyticsの設定方法はこちらの記事が詳しいです。

 

Google Analyticsでアクセス解析する方法
Google AnalyticsのトラッキングIDをテーマに登録する方法です。

 

.Red
.Red

Google-Serch-Consoleの設定方法はこちらの記事が詳しいです。

Google Search Consoleに登録する方法
Google Search Console用のサイト認証タグを表示させてサイト登録を行う方法です。

 

アクセス解析タブの設定まとめ

.Red
.Red

タグマネージャ登録をすると

アナリティクスのトラッキングID登録は不要なようです。

ブルー隊長
ブルー隊長

でも、タグマネージャーにアナリティクスの

トラッキングIDは設定しないといけないんだよね?

Google-AnalyticsとGoogle-Serch-Consoleの設定をして、最後にタグマネージャーの設定をすればスムーズですね。

Cocoon高速化の設定

.Red
.Red

最後にCocoon高速化を設定しよう

 

cocoon高速化メニュー

 

ブラウザキャッシュの設定

.Red
.Red

ブラウザキャッシュを有効化しよう

 

ブラウザキャッシュの設定画面

.Red
.Red

縮小化を全てチェックしよう

縮小化の設定画面

  1. HTML縮小化:チェックを入れる
  2. CSS縮小化:チェックを入れる
  3. JavaScript縮小化:チェックを入れる

Cocoon高速化の設定まとめ

Cocoon高速化設定も、全てチェックするだけの超簡単設定。是非有効化しておこう。

CSS・JavaScriptの縮小化は、除外ファイルを指定できるので、アドミンバーなどでチェックしてエラーが出るファイルは除外指定しよう。

この記事のまとめ

.Red
.Red

皆さん、お疲れさまでした!

長い記事を最後まで読んでいただき

ありがとうございました!

ブルー隊長
ブルー隊長

いや、本当になげーし!

途中寝ちゃってたよ。

くどいおっさんだぜ!

 

.Red
.Red

初期設定は、どうしても1記事にまとめておきたかったんですよ。

見ながら設定できるしね。(2記事目だけど・・・)

今回やったCocoonの設定タブの画像

 

今回の記事はかなり長くなってしまいました。行った設定は赤い部分で、私はCocoonの初期設定だと思っています。 広告は設定を忘れてはいけない部分だと思いますが、複数記事が出来てからの設定が良いと思いますので、今回は説明を省きました。(今後もしないだろうけど)

その他の設定は人それぞれ違うでしょうし、個性の出せる部分です。設定しないのもまた個性。とにかく今回の目的は「記事に集中できる初期設定」がテーマでした。本当に長文を読んでいただき、ありがとうございました。

やっておかないといけないWordPressの設定にプラスして、神テンプレートCocoonの設定(機能)は現在218もあります。設定はどれも直感的に行える優しいものとなっております。が!全ての機能を把握するのは非常に困難です。優れているテンプレートの特徴はカスタマイズに時間を掛けてしまいがちになることです。特に、初めてサイトを作る方や、私のように新規サイトを作成する時にカスタマイズばかりに時間を費やして記事がなかなか書けないのは、時間損出になり本当に勿体ないと思います。なのでWordPressインストール後、全ての設定を素早く終わらせ、早く記事を書けるようにするための(私のための)覚書としてCocoonの設定(機能)をまとめることにしました。私と同じく、記事作成までに時間が掛かりすぎる方のお役に立てたら幸いです。
.Red
.Red

次回は、記事を書く前に入れておきたいプラグインを紹介するよ。

そんなに長くないから読んでプリーズ!

Cocoonの設定が終わったら、今すぐ入れたいプラグイン11個+α
この記事では前回に続き、記事を書く前にやっておきたいWordPressの必要最低限のプラグインを画像付きで、分かりやすく説明しています。セキュリティ系のプラグイン4つ・その他入れておきたいプラグインを9つ紹介しています。

コメント

トップへ戻る