Smart Slider 3 のカスタマイズ記録
前回、スライドショーのサイズを少しカスタマイズ、Smart Slider 3 の無料版を使って、ほんの少し「Size」設定をいじっただけで、記事本文と一体感のあるスライドショーを作ることができました。
ポイントは、記事本文と同じ「無地の紙」の幅に収めたこと。これだけで、不思議なくらい自然な見え方になったんです。
気になった「投稿日と更新日」
ただ一つ気になったのが、スライドショーの画像右上に表示される 「投稿日」と「更新日」。
Cocoonでは、この表示を記事ごとにオン・オフすることはできません。Cocoon設定の「本文」タブから、記事全体や固定ページにまとめて設定する仕様になっています。
つまり、「スライドショーでは消したいけど、本文には表示させたい」といった細かい調整はできないわけです。
見栄えを整えるためにCSSを導入
もしスライドショーの右上から「投稿日と更新日」を消すことができれば、サイト型トップページの見栄えはぐっと良くなるはず。
そこで、ついに CSSでの調整 に踏み切りました。CSSを追加すれば、特定のページだけ日付を非表示にすることが可能。Cocoonの仕様に縛られず、自分のイメージに近いトップページを仕上げられそうです。
CSSとPHPコード編集の違い
WordPressを使っていると、「デザインをちょっと変えたいな」と思うことがありますよね。そのときに出てくるのが CSS と PHPコード の編集です。
まず CSS（カスケーディングスタイルシート）。これはテーマを更新しても基本的にそのまま残るので安心。デザインを少し変えるくらいなら、CSSを追加するのが一番シンプルで安全です。
一方で、PHPコード（テーマの中の .php ファイル）を直接いじってしまうのは注意が必要。なぜなら、テーマをアップデートすると編集内容が上書きされて消えてしまうからです。これを避けるには「子テーマ」を作ってカスタマイズをまとめるのが王道ですが、正直なところ、PHPの編集は初心者にはあまりおすすめできません。
Cocoonトップページの日付を非表示にしてみた話
フィフきゅんさんの「Cocoon（コクーン）固定ページの日付を非表示にする方法」を参考にして、ついにCSSをいじってみました。
まずはトップページのIDを調べ、外観カスタマイズの追加CSSに以下のコードを設定。すると……トップページから投稿日と更新日が消えてくれました！
スライドショーの右上に表示されていた日付もすっきりなくなり、全体の見栄えがかなり改善。やっぱりトップページは情報よりもデザインの印象が大事ですね。
来週は、実際の見え方をじっくり確認しつつ、気になる細かい部分をさらに調整していく予定です。少しずつ整っていく感じが楽しい！
