Cocoon

新しいブログを始めるにあたり、WordPressのテーマにCocoonを使用することにしました。

テーマ探し

以前のブログafainu.action.mark2ではWordPressの昔の標準テーマTwenteenFourteenをベースとしてカスタマイズしていました。同じデザインでは面白くないし、さすがに古いので新ブログでは違うテーマを使うことにしましたが、最近のWordPress標準テーマは私の好みに合いませんし、テーマディレクトリに公開されているテーマもビジネスサイト向けだったり欧文フォント向きだったりで、なかなか良いものが見つかりませんでした。

Cocoonはわいひらさんという方が作成・公開されている無料のテーマで、WordPressのテーマディレクトリには登録されていませんが、おそらく日本人のWordPressブロガーの間で最も人気のテーマだと思われます。

私の利用しているサーバーConoHa WingではWordPressと同時にCocoonもインストールできるので試してみたところ、なかなか使いやすく気に入りましたので本採用しました。

Cocoonの良いところとイマイチなところ

良いところ

  • CSSやPHP不要でカスタマイズできる項目が豊富
  • 多彩なデザインのブロックを利用できる
  • 丁寧なサポート(ドキュメント・フォーラム)

イマイチなところ

  • 設定項目が多すぎてどこで何が設定できるか分かりにくい
  • トップページ・カテゴリーページなどがリスト表示で固定(全文表示できない)
  • 他のテーマに乗り換える際は要注意

レイアウトや色などほとんどのカスタマイズはCocoonの設定ページで自在に行えます。逆に設定できる項目が多すぎて迷子になってしまいます。作者さんが丁寧な解説を公開してらっしゃるのでそれを参照して自分なりのカスタマイズを行いました。

いろいろなデザインのブロックがたくさん用意されており、投稿執筆時に使いたいものを選択するだけで簡単に使用できます。前のブログでは画像がない時は非常に殺風景な投稿ばかりでしたが、これからは少し見やすく読みやすい投稿ができると思います。

逆に、Cocoon独自の設定やデザインを多用していると、将来的に別のテーマに切り替える必要がある際は移行が面倒かもしれません。

afalogueでのカスタマイズ

このサイトでは以下の項目を自分用にカスタマイズしています。それ以外には基本的にデフォルトの設定のままで、あまり手をつけてないと思います。

  • サイトロゴを用意した
  • サイト幅を固定にした
  • サイトキーカラーとフォントを変更した
  • トップページの表示を縦型カードにして抜粋は非表示にした
  • アイキャッチ画像を非表示にした
  • サイドバーウィジェットのタイトルの表示をアレンジした

サイドバーのタイトルに関してはCocoon設定の変更では実現できないので、CSSとfunction.phpを編集しています。

本文のフォントはNoto Sans JPですが、サイドバータイトルにはNoto Serif JPを使っています。これが簡単そうに見えて実は面倒でした。CSSで当該フォントを指定するだけではダメで、ヘッダーにフォントを読み込むためのスクリプトが出力されるようにしてやる必要があります。

ちなみにこれまでのブログでは赤系の色を中心にデザインしていましたが、このブログではサイトキーカラーを青系にしました。

なぜこの色かというと、色コードが#00AFFAだからです。

コメント

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