Copyright ExWill Partners co.,Ltd. All Rights Reserved.
アメブロ
Copyright ExWill Partners co.,Ltd. All Rights Reserved. 本資料では、アメブロのヘッダー画像とメニューバーの設定をご自身で行っていただくた めのものです。
＜目次＞
１． ヘッダー画像の設定方法
１－１：自分の指定した画像をヘッダー画像に設定方法 １－２：自分で簡単なヘッダー画像を作成する方法２． メニューバーの設定方法
２－１：フリースペースへ メニューバーのHTML コードを設定 ２－２：CSS の追加Copyright ExWill Partners co.,Ltd. All Rights Reserved.
●１．ヘッダー画像の設定方法
１－１：自分の指定した画像をヘッダー画像に設定方法 まず、アメブロにおいて、ご自身でアレンジしたヘッダー画像を設定するためには、CSS を 編集する必要があります。 CSS を編集するためには、マイページにいき、 「アメーバのサービス一覧」⇒「デザインの変更」で、「カスタム可能」デザインから、「CSS 編集用デザイン」を選択してください。 ※ただし、既に、デザインを変更すると、それまでのCSS 変更内容は全て失われます。 変更の際には、十分にご注意ください。 既に、CSS の編集を行っている方は、必ずバックアップを取ってから、編集を行うように してください。Copyright ExWill Partners co.,Ltd. All Rights Reserved. 次に、下記の図のようなページに移りますので、お好きなレイアアウトを選択してくださ い。 基本的には、人は、左から見る傾向があるので、「３カラム・左ワイドメニュー」がオス スメです。 その後、下記の「CSS の編集」を選択してください。
Copyright ExWill Partners co.,Ltd. All Rights Reserved. 次に、下記のようなページに移りますので、 「横300px×縦 980px」の画像を「ファイルを選択」から選び、右側の「アップロード」を 選択してください。 ※本来は、画像のサイズを変更できますが、複雑な説明を省くために、適切なヘッダー画像 サイズを指定させていただいております。 また、後のほど、簡単なヘッダー画像を無料で作成できるツールをご紹介します。 そうすると、画像一覧の中に、ヘッダー画像に指定したい画像が表示されるようになります。
Copyright ExWill Partners co.,Ltd. All Rights Reserved.
次に、同ページにおいて、下へスクロールすると、下記のようなCSS を編集できる部分が あります。
Copyright ExWill Partners co.,Ltd. All Rights Reserved. ＝＝＝
/*【ヘッダー】*/
/*ヘッダー画像*/
.skinHeaderArea {
background:url(画像の URL) no-repeat bottom; /*画像*/
height: 300px; /*画像の高さ*/
margin-bottom:10px;/*画像下のマージン*/
}
/*【タイトル画像化の場合】*/
/*ブログタイトル、説明文位置初期化*/
h1.skinTitleArea,h2.skinDescriptionArea{
margin:0; /*マージン*/
padding:0; /*余白*/
}
/*ヘッダー画像のリンク設定*/
h1.skinTitleArea a{
width:980px;/*画像の横幅*/
height:300px;/*画像の高さ*/
display:block; /*表示設定*/
position:absolute; /*位置設定*/
text-indent:-9999px; /*ブログタイトルを隠す*/
}
/*ブログ説明文を非表示*/
h2.skinDescriptionArea{
display:none; /*表示設定*/
}
/*ヘッダー広告下の余白をなくす*/
div.headerBnrArea{
padding-bottom:0px;
}
＝＝＝Copyright ExWill Partners co.,Ltd. All Rights Reserved. そして、黄色く塗りつぶした「画像のURL」と記載された部分に、ヘッダー画像に指定し たい画像のURL を貼り付けてください。 画像のURL は、下記の赤丸部分から、指定したい画像の URL をコピーしてください。 上記の設定が完了しましたら、下記の「保存」を選択し、ご自身のブログを確認してみてく ださい。
Copyright ExWill Partners co.,Ltd. All Rights Reserved. １－２：自分で簡単なヘッダー画像を作成する方法 ご自身で、簡単なヘッダー画像を制作したいという場合は、下記の「Pixlr」という無料の 画像作成ツールをオススメしています。 無料の割には、機能性が高く、品質の高い画像を制作することが可能です。 Pixlr：http://pixlr.com/editor/
ご利用には Abobe Flash Player10 が必要です。
こちらも無料ですのでダウンロードし、インストールしておいてください
http://get.adobe.com/jp/flashplayer/
まず「新しい画像を作成」からヘッダーの土台となるキャンバスを作ります。 「新しい画像」の幅と高さを手入力します。
Copyright ExWill Partners co.,Ltd. All Rights Reserved. ここまで準備が整いましたら、下記の動画で細かい画像編集についてお伝えしていますの で、ご覧ください。 ●＜動画解説＞ ヘッダーの簡単な作り方 http://www.youtube.com/watch?v=jfWKWWnwspA ※幅980px で解説しています。 ●＜動画解説＞ 文字に縁をつける http://www.youtube.com/watch?v=KYVMUSJXMK8 ●＜動画解説＞ 画像の縁をぼかす http://www.youtube.com/watch?v=UtPL_LKhIzk ●<動画解説> 人物を切り抜く http://www.youtube.com/watch?v=tRt5hK9FKWU ●＜動画解説＞ 画像に効果をつける http://www.youtube.com/watch?v=hcEyyTbDCOE
Copyright ExWill Partners co.,Ltd. All Rights Reserved.
●２．メニューバーの設定方法
下記の青丸部分のようなメニューバーの設置方法について、お伝えします。 メニューバーの設定については、 １．フリースペースへ メニューバーのHTML コードを設定 ２．CSS の追加 の２段階の作業があります。 今回は、５項目のメニューを作成する方法をお伝えします。Copyright ExWill Partners co.,Ltd. All Rights Reserved. ２－１：フリースペースへ メニューバーのHTML コードを設定 まずは、下記の黄色く塗られている「リンクURL」の部分に、リンク先の URL を、 緑色に塗られている「メニュー●」の部分に、ブログのメニューバーに表示する文字を入力 してください。上から順に、実際のブログでは左から並んでいきます。 ＝＝＝
【メニューバー】
※編集後 1 行にしてフリースペースに挿入
<div id="headermenu">
<ul>
<li><a href="リンク URL" class="menu1">メニュー1</a></li>
<li><a href="リンク URL" class="menu2">メニュー2</a></li>
<li><a href="リンク URL" class="menu3">メニュー3</a></li>
<li><a href="リンク URL" class="menu4">メニュー4</a></li>
<li><a href="リンク URL" class="menu5">メニュー5</a></li>
</ul>
</div>
Copyright ExWill Partners co.,Ltd. All Rights Reserved.
（サンプル）
＝＝＝
<div id="headermenu">
<ul>
<li><a href="
http://exwill.jp/lp/7step_lp/" class="menu1">
Web 集客無料
ノウハウ</a></li>
<li><a href="
http://exwill.jp/shishijyuku/profile/" class="menu2">塾長
プロフィール</a></li>
<li><a href="
http://exwill.jp/shishijyuku/voice/dokuritukaigyou/"
class="menu3">卒業生の声</a></li>
<li><a href="
http://www.facebook.com/dokuritu.kaigyou" class="menu4">
Facebook</a></li>
<li><a href="
http://exwill.jp/lp/kaigyou/" class="menu5">独立開業セミ
ナー</a></li>
</ul>
</div>
Copyright ExWill Partners co.,Ltd. All Rights Reserved. 次に、上記の設定が完了した後に、メニューバーのソースをコピーし、マイページから「フ リースペース編集」で、ソースを貼り付けます。 貼り付け後、ソースを１行にしてください。 ※ページの関係で改行されて見えますが、1 行にしています。URL は例です。 最初の <div id … から 最後の </div> までが 1 行ということです。 改行が入ってしまうと正しく表示されません。
Copyright ExWill Partners co.,Ltd. All Rights Reserved.
最後に、マイページからサイドバーの「配置設定」を選択し、下記のように「フリースペー ス」を左側の欄に移動してください。
Copyright ExWill Partners co.,Ltd. All Rights Reserved. ２－２： CSS の追加
まずは、マイページから「デザインの変更」⇒「CSS の編集」を選択してください。
次に、ヘッダー画像を設定した時と同じように、下記のようなページに移りますので、 CSS を編集できる部分へ移動してください。
Copyright ExWill Partners co.,Ltd. All Rights Reserved. 上記のCSS を編集できる部分の最下部に、下記のソースを張り付けてください。 ＝＝＝
/*【メニューバー】*/
/*基準調整*/
.skinFrame{
position:relative;
}
/*メニューエリア*/
#headermenu{
position:absolute;
width:980px;
margin:0;
padding:0;
height:40px; /*メニューエリアの高さ*/
top:300px; /*●画面上からの位置*/
}
/*メニューリストグループ*/
#headermenu ul {
width:980px;
padding:0;
margin:0;
}
/*メニューリスト*/
#headermenu ul li {
float:left;
width:196px;
height:40px
}
/*メニューリストリンク*/
#headermenu ul li a{
font-size:15px;
font-weight:normal;
color:#FFFFFF; /*●文字色*/
background-color:#333333; /*●背景色*/
黄色く塗りつぶしてい る部分が、マウスを乗 せていない状態（通常 時）の文字色と背景色 を変更する部分です。 カラーコードを参考 に、色を調整してくだ さい。Copyright ExWill Partners co.,Ltd. All Rights Reserved.
display:block;
text-decoration:none; /*項目の文字装飾*/
text-align:center; /*項目の文字寄せ位置*/
line-height:40px;
}
/*メニューリストリンク マウスオーバー時*/
#headermenu ul li a:hover{
color:#000000; /*●文字色*/
background-color:#FFFFFF; /*●背景色*/
display:block;
text-decoration:none; /*項目の文字装飾*/
text-align:center; /*項目の文字寄せ位置*/
}
/*メニュー下の位置下げ*/
.skinContentsArea{
padding-top:40px!important;
}
/*メニューバー縦線*/
#headermenu ul li a.menu1,
#headermenu ul li a.menu2,
#headermenu ul li a.menu3,
#headermenu ul li a.menu4{
border-right:1px solid #FFFFFF;
}
＝＝＝ 上記の設定が完了しましたら、下記のカラーコードを参考にして、「文字色」と「背景色」 を変更してみてください。 ソースの黄色く塗られている部分が変更箇所です。好きな色のカラーコードを置き換えて みてください。 カラーコード：http://www5.plala.or.jp/vaio0630/hp/c_code.htm 黄色く塗りつぶしてい る部分が、マウスを乗 せている状態の文字色 と背景色を変更する部 分です。 カラーコードを参考 に、色を調整してくだ さい。Copyright ExWill Partners co.,Ltd. All Rights Reserved. ◆ヘッダー画像の上に重なってしまった場合 CSS で追加した /*メニューエリア*/ #headermenu{ position:absolute; width:980px; margin:0; padding:0; height:40px; /*メニューエリアの高さ*/ top:200px; /*画面上からの位置*/ ← この数字を変更します background-color:#664332; /*メニューエリア背景色*/ } ※赤文字部分の数字を変更することで、位置を調整します。 以上で、アメブロのヘッダー画像設定と、メニューバーの設定が完了となります。 ぜひ、アメブロを上手くカスタマイズして、成果に繋げてくださいね。 何かあれば、wada@exwill.jp（和田）まで、ご連絡ください。 それでは、引き続き、よろしくお願いします。
