アメブロのヘッダー&メニューバーを自分でカスタマイズする方法【webデザイン】

ameblo

 

女性起業家さんの情報発信によく利用されるアメーバブログ

そのアメブロのトップページにオリジナルのヘッダーを設定している人のブログを見かけることはありませんか?

  • 自分好みのヘッダーを設置したい
  • 自分の発信にプロ感を出したい
  • 自分の世界観を読者さんに伝えたい
  • でも自分でカスタマイズする方法がわからない・・・

そう思う人も少なくないはず

今回はプロに依頼しなくても、自分で簡単にアメーバブログのヘッダー&メニューバー&サイドバナーを設定する方法についてご紹介していきます

\ 私のアメブロのトップページがこちら /

アメブロヘッダー

普段触らない部分を編集していく必要があるので、苦手意識がある人も多いと思います

このブログの通りに実践してもらえると自分でカスタマイズすることが出来ますので是非参考にしてください^^

スポンサーリンク

アメブロのヘッダーについて

アメブロのヘッダーを設置する際に、気をつけるべきポイントが2つあるのでご紹介します

  • アメブロのヘッダーはPCのみ表示されます
    ※スマホには表示されないのでご注意ください
  • ヘッダーサイズはアメブロ推奨は、横=1120、高さ=400〜600
    (ちなみに私は1120×500で作ることが多いです)

 

まずは自分好みのヘッダーを作成してから設置をしていきましょう!

 

ノンデザイナーでもオシャレなヘッダー画像を制作するにはcanvaがおすすめ!

アメブロのヘッダーを設置する方法

では早速アメブロのヘッダーを設置する方法について解説していきます!

アメブロのデザインを設定する

ブログ管理のトップ画面→「デザインの設定」

デザインの設定

「デザインの設定」→デザイン変更のカテゴリーから「カスタム可能」

カスタム可能を選択

「CSS編集用デザイン」から好きなレイアウトを選ぶ

CSS編集用デザインを選択

おすすめは赤枠で囲った真ん中のレイアウトです

カラムを選択して→「適応」

カラムの選択

私のオススメは「2カラム・メニュー右」です


ここまでで、一旦デザインの設定は完了です。

ヘッダーの設置

ここから実際にCSSを触ってヘッダー画像を設置していきます

「ブログ管理」→「デザインの設定」→「CSSの編集」

CSSの編集

ブログデザインのCSSの編集という画面になるので、

「ファイル選択」→ヘッダーに設置したい画像を選択→「アップロード」

ファイルを選択

そうするとアップロードされた画像ファイルが下に読み込まれています

「この画像のパス」をコピーしておきます

画像パスをコピー

CSSの編集をする

下記のコードをコピペする


こちらのコードをコピペして使用します

/* -----------ここからヘッダー画像の設定-------------*/

/* ヘッダー画像を設定する */
.skin-bgHeader {
background: no-repeat scroll center top;
background-image: url(画像パスここ);
}
/* ヘッダーの高さを設定する */
.skin-bgHeader [amb-layout="headerInner"]>a,
.skin-bgHeader [data-uranus-layout="headerInner"]>a {
height: 500px;
}
/* ブログタイトルと説明文を非表示にする */
.skin-headerTitle {
display: none;
}
/*ヘッダー画像の設定ここまで*/

CSSの編集画面を1番下までスクロールして、最後に貼り付けましょう

上記のコードを1番下に貼り付けるだけでOK!

「ここにヘッダー画像のURLを貼り付けます」の部分に先ほどコピーしておいた「ヘッダー画像のパス」を貼り付け

画像パスをコピー

↑画像パスはここ

↓それをここに貼り付け

「表示を確認する」からプレビュー画面を開き、表示を確認

問題なければ「保存」をクリック

これでヘッダーの設置は完了です!!!お疲れ様でした!!!

 

最後に自分のブログを開いてちゃんと設置・表示できているか確認してみてくださいね^^

メニューバーについて

ヘッダーが設置できたら次はベニューバーを設置していきましょう

メニューバーは先ほど設置したヘッダー画像の下に表示されます

\ こんな感じ /

リンクを設定できるのは5コンテンツ

自分が何を提供している人なのかをわかりやすくまとめてあげるのがポイント

おすすめのリンク先

  • プロフィール
  • サービス内容やサービス一覧
  • 今までの実績やお客様の声
  • お問い合わせフォーム(公式LINE)

メニューバーを設置する方法

メニューバーを設置するには、サイドバーの配置設定でフリースペースを確保する必要があります

