management無料サイトブログ運営に便利コラム過去コラムCocoonサイトマップContact4月30日18時まで、エックスサーバーで「独自ドメインプレゼントキャンペーン」!更新料金も無料!サーバー新規開設が条件です。2019.10.23アイキャッチ画像はKatzenfee50によるPixabayからの画像Cocoonには、以下8つのヘッダーレイアウトの種類があります。センターロゴ(デフォルト)センターロゴ(トップメニュー)センターロゴ(スリムメニュー)センターロゴ(スリムトップメニュー)トップメニュートップメニュー(右寄せ)トップメニュー小トップメニュー小(右寄せ)[Cocoon設定]の[ヘッダー]セクションに[ヘッダーレイアウト]という項目があります。ドロップダウンリストから好きなレイアウトを選択できます。サンプルテストを実施テストに使ったロゴ画像です。余白の雰囲気が分かるように、便宜上、枠をつけました。実際には、枠無しです。いくみヘッダーの高さは未入力(デフォルト)で、キャッチフレーズの表示は無しにしています。グローバルメニューの幅が分かるように、色(#b2dfdb)をつけています。Cocoonヘッダーレイアウト「センターロゴ」タイプ:ロゴが真ん中にきます。「センターロゴ(トップメニュー)」にすると、メニューが画面最上部にきます。それぞれに「スリムメニュー」があり、グローバルメニューの高さが細くなります。「トップメニュー」タイプ:ロゴとメニューの両方がトップに配置されます。「右寄せ」を選ぶと、メニューアイテムが右に寄ります。それぞれに「小」オプションがあり、グローバルメニューの高さが細くなります。いくみトップメニュー小を使う場合、ロゴ画像の高さをもうちょっと低くするほうが良さそうですネ。その後、トップメニューのときのロゴ画像サイズについてまとめました。トップメニュータイプの場合ヘッダーレイアウトをトップメニューにしたときのロゴ画像サイズについてまとめました。Cocoonヘッダーレイアウト携帯とタブレット表示は、「8種類」ではなく、実質「4種類」になります。「スリムメニュー」・「小」オプションの結果に大きな違いが出ないためです。(私の肉眼では違いが分かりませんでした。)また、「トップメニュー」では、メニューが上にくるのかなと思っていましたが、ロゴが上にきます。「センターロゴ」のときよりも、ロゴのサイズが小さくなることが分かりました。Cocoonヘッダーレイアウトいくみ「トップメニュー」と「トップメニュー右寄せ」の違いは、5つ目のメニュー項目の位置です。上の例では、WordPressメニューの位置をご覧ください。メニューアイテムの数が偶数だと、変化無しでした。Cocoonヘッダーレイアウトタブレットのヨコ表示の画像に、黒いバーが入っていますが、無視してください。管理画面の表示なので、実際には、黒いバーは表示されません。Test」画面で、タブレットの横表示だけはスクロールができず、黒いバーが入ってしまったのです。「ロゴ画像」を使わなくても、すべてのオプションを利用できます。見た目は基本的には変わらないのですが。センターロゴ(デフォルト)のPC表示・ロゴ画像未使用PC表示の「トップメニュー」と「トップメニュー(右寄せ)」だけは、ロゴ画像のがいいかもと感じました。トップメニューのPC表示・ロゴ画像未使用いくみチョット、「ブログタイトル」の部分がきつそうですよね。「小」にすると、以下の様に少し余白が入ります。以下の色を変えることができます。文字の色すべて、[Cocoon設定]の[ヘッダー]タブでそれぞれ設定できます。今回のテストでは、グローバルメニューにみどり色(#b2dfdb)をつけています。ヘッダー部分の色をピンクにするとこんな感じに。文字の色も変えられます↑。「ロゴ部分」に色をつけると、「ロゴ部分」だけ色が付きます。ロゴ部分をピンクに変更(ロゴのサイズやレイアウトによっては、ヘッダー部分に色をつけたときと差がでない場合もあります。)ロゴ画像の部分に色が付かない!と思ったら、おそらく、ロゴ画像が「透過」になっていないと思われます。以下の記事で紹介しているオンラインソフトを使うと、「透過オプション」があるので簡単に透過のロゴ画像を作成できますよ!ロゴ画像作成フリーソフトの使い方とフォントパワー!フリーソフトでブログタイトル用のロゴ画像を作る方法です。お気に入りのフォントもリストしました!blogstudynotes.com2019.07.20できあがっているものを透過にする方法は以下2つ記事があります。どちらでもいいのですが、ロゴ背景に色を付けたい場合は、高精度のダウンロードソフトのが良いかと思います。フリーソフト「ペコステップ」を利用フリーソフトで透過画像を作る手順を紹介しています。手軽に透明png手ごわい画像も、「できない」と嘆くことなかれ。「手軽に透明png」を使えば簡単でキレイな仕上がり!フィニッシュボタンで、クッキリ透過画像を作りましょう!blogstudynotes.com2019.10.25背景画像の追加センターロゴレイアウトの場合は、背景画像を追加できます。ヘッダー部分に画像を追加する方法やサイズについては、以下の記事にまとめています。ヘッダー画像サイズと選ぶポイント自分のサイトに最適な幅と高さの目安が分かります。テスト結果とともに、おススメ画像タイプもご紹介します。blogstudynotes.com2019.07.04トップメニューレイアウトでは、背景画像を追加できない仕様になっています。以下のフォーラムページで確認できます。ヘッダーレイアウトをトップメニューにすると、背景画像が反映されないもし、トップメニューレイアウトで背景を入れたい場合は、「ロゴ画像」を作るときに背景付きにすると良いと思います。メニューが2列になってしまい、バランスが良くないときの対応策いくみ以下のように、1つのメニューだけが飛び出しているように見えるとチョット気になりますね。対応策1:[Cocoon設定]>[ヘッダー]をクリック。下の[グローバルメニュー幅]セクションで[メニュー幅をテキストに合わせる]にチェックを入れます。メニュー項目の幅が「テキスト幅」になるため、以下のように1段でおさまるように!グローバルメニューのアイテム幅をテキストサイズに合わせる方法グローバルナビのトップメニューアイテムの横幅をテキスト幅に合わせるカスタマイズ方法です。wp-cocoon.com対応策2:[Cocoon設定]>[ヘッダー]をクリック。下の[グローバルメニュー幅]セクションの[トップメニュー幅]の値を小さくします。初期設定は176幅になっています。トップメニュー幅は1つ1つのメニュー項目の幅です。小さくすれば、間隔がつまるので、2段になっているメニューが1段になるかもしれません。(あまりにも多すぎると、無理ですけどネ。メニュー項目名が長い場合は「対策1」がおススメです。)わざと2段にしたい場合は、大きい値を入れます。300を設定して、センターロゴレイアウトで2段にした例:いくみ上のような場合は、8項目あるほうが良いでしょうね。「できるよ」という例です。おわりにアイキャッチ画像に入れた「美しい配置」は、サルワカさんの以下の説明から引用させていただきました。レイアウトは「パーツを美しく配置する」というデザインの要素の1つなわけです。(サルワカさんのブログ)・・・と思って自分のブログを見直すと・・・。ヘッダー部分に大分無駄が多い!スペースを保つことは大事だと思うのですが、チョット寂しい感じがするので、見直そうと思います。コピーいくみをフォローするいくみあぁ、ブログ。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。date*日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)いくみブログを読むのが大好きなアラフォーです。朝活でトコトコ綴っていきます。好きな食べ物は納豆とお寿司です。サイトコラム過去コラムCocoonサイトマップContactホーム検索トップサイドバーいくみブログを読むのが大好きなアラフォーです。朝活でトコトコ綴っていきます。好きな食べ物は納豆とお寿司です。背景画像の追加メニューが2列になってしまい、バランスが良くないときの対応策おわりにタイトルとURLをコピーしました。