WordPressテーマ「Cocoon」を導入したらはじめにすること。

未分類

この記事は無料WordPressテーマCocoonを導入したらはじめに読みたい記事です。

このCocoon、わいひらさん作の無料テーマ

の後継というべきテーマで、もうWordPressでブログを運営する上で必要な機能がほぼ全て揃っているといっても過言ではありません

とりあえずCocoonを使っておけば問題ないレベル。

Cocoonは先日Ver.1.0.0として正式リリースされ、名実とも完全体となりました。

しかしこのCocoon、シンプルであるがゆえに見た目を自分好みに整えるのにはすこし手間が必要です。

というわけで、今回はこのWordPressテーマ「Cocoon」を導入したらはじめになにをすべきなのか、ひとつずつ丁寧に解説してみます。

ちなみに、当サイトももちろんCocoonを使用して制作されています。

この記事を読み終わるころには、あなたもCocoonマスターです。

Cocoonの設定画面は少し特殊です。

Cocoonの設定画面は他のテーマとは異なり、少し特殊ですので慣れが必要です。

しかし慣れてしまえばこんなに便利なものはありません。

Cocoonの設定は管理画面メニューの「Cocoon 設定」という項目から行います。

ちなみに「Cocoon 設定」ではその他にも「吹き出し」や「テンプレート」、「アフィリエイトタグ」、「ランキング作成」、「アクセス集計」、「高速化」、「バックアップ」、「キャッシュ削除」などのさまざまな設定が行えますが、まずはこれらにはノータッチで大丈夫です。

Cocoon 設定」画面では、タブの切り替えによってさまざまな設定を行うことができます。

多機能が故に、初心者はすこし戸惑ってしまうかもしれませんのでひとつずつCocoonの推奨設定を紹介していきます。

「全体」:ブログ全体の設定

「全体」タブではブログ全体に影響を及ぼす設定を行うことができます。

  • キーカラー

ここでまず行いたいのは「キーカラー」の設定。

このキーカラーひとつでブログ全体の印象はがらりと変わります。

色の指定はカラーコードというすこし特殊な記法で行います。

#で始まり、RGB各色の度合いを2桁ずつ00~FFの2桁の16進数で指定するのです。真っ赤(Red)だったら#FF0000、真緑(Green)だったら#00FF00、真っ青(Blue)だったら#0000FFという感じです。

  • サイトフォント
    こだわりがなければ、デフォルト設定で問題ありません。

「ヘッダー」:ブログ上部(ロゴ・メニュー)の設定

「ヘッダー」タブでは、ブログ上部の見た目を設定することができます。

  • ヘッダーレイアウト

「ヘッダーレイアウト」はデフォルトでは「センターロゴ」となっています。

メニューを最上部に移動させたい場合は「トップメニュー」を選びましょう。

  • ヘッダーロゴ

「ヘッダーロゴ」ではヘッダー部分(と設定によってはフッター部分)に表示するロゴ画像を選びます。

ここを指定しないとサイトタイトルがテキストで表示されます。

  • キャッチフレーズの配置

「キャッチフレーズの配置」では「設定」→「一般」で設定したキャッチフレーズをどう配置するかを指定できます。

「スキン」:ブログ全体のデザインを手軽に変更

「スキン」タブでは、有志が作成したスキンを使ってブログ全体のデザインを手軽に変更することができます。

ただ、なんとなくこってりしたデザインや一昔前の流行のようなデザインのスキンもあるようなので、こちらはお好みで。

「広告」:アドセンスの表示設定

これがマジで便利!!

この「広告」設定の自由度が、個人的に思うCocoonを利用する最大のメリットだと思います。

「広告コード」欄にGoogle AdSenseのHTMLタグを貼り付けてしまえば、あとは「広告の表示位置」でチェックをつけた部分に広告を表示してくれます。

収益を加速すると話題の「自動広告」もチェックひとつで表示してくれます。

煩わしい設定不要。すごすぎる。

  • オススメの「広告の表示位置」設定

これが正解、というものはありませんが、参考までに僕が実際に設定しているものを。

  1. インデックスページの表示位置「ミドル」「記事内広告」
    ……記事一覧ページにインフィード広告のように自然に広告を入れてくれます。
  2. サイドバーの表示位置「サイドバーボトム」「ラージスカイスクレイパー」
    ……サイドバー下部にデカめの縦長広告が入ります。PCビューではインパクト大。
  3. 投稿・固定ページの表示位置→
    1. 「タイトル上」「リンクユニット」
    2. 「本文中」(1つめのH2タグ直前)に「オート(広告ラベル有)」
    3. 「本文下」「ダブルレクタングル(広告ラベル有)」
    4. 「関連記事下」「オート(広告ラベル有)」
      ……記事本文内に挿入されるものには広告ラベルをいれておきましょう

「投稿」:投稿ページの表示設定

「投稿」タブでは投稿ページの表示設定が可能です。

  • 関連記事設定

投稿下部の「関連記事設定」についてもこのタブで設定できます。

こちらもお好みでどうぞ。

  • ページ送りナビ設定

ページ送りナビゲーションの表示設定ができます。

「表示タイプ」はデフォルトでは場所を取ってしまいますので「サムネイル正方形」がおすすめです。

  • パンくずリスト設定

パンくずリストはページの現在位置をしめすものです。

配置は「メインカラムトップ」が定番でいいと思います(ファーストビューが圧迫されるのでお好みで)。

「固定ページ」:固定ページの表示設定

こちらは固定ページの表示設定が可能です。

……といっても設定項目も多くないですので、デフォルトで良いと思います。

「本文」:本文部分の設定

この「本文」タブでは、リンクの表示設定やテーブル表示設定などができます。

外部リンクに関しては「新しいタブで開く」「アイコン表示」とすると外部リンクであることがわかりやすくていいと思います。

内部リンクはそのままで大丈夫です。

「画像」:本文画像の表示設定

基本、デフォルトでOKです。

「アイキャッチの表示」では、投稿ページのアイキャッチ画像を中央寄せさせたりカラム幅に引き伸ばしたりとできます(自由度高すぎですね)。

当サイトでは「アイキャッチラベルを表示する」「アイキャッチの中央寄せ」にチェックを入れています。

「画像の拡大効果」Lightbox設定が簡単にできるのも魅力的。

おすすめのCocoon高速化設定。

「Cocoon 設定」→「高速化」から、高速化設定が可能です。

といっても、全部にチェックを入れておけばOKです。

プラグインなどに不具合が出たらチェックを外してみましょう。

Cocoonに入れておきたいおすすめプラグイン

Cocoonはすごすぎて、追加でプラグインを入れる必要がほとんどなくなってきています。

以下プラグインは入れておくと便利かな、と思います(それぞれの使い方はググってください)。

  • Akismet Anti-Spam
  • Contact Form 7
  • EWWW Image Optimizer
  • Google XML Sitemaps
  • Lazy Load
  • LiteSpeed Cache(mixhostなどのLiteSpeedサーバー用 サーバーキャッシュプラグイン)
  • TinyMCE Advanced
  • WP Multibyte Patch

当サイトの例です。お好みでどうぞ。

当サイトでは商品リンク用に「Rinker」と「WPアソシエイトポストR2」も導入していますが、Cocoon標準機能でも十分事足ります。

管理を楽にしたい場合は「Rinker」、料率を確認してから商品をいれたい場合は「WPアソシエイトポストR2」を入れるといいでしょう。


コメント

タイトルとURLをコピーしました