ワードプレスCocoon編WEB関連の記事を気楽に書いています。2019.04.21こんにちわ。今回は、ワードプレステーマCocoonのグローバルナビゲーションをカスタマイズする方法を記事にしていきたいと思います。ワードプレスCocoon編の記事で、サイト内にグローバルナビを設置して、「Cocoon設定」内でメニュー色を好きな色に設定する方法をお伝えしました。今回は、CSSコードを編集(追加するだけ)して、さらに自由度の高い仕様にカスタマイズする方法を紹介したいと思います。先に書いておきますが、ここで紹介するカスタマイズはテーマ「Cocoon」用の内容です。(style.css)」に記述してもうまく反映されませんでした。Cocoon限定の記事としてご理解ください。デフォルト(未記入)仕様は、以下のようになっています。CSSなどは編集せずに、サイト内(Cocoon設定)で色を指定してみると以下の様になります。マウスオーバー時は、メニュー色よりワントーン薄い色になる仕様です。シンプルイズベストですが、少々殺風景な気もしませんか?極端すぎるカスタマイズで派手にしすぎても、ただの自己満足というオチになりそうですが、サイトカラーで個性を出してみるのもいいですよね。今回紹介するカスタマイズは以下の通りです。お好みで調整できるので是非試してみてください。今回、当ブログのナビメニューをカスタマイズするにあたって、ネット情報を頼りにCSSコードの編集(貼り付け)をいくつか試したんですが、うまく反映されないものもいくつかありました。Cocoonでは、「Cocoon設定」というテーマ独自の設定がありますが、その中のグローバルナビのカラーコードが優先されることが要因かもしれません。それでも、出来るだけ自由度の高いカスタマイズを実現させたかったので、複数記事の情報を組み合わせて試行錯誤した結果、かなり自由度の高いコードができたと思います。紹介しているコードは、このブログで何度(数十回)も編集した結果きちんと反映されていますが、WEB初心者の僕が自己責任で使用しているコードです。詳しい方が見れば「ここ間違ってるゾ!」という部分はあるかもです・・・。今回紹介する方法はHTMLと、CSSコードを組み合わせてグローバルナビを作成するのではなく、CSSコードをスタイルシート(子テーマ内)にコピペするだけの簡単な方法です。サイト内にグローバルナビを設置していることが前提となります。(サイト内の設定で可)グローバルナビを設置していない方は、以下の記事を参考にしてください。ワードプレスCocoon編この記事では、ワードプレスのグローバルナビゲーションを設置する方法を画像解説しています。7」というプラグインでのお問い合わせフォーム作成記事と合わせてお読みください。キャプチャ画像を豊富に使っているので初心者の方にもわかりやすい内容です。ryuumarublog.com2021.09.08先にカスタマイズ例をご覧くださいませ。カスタマイズ後は以下のような感じで、黄色部分がポインタを乗せたとき(マウスオーバー)の背景色で、青色部分が、メイン(サブ)メニューとナビ全体の背景色を統一したバージョンです。カラフルにすると以下のようになります。黄色部分がポインタを置いたとき(マウスオーバー)の背景色で、赤色部分がメイン(サブ)メニューの背景色です。青色部分はグローバルナビ全体色の背景色です。ポインタを置いたときの色は、メインメニュー、サブメニュー共通です。文字の色、メニューの枠、上下のラインなどもカスタマイズしていますが、この画像ではわかりにくいですよね。この後もう少しわかりやすい画像が出てきます。今回紹介するカスタマイズコードを記述する前、すでに別のコードがある場合は、必ずコピーして、メモ帳アプリなどに保存(バックアップ)しておいてください。万が一不具合が起こった場合、元のコードと入れ替えれば元の状態に復旧できます。コード内(後ろ)の/*~~文字列(ここでは日本語)~~*/はコードが反映されている内容の覚え書き(コメントアウト)です。覚えやすい内容に書き換えてもらって大丈夫です。日本語以外の英数字(全半角)でも大丈夫ですが、/*で始まって*/で閉じるようにしてくださいね。※上の画像はわかりやすいように部分別に色を変えてあります。この配色は、僕のセンス!・・・?ではありません(;^ω^)色(カラーコード)の指定#○○○○○○は色を指定するカラーコードです。○○○○○○内に記入する番号で、色を指定できます。カラーコードは以下のサイトを参考にしてください。HTMLカラーコード色の名前とカラーコードが一目でわかるWEB色見本www.colordic.orgpx(ピクセル)の指定pxは文字の大きさ(フォントサイズ)や図形の長さなど、幅広く使われるタグですが、ココでは、太さ(高さ)を指定するために使用しています。30pxの様に半角数字で値を指定します。数字が大きいほど太く(高く)なります。全角数字で値を指定すると、以下画像の様にエラーマークが表示されます。エラーマークにカーソルを合わせると、エラー箇所が表示されるので修正してください。'(アポストロフィ)で囲まれるのはワードプレス4.9以降の仕様らしいです。今回の記事作成で初めて知ったんですが、!importantは、CSSの記述順に関係なく「このコードを優先させる」ためのタグだそうです。ココで紹介するコード(メインメニュー5項目)に、!importantを付けているのは「Cocoon設定」の有無にかかわらずスタイルシート内の指定を優先させるためです。!importantを付けない場合、「Cocoon設定」が優先されてしまうパターンがあるので、ここではあえて記述しています。※!important;は必要な場所にだけ指定してあります。コメントアウト(/*----------*/)は表示されないのでコピペで使ってください。/*下ラインの太さと色*/}グローバルナビ(メニュー欄)の高さを指定するコードグローバルナビ(メニュー欄)の高さ指定は、サイト内の「Cocoon設定」でも可能です。「Cocoon設定」では、デフォルトとスリムの2タイプからの選択ですが。こちらのコードだと好きな高さに調整可能です。/*ナビ全体の高さ(縦幅)*/}色が変化する時間を指定するコードナビメニューにポインタを置いた(離した)ときに、色が変わるまでの時間を調節できます。コードの中の数字(秒)が大きいほど変化する時間が長くなります。「フワッと変わってパッと消える」などとしたいときに便利です。元のコードは必ずバックアップしておいてくださいね。ワードプレスのダッシュボードから「外観」⇒「テーマの編集」へ進みます。テーマの編集画面に移動したらまずは、子テーマの編集画面かどうか確認してください。:スタイルシート(style.css)」と書かれていれば子テーマの編集画面です。:スタイルシート(style.css)」となっていればそこは親テーマの編集画面です。Child」を選択してください。親テーマを編集してもカスタマイズできますが、テーマのアップロード(更新)に伴い親テーマのデータはすべて最新データに上書きされてしまいます。その際、カスタマイズ用のコードは消されてしまいデフォルト仕様に戻ってしまいます。Child(コクーンチャイルド)」という子テーマです。Child(子テーマ)の編集画面を下にスクロールすると、CSSコードを貼り付けるエディタ画面が見えてきます。/*必要ならばここにコードを書く*/」の下にカスタマイズ用のコードを貼り付けます。コードを貼り付けたら、画面下の「ファイルを更新」をクリックします。「ファイルを更新」の上に「ファイルの編集に成功しました。」と表示されればテーマの編集は完了です。「サイト名(画像内はりゅうまるブログ)」にカーソルを置いて「サイトを表示」をクリックしてください。以前にスタイルシートを編集したことがある場合は、最後に貼り付けたコードの下に今回使用するコードを貼り付けてください。その後の手順は前述と同じく、「ファイルを更新」⇒「サイトを表示」をクリックです。うまく反映されていると思いますので、お好みのデザインにカスタマイズしてくださいね。ナビメニューに仕切り線を付ける場合メニュー(メイン)を線で仕切るにはいろいろなコードがありますが、僕が試した中で一番見やすいと思うパターンを書いておきますね。(賛否あると思います)サブメニュー指定なしですが、記述しないとプルダウンの見た目が若干変わります。背景色をグラデーションにする場合は、background:⇒#○○○○○○の書き方を変えるだけです。以下画像はナビ全体色とメニュークリック前をグラデーション2色にしています。background:#0000ff!important;の太字のところが変更箇所です。background:と!important;の間を変えるだけです。#fff)!important;上下の入れ替えは、bottomをtopにするか、色番号を入れ替えるだけです。#fff)!important;左右の入れ替えは、rightをleftにするか、色番号を入れ替えるだけです。#fff)!important;円の向きを変えるには、色番号を入れ替えるだけです。円形パターンは幅が狭いとわかりにくいですね。色の種類を増やす場合は、カッコ内の色コードを追加するだけですが、やりすぎは見にくくなるだけかも...。Gradient(以下画像)かな。日本語対応はしてませんが、シンプルな直感操作でコードが生成できます。https://cssgradient.io/グローバルナビのカスタマイズまとめいかがでしたでしょうか?サイト内にグローバルナビを設置するのとしないのとでは、SEO的にも、ユーザーの利便性にも影響しますが、ナビゲーションのデザイン性はあまり影響しないと思います。それでも、見やすいサイトを意識してデザイン性に目を向けるのも悪くないですよね。何といってもサイトデザインのカスタマイズはやってて楽しいですし、コードを編集しているうちにCSS(HTML)の知識も多少ついてきますしね。コメントをキャンセルメールアドレスが公開されることはありません。*サイトΔプロフィールこんにちわ。建築系の自営業をしている既婚者です。集客目的で作成したホームページで少しずつ集客できるようになってきたので、趣味でブログを始めてみようと思いこのブログを立ち上げました。ジャンルにとらわれない自由なブログにしたいと思っています。defined.")}))}();。