Cocoonはカスタマイズが楽しいですね（笑）。
テーマを導入してもう1ヶ月以上経つのでそろそろ落ち着きたいのですが、もう一つカスタマイズを加えたので備忘録を兼ねて紹介します。
アイキャッチ画像のカスタム
アイキャッチ画像の重要性はボクが語る必要もない話ですが、このレイアウトについて大きく2つ変更しました。
↑これが最初のカスタマイズで落ち着いていた構成です。
- パンくず
- タイトル
- SNSボタン類
- 投稿日・更新日
- アイキャッチ画像
という順で並んでいます。
SNSボタンの見え方などをカスタマイズしていますが、この順自体はCocoonのデフォルトのままでした。
これを、
- 並ぶ順番
- アイキャッチの幅
この2点においてカスタマイズしました。
1. 幅を変えます
デフォルトでは、画像の最大幅は記事本文の幅と同じ幅になります。
デザイン次第ですが、大体の人は記事本文の左右に余白をとると思うので、その余白幅が画像でも同じ感じになります。
そこから、
アイキャッチ画像だけ横幅いっぱいに変えるというわけです。
記事公開当初style.cssにブチ込むCSSコードを公開していましたが、どうもそんなにシンプルじゃないことがわかりました。。
なので「やり方」的なやつは非公開にしました。
色々いじってほぼほぼ解決したのですが、iPad mini x 横で読む時、などいくつかの解像度条件下でデザインが破綻します。困った困った。
2. タイトル周りの整理
続いてタイトル周り、
ボクはパンくずを左上、投稿・更新日を右上の同列に並べ、
その下にタイトル＞SNSボタン＞アイキャッチ の順で表示させたかったので、
子テーマに移植済みだった「content.php」内の順番を動かしました。この辺は知識薄い人はいじらない方がいいですし、作業前は必ずバックアップを取るべきですが、phpの構成とか馴染みがあれば必要な箇所をサクッと移動させるだけなのでそんなに大変じゃないはずです。
カスタマイズ結果
結果、こんな感じになりました。
並べてみると、こんな感じです。
縦横比は同じまま横に広くなったので、必然的に縦に長くなります☝️
ちなみに、
投稿日・更新日の位置やパンくずの位置を動かすのにstylesheet.cssに記述を加えていますが、それぞれの余白などにより違ってくるポイントなのでコードは割愛。
ちょっとだけめんどくさいこと
自分的にアイキャッチ画像と、他の挿入画像の差が作れて満足なんですが、ちょっとめんどくさいことがあります。
これは上記カスタマイズを加えた直後のある記事の見た目です。
同じ画像が2つ並んでいますよね？
Cocoonを始め多くのWordpressブログでは最初の画像を自動でアイキャッチに登録する機能が備わり、多くのブログで
最初の画像＝アイキャッチ＝そのブログを一番わかりやすく見せる画像
という形になっていると思います。
が、
Cocoonではアイキャッチ画像の設定について下記のような項目があります。
これは、投稿ごとに設定されたアイキャッチ画像を本文の最初に表示させるかどうかを任意で選べる機能ですが、
OFFにしている場合本文の最初に画像を挿入しないと記事のトップに画像を置けません。
ボクは基本的に各記事にトップ画像（＝アイキャッチ）を用意して、本文の前に挿入しているのですが、横幅いっぱいの画像として入れるには、この設定をONにしてアイキャッチ画像という特別な画像という扱いで挿入するように設定してやる必要があるのです。
そのため、元はOFFにしていた設定を後からONにしたため、
アイキャッチとしてトップに二重で画像が表示されてしまっているわけです。
解決策
こればっかりは、地道に本文の頭に挿入している画像を消していくしかないので、このブログの場合300本ある記事を更新していきます。
ちょっとめんどくさいですよね（笑）
総括・まとめ
- アイキャッチの見せ方を加工しました
- カスタマイズ自体はそんなに難しくない
- でも少し面倒な作業が発生しました（ボクは）
以上、そろそろ打ち止めにしたいCocoonのカスタマイズ、
アイキャッチ画像の調整をしたのでサクッと紹介しました！