フリースペースの設定

ブログ管理→「設定・管理」→「配置設定」

※初期設定では「フリースペース」が「使用しない機能」に振り分けられています

「配置管理」→「フリースペース」を「使用する機能」へドラッグ&ドロップ

「フリースペース」が「使用する機能」へ移動したら→「保存」

これでフリースペースの確保はOKです

メニューバーのタグを入れる

まずはフリースペースにHTMLタグを記入します

「設定・管理」→「フリースペース編集」

下記タグをコピー→「フリースペース」に貼り付け

\ こちらをコピーして使ってください /

<div class="nav-menubar"><nav><ul class="nav-menu"><li><a href="URLを挿入"><span>プロフィール</span></a></li><li><a href="URLを挿入"><span>サービス一覧</span></a></li><li><a href="URLの挿入"><span>お客様の声</span></a></li><li><a href="URLを挿入"><span>実績紹介</span></a></li><li><a href="URLを挿入"><span>お問い合わせ</span></a></li></ul></nav></div>

挿入するときに注意

「URLを挿入」の部分に、リンクしたい先のURLを貼り付け

今は仮で「プロフィール」「サービス一覧」などを入れていますが、任意のメニュー名に変更

URL名とメニュー名を変更できたら→保存

一旦ここまででタグの挿入は完了です

次はCSSの設定に移っていきます!

もうひと頑張り!!

CSSを編集する

CSSで先ほどフリースペースに貼り付けたメニューを装飾していきます

「デザイン設定」→「CSSの編集」→ボックスの1番下までスクロール

先ほどヘッダーを設置するために貼り付けたコードの下までスクロールしてください

下記コードをコピー→ボックスの1番下に貼り付ける

\ このままコピーして貼り付け /

/* -----------ここからメニューバーの設定------------*/


/* メニューバー基本 */
.nav-menubar {
position: absolute;
margin: 0;
padding: 0;
}
.skin-blogSubA, .skin-blogSubB {
position: relative;
}
.skin-columnB .skin-blogSubA .nav-menubar,
.skin-columnC .skin-blogSubA .nav-menubar,
.skin-columnE .skin-blogSubA .nav-menubar,
.skin-columnD .skin-blogSubB .nav-menubar {
left: auto;
right: 0;
}
.skin-columnA .skin-blogSubA .nav-menubar,
.skin-columnD .skin-blogSubA .nav-menubar,
.skin-columnC .skin-blogSubB .nav-menubar {
left: 0;
right: auto;
}
.skin-columnE .skin-blogSubB .nav-menubar {
left: auto;
right: -360px;
}
.nav-menu {
margin: 0;
padding: 0;
}
.nav-menu:after {
display: block;
clear: both;
content: "_";
height: 0;
visibility: hidden;
}

.nav-menu li {
display: block;
float: left;
margin: 0;
padding: 0;
text-align: center;
}
.nav-menu li a {
display: block;
text-decoration: none;
}
.nav-menu {
width: 1120px; /* メニューバーの横幅 */
background: #e8a8a9; /* メニューバーの背景色(桃花色) */
font-weight:bold;  /*太字 */
}
.nav-menu li a {
width: 222px; /* メニューバー1つの横幅 */
line-height: 60px; /* メニューバーの高さ */
margin:0;  /*メニューの隙間*/
border:1px solid #ffffff;/*線の太さ 種類 色を指定[1px 直線 ]*/
color: #ffffff; /* 文字の色 [白]*/
}
.skin-bgHeader {
padding-bottom: 67px; /* メニューバーの表示場所確保 */
}
.nav-menubar {
top: -180px; /* メニューバーの上下位置調整 */
}

/* メニューバーのデザイン(マウスオーバー時) */
.nav-menu li a:hover{ /*カーソルが乗っている箇所*/
  color:#ffffff;     /*文字色(白)*/
  font-weight:bold;  /*太字 */
  text-decoration:underline;/*下線(有)*/
  background-color:#eebbcb; /*背景色(撫子色)*/
}


/* -----------ここまでがメニューバーの設定------------*/

「表示を確認する」→プレビュー画面を確認し、ちゃんと表示できているか確認

確認してOKなら→「保存」

これでメニューバーの設置も完了です!

メニューの色を好きな色に変えるときは
background: #ff1493; /* メニューバーの背景色 */
「#」の後ろ6桁の数字を変えることで好きな色に変更することが可能です

文字色やカーソルが当たっている時の背景色、文字色も同様に変更することができます

 

スポンサーリンク
タイトルとURLをコピーしました