はじめに
今回は、WordPressでテーマ「Cocoon」を使った時のサイトの細かい設定を4つ紹介します!
サイトを作る際の参考になれば、幸いです。
アピールエリアをスマホ対応にする方法
「アピールエリア」とは、メニューバーの下に写真などを表示できるエリアのことです。
何も設定を行わずに、アピールエリアに画像を設定すると、パソコンでは正しく表示されるのですが、スマホでは写真の一部しか表示されず、細くなってしまいます。

では、スマホでもアピールエリアをきれいに表示するにはどうしたらいいのでしょうか?
実は、とっても簡単にできます!!
今回は、このサイトを参考にしました↓

このサイトのコードをコピーして、「ダッシュボード」→「外観」→「カスタマイズ」→「追加CSS」で、ここにコードを貼り付ければ完了です。

ロゴとサブタイトルを左寄せにする方法
デフォルトでは、ロゴとサブタイトルが中央にくるようになっています。
しかし、左寄せにしたい!っていう時もありますよね…
実は、これもコードを貼るだけで簡単にできます!
参考にしたサイトはこれです↓

先ほどと同様に、このサイトのコードをコピーして、「ダッシュボード」→「外観」→「カスタマイズ」→「追加CSS」で、ここにコードを貼り付ければ完了です。
メニューバーに色をつける方法
メニューバーには、デフォルトでは色がついていません。
ここに色をつけてみましょう!
「ダッシュボード」→「Cocoon設定」→「ヘッダー」→「グローバルナビメニュー色」→「グローバルナビ色」で好みの色に設定することができます。
ちなみに、メニューバーの文字も「グローバルナビ文字色」で設定することができるので、合わせて設定してみてください!

メニューバーを分割する方法
最後はメニューバーを分割する方法です。
メニューバーはデフォルトだと、区切りがないですが、区切りを自分でつけることもできます!


これも同様にコードを貼り付けるだけで簡単にできます。
参考にしたサイトはこれです↓
先ほどと同様に、このサイトのコードをコピーして、「ダッシュボード」→「外観」→「カスタマイズ」→「追加CSS」で、ここにコードを貼り付ければ完了です。
まとめ
いかがでしたか?
今回紹介した4つの設定はどれもとても簡単ですが、設定するだけでサイトが格段にバージョンアップして見えるのでおすすめです!
コメント