Twitterにてブログの新着記事更新情報をお届けしてます!(ここをクリックするとTwitterへ)

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

どうも、初心者CSSプログラマー?デザイナー?のぶちくまです。
なんか肩書きつけようと思ったけど、どちらなら名乗っても当たり障りない?
個人的にはプランナーとかもいいかなと思ってる。
ただ、初心者の枕詞つけないと詐称になっちゃうから気をつけないと。

WordPress無料テーマ最強のCocoonのカスタマイズ記事です。
グローバルナビを変更したい方に対して、CSSへの理解度毎に設定のポイントを解説しています。
Style CSS改編不要のものからアニメーションを駆使して魔改造する上級編まであります。
CSSコードのコピペで使用できるし、解説もあるので自分用にデザインしてもOKです!

グローバルナビ、スマホだと表示されないんだけどね。(設定によりますが)
逆に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ホームページをご覧ください。

https://fontawesome.com/

スポンサーリンク

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

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

https://wp-cocoon.com/global-menu-item-caption/

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

先ほどアイコン設定に使った「メニュー」編集画面で、
細かい設定をするために、ページ上部の「表示オプション」をみつけて、
そのタブを開くと、「説明」を追加するチェックボックスがあるからチェック。
すると、アイコンの時にも使った、各項目細かい設定に「説明」という、
入力するボックスができているから、そこにサブタイトルを入れると、
ナビ項目が2行で表示されるようになります。
大体は、日本語と英語、みたいな感じで表示させるパターンが多いです。

更新したら、「メニューを保存」を忘れずに!

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

スポンサーリンク

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

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

【Cocoonを使ってブログ作り】サイトのテーマを決めないと大変なことに
Cocoonを使ったブログ作りを解説しています。 今回はサイトのイメージを固めて、サイト全体のカラーリングについて解説しています。 また、設計図を作ることで、ブレなく、統一感のあるサイトを作成することができます。 マテリアルデザインとフラットデザインの特徴、メリット/デメリットについても。
  • WordPressのダッシュボードから、「Cocoon設定」タブを選択
  • 「ヘッダータブ」を選択する。
  • 「グローバルナビ」の背景色を設定する。

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

スポンサーリンク

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

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

さて、この辺りからCSSをいじっていきます。
今回は意図的にグラデーションを取り入れてみました。
サイトの雰囲気とかはいいんですよ、
ただ、やりたいからやるんです(どやっ)
なんでも実践してみないと覚えないですからね。

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

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

意外とシンプルでした。
ただし、背景色の値に、何やら見慣れぬ文字と、
色が3色も使われています。

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

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

プロパティのbackgroundはよく使われるので覚えてきた方も多いかと思います。
ただ、値が、知らん!なんだこのアルファベットの羅列は!
我々の知っているbackground#ffffffとかだったはずだ!

と、いう気持ちでぶちくまはみておりましたが、
中級者の皆さんは、ようは#以下を自分の好きな色に調整すればいいだけです。
値の中にある30%は、色の折り返し地点が30%にある、ということです。
to bottomはそのまま、「下に向かって」ということです。
つまり、上から30%までは①→②の色で移行していく。
残りの70%を②→③の色を推移していく、ということになります。

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

グラデーションを使って、立体を表現したかったんです。
つまり、上部は光の当たる部分で薄く、
下部は影になる部分で暗く、みたいな。
かまぼこを真上からみたような感じで、
「押せるかな?」と思わせるのが狙いです。
結論は、みていただければ分かる通り、
少し狙ったようにするには、インパクトが弱いかな、というところ。
各項目のサイドにボーダー入れたりもしてみましたが、
いまいちしっくり来ていない部分であります。

ぶちくま
ぶちくま

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

からす
からす

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

 

スポンサーリンク

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

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

ぶちくま
ぶちくま

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

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

 

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

SANGOとか、JINとかの有料テーマもほわわーんと動きますね。
あれ、みてると酔うからあまり好きではないんだけど、
「なんか凝ってるサイトだな!」っていうファーストインパクトがあるんですよね。
いわばキャッチーなリフ刻まれる感じなんですよ。
有名なところでいう、T.Rexの21th Century boyみたいな感じです。
シンプルでキャッチーなのが一番いい。

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

ナビの各項目を少しずつずらして登場させるのは、
少し大変でした。
何がって、、、セレクタがね。
各項目を抽出して選択する方法が、なかなか難しかったですね。

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

ぶちくまが使っている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で学ぶと良いです。

https://qiita.com/7968/items/1d999354e00db53bcbd8

基本的には、keyframeに名前をつけておいて、
該当する名前のアニメーションを適用できる、というものになります。
今回で言えば、「fadeIn」とういアニメーションを指定しておき、
@keyframesで「fadeIn」の動き方を指定している、
という感じですね。

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

簡単そうな@keyframesの動きからみていきましょう。
まず、transformで、動き方を指定します。
今回は下から上への動きになるので、Y軸方向に20px移動したところから始まりますよ、
ということです。
From ~ to や、0% ~ 100%で変化のタイミングを調整します。
つまり、今回のkeyframesでは、

【ページを開いた時に[0%のときに、from]本来の位置から20px下に移動[translateY(20px)]、
あと、対象は透明にしておく[opacity(0)]】
【アニメーションが終わる時間まで[100% to]、本来の位置へ移動[translateY(0px)]
あと、対象は透明じゃなくなる[opacity(1)】

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

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

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

時間の設定は、動かしたい(アニメーションをかける)対象ごとに設定できます。
今回で言えば、「animation-duration: 0.6s;」の部分になります。
時間が短く、つまり動きを速くしたければ数字を小さくすればいいってことですね!

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

animation-delayは、動き出すまでに、どれくらい遅くするか、
つまり時間差を指定する時に使用します。
こちらも数字をいじることで、設定できますよ。
セレクタはやや複雑なので、別の機会で説明しますが、
内容としては、
「各項目の一番左のものから順に、0.2秒ずつ遅れて登場する」
ような設定になっています。
この設定が、初心者にはかなり難しかったです。
なかなか思ったところに適応されなくてね(涙)

意図せずサブカテゴリもアニメになったけどよしとした
ちなみに、意図せずにサブカテゴリ表示時に動き出したけども、
もう良しとしました(笑)
いや、それなりによくないっすか?
手が込んでるっぽくて。
偶然の産物、というか事故みたいなもんなんだけどね。
スポンサーリンク

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

いかがでしたでしょうか。
上級編が先に来てしまいましたが、
今後、各レベルに合わせて、ゆっくり解説記事も書きますのでよろしくお願いします。
うまく動かないときは、デベロッパーツールでひたすらいじってください。
最初はその繰り返しです。
セレクタさえしっかり合えば、あとは微調整です。

からす
からす

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

ぶちくま
ぶちくま

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

 

ではでは。

コメント

  1. さくら より:

    つい最近コクーンを使い始めた者です。

    使い始めるといろいろと欲が出て、ついでに他の人には絶対どうでもいいであろう箇所とかも気になり始めて、カスタマイズ方法を探してました。

    そんななか、ぶちくまさんのサイトはとてもためになりました。
    グローバルナビのアニメはそのまま丸っとお借りすることになると思います。
    有難うございました。

    • buchikumabuchikuma より:

      さくら様
      絶対どうでもいい部分に全力カスタマイズする仲間が増えて嬉しい限りです!
      アニメーション、ガシガシ使ってください!もし不具合出たらご相談くださいまし。