ブログ

【コピペでOK!】wordpress初心者が追加CSSでcocoonカスタマイズ!【②ヘッダーを整えるCSS】

ブログ

こんにちは
ニワトリです

『ヘッダーをきれいにしたい・・・』

『自分のブログをオシャレにしたい・・・』

『CSSとか難しくて分からない・・・』

こんな悩みを抱えた初心者ブロガーさんも
多いのではないでしょうか?

私もそのひとりです!!

そんなブログ初心者の私でも
CSSを追加することでいくらかマシになったので

カスタマイズした箇所と
使った追加CSSを紹介していきます!

cocoonの良いところ
  • wordpressの無料テーマ
  • 細かくカスタマイズができる
  • デザインの幅が広い

無料でこれだけキレイに簡単に作れるなら
最初のうちはcocoonで全然問題なしです!

当ブログのヘッダーデザインは
このようになっています。

当ブログは

スマホが95%
パソコンが5%という割合で閲覧されているので

スマホでの見やすさを重視しています。

今回はヘッダーデザインの変更方法について
追加CSSも含めて紹介していきます。

今回のカスタマイズ

✅ヘッダー周り2つのカスタマイズ

  • ヘッダー画像
  • ヘッダーメニュー

ヘッダー画像の設定

白い線で囲った部分の説明をしていきます。

ヘッダーの設定

デフォルトではこのようになっています。

なんとも殺風景ですね。。。

やり方
  • wordpressメニュー
  • cocoon設定
  • ヘッダー

上から順番に設定していくよ!

ヘッダーの設定
  • ヘッダーレイアウト
    ・センターロゴ(デフォルト)
  • ヘッダーの固定
    ・チェックしない
  • 高さ
    ・100~400
    (スマホで確認しつつ微調整します)
  • 高さ(モバイル)
    ・なし

ヘッダーの設定
  • ヘッダーロゴ
    ・「選択」から表示する画像をアップロード
    (横長がおすすめです)
  • ヘッダーロゴサイズ
    ・横幅のみ入力します。
    (スマホで確認しつつ微調整します)
  • キャッチフレーズの配置
    ・表示しない
  • ヘッダー背景画像
    ・「選択」から表示する画像をアップロード

ヘッダーの設定
  • ヘッダー全体色
    ・デフォルト
  • ヘッダー色(ロゴ部)
    ・ロゴエリア背景色…好きな色を指定
    ・ロゴ文字色…デフォルト
  • グローバルメニュー色
    ・ナビ背景色…好きな色を指定
    ・ナビ文字色…好きな色を指定
  • グローバルメニュー
    ・トップメニュー幅…デフォルト
    ・サブメニュー幅…デフォルト
    (変更する場合はスマホで確認しつつ微調整します)

ここまでの設定が終わりましたら
「変更をまとめて保存」を押して保存します。

押さずにページを変えると
変更が反映されないため
忘れずに保存をしておきましょうね!

モバイル設定

やり方
  • wordpressメニュー
  • cocoon設定
  • モバイル

ヘッダーの設定
  • モバイルメニュー
    ・トップメニューまたはヘッダーモバイルボタン
    ヘッダーモバイルボタンにしても
    うまく表示されない場合の注意点はコチラ
  • モバイルボタン
    ・サイトヘッダーロゴを表示するに☑
    ・モバイルボタン時コンテンツ下のサイドバーを表示に☑

ここまでの設定が終わりましたら
「変更をまとめて保存」を押して保存します。

押さずにページを変えると
変更が反映されないため
忘れずに保存をしておきましょうね!

【コピペでOK!】スタイルシートに追加CSSを貼り付ける

やり方
  • wordpressメニュー
  • 外観
  • テーマエディター

追加CSS貼り付け時の注意点
  • 編集前にバックアップを取っておく
  • 元のCSSはそのままにする
    今回の追加CSSを前回のCSSの下から
    貼り付けていきます

スタイルシート用追加CSS

/************************************
**ヘッダーロゴ
************************************/
@media screen and (max-width: 834px){/*トップページモバイルボタンの真下にスペースを作る*/
.container {
margin-top:50px;
}
}
.logo-image {
padding:0;
margin-left:0;
margin-top:1em;
margin-bottom:1em;
max-height:60px;/*大きなロゴ画像を使いたい方は、ここの数字を大きくしてみてください。*/
}
.logo {
text-align: left;
}
.logo-header img {
box-shadow: none!important;
}
/************************************
**ヘッダー モバイル表示
************************************/
@media screen and (max-width: 1023px) and (min-width: 835px){/*835px以上で非表示にすると空白ができるので埋める*/
.admin-bar.mblt-header-mobile-buttons, .admin-bar.mblt-header-and-footer-mobile-buttons {
margin-top: 0;
}}
@media (min-width:835px){
ul.mobile-header-menu-buttons.mobile-menu-buttons{/*835px以上でモバイルヘッダーを非表示*/
display:none;
}
}
@media (max-width:834px){
.header-container {/*834px以下でヘッダーを非表示*/
display:none;
}
img.site-logo-image{/*モバイル表示ロゴ*/
max-height:35px;
padding:2px 0 0 5px;
box-shadow:none;
}
.mobile-header-menu-buttons {/*ヘッダー背景色を変えるときはここを変更*/
background: #fff;
}
}

CSSを貼り付け終わったら
【ファイルを更新】を押してください。

ファイルを更新を押さないと
CSSが反映されないため気をつけてください!

変更したデザインを確認する

ヘッダーに設定したロゴや画像が
反映していれば設定は完了です!

うまく表示されない場合

私も何度か失敗したのですが
CSSを貼り付ける際に

元のCSSを消してしまったり
貼り付け位置を間違えてしまい

うまく表示されない。
ということがありました。

元のCSSを残した状態で
追加CSSだけを順に下に足していきましょう!

まとめ

さて、いかがだったでしょうか?

wordpress無料テーマcocoonを
カスタマイズする追加CSS。

今回はヘッダーの設定について
紹介してきました。

次回はその他のヘッダー部分について
記事をまとめていきますね!

最後までお付き合いいただき
誠にありがとうございました。

ニワトリでした。

ニワトリ
ニワトリ

Twitterやってます。

ニワトリの自己紹介はコチラ

コメント

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