Cocoonの使い方やカスタマイズとオリジナルスキン

Cocoonでヘッダーレイアウトやロゴを設定する方法と表示パターン

スポンサーリンク
設定
この記事は約2分で読めます。

Cocoonでヘッダーレイアウトを設定する方法と、レイアウトパターンサンプル紹介、ロゴの設定方法などを解説していきます。

 

スポンサーリンク

ヘッダー設定

Cocoon設定」から行います。

Cocoon設定

ヘッダー」タブを開きます。

Cocoon設定・ヘッダー

設定項目
  • ヘッダーレイアウト
  • ヘッダーの高さ・モバイルヘッダーの高さ
  • ヘッダーロゴ
  • ロゴサイズ
  • キャッチフレーズの配置
  • ヘッダー背景画像
  • ヘッダー全体色
  • ヘッダーロゴ部の背景色
  • グローバルナビメニューの色
  • グローバルナビメニューの幅

 

ヘッダーレイアウト

Cocoon・ヘッダーレイアウト設定

レイアウトは8種類用意されていて選択するだけでデザインが完了します。選択しても、「変更を保存」ボタンを押すまで実際のレイアウトは確認できませんので、サンプルを置いておきます。

レイアウトサンプル

クリックで大きな画像が連続して見られます。

 

「トップメニュー小」だと、ロゴのサイズ次第でははみ出る感じ。

 

ロゴ設定

Cocoon・ヘッダーロゴ設定

画像を選択し、ロゴを指定します。

 

ロゴを設定しない場合は、テキストでサイト名が表示されます。

ロゴはサイトの顔にもなるものなので、テキストでサイト名を表示するよりは、きちんと用意した方が良いでしょう。

ロゴ作成に便利なサイトは以下も参考にして下さい。

おしゃれで簡単にロゴ作成が無料なサイト11選ー試用まとめ | 綾糸.net
無料なのに商用利用も可能、おしゃれでカスタマイズも自由な素敵なロゴが作れるサイトがたくさんあります!   完全無料、即ダウンロードできちゃうサイトと、なんらかの登録やメー...

 

その他のヘッダーエリア設定方法は以下も参考にして下さい。

 

コメント

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