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 カテゴリーの編集画面

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

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

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

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

 

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

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

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

コメント

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