Cocoon：サイト設定４つ

はじめに

今回は、WordPressでテーマ「Cocoon」を使った時のサイトの細かい設定を４つ紹介します！
サイトを作る際の参考になれば、幸いです。

アピールエリアをスマホ対応にする方法

「アピールエリア」とは、メニューバーの下に写真などを表示できるエリアのことです。
何も設定を行わずに、アピールエリアに画像を設定すると、パソコンでは正しく表示されるのですが、スマホでは写真の一部しか表示されず、細くなってしまいます。

では、スマホでもアピールエリアをきれいに表示するにはどうしたらいいのでしょうか？

実は、とっても簡単にできます！！
今回は、このサイトを参考にしました↓

アピールエリアの画像をモバイルで全表示させるには(画像が切れる)

いつもお世話になっています。 早速ですが、表題の件でご相談です。 パソコン画面でのアピールエリアの画像を モバイルでも同じように表示させたいのですが、どうしても画像が切れてしまいます。 ネットにて「max-width: 100%;」や「height: auto;」を追記すると良いと 情報があり試して...

wp-cocoon.com

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

ロゴとサブタイトルを左寄せにする方法

デフォルトでは、ロゴとサブタイトルが中央にくるようになっています。
しかし、左寄せにしたい！っていう時もありますよね…

実は、これもコードを貼るだけで簡単にできます！

参考にしたサイトはこれです↓

【超簡単】ブログタイトルとキャッチフレーズを左寄せにする方法。

ブログタイトルを左寄せにするにはスタイルシートにコード追記で完了。簡単です。

nohmiso.com

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

メニューバーに色をつける方法

メニューバーには、デフォルトでは色がついていません。
ここに色をつけてみましょう！

「ダッシュボード」→「Cocoon設定」→「ヘッダー」→「グローバルナビメニュー色」→「グローバルナビ色」で好みの色に設定することができます。
ちなみに、メニューバーの文字も「グローバルナビ文字色」で設定することができるので、合わせて設定してみてください！

メニューバーを分割する方法

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

これも同様にコードを貼り付けるだけで簡単にできます。
参考にしたサイトはこれです↓

グローバルメニュー間の区切りについて

お世話になります。 グローバルメニューで例えば５つのメニューの表示を指定した場合、 各メニューの区切りがないようなデザインになっていますが、 それぞれのメニュー名の間に縦棒（｜）を入れ、区切りを見やすくしたいと思うのですが可能でしょうか？ もし可能でしたら、その設定のやり方を教えてください。 宜しく...

wp-cocoon.com

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

まとめ

いかがでしたか？
今回紹介した４つの設定はどれもとても簡単ですが、設定するだけでサイトが格段にバージョンアップして見えるのでおすすめです！