MENU
  • 無料レッスンLesson
  • プロフィールprofile
  • サービスService
    • パソコン苦手でも大丈夫!
      ホームページ作成個人レッスン
    • 起業女性に寄りそうWEBお悩み相談
  • 実績・お客さまの声portfolio
  • ブログblog
  • お問合せcontact

    カテゴリー

    • Web・SNS集客
    • Web系プログラミング
    • WordPressプログラミング
    • フリーランスの小技
    • Web活用相談
    • はじめてのWordPress
    • アメブロカスタマイズ
    • ホームページ制作
    • 自分で作れるおしゃれデザイン
    • アイデア・思考の整理

    タグ

    Adobe IllustratorGatsby.jsgitGitHubHTML/CSSMySQLNode.jsPythonSourcetreeSWELLWordPressおすすめWPプラグインおすすめツールアメブロエックスサーバーサーチコンソールセキュリティバレットジャーナルライブドアブログ環境構築確定申告開発環境

    アーカイブ

    • 2023年1月
    • 2022年12月
    • 2022年11月
    • 2022年8月
    • 2022年4月
    • 2022年3月
    • 2022年2月
    • 2022年1月
    • 2021年12月
    • 2021年11月
    • 2021年10月
    • 2021年9月
    • 2021年8月
    • 2020年10月
    • 2020年8月
    • 2020年7月
    • 2020年6月
    • 2020年5月
    • 2020年4月
    • 2020年3月
    • 2020年1月
    • 2019年11月
    • 2019年9月
    • 2019年8月
    • 2019年5月
    • 2019年2月
    • 2019年1月
    • 2018年11月
    • 2018年9月
    • 2018年8月
    • 2018年7月
    • 2018年6月
    • 2017年10月
    • 2017年9月
    • 2017年7月
    個人事業主・女性起業家のためのWordPress・HP・ブログレッスン
    自分で作れる優しいホームページ作成・個人レッスン 中谷恵美
    • 無料レッスンLesson
    • プロフィールprofile
    • サービスService
      • パソコン苦手でも大丈夫!
        ホームページ作成個人レッスン
      • 起業女性に寄りそうWEBお悩み相談
    • 実績・お客さまの声portfolio
    • ブログblog
    • お問合せcontact
    自分で作れる優しいホームページ作成・個人レッスン 中谷恵美
    • 無料レッスンLesson
    • プロフィールprofile
    • サービスService
      • パソコン苦手でも大丈夫!
        ホームページ作成個人レッスン
      • 起業女性に寄りそうWEBお悩み相談
    • 実績・お客さまの声portfolio
    • ブログblog
    • お問合せcontact
    1. ホーム
    2. アメブロカスタマイズ
    3. 【アメブロ】好きな色でメニューバーを設定しよう

    【アメブロ】好きな色でメニューバーを設定しよう

    2022 12/19
    アメブロカスタマイズ
    2022-11-18 2022-12-19

    この記事ではアメブロにメニューバー(グローバルナビゲーション)を設定する方法を解説します。

    メニューバーがあると、読者に見てほしいページを案内することができます。

    目次

    【動画解説】アメブロでのメニューバー設定方法

    動画でもやり方を解説しています。

    メニューバーをフリースペースに作成

    管理トップ > 設定・管理 > フリースペース編集

    入力欄に以下のコードをコピペしてください。

    <nav class="gnav"><ul class="gnav-inner">
      <li><a href="【メニュー1のURL】">【メニュー1の名前】</a></li>
      <li><a href="【メニュー2のURL】">【メニュー2の名前】</a></li>
      <li><a href="【メニュー3のURL】">【メニュー3の名前】</a></li>
      <li><a href="【メニュー4のURL】">【メニュー4の名前】</a></li>
      <li><a href="【メニュー5のURL】">【メニュー5の名前】</a></li>
    </ul></nav>
    アメブロメニューバーの設定

    【メニューのURL】と【メニューの名前】は自分のブログに合わせて書き換えてください。

    【メニュー●のURL】 → 表示させたいページのURL
    【メニュー●の名前】 → 表示させたいメニューの名前

    メニューのURLの見つけ方

    記事の編集・削除から、表示させたい記事をクリックします

    ブラウザのURLバーをクリックしてコピーします。

    メニューの数を増やす/減らす場合は
    <li><a href="【メニュー●のURL】">【メニュー●の名前】</a></li>

    ↑の部分を増やしたり減らしたりしてください。

    3個の場合

    <nav class="gnav"><ul class="gnav-inner">
      <li><a href="【メニュー1のURL】">【メニュー1の名前】</a></li>
      <li><a href="【メニュー2のURL】">【メニュー2の名前】</a></li>
      <li><a href="【メニュー3のURL】">【メニュー3の名前】</a></li>
    </ul></nav>

    6個の場合

    <nav class="gnav"><ul class="gnav-inner">
      <li><a href="【メニュー1のURL】">【メニュー1の名前】</a></li>
      <li><a href="【メニュー2のURL】">【メニュー2の名前】</a></li>
      <li><a href="【メニュー3のURL】">【メニュー3の名前】</a></li>
      <li><a href="【メニュー4のURL】">【メニュー4の名前】</a></li>
      <li><a href="【メニュー5のURL】">【メニュー5の名前】</a></li>
      <li><a href="【メニュー6のURL】">【メニュー6の名前】</a></li>
    </ul></nav>

    設定するとこのような形になります

    入力できたら「保存ボタン」をおします。

    フリースペースをサイドバーに配置

    管理トップ > 設定・管理 > 配置設定

    続いて、サイドバーの配置にフリースペースを追加します。

    フリースペースの項目を右にドラッグしてください。

    CSSの編集

    管理トップ > デザイン設定 > CSSの編集

    CSSの編集をクリックしてください。

    CSSの入力欄

    /* (2-2) ヘッダータイトル、説明文
    ——————————————–*/
    の一番下に、コードを貼り付けます。

    /****** グローバルメニュー用設定 ******/
    /* 各種デザイン設定 */
    :root {
      --gnav-h: 60px; /* メニューバーの高さ */
      --gnav-w: 1120px; /* メニューバーの横幅 */
      --gnav-header-h: 400px; /* ヘッダー画像の高さ */
      --gnav-bg: #fffff; /* メニューバーの背景色設定 */
      --gnav-border: #E5E5E5; /* 枠線の色 */
      --gnav-btn-n: 5; /* メニューの数 */
      --gnav-btn-font: #333333; /* メニューの文字色 */
      --gnav-btn-bg: #fff; /* ボタンの背景色設定 */
    }
    /* 原点をページの左上に設定 */
    .skin-page {
      position: relative;
    }
    .skin-columnA .skin-blogSubA,
    .skin-columnB .skin-blogSubA,
    .skin-columnC .skin-blogSubA,
    .skin-columnC .skin-blogSubB,
    .skin-columnD .skin-blogSubA,
    .skin-columnD .skin-blogSubB,
    .skin-columnE .skin-blogSubA,
    .skin-columnE .skin-blogSubB {
      position: static;
    }
    /* グローバルナビを設置 */
    .skin-page {
      padding-top: 0; 
    }
    .gnav {
      position: absolute;
      top: var(--gnav-header-h);
      left: 0;
      width: 100%;
      background: var(--gnav-bg);
    }
    .skin-bgHeader {
      margin-bottom: var(--gnav-h);
      height: var(--gnav-header-h);
    }
    .gnav{
      border-top: 1px solid var(--gnav-border);
      border-bottom: 1px solid var(--gnav-border);
    }
    .gnav, .gnav * {
      box-sizing: border-box !important;
    }
    .gnav >br,
    .gnav >br~br,
    .gnav ul >br,
    .gnav li >br,
    .gnav ul >br~br,
    .gnav li >br~br {
      display: none;
    }
    .gnav .gnav-inner {
      display: flex;
      margin: auto;
      width: var(--gnav-w);
      border-right: 1px solid var(--gnav-border);
    }
    .gnav .gnav-inner >li {
      width: calc(100% / var(--gnav-btn-n));
      height: var(--gnav-h);
      line-height: 1.25;
      text-align: center;
      overflow: hidden;
    }
    .gnav .gnav-inner li >a,
    .gnav .gnav-inner li >span {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 0.5rem;
      height: var(--gnav-h);
      text-decoration: none;
      color: var(--gnav-btn-font);
      background: var(--gnav-btn-bg);
      border-left: 1px solid var(--gnav-border);
    }
    .gnav .gnav-inner li >a:hover,
    .gnav .gnav-inner li >span:hover {
      opacity: 0.4;
      cursor: pointer;
    }
    /****** グローバルメニュー用設定ここまで ******/

    こちらのコードを元に、表示位置とデザインをアレンジさせていただきました。

    あわせて読みたい
    【アメブロカスタマイズ】グローバルナビを設置する方法 新CSS編集用デザイン適用済みのアメブロで、フリースペースとCSSを使ってパソコン・iPad向け画面にグローバルナビ(グローバルメニュー)を
    メニューの数を5から変える場合
     --gnav-btn-n: 5; /* メニューの数 */
    この5を、メニューの数に変更してください。

    設定できたら、保存して、ブログを表示させてみましょう。

    メニューの色を変えるには?

    各種デザイン設定内の「色コード」を変更すると色をかえることができます。

    色は「#FFFFFF」というように#のあとに6桁の英数字を並べたカラーコードを使います。

    この「#FFFFFF」「#e5e5e5」「#3333333」のカラーコードを変えると、色を変えられます。

    /* 各種デザイン設定 */
    :root {
      --gnav-h: 60px; /* メニューバーの高さ */
      --gnav-w: 1120px; /* メニューバーの横幅 */
      --gnav-header-h: 400px; /* ヘッダー画像の高さ */
      --gnav-bg: #fffff; /* メニューバーの背景色設定 */
      --gnav-border: #e5e5e5; /* 枠線の色 */
      --gnav-btn-n: 5; /* メニューの数 */
      --gnav-btn-font: #333333; /* メニューの文字色 */
      --gnav-btn-bg: #fffff; /* ボタンの背景色設定 */
    }
    –gnav-bg全体の背景色#ffffff(白)
    –gnav-border線の色#e5e5e5(薄いグレー)
    –gnav-btn-font文字色#333333(黒)
    –gnav-btn-bgメニューボタンの背景色#ffffff(白)

    カラーコードは色見本から選んでみてください。

    原色大辞典
    WEB色見本 原色大辞典 – HTMLカラーコード 色の名前とカラーコードが一目でわかるWEB色見本
    /* 各種デザイン設定 */
    :root {
      --gnav-h: 60px; /* メニューバーの高さ */
      --gnav-w: 1120px; /* メニューバーの横幅 */
      --gnav-header-h: 400px; /* ヘッダー画像の高さ */
      --gnav-bg: #69472C; /* メニューバーの背景色設定 */
      --gnav-border: #F1EEE9; /* 枠線の色 */
      --gnav-btn-n: 5; /* メニューの数 */
      --gnav-btn-font: #F1EEE9; /* メニューの文字色 */
      --gnav-btn-bg: #69472C; /* ボタンの背景色設定 */
    }

    このように、設定を変えてみると、↓メニューの色が変わります。
    ヘッダー画像の色と揃えると綺麗です^^

    ぜひ、メニューバーをいれて、ブログを美しく使いやすくデザインしてみてくださいね!

    他にもアメブロカスタマイズ方法を紹介しています。↓

    あわせて読みたい
    自分でできる。アメブロのおしゃれなカスタマイズまとめ アメブロを、おしゃれにカスタマイズしたい! この記事では、アメブロのデザインをおしゃれにカスタマイズする方法を解説しています。 テンプレートそのままではなく、…
    「もっとカスタマイズしたい・プロにお願いしたい」場合は?

    「ブログを自分好みのデザインにしたい!」
    「自分でも、ブログを使いこなせるようになりたい」
    そんな方は、お一人お一人のご希望に合わせてお答えできる 個人相談 をご利用ください。

    無料ブログサービスは、アメブロ、はてなブログ、ライブドアブログに対応できます^^

    ご自身の世界観をもっと表現したい方はWordPressがおすすめ。
    ホームページを始める個人レッスンもあります♪

    アメブロカスタマイズ
    アメブロ HTML/CSS
    よかったらシェアしてね!
    中谷恵美
    あなたのお仕事を育てるホームページの先生
    システムエンジニア、ITコンサルタントを経て、フリーランスに。

    ・ホームページ作成
    ・ブログのカスタマイズ
    ・LINEやメルマガのセットアップ
    ・Canvaを使ったデザインの作り方
    ・Googleの分析ツール
    ・自分の強みを生かした集客
    などの、個人レッスンをしています。

    「仕事の発信に使えるようになりたい」
    「自分でも使えるスキルを身につけたい」
    ITが苦手な個人事業主さんに向けて、困ったときのWEB担当として幅広くサポートしています。

    HP作成のほかにも、心理カウンセラーとしても活動中。

    趣味は、文房具集め、ゲーム(牧場系とモンハン)、手芸(刺繍、洋裁)。
    運動が苦手で体が硬いのが悩み。今年、腰痛改善にジムに通い始めたが、果たして続くのか。。。
    詳しいプロフィールを見る

    メルマガバナー

    活動実績

    【HP個人レッスン】

    ●ハワイアン伝統ロミロミサロン・Aさま
    ・2ヶ月でサロンのHPをリニューアル。新サービス立上げ時も自分でHPを作成できるように。
    「最初はパソコン音痴の私にできるか不安でしたが、とても丁寧な指導でわかりやすかったです。
    私好みの素敵なHPができあがり、とっても嬉しいです!」

    ●Mさま
    ・2回のミーティングでWordPress運営スキルを習得。オウンメディアを立上げ。

    ●Sさま
    ・5日間で無料ブログからWordPressへのお引越し。
    「半ば諦めかけていた移管を短期間で終えることが出来ました」

    【ホームページ作成】

    ●これまでご依頼いただいたお客さま
    (個人)写真家・サロン・カウンセラー・占い師

    (法人)メーカー代理販売店、コンサルティング企業、人事支援企業

    【経歴・資格など】
    ・基本情報技術者
    ・簿記2級

    【営業時間】平日:10:00~19:00
    【休業日】土、日、祝、年末年始

     

    新着記事
    • 個人事業主のお仕事ブログには、独自ドメインを使おう!
      2023-01-27
      Web・SNS集客
    • WordPressテーマの選び方〜おすすめ有料・無料テーマ〜
      2023-01-13
      はじめてのWordPress
    • 【アメブロ】記事に定型文をいれる方法
      2022-12-30
      アメブロカスタマイズ
    • 【アメブロ】メッセージボードをおしゃれにカスタマイズ!
      2022-12-23
      アメブロカスタマイズ
    • ブログで使えるタイトル付き囲み枠のCSS
      2022-12-21
      アメブロカスタマイズ
    人気記事
    • 【Mac】SourcetreeからGitHubへSSH接続する
      2021-08-05
      Web系プログラミング
    • 【CSSコピペOK】おしゃれな引用blockquoteデザイン10選
      2018-09-13
      WordPressプログラミング
    • Node.js+ExpressでMySQLに接続して一覧表示する
      2020-04-25
      Web系プログラミング
    • CSSとJavaScriptで作るハンバーガーメニュー
      2020-07-25
      Web系プログラミング
    • 【CSS】シンプルで女性らしい囲み枠デザイン48選
      2018-08-24
      アメブロカスタマイズ
    目次