【Cocoonの設定まとめ】ブログを立ち上げるときにやったこと

このブログはWordPressテーマのCocoonを使用しています。ブログを立ち上げたときのCocoonの設定をまとめています。

Cocoonは人気のテーマですが機能が多いのではじめてやるときとか久しぶりにブログを立ち上げるときとかに困ることがあるので設定項目をまとめておこうと思います。

でははじめていきたいと思います。

パーマリンクの設定

パーマリンクはブログの場合は「投稿名」で問題ないと思います。ニュースサイトなどの場合はアーカイブを選択するといいみたいです。

高速化

Cocoonの高速化は任意でいいいと思いますが、特に理由がなければ高速化設定をONにしておくといいと思います。しかし実際はここでの高速化の効果はそこまでありません。それよりもレンタルサーバーのプランを高速なものにしたほうが効果はあると思います。

わたしは以下の項目にチェックをつけました

高速化した項目
  • HTMLを縮小化する
  • CSSを縮小化する
  • JavaScriptを縮小化する
  • Lazy Loadを有効にする
  • Googleフォントの非同期読み込みを有効にする

注意点としては高速化すると不具合が発生することがあります。たとえばhtmlを縮小化するとscriptタグがインラインになるのですが、そのタグにつづくコードがインラインにならず、コードが機能しなくなったりします。その場合はjavascriptのファイルを読み込むようにカスタマイズするなどの対応が必要になります。

このほかにもトラブルが発生する可能性があるのでトラブルの原因を解決する能力が必要になることがあります。

Cocoon設定

Cocoon設定は設定項目が多いので自分のブログの完成イメージにあわせて設定を変更していく必要があります。ここでは私がやった設定をまとめます。

全体タブ

サイトキーカラーやフォントを設定しました。

ヘッダータブ

ロゴやメニューの配置が設定できます。このブログではヘッダーレイアウトを「トップメニュー右」にしています。

あとここではヘッダーの固定化もここで設定することができます。ただ注意点としえはヘッダーを固定化してしまうとアンカーリンクの推移がヘッダーの高さ分ずれてしまうので、そこは自分で修正しないといけません。具体的にはjavascriptで修正することになるわけですが、わたしはそれがめんどうだったのでヘッダーの固定化はしていません。

タイトルタブ

ここではサイトのメタディスクリプションとメタキーワードを設定することができるので結構重要です。

OGPタブ

OGP画像は設定しておいたほうがいいと思います。twitterとかにサイトのリンクを貼ったときにその画像が表示されるようになります。

カラムタブ

サイドバーの幅やメインコンテンツの幅を決定します。サイトのイメージを決める設定なので結構重要です

インデックスタブ

インデックスとはトップページのことになります。つまりトップページに関する設定になります。ここは記事の一覧表示の仕方を決定できる「カードタイプ」という項目があります。

インデックスの抜粋表示をするかしないかもここで設定できます。抜粋表示とは記事に書いている内容をインデックスに表示するかどうかです。

投稿タブ

設定する項目は複数ありますが項目を絞ると重要なのは以下です

投稿タブで設定する主な項目
  • 関連記事の設定
  • ページ送りナビの設定
  • パンくずリストの設定

ページ送りナビは使わないのであれば非表示にすることができます。

パンくずリストはこだわりがなければそのままでいいと思いますが、表示位置を変えられるので自分のブログのイメージに合わせて設定することが重要です。

目次タブ

Cocoonは記事に見出しがあったときにphpで処理して目次を自動的に出力します。目次の設定は目次の表示の仕方を設定することができます。

基本的には設定しなくてもよいのですが見た目にこだわりたいときはここをさわります。わたしの場合は「目次ナンバーの表示」を「数字詳細」に変更しました。

SNSシェア・SNSフォロータブ

投稿に表示するSNSボタンなどの設定ができます。必要がなければ非表示にすることも可能です。

画像タブ

画像タブはアイキャッチに関する設定項目があるので結構重要です。たとえば本文上にアイキャッチ画像を設定するかどうか、アイキャッチを中央寄せにするかどうかなどがあります。

それと画像がないときの「NO IMAGE画像」の設定もここで行います。

コードタブ

コードはプログラミング言語とかマークアップ言語に関する解説記事を書かない人には関係ないタブになるのですが、ここではソースコードをハイライトするかどうかを設定することができます。

コードをハイライトするにチェックをつけるとコードがハイライトされるようになるんですが、そのためのライブラリを読みこむことになりページが重くなってしまうので使わないという選択もありだと思います。

モバイルタブ

最近の人はほとんどの人がスマートフォンでサイトを閲覧しているためにモバイルタブの設定は非常に重要だと思います。とくにモバイルメニューに関してはよく考えて設定する必要があると思います。

細かいことは自分のやりたいことに合わせて設定していく必要がありますが、ここでは「モバイルボタンの固定表示」という項目があります。これを固定にするとモバイルボタンがスクロールにあわせて追従してくれるようになります。ただここでもモバイルボタンの高さ分アンカーリンクがずれる(目次のリンク先がずれる)のでjavascriptで修正する必要があります。

APIタブ

APIタブはamazon・楽天・yahooのアフィリエイトをするときに必要になります。アフィリエイトをする人はここの設定は必須です。詳しい設定方法はCocoonテーマの作者が解説しているページがあるのでそちらを参照するとよいと思います。

Cocoonでその他に設定すること

ファビコン

ファビコンは「Cocoon設定」から行うのではなくWordPressの管理画面メニューの「外観」→「カスタマイズ」→「サイトの基本情報」から設定します。

プロフィール

プロフィールは自分がどういう人なのかを紹介するときに使うもので他のサイトをみてもだいたいサイドバーに設定されていることが多いです。ウィジェットで「プロフィール」というのがあるのでそれをウィジェットのサイドバーの欄に追加すると表示することができます。ただこれだけではプロフィールは表示されませんのでその前にプロフィールを設しておく必要があります。

プロフィールの設定はWordPress管理画面メニューの「ユーザー」→「プロフィール」で行います。ここでプロフィール情報や画像、ニックネームなどを設定します。

style.cssとかphpのカスタマイズ

style.cssはWordPress管理画面メニューの「外観」→「テーマファイルエディター」→「スタイルシート」に必要なcssを記述していきます。

phpのカスタマイズをするときは親テーマから子テーマに該当のphpをコピーしてそれを編集します。phpファイルのコピーはFTPソフトなどを使う必要があったり、ファイルの編集に失敗するとエラーでページが表示されなくなったりするのでトラブルに対処できる能力が必要になります。といってもそんなに難しい事ではありません。

まとめ

ブログを立ち上げる時のCocon設定をかいつまんで書いてきましたが、全てを網羅しているわけではないので自分のやりたいことに応じて設定していく必要があると思います。

あとよく言われることですが結局ブログはコンテンツが一番大事ですので、設定はあとから考えてもよいと思います。ただパーマリンクの設定ははじめにやっておかないとあとあと変更しようとするとリンクが変わってしまうのではじめにやるようにしましょう。

あと自分も忘れていたのですがサイトのメタディスクリプションとメタキーワードは忘れずに設定するようにしましょう。amazonアフィリエイトとかグーグルアドセンスに関しては後から考えればよいと思います。

りあ得

コメント