サイトの水先案内グローバルナビもかっこよく仕上げる【Cocoonカスタマイズ】

どうも、初心者CSSプログラマー？デザイナー？のぶちくまです。なんか肩書きつけようと思ったけど、どちらなら名乗っても当たり障りない？

個人的にはプランナーとかもいいかなと思ってる。ただ、初心者の枕詞つけないと詐称になっちゃうから気をつけないと。

グローバルナビ、スマホだと表示されないんだけどね。（設定によりますが）逆にAMPを気にせずにガシガシとカスタマイズしてやりましょう。AMPはアニメーション制限があるからうまくいかないんだよね。

無意味なことほど、人間は一生懸命取り組めるのです。今回はアニメーションを取り入れましたので、上級向け（ぶちくま判定なのであくまでも素人レベルです）となります。

「へぇ、こんなこともCSSでできるんだぁ」くらいの気持ちでご覧いただければと思います。

グローバルナビカスタマイズで取り組むこと

1. アイコンを設定しよう（超初級）
2. グローバルナビの項目にサブタイトルをつけよう（超初級）
3. グローバルナビの背景色を設定しよう（初級）
4. 背景色にグラデーションを取り入れてみよう（中級）
5. グローバルナビをアニメーションを使って表示させよう（上級）

こんな感じになってます。

グローバルナビに求められるデザイン

まず、グローバルナビは何かっていうと、一番最初に読者が目にするカテゴリ名なわけです。

厳密にいえば、WordPress上の「カテゴリ」とは少し意味合いは変わります。

ここに表示させるのは「カテゴリ」だけではなく、問い合わせ先や、場合によってはプライバシーポリシー、サイト運営者情報としてプロフィールへのリンクを貼っておくこともあります。

「このサイトでは、こんな情報がありますよ」という、大雑把な分類名を見ることができるわけです。

そして、読者がサイトで迷子になった時にナビを頼りに正しい道筋に戻す役割があります。

特に、雑記ブログ（カテゴリがたくさんある）の場合は、グローバルナビの項目選定は、かなり重要になります。

そういったわけで、グローバルナビはサイトの顔でもあるので、求められるデザインは以下の通りです。

• サイトのメインカラーを取り入れる
• 文字は目立たせてサイト情報を伝える
• 最小限の情報を規則性を持って並べる

いいかえれば、個性と情報と整理ですね。

アイコンを設定しよう（超初級）

アイコン設定といえば、Cocoonブログのブロギングライフさんです。
https://www.blogging-life.com/cocoon/add-font-awesome-icon-to-menu/

アイコンの設定方法

WordPressのダッシュボード（編集画面）で、「外観」→「メニュー」を開くと、詳細な設定ができます。

「メニュー」編集画面で、メニュー項目から「ヘッダーナビ」を選択。
該当する項目をカスタム設定していきます。

「ナビゲーションラベル」というものがあるので、そこに例えば「ホーム画面」を変えるのであれば、

＜i class="fa fa-home"> ホーム

※半角の＜を使ってください。

みたいな感じにすると、うちのブログみたいにメニュー名の前に、「家」のアイコンをつけることができます。

アイコン探すときは、Fontawesomeホームページをご覧ください。

Font Awesome

The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free...

fontawesome.com

グローバルナビの項目にサブタイトルをつけよう（超初級）

こちらは不要ではあるのですが、
なぜかぶちくまサイトのナビ設定にすると表示が崩れてしまうので、
サブタイトルもしっかりつけておくことをお勧めします。
（本当はごちゃごちゃするから嫌なんだけど）

グローバルナビに補足説明文を記入する方法

グローバルナビの個別メニューアイテムに対して補足文（キャプション）を入力する方法の紹介です。

wp-cocoon.com

細かい方法は本家わいひら氏が丁寧に画像付きで説明してくれてる。

先ほどアイコン設定に使った「メニュー」編集画面で、細かい設定をするために、ページ上部の「表示オプション」をみつけて、そのタブを開くと、「説明」を追加するチェックボックスがあるからチェック。

すると、アイコンの時にも使った、各項目細かい設定に「説明」という、入力するボックスができているから、そこにサブタイトルを入れると、ナビ項目が２行で表示されるようになります。

大体は、日本語と英語、みたいな感じで表示させるパターンが多いです。

サブタイトルの付け方は以上です。
CSSをいじることもないので楽チンです。

グローバルナビの背景色を設定しよう（初級）

グローバルナビの背景色の設定はCocoonの設定画面でできます。
これはAMPや、サブカテゴリの表示の背景色にもなるので、
自分のサイトのメインカラーを使うことをお勧めします！

【Cocoonを使ってブログ作り】サイトのテーマを決めないと大変なことに

