ブログ初心者・Web制作の情報サイト
CocoonのおすすめスキンSeason(シーズン)が洗練されていて美しい

CocoonのおすすめスキンSeason(シーズン)が洗練されていて美しい

WordPressの無料テーマCocoonにはスキンと呼ばれるテーマの見た目を変更するデザインパックが数多く同梱されています。スキンはかなりの数が存在するのでどれがいいか迷ってしまうのではないでしょうか?

この記事では数あるCocoonスキンの中でもおすすめのSeason(シーズン)について紹介していきます。

Cocoonはスキンを使わなくてもカスタマイズできる独自の機能がありますがスキンを使うと手軽にサイトを綺麗に装飾できるようになります。

CocoonのおすすめスキンSeason

Season(シーズン)はぽんひろ氏によって作られた四季をテーマにしたCocoonのスキンです。Spring・Summer・Autumn・Winterの4種類が存在しています。

Seasonスキン

スキンとはCSSでテーマの見た目を変更するデザインパックです。スキンを切り替えれば簡単にテーマの見た目を変更できます。スキンはCSSだけでなく設定画面の変更など独自の機能を追加している場合もあります。

Seasonを利用するためにはCocoonが必要です。CocoonにはSeasonのスキン4種類が同梱されています。

この記事では数あるCocoonスキンの中でもおすすめのSeason(シーズン)について紹介していきます。おすすめの理由は見やすさ

Seasonの良さは各所幅の調整によりレイアウトが整いサイトの見やすさ・記事の読みやすさが向上するところです。

Seasonスキンの良いところ

Seasonを優れているところを紹介します。

サイト全体の幅を調整し見やすくしてくれる

Seasonを使ってみて最初に思ったのはすごくサイトが見やすくなったということです。私はSeasonのスキンを適用した瞬間からスキン無しのデフォルトと比べて見やすさが向上したのが一目で分かりました。

Seasonは全体的な色や行幅(line-hight・margin・padding・カラムのコンテンツ幅)を調整してサイト全体のデザインを改善してくれます。

line-height

line-heightは行の高さです。Cocoonデフォルトではline-height: 1.7でSeasonでは2.0に設定されます。1.7と2.0ではかなり違いがあり見やすさにも影響しています。

line-height: 1.7とline-height: 2.0の違い

コンテンツ幅

Seasonではトップページと投稿ページでコンテンツ幅が異なっています。(Cocoonでは同じ)

トップページはある程度横幅を広く取り、投稿ページでは広くなりすぎないように狭めています。この調整によって両方のページで見やすさが向上しているのでとてもいい調整だと思います。この設定は固定ページをトップページにしている場合でも有効です。

Cocoonのデフォルトではコンテンツ幅が800pxに設定されています。800pxというとPCで見ても結構広い印象です。他のサイトではメインコンテンツの幅は600~760pxほどが多いように思います。あまり横幅が広いと画像が大きくなったり一行が長くなってあまり見やすくありません。

Cocoon:コンテンツ幅の調整
Cocoon設定 > カラム
Cocoonのコンテンツ幅がデフォルトの場合、Seasonの投稿ページでのコンテンツ幅は760px

Cocoonのコンテンツ幅がデフォルトの場合、Seasonの投稿ページでのコンテンツ幅は760pxになります。Cocoonのコンテンツ幅を設定している場合はその分小さくなります。

Cocoon設定のカラム幅800px760px
Seasonのコンテンツ幅(トップページ)800px760px
Seasonのコンテンツ幅(投稿ページ)760px720px

投稿ページの幅はトップページよりも40px短くなっているようです。

これら設定はCocoonで変更できますがどれくらいがいいのかよく分からないことが多いです。一括で見やすいくしてくれるスキンの設定はありがたい。

Seasonは既存の記事装飾をあまり変更しない

既存の記事装飾をあまり変更しないのはSeasonスキンの大きな利点です。他のスキンではリスト・アイコンボックス・案内ボックスといった装飾要素の色や形状を変更してしまいデザインのイメージが変わってしまうことがありました。

例えばアイコンボックスの補足情報(i)は青色だからという理由で使っていた場合、色が変わってしまうのは好ましくありません。この辺りは途中からスキンを変更する場合の難点となります。

その点Seasonは記事編集に使う要素をほとんど変更しません。変更されているのは見出し・文字装飾・ボタン・ブログカードくらいです。このため途中から変更しても記事のデザインを崩さずないので手を出しやすいのは大きなメリットと言えるでしょう。

見出し(Spring)

Season(Spring)の見出し

ボタン

Seasonのボタン

ブログカード

Seasonのブログカード

Cocoon設定上の配慮がされている

SeasonsではいくつかCocoon設定の項目を使用しています。そのためユーザーが誤って変更しないように(変更できたとしてもおそらく効かない)「スキン制御」がかけられて触れないようになっています。

Seasonでは「スキン制御」で触れない設定がある

これは「Cocoon設定で変更したのに反映されない!」という事態を避けるためだと思われます。余計な混乱を防ぐ配慮ですね。

オリジナルスタイルが追加されている

Seasonは既存の記事編集要素を変更する代わりに下記の独自のスタイルを追加しています。グーテンベルクからは利用できないようですがSeasonのサイトにコードが公開されているのでそれを使用できます。

  • リスト
  • ボックス
  • アコーディオン

気になる点が無いわけではない

どんなテーマでもスキンでもそうですが自分で改善・調整したい箇所はあるはずです。私はSeasonの下記項目が気になりました。

  • 見出し・目次・ページネーションの番号色が薄い
  • 記事抜粋の文字が小さい・高齢者はかなり読みにくいと思う
  • 記事のカードタイプ(表示形式)がエントリーカードに固定

スキンは無料で提供されているものなので気になる点は自分でCSSを書き調整しましょう。上記問題もCSSやCocoonの機能で解決できます。

見出しや目次番号の色が薄い

見出しや目次番号の色が薄いので個人的に目が疲れます。目が悪いユーザーに対しての可読性が下がってしまうかもしれません。

記事の抜粋文字が小さい

記事の抜粋文字は11.2pxとかなり小さく色も薄いため読みにくいです。特に高齢の方は小さい字が見えない・見えにくい人が多いのでこの設定はつらいのでは?

Seasonは記事抜粋の文字が小さい

文字サイズ次第ではそれほど小さくない場合もあります。上の画像はCocoon設定 > 全体で文字サイズを16pxに設定している場合の表示です。

大きさを調整するCSSを書いておきます。flex: 2の値を変えれば画像とコンテンツの横幅の比を調整できます。

.entry-card-content {
    flex: 2;
}

.entry-card-snippet {
    font-size: 0.8em;
    color: #888;
}

余談ですが詳細度を上げないままCocoon子テーマのstyle.cssに書いてもスキンに上書きされずに済むようです。

記事のカードタイプはエントリーカード固定

SeasonのカードタイプはCocoonデフォルトのエントリーカード固定で変更はできません。カードタイプはトップページの記事表示に使われます。また関連記事のカードタイプも固定されています。これは人によっては困るかもしれません。

Seasonでは記事のカードタイプはエントリーカード固定

しかしスキン開発者のぽんひろ氏は

Cocoonは元々シンプルですが、さらにシンプルにしてみました。

https://ponhiro.com/season/

と言われているのでこれは意図的なのかも。選択肢が減ると複雑さも軽減されます。またトップページであれば固定ページを利用して作ればいいのでそれほど問題になりません。Cocoonには記事表示のショートコードやウィジェットがたくさん揃っているので活用しましょう。

Cocoon トップページのカスタマイズに使える5つの記事表示機能
Cocoonにはボックスメニュー・おすすめカード・ナビカードなど魅力的な記事表示能が沢山あります。これらの機能はトップページを固定ページにするときにも役立つでしょう。この記事ではCocoonのおすすめの記事表示機能を紹介します。

最後に

Cocoonスキンの中でもおすすめなSeason(シーズン)について紹介ました。

Seasonを使ってみて、見出し文字に色をつけると文章との区別がしやすくなり構成・区切りを把握しやすくなると改めて思いました。文と文の幅も調整されていてレイアウトが綺麗で記事が読みやすいです。

Seasonスキンで気になる点がある場合はCSSで調整しましょう。素晴らしいスキンを手本にして自分で調整してみるのもいいかもしれません。