現在、WordPress無料テーマのCocoonのカスタマイズを試みています。ここではなくて、もう一方のブログの方です。
ここのように真っ黒にしたいのですが、元々白が基本のテーマなので、なかなか黒になってくれません。やっと黒になったと思ったら、スマホで見たらだめでした。
サイドバーがスマホでは別の設定になっているらしいのです。しかも、そのサイドバーがデフォルトでは表示されず、画面下に出てくるナビの右端のボタンをクリックしないと表示されません。しかも別窓で出ます。
こんなやり方があったんですね。
で、どこをどう触ると、色が変わるのやら・・・。
しばらく苦戦しそうです。
そういうわけで、Cocoonを黒くするのはやめた方がいいです。
それはともかく、文字色なのですが、白だとどぎついので、チョーク・ホワイト（#e0dbd1）にしてみました。一見、白なのですが、ちょっと柔らかくなるようです。
文字色：Chalk White #e0dbd1
どうしても設定箇所が見つからないため、Cocoonの公式サイトで聞いてみました。モデレーターの方からすぐ回答がいただけました。
これです。
.menu-content {
background: #000;
}
.menu-content .widget a {
color: #e0dbd1;
}
どこに書き加えたものかと思いましたが、とりあえず、レスポンシブ設定の前の部分に書いてみたところ、うまくいきました。
レスポンシブ設定の最後のところに設定した別の設定は、スマホの向きを変えたら、無効になることを確認していたので、書くなら、レスポンシブの前の部分だと思ったからです。
要は、background-colorだけでなく、backgroundでも色の設定をしていたわけですね。その可能性には気がついていましたが、あまりにも複雑なので、そこまで見るのが面倒になっていました。
こうして一応完成したので、ざっと見たところ、ヘッダー画像の下に巨大な黒い空白ができていました。何だろうかと思って調べたら、ヘッダー画像の高さが480pxなので、480pxで設定していたところ、どうやら左右の余ったところをちょん切るのではなく、左右を縮小するらしいです。結果として下に空白ができてしまい、そこが真っ黒に・・・（笑）。
画面サイズが変わったらどうなるのでしょうね。いろいろ試してみる必要がありそうです。考えるのが面倒だし・・・。(^ ^;
いろいろ試してみたところ、私が今使っているパソコンの画面では250pxでちょうど空白が消えたので、これで行くことに決めました。
さて、動作確認・・・。あれ？ＳＳＬになっていません（笑）。
自分で入れた画像は全部httpsに変更したはずなのですが、どうやら何か特別な事情があるらしいです。ソースを出して、imgで検索したところ、二つ上がってきました。
wp-content/themes/cocoon-master/screenshot.jpg
wp-content/themes/cocoon-master/images/no-amp-logo.png
この二つがhttpのままでした。上のは「OGP ＞ ホームイメージ」でhttpをhttpsにしたところ、直りました。下のは、「AMP ＞ AMPロゴ」で同じくhttpをhttpsにして直しました。
実はヘッダー背景画像も同じ状況でしたが、これは確認前に自分で気がついて直していました。
なぜこのようなことが起きるのだろうかと思ったのですが、どうやらhttpで管理画面にログインして、Cocoonをセットアップするとこうなるらしいです。
あちらのサイトの場合、長らく放置してあったので、ブラウザーのブックマークがhttpのままで、そのままブックマークからログインしたため、httpになっていたのです。サイトのＳＳＬ化はサーバー会社が勝手にやっていたので、httpsでもアクセス可能でしたが、httpでログインすると、後は全部httpでのやりとりになります。
.htaccessでhttpsへ転送するようにして、かつ、この際、ブックマークもhttpsに変更しておきました。
おそらく、httpで設定して、その後、サイトをＳＳＬ化しても同じ事態になるのではないかと思います。
同じような事態になった場合、チェックすべき項目を列挙しておきます。これはCocoonの作者様の発言に基づくものです。
サイト背景画像
ヘッダーロゴ
ヘッダー背景画像
OGPのホームイメージ
アピールエリア画像
トップへ戻るボタン画像
404ページ画像
AMP用のロゴ画像
すべてCocoonの設定画面で直ります。
その他、ページタイトルのセパレーターを「パイプ」から「ハイフン」に変更しました。これは「タイトル ＞ タイトル共通設定」で変更可能です。Cocoonがセパレーターとしてハイフンを使えるのは幸いでした。「パイプ」はあまりにもみっともないので、今まで、ハイフンの使えないテーマでは、あの手、この手でハイフンにしていました。
タイトルのセパレーターにパイプを使うのはあまりにもみっともないので、ハイフンに変えましょう。
とりあえず、こうして無事真っ黒にできましたが、所々、白やグレーの部分が残って、あまり格好がよいとは言えません。そのあたりも直して行かないとだめですが、どういう色にするかが問題ですね。面倒なので、全部真っ黒にしてもいいのですが・・・。
