こんにちは bibaです。

ブログ更新がなかなかできない状況が続いていたので、WordPressテーマを無料テーマ「Simplicity」からその後継テーマである「Cocoon」に乗り換えました。

その大まかな経過については次の記事にまとめています。

ブログ記事を書くことに注力するための環境づくり

でも、この記事を書いたのが5月の末なので、なんと2ヶ月以上も記事を書かないでいたことになります。

記事を書くということに注力できるための環境づくりをしたはずなのに、「書かない」という習慣ができてしまった状態から抜け出すのはやはり難しいことでした。

スポンサーリンク
スポンサーリンク

「Cocoon」を少しだけカスタマイズ

お盆休みで時間ができたので、新しく乗り換えたテーマ「Cocoon」のカスタマイズに取り組んでみました。

「Simplicity」同様に、後継テーマである「Cocoon」も、すでに用紙されているスキンを適用するだけで、テーマ外観のデザインを簡単に変更すルことができます。

この機能を使うだけで十分満足できるレベルのカスタマイズが完成するのですが、今回はさらに少しだけ手を加えることにしました。

ただ、私の場合、気をつけないと、またカスタマイズばかりしてしまいます。これでは、なんのためにテーマ変更したかわかりません・・・

そこで、今回のカスタマイズの目標は、「Simplicity」を使用していた時に行ったカスタマイズを「Cocoon」で再現することにしました。

「Cocoon設定」という機能をあるので、作業はそんなに難しくはないだろうと考えて取り組み始めたのでしたが、やはりそれだけでは再現できない箇所もあり、結果的には、いい勉強となりました。

Cocoon設定によるカスタマイズ

まず「Cocoon設定」を使ったカスタマイズを行いました。管理画面メニューの「Cocoon 設定」という項目を選択し、タブの切り替えることによってさまざまな設定が簡単にできるようになっています。

私の場合は、次の項目について、この「Cocoon 設定」でカスタマイズを行いました。

  • 「ヘッダー」でレイアウトを設定
  • 「広告」でアドセンス表示を設定
  •  「タイトル」でページ種別のタイトル・メタ設定
  •  「インデックス」でインデックスリストの表示設定
  •  「投稿」で投稿ページの表示設定
  •  「SNSシェア」でSNSシェアボタン設定
  •  「SNSフォロー」でフォローボタン表示設定
  •  「ブログカード」でブログカード表示設定
  •  「コード」でソースコード表示設定
  •  「カルーセル」でカルーセル表示設定
  •  「フッター」でフッター部分の表示設定
  •  「モバイル」でモバイル表示時のボタン設定

CSSファイルやPHPファイルによるカスタマイズ

「Cocoon設定」の「全体」タブでは、ブログ全体の設定ができます。ここでは、背景色の設定を行いました。

しかし、本文やサイドバーの背景色の変更はできません。

そこで、style.cssに加筆して、本文とサイドバーの背景色の変更を行いました。

また、見出しの修飾やタイトルやインデックスなどの文字の大きさの変更も、style.cssに加筆する形で実現しました。

それから、「Simplicity」でも行っていたエントリータイトルの表示位置の変更については、PHPファイルを一部修正することでカスタマイズをしています。

おわりに

やはり「Simplicity」同様に、後継テーマの「Cocoon」はカスタマイズがとても簡単なテーマだということがわかりました。

おかげで、スキルのない私にも、なんとかテーマのカスタマイズの作業を進めることができました。

まだまだカスタマイズしていきたい箇所もありますが、ブログに取り組む時間が生み出せたら、カスタマイズではなく、記事が書けるようにしたいと考えています。

以上、WordPressテーマ「Cocoon」のカスタマイズに取り組んだ話でした。

無料テーマのカスタマイズを簡単に楽しみたい方には、テーマ「Cocoon」はオススメです。それから、下の解説本でも取り上げられているテーマ「yStandard」も、わかりやすくていいと思います。

この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
スポンサーリンク
スポンサーリンク
bibalogue