WPテーマ「Cocoon」で行っている設定と活用方法

スポンサーリンク
スポンサーリンク
Cocoon WordPresss

最近はほとんどCocoonでサイトを作っている鈴木です。

Cocoon
SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100%GPLテーマです。

いろいろな人がCocoonのカスタマイズ方法等を書いていて非常に参考になっています。

で、僕もCocoonでサイトを作っている時の設定や活用方法を紹介します。

一般的なカスタマイズというよりは、こういう考え方で、こういう設定をしています、ということや、こういう活用方法もあるということです。

スポンサーリンク

Cocoonのメインカラム幅は730pxに設定

Cocoon設定メニューバー

Cocoonでサイト・ブログを作る時に最初に行うのが、カラム幅の設定です。

デフォルト(標準設定)だと800pxになっていますが僕はこれを730pxに変更します。

730pxにする理由は下記の通り

  • 728px幅のバナーが多い
  • 336px幅のバナー(AdSense レクタングル大)を2つ並べるのに良い
  • 1行の文字数がPC閲覧時最大41文字で読みやすい文字数の上限だと思っているから

バナーサイズで調整

728pxのバナーは割と出回っているサイズなので、アフィリエイトやAdSenseの広告を張る時に730pxだとピッタリと収まる横幅になっています。

またレクタングル大のバナー広告でも、ちょど良い感じに設置出来るようになります。

閲覧時の文字数

画面サイズやモニターの解像度でも異なりますが、一般的にPCで見た時に読みやすいとよく言われるのが1行に35文字から40文字くらいです。

このブログはPC閲覧者の割合が2割強くらいなのですが、記事によっては4割近くになっているものもあります。

なので、40文字になるカラム幅を調べた時(フォントサイズ PC時18pxとして)、それが720pxでした。

でも720pxだと728pxのバナーが縮小したりはみ出たりするため、10pxだけ多い730pxにしたという経緯があります。

730pxだと最大41文字になって読みやすいと言われる40文字を超えてしまいますが、ストロングタグ(文字を太くさせて目立たせるもの、WPのエディタだと「B」となっているところをクリックすると出来るもの)を使ったり、句読点を入れると40文字以下になるので、折衷案的に730pxにしています。

メディア設定の参考事例

カラムの幅を730pxにした場合にしておいて欲しい設定がメディア設定です。

設定→メディアを見てください。

WordPressメディア設定画面

ここで画像のサイズを指定しますが、下記のサイズ及び設定をすることをおすすめします。

  • サムネイルのサイズは160~180px
  • 中サイズのサイズは360~400px
  • 大サイズのサイズは600~730px
  • 「サムネイルの実寸にトリミングする」のチェックは外す

Cocoonはエディタ画面で記事内を「2カラム」「3カラム」に分けることが出来ます。

この時、4等分してサムネイル画像を入れると下記のような画像を使ったリンクを作ることも出来ます。

サムネイル

このように写真を入れたい時に「サムネイルの実寸にトリミングする」のチェックを外しておかないと正方形にトリミングされてしまうので、チェックは外します。

上記のように4つの画像を並べる時にカラム幅が730pxなら160pxの画像サイズが適しています。

また2カラムで写真を入れる時には中サイズの画像を入れた方が良いので、中サイズの画像のサイズを730pxの約半分である360pxに指定するのがおすすめです。

目次に戻る

Cocoonならボックスメニューの設定を

一般的なメニュー・カテゴリーよりもクリック率が上がると言われているボックスメニュー、Cocoonでは標準仕様として使えるようになっています。

このブログではまだ作っていませんが、別のサイトで作っています。

札幌の神社を紹介しているサイトで、札幌10区と2つのカテゴリーをボックスメニューで表しています。

画像の縦横比が極端に異ならない限り、画像のサイズが異なっていても、少し見栄えは悪くなりますが、上記のように綺麗に自動で並べてくれるのは非常にありがたいです。

目次に戻る

Cocoon標準のCSSでカテゴリー一覧を作る

WordPressにはタグがありますよね。

もちろんCocoonもWordPressのテーマなのでタグが使えます。

で、タグを表示するCSSを使ってトップページをカスタマイズして使っています。

flexbox

上記は先に紹介している札朱という札幌の神社を紹介しているサイトのトップページの一部ですが、Cocoon標準で持っているタグクラウドのCSSを利用して作っています。

<div class=”tagcloud typesquare_tags”>

を最初に配置して、後はテキストリンクを張るだけで上記のようにカラム幅に応じて可変式の項目が出来上がります。

inline-blockとか、FlexboxのCSSがよくわからん!でもカラム幅にあった可変式のわかりやすいテキストリンクを配置したい時に便利です。

タグのマークをつけたく無い時は

a class=”no-icon”

をつければ大丈夫です。僕の場合フォントサイズを指定しているので下記のようなHTMLになっています。

目次に戻る

カテゴリー・タグページにテキストの追加やおすすめ記事の追加

カテゴリー内に記事が増えてきたり、タグ単位での記事が増えてきたら、カテゴリーページやタグページの充実を行っています。

鈴木です。カテゴリー

関東の旅行・観光スポット・温泉
関東で旅行した記録や、観光スポット、温泉を紹介しています。

例えばこのブログだと雑記ブログゆえ、カテゴリーが増え気味なので、旅行のカテゴリーは関東とか東北というエリアでの分類になっています。

でも関東で言えば7都県があるので、都県はタグで分けています。

でカテゴリー内に記事が増えてくると読んで欲しい記事が埋もれてしまうのがWordPressのカテゴリーの欠点にもなっています。

しかしCocoonだとカテゴリーページ・タグページにテキスト(文章等)を追加出来るので、読んで欲しい記事やおすすめ記事を最初に紹介することが出来ます。

またタグでくくった都道府県をカテゴリーページで紹介すれば訪れてくれるユーザーにも記事が探しやすくなります。

更にカテゴリーページ・タグページ単位でもSNS(Twitter)等に投稿した場合のアイキャッチやディスクリプションも設定出来るようになっています。

Cocoon カテゴリーの編集画面

サイドバーに表示される名前とSNSでシェアした時の名称(タイトル)も別に出来るようになっています。

Cocoon カテゴリーの編集画面

記事が増えてきたら、是非カテゴリーページやタグページへテキスト(文章等)を追加したり、おすすめ記事を書いたりして、よりユーザーにわかりやすいナビゲーションにしてみるのがおすすめです。

またカテゴリーページやタグページにテキストを加えることでカテゴリページやタグページが検索結果に表示される可能性も高くなります。

カテゴリーページやタグページは記事を追加していくとどうしても動的に内容が変更されてしまうため、検索エンジンの評価が得られにくいという欠点があります。

でも、テキストを入れて説明することで、検索エンジンの評価が得られやすくなります。

SEO設定の見直し

カテゴリーページやタグページにテキストを加えた段階でCocoonのSEO設定を見直してください。

Cocoon SEO設定画面

「カテゴリーページをnoindexにする」「タグページをnoindex」にするにチェックが入っていたらチェックを外すようにしてください。

  • カテゴリーページの2ページ目以降をnoindexにする
  • タグページの2ページ目以降をnoindexにする

この2つはチェックが入ったままを推奨します。

Google XML Sitemapsの設定の見直し

プラグインで「Google XML Sitemaps」を入れてる方も多いと思いますが、カテゴリーページやタグページにテキストを加えた場合、「Google XML Sitemaps」の設定も見直してください。

Google XML Sitemapsの設定変更

「Google XML Sitemaps」の標準設定だと「Sitemapコンテンツ」の「カテゴリーページを含める」「タグページを含める」にチェックは入っていないので、この2つにチェックを入れて、カテゴリーページとタグページもXML形式のサイトマップに加わるようにしてください。

出来ればカテゴリーページとタグページの考え方として下記記事を読んでもらうと、より理解が深まると思います。

目次に戻る

アフィリエイトリンクは都度張らないように登録しておく

Cocoon管理画面

Cocoon設定の中に「テンプレート」と「アフィリエイトタグ」という項目があります。

この2つには頻繁に使うアフィリエイトタグは登録しておくことをおすすめします。

登録するとショートコードで簡単に記事内に挿入することが出来ます。

で、簡単に挿入することが便利だから登録することを薦めるのではなく、万が一たくさん貼っていたアフィリエイト案件が終了したり、別のASPに変更する時に、どの記事にアフィリエイトリンクを貼ったのかわからない時でも、ここで登録しておいたものなら、ここで修正してしまえば、一括で修正が終わるからです。

100以上の案件のアフィリエイトタグになるとさすがに管理は難しいですが100以下のアフィリエイトタグなら「テンプレート」と「アフィリエイトタグ」もしくはプラグイン「AddQuicktag」を併用すれば管理が可能です。

目次に戻る

プラグイン「AddQuicktag」or 再利用ブロックでより便利に

Cocoonの便利な機能で画面を2カラム、3カラムに分けることが出来ますが、「左側に入力する内容」「右側に入力する内容」を消すのが面倒という方もいるのではないでしょうか?

2カラム

僕の場合、この2カラム・3カラムはかなり使うので文字を消すのが面倒なことが多くなっています。

なのでクラッシクエディタであれば「AddQuicktag」に文字を消したものを登録、ブロックエディタであれば「再利用ブロック」に文字を消したものを登録しておくことで、簡単に文字が消されたものを表示させられるようになります。

頻繁に2カラム・3カラムを使う人は是非、登録しておいて簡単に使えるようにしておきましょう。

目次に戻る

他にもそういえば、こういう設定していたな~と思うものがあれば追記していきます。

以上、WPテーマ「Cocoon」で行っている設定と活用方法についてでした。

WordPresss
このブログを書いてる人

通称:鈴木こあら

旅行・温泉とカメラ、そしてブログを書くのが好きなおっさん。
すべての都道府県で最低1箇所は温泉に入り、合計700箇所ほどの温泉に入った温泉ソムリエです。
出身は愛知県ですが、現在は関東から北海道・札幌に移住してさっぽろテレビ塔の近くに生息しています。

フォローしてください!
役立ったら是非シェアしてください!
フォローしてください!
スポンサーリンク
スポンサーリンク
鈴木です。~鈴木利典 公式ブログ~

コメント

スポンサーリンク
タイトルとURLをコピーしました