新アメブロのカスタマイズ~オリジナルヘッダー画像設置~

オリジナルヘッダー画像設置

 

アメブロのヘッダー画像を自分だけのオリジナル画像に変えたいという方はこちら

 

これはアメブロの新しいスキン「css編集用デザイン」に対応しています。

今回のカスタマイズはオリジナルヘッダー画像を作成し、トップページへリンクをかけます。

オリジナルヘッダー画像設置

 

このようにオリジナルヘッダー画像を設置し、ヘッダー画像自体にトップページへリンクをかけます。

オリジナルヘッダー画像設置

 

まずヘッダー画像を作成する必要があります。

今回はこのような画像を作成しました。

ヘッダー画像

 

アメブロヘッダー作成にはこのようなサービスもありますので参考まで。

ブログのカスタマイズ、オリジナルヘッダー作成サービス 「ブログのかお」

 

それではカスタマイズ開始。

「ブログ管理」⇒「ブログデザイン」⇒「デザインの変更」⇒「CSSの編集」とクリック。

そしてヘッダー画像をアップロードします。

アメブロ管理画面

 

次にcss編集欄の一番下に、以下のタグをコピペで加えて保存します。

.skinHeaderArea{
height:300px; /* ヘッダー画像の高さ */
background-image: url(ここにヘッダー画像のURL);
background-repeat: no-repeat;
}

.skinTitleArea{
margin:0;
padding:0;
width:980px; /* ヘッダー画像の横幅 */
height:300px; /* ヘッダー画像の高さ */
}

.skinTitleArea a{
display:block;
width:980px;/* ヘッダー画像の横幅 */
height:300px;/* ヘッダー画像の高さ */
text-indent: -9000px;/* タイトル文字を消す */
overflow: hidden;
}

.skinContentsArea{
margin-top:15px;
}

赤字のところは作成したヘッダー画像によって異なるのでそれぞれ編集してください。

ちなみに横幅980pxはCSS編集用スキンを使用する場合のデフォルトサイズです。

アメブロカスタマイズ

 

これでカスタマイズ完了。

あなたのブログにオリジナルヘッダー画像が設置されます。

 

人気ブログランキングで今何位?

アメブロのヘッダー画像を無料で作成

  • このエントリーをはてなブックマークに追加

【PR】話題のラインスタンプを自分で作って販売する方法

ブログランキング応援していただけると嬉しいです↓

にほんブログ村 釣りブログ バスフィッシングへ にほんブログ村 釣りブログ 東海釣行記へ にほんブログ村 釣りブログへ

この記事の著者

kazushi釣りと生き物をこよなく愛するWEBデザイナー

釣りと焼酎が好きなWEBデザイナー。夜な夜な真っ暗な部屋で水槽を眺めながら呑んでいます。最近のマイブームはハンドメイドルアー制作。琵琶湖のほとりでひっそりとWEB制作事務所を営んでいます。

この著者の最新の記事

関連記事

カテゴリー

アーカイブ

インスタやってます

ページ上部へ戻る