Embed Size (px)
Citation preview
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 を編集できる部分が
あります。
上記の 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/
まず「新しい画像を作成」からヘッダーの土台となるキャンバスを作ります。
「新しい画像」の幅と高さを手入力します。
ブログ幅が 980px の場合は 980px を、高さは 300px 選択してください。
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; /*メニューエリア背景色*/
}
※赤文字部分の数字を変更することで、位置を調整します。
以上で、アメブロのヘッダー画像設定と、メニューバーの設定が完了となります。
ぜひ、アメブロを上手くカスタマイズして、成果に繋げてくださいね。
何かあれば、[email protected]（和田）まで、ご連絡ください。
それでは、引き続き、よろしくお願いします。
