プロフィール画像が丸いデザインでのメニューバーの設置方法

こんにちは、パソコンインストラクターの川上雄大です。

今日は、プロフィール画像が丸いデザインを使用している方のための記事になります。

（プロフィール画像が四角いデザインの方はこちらの記事をどうぞ→『ウエストみたいなヘッダーの下の帯って【メニューバーの設置方法】』）

その新デザインで、メニューバーを設置する方法です。

（メニューバーは下画像の赤枠のところ）

まず、フリースペース編集で、次のコードをコピペします。

そして、「項目名1」～「項目名5」を入力し直します。（ご自分のメニュー項目でどうぞ！）

さらに、それぞれの項目名でリンクする先のURLを入力またはコピペ（事前にメモ帳にコピペしておいて）します。

（「リンク先URL1」～「リンク先URL5」）

リンク先を別ウィンドウで表示させたいときは、

target="_blank"

を「リンク先URL」の後に続けて、半角スペースを入れた後、追加してあげます。

たとえば、こんな風に↓

うまくできたら、しっかりと「フリースペース編集」を保存しておいてください。

次に、「デザイン」で、「CSSの編集」を選択します。

（「CSS編集用デザイン」を選択していない方は、こちらの記事をどうぞ→『最新デザインでメニューバーを設置するには（既存のデザインの場合）』

（また、「CSS編集用デザイン」にするには、こちらの記事をどうぞ→『CSS編集用デザインってどこにあるのですか？』）

そして、CSSコード欄の一番下に、次のCSSコードをコピペします。

/* ヘッダーメニューバー */
.topmenu {
position: absolute;
margin: 0;
padding: 0;
}

.skin-blogSubA, .skin-blogSubB {
position: relative;
}

[data-uranus-layout="columnB"] .skin-blogSubA .topmenu,
[data-uranus-layout="columnC"] .skin-blogSubA .topmenu,
[data-uranus-layout="columnE"] .skin-blogSubA .topmenu,
[data-uranus-layout="columnB"] .skin-blogSubB .topmenu {
left: auto;
right: 0;
}

[data-uranus-layout="columnA"] .skin-blogSubA .topmenu,
[data-uranus-layout="columnD"] .skin-blogSubA .topmenu,
[data-uranus-layout="columnC"] .skin-blogSubB .topmenu {
left: 0;
right: auto;
}

[data-uranus-layout="columnE"] .skin-blogSubB .topmenu {
left: auto;
right: -360px;
}

.menu {
margin: 0;
padding: 0;
}

.menu:after {
display: block;
clear: both;
content: " ";
height: 0;
visibility: hidden;
}

.menu li {
display: block;
float: left;
margin: 0;
padding: 0;
text-align: center;
}

.menu li a {
display: block;
text-decoration: none;
}

.skin-blogBodyInner {
padding-top: 90px; /* メニューバーの表示場所確保 */
}

.topmenu {
top: -90px; /* メニューバーの上下位置調整 */
}

.menu {
width: 1120px; /* メニューバー横幅 */
background: #000000; /* メニューバー全体の背景色 */
}

.menu li a {
width: 224px; /* ボタンの横幅 */
line-height: 50px; /* ボタンの高さ */
color: #FFFFFF; /* 文字の色 */
background: #000000; /* ボタンの色 */
}

そうすると、私のもうひとつのブログと同じメニューバーの色合いができます↓

川上雄大・音楽活動ブログ

メニューボタンの色を変えるには、

background: #000000;

の色コードを変えてください。（ここでは黒色#000000になっています）

.menu li a {
width: 224px; /* ボタンの横幅 */
line-height: 50px; /* ボタンの高さ */
color: #FFFFFF; /* 文字の色 */
background: #000000; /* ボタンの色 */
}

そして、文字の色を変えたい場合は、

color: #FFFFFF;

の色コードを変えてください。（ここでは、白色#FFFFFFになっています）

.menu li a {
width: 224px; /* ボタンの横幅 */
line-height: 50px; /* ボタンの高さ */
color: #FFFFFF; /* 文字の色 */
background: #000000; /* ボタンの色 */
}

あとは、保存ボタンを押していただき、

（注意！もちろん、CSSを書き換える前には、メモ帳とかにバックアップしておいてくださいね！→『【重要】アメブロでデザインやレイアウトを変更する前に必ずチェック！』）

ご自分のブログを表示して、

更新（Windowsの方はF5キー、またはCtrl＋F5キーを、Macの方はCommand＋Rを押してください）

していただければ、OKです！

ちなみに、こちらのコードは、アメブロカスタマイズで有名な松本さんのこちらの記事を元にしております↓

詳しくはこちらの記事をご覧くださいませ！
（この方の記事はスゴイですから^^!!）

アメブロにグローバルナビを設置・表示するカスタマイズ方法

以上、アメブロカスタマイズでした。

LIDS札幌・ライフデザインスクール
川上雄大

囲み枠｜見出し付枠｜色コード｜メニューバー