fbpx
アメブロ集客支援サービスを“無料”で試す >>

初心者講座

アメブロのグローバルメニューの設定方法

アメブロで効果的なナビゲーションを提供するためには、グローバルメニューの設定が重要です。グローバルメニューを適切に設定することで、訪問者がブログ内で必要な情報を素早く見つけることができます。

 

【グローバルメニュー設定方法】

  1. アメブロのダッシュボードにログイン
  2. 「デザイン設定」をクリック
  3. フリースペースに「HTMLタグ」を挿入
  4. CSSコードを「CSS編集部分」の該当箇所に貼り付ける

 

HTMLタグを入れる

【フリースペースへHTMLタグを入れる方法】

  1. アメブロへログイン
  2. 「設定・管理」をクリック
  3. フリースペースをクリック
  4. 下記のHTMLコードをコピー
  5. フリースペースへ貼り付け
<!-- グローバルメニュー -->
<div id="global-menu">
<ul>
<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>
</ul>
</div>

 

CSSコードを所定を貼り付ける

次にグローバルメニューを表示するためにブログデザインCSSへ下記のコードを貼り付けます。

【コードをブログデザインCSSへ貼り付ける方法】

  1. アメブロの管理トップへアクセス
  2. デザインの設定をクリック
  3. デザインの変更にて編集可能なブログデザインへ変更
  4. 適応中のデザインより「CSSの編集」をクリック
  5. CSS編集で一番最後に下記のコードを貼り付ける

 

デザイン（１）

/* グローバルメニュー */
#global-menu {
  background-color: #333;
  padding: 10px 0;
}

#global-menu ul {
  display: flex;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

#global-menu li {
  margin: 0 10px;
}

#global-menu a {
  color: #fff;
  font-size: 16px;
  text-decoration: none;
}

#global-menu a:hover {
  color: #ccc;
}

このコード例では、グローバルメニューの背景色を#333（ダークグレー）に設定し、メニュー項目の文字色を白に設定しています。さらに、ホバーエフェクトとして、メニュー項目にマウスオーバーすると文字色が#ccc（ライトグレー）に変わるようにしています。

ご自身のブログに合わせて、リンクのURLやメニュー項目名、デザインをカスタマイズしてください。また、アメブロのデザイン編集画面で、プレビューを確認しながら調整を行ってください。

 

デザイン（２）

/* グローバルメニューのスタイル */
.global-menu {
  display: flex;
  justify-content: center;
  background-color: #f8f8f8;
  padding: 15px 0;
}

/* メニュー項目のスタイル */
.global-menu a {
  color: #333;
  font-family: 'Arial', sans-serif;
  font-size: 16px;
  text-decoration: none;
  margin: 0 15px;
  transition: color 0.3s;
}

/* メニュー項目のホバー時のスタイル */
.global-menu a:hover {
  color: #ff4500;
}

このデザインでは、モダンな印象を与えるために、背景色を薄いグレーにし、メニュー項目の文字色は濃いグレーにしています。ホバー時には、鮮やかなオレンジ色に文字色が変わります。

 

デザイン（３）

/* グローバルメニューのスタイル */
.global-menu {
  display: flex;
  justify-content: center;
  background-color: #ffffff;
  padding: 10px 0;
  border-bottom: 1px solid #ddd;
}

/* メニュー項目のスタイル */
.global-menu a {
  color: #333;
  font-family: 'Arial', sans-serif;
  font-size: 14px;
  text-decoration: none;
  margin: 0 20px;
  transition: color 0.3s;
}

/* メニュー項目のホバー時のスタイル */
.global-menu a:hover {
  color: #007bff;
}

このデザインはシンプルで洗練された印象を与えるために、背景色を白にし、メニュー項目の文字色は濃いグレーにしています。ホバー時には、青色に文字色が変わります。また、グローバルメニューの下に薄いグレーの罫線を追加しました。

いずれのデザインも、必要に応じてさらにカスタマイズすることができます。CSSを編集することで、背景色や文字色、フォントサイズなどを変更できます。

 

メニュー項目を追加する際には、項目名とリンク先のURLを指定します。項目名は分かりやすく簡潔なものにし、リンク先は適切なブログページや外部ページに設定してください。

グローバルメニューのデザインもカスタマイズできます。メニューのフォントサイズや色、背景色などを変更し、ブログの全体的なデザインと調和させることが可能です。

設定が完了したら、プレビューを確認し、問題がなければ変更を保存します。グローバルメニューの設定はブログの使い勝手を大きく向上させるため、訪問者の視点に立って慎重に行うことが重要です。