【Cocoon】初心者でも出来るヘッダー設定

なんとなくブログデザインが決まったら、色々変更したくなってきますよね。

私もそうでした。超初心者です。(笑)

色々、調べてみては反映されなかったりしますが、自分なりにカスタマイズを楽しもうと思います。

スポンサーリンク

ヘッダーカスタマイズ

それでは、ここからほどんどの設定が出来ます。

Cocoon設定からヘッダーへ

ヘッダーレイアウト=8種類ある中から自分の好みの設定で。
 
ヘッダーを固定するかしないかです。固定するならチェックを入れましょう。
 
ヘッダーの高さ。・モバイルの高さ。私は、ロゴのサイズで高さが変わるのでロゴでサイズ調節しました。

ヘッダーロゴの設定。

登録不要で、商用利用OKだったので、こちらで簡単なロゴを作りました。

凝ったロゴを作りたいと思ったら、こちらで紹介されていました。

私もこちらの記事を参考にさせて頂きました。

・キャッチフレーズの位置。

・ロゴの上に配置するか、ロゴの下に配置するか。

・ヘッダーロゴのサイズ。 ロゴの幅や高さが変更できます。

・ヘッダー背景画像。ヘッダーに画像を設定したい場合はここで設定。

ヘッダーの色変更

ヘッダー全体色。ヘッダー全体の色が変更できます。

ロゴ部分の背景色。ロゴの配置してあるロゴの背景だけが変わります。

グローバルメニューの色　グローバルメニューの帯の色の変更。

グローバルメニューの幅　好きな幅に出来るみたいです。私はデフォルトでやっています。

ここまで設定出来たら、保存をしてプレビューを見てみよう。

ここまで来たら全体を大まかに決めよう

Cocoon設定の全体をクリック

サイトフォント　PCでは、16PX以上がいいとされている様です。自分のブログを見てバランスを考えればいいと思います。

モバイルフォント　私は14PX設定にしました。

確かめたい時は、外観からカスタマイズを選んで、カスタマイズページの左下にある、

PC・タブレット・スマホの画面確認が出来るので、そちらで確認してみて下さい。

文字の太さこれは自分のサイトに合うように設置すればいいと思います。

サイトアイコンフォント　　Font Awesome 5を選びましょう。

アイコンの使い方は、記事を書いていらっしゃる方のほとんどの方が、

こちらでアイコン表示されるようにCSSを書いてくれているので、カスタマイズアイコン表示に困らなくて済むと思います。

サイドバーの位置右か左か選べます。

サイドバーの表示状態
どのページにサイドバーを表示するか選べます。例えば、固定ページには表示するかしないか、トップページには表示するかしないか細かい設定が出来るようになっています。

自分のサイト表示でこのページには要らないなと思ったら、表示しない設定にすればいいと思います。

サムネイルの表示　サムネイル画像の表示設定です。

これで、サイト全体の形が出来たと思います。

あとは、自分が変更したい個所が出来た時に、カスタマイズでいいと思います。

何もカスタマイズできなかった私でも、Cocoonとスキンですごく助かっています。

ホントに初心者おススメのテーマで、皆さんが進めている理由がよくわかりました。

カスタマイズ,レイアウト

Posted by tonton