スポンサーリンク

Cocoon:サイト設定4つ

ホームページ作り/IT

はじめに

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

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

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

このようにスマホでは、アピールエリアが細くなってしまいます。

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

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

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

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

このようにアピールエリアが綺麗に表示されるようになります!

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

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

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

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

【超簡単】ブログタイトルとキャッチフレーズを左寄せにする方法。
ブログタイトルを左寄せにするにはスタイルシートにコード追記で完了。簡単です。

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

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

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

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

ここで色を設定することができます!

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

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

メニューバーに区切りがない状態
メニューバーに区切りがある状態

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

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

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

まとめ

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

コメント

タイトルとURLをコピーしました