Cocoonを使ったブログ作りを解説しています。今回はサイトのイメージを固めて、サイト全体のカラーリングについて解説しています。また、設計図を作ることで、ブレなく、統一感のあるサイトを作成することができます。マテリアルデザインとフラットデザインの特徴、メリット/デメリットについても。

buchikuma.xyz

2024.03.22

• WordPressのダッシュボードから、「Cocoon設定」タブを選択
• 「ヘッダータブ」を選択する。
• 「グローバルナビ」の背景色を設定する。

以上です。初心者にも優しいように、
独自の設定画面で簡単に色合いが決められるのがいいですね！

背景色にグラデーションを取り入れてみよう（中級）

ついてこれていますでしょうか。まずは興味のあるところから始めて、できることは徐々に増やしていくのがお勧めですぜ。

さて、この辺りからCSSをいじっていきます。

今回は意図的にグラデーションを取り入れてみました。

サイトの雰囲気とかはいいんですよ、ただ、やりたいからやるんです（どやっ）なんでも実践してみないと覚えないですからね。

まずはCSSコードをみていきましょう。

.navi-in>ul {
background: linear-gradient(to bottom,#8492f7,#0e50b9 30%,#033b80);
}

意外とシンプルでした。

ただし、背景色の値に、何やら見慣れぬ文字と、色が３色も使われています。

どういうことなのか、みていきましょう。

グラデーション(linear-gradient)の使い方

プロパティのbackgroundはよく使われるので覚えてきた方も多いかと思います。

ただ、値が、知らん！なんだこのアルファベットの羅列は！我々の知っているbackgroundの値は#ffffffとかだったはずだ！

と、いう気持ちでぶちくまはみておりましたが、中級者の皆さんは、ようは＃以下を自分の好きな色に調整すればいいだけです。

値の中にある30％は、色の折り返し地点が30％にある、ということです。

to bottomはそのまま、「下に向かって」ということです。

つまり、上から30％までは①→②の色で移行していく。残りの70％を②→③の色を推移していく、ということになります。

ぶちくまの期待した効果〜立体表現にグラデーションは便利〜

グラデーションを使って、立体を表現したかったんです。

つまり、上部は光の当たる部分で薄く、下部は影になる部分で暗く、みたいな。

かまぼこを真上からみたような感じで、「押せるかな？」と思わせるのが狙いです。

結論は、みていただければ分かる通り、少し狙ったようにするには、インパクトが弱いかな、というところ。

各項目のサイドにボーダー入れたりもしてみましたが、いまいちしっくり来ていない部分であります。

ぶちくま

まぁ、だいたいグローバルナビは触れるという認識があるでしょ？

からす

考えが甘い！　「当然こうだろう」という常識の押し付けが、一番ユーザビリティを下げる行動だから気をつけなさい！

グローバルナビをアニメーションを使って表示させよう（上級）

最後に、上級編ですね。
これは、正直に言おう。

ぶちくま

「アニメーションの勉強してたらどうしても使いたくなった！」

CSSを勉強していると、こういうことが、まぁまぁ、よくある。
アニメーションとしてはシンプルな、移動して定位置にいく、というやつ。
これは簡単なので随所に取り入れてみてほしい。

有名有料ブログテーマ風もこれで簡単導入

グローバルナビの項目を少しずつ登場させるアニメーション

ナビの各項目を少しずつずらして登場させるのは、少し大変でした。

何がって、、、セレクタがね。

各項目を抽出して選択する方法が、なかなか難しかったですね。

まぁ、みなさんは難しいこと考えずにコピペするがよろし

ぶちくまが使っているCSSコード〜アニメーション〜

/*naviのフェードイン*/
#navi .navi-in ul>li>a {
animation-name: fadeIn;
animation-duration: 0.6s;
animation-delay: 1.8s;
animation-fill-mode: forwards;
filter: opacity(0);
position: relative;
z-index: 4;
}
#navi .navi-in ul>li:nth-child(1)>a {
animation-name: fadeIn;
animation-duration: 0.6s;
animation-delay: 0.2s;
}
#navi .navi-in ul>li:nth-child(2)>a {
animation-name: fadeIn;
animation-duration: 0.6s;
animation-delay: 0.4s;
}
#navi .navi-in ul>li:nth-child(3)>a {
animation-name: fadeIn;
animation-duration: 0.6s;
animation-delay: 0.6s;
}
#navi .navi-in ul>li:nth-child(4)>a {
animation-name: fadeIn;
animation-duration: 0.6s;
animation-delay: 0.8s;
}
#navi .navi-in ul>li:nth-child(5)>a {
animation-name: fadeIn;
animation-duration: 0.6s;
animation-delay: 1s;
}
#navi .navi-in ul>li:nth-child(6)>a {
animation-name: fadeIn;
animation-duration: 0.6s;
animation-delay: 1.2s;
}
#navi .navi-in ul>li:nth-child(7)>a {
animation-name: fadeIn;
animation-duration: 0.6s;
animation-delay: 1.4s;
}
#navi .navi-in ul>li:nth-child(8)>a {
animation-name: fadeIn;
animation-duration: 0.6s;
animation-delay: 1.6s;
}

@keyframes fadeIn {
from {
transform: translateY(20px);
filter: opacity(0);
}
to {
transform: translateY(0px);
filter: opacity(1);
}
}

自分で組んでおきながら、久しぶりすぎてどこを抽出すればいいかわからんかった。動かなかったらぜひコメントください。

Keyframesの使い方（ごく基本）

ぶちくまも、正直keyframeを正しく動かすにはまだ知識が足りていない。なので、基本的な動き方だけ。

詳しいことはQiitaで学ぶと良いです。

【CSS3】@keyframes と animation 関連のまとめ - Qiita

はじめにanimation プロパティと @keyframes を使うと、CSSだけでアニメーションの設定ができます。簡単にアニメーションの設定ができるので、覚えると楽しいです。そもそもアニメ…

qiita.com

基本的には、keyframeに名前をつけておいて、該当する名前のアニメーションを適用できる、というものになります。

今回で言えば、「fadeIn」とういアニメーションを指定しておき、@keyframesで「fadeIn」の動き方を指定している、という感じですね。

アニメーション@keyframesの動き指定

簡単そうな@keyframesの動きからみていきましょう。

まず、transformで、動き方を指定します。

今回は下から上への動きになるので、Y軸方向に20px移動したところから始まりますよ、ということです。

From ~ to や、0% ~ 100%で変化のタイミングを調整します。

つまり、今回のkeyframesでは、

コード指示を翻訳するとこんな感じになります。

アニメーション@keyframesの時間設定の仕方

animation-durationでアニメーションが動いている時間を指定する

時間の設定は、動かしたい（アニメーションをかける）対象ごとに設定できます。

今回で言えば、「animation-duration: 0.6s;」の部分になります。

時間が短く、つまり動きを速くしたければ数字を小さくすればいいってことですね！

animation-delayで時間差で動き出すように設定する

animation-delayは、動き出すまでに、どれくらい遅くするか、つまり時間差を指定する時に使用します。こちらも数字をいじることで、設定できますよ。

セレクタはやや複雑なので、別の機会で説明しますが、内容としては、「各項目の一番左のものから順に、0.2秒ずつ遅れて登場する」ような設定になっています。この設定が、初心者にはかなり難しかったです。

ぶちくま

なかなか思ったところに適応されなくてね（涙）

意図せずサブカテゴリもアニメになったけどよしとした

グローバルナビのカスタマイズまとめ

いかがでしたでしょうか。

上級編が先に来てしまいましたが、今後、各レベルに合わせて、ゆっくり解説記事も書きますのでよろしくお願いします。うまく動かないときは、デベロッパーツールでひたすらいじってください。

最初はその繰り返しです。セレクタさえしっかり合えば、あとは微調整です。

からす

何事もまずは挑戦することが大事よ！

ぶちくま

こうやって記事にまとめると、さらに理解が深まるのでオススメです！
人に教えるのって、知識をまとめる作業が必要だからね！

ではでは。

少しだけ補足

2021年のぶちくまです。読んでいただいた方がいらっしゃればお疲れ様でした。何点か補足しておきます。

まず、グローバルナビにアニメーションは不要です。サイトの不具合がナビに起こると面倒です。ブラウザによって対応しないなどの問題が起きた時に、サイト訪問して最初に目にするグローバルナビがバグっているとサイトの信用に関わります。

グラデーションに関しても、ブラウザによってはうまく反映できないものがあり、結論で言えば「なるべくシンプルなデザインにしておいて、コンテンツに色（特色）を付ける」方が大事です。

この頃は、本当に楽しんでCSSに取り組んでいます。ただ、収益という面で言えばCSSデザインを初心者が工夫を凝らしたところでたかが知れています。時間効率で言えば細かいデザインのカスタマイズよりは記事を書いたり動画を撮影したり編集したりというあたりの方が重要ではあります。

ただ、やっぱりCSS含めてデザインを学んでおく方が、ブログを長く続けていく上では差別化できるポイントを増やすことはできます。少し矛盾しますが、コンテンツが出来上がってくれば、最後の詰めで読者を満足できるかどうかは、やっぱりデザインだったりします。