• WordPress
    初心者向け!WordPress日本語無料テーマ5選
    2016年12月27日
  • ウェブサービス
    ハンドメイド作家さんに朗報!ココナラハンドメイドがこの春オープン
    2017年3月9日
  • WordPress
    おすすめのレンタルサーバー比較
    2017年9月10日
  • 撮影
    撮影に便利そう!折り畳み撮影ボックスを発見
    2017年1月23日
  • ウェブサービス
    ママ向け在宅&アルバイト求人サイト「mama works」
    2017年1月25日
  • ホームページ
    ホームページサービスはどれを使えばよい?
    2017年2月16日
  • ウェブサービス
    カンタンに自分でバナーやヘッダーが作れる!バナープラス
    2017年9月8日
  • ホームページ
    グーペは、お店やお教室のホームページにぴったりのサービス
    2017年6月21日

アメブロカスタマイズをしたいと思ったら、第一歩はヘッダーの設置!

 

アメブロの新CSS編集デザイン用のヘッダーの設置方法は簡単にできますよ。

ということで、早速ヘッダー画像の入れ方をお伝えします。

アメブロカスタマイズ ヘッダー画像の入れ方

その前に、ブログのヘッダーを作ります。

 

ヘッダーのサイズですが、横は1120px、縦は自由です。 ただし、350px以上あった方が見栄えが良いかと思います。

 

ヘッダーの部分全体にデザインを設定するのであれば横は2000px、縦は自由で設定します。 (解像度が異常に広いPCの場合は厳しいですが…)

作り終わったら、設置をします。

管理画面→デザインの変更から、新デザインに対応したCSS編集用デザインを選択します。

丸が付いているものが、新デザインのものです。 その隣のリストタイプのものも新CSSなので使えますよ。

 

ブログのヘッダーデザインをアップ。 この画像のパスというところに、画像のURLがアップされますので、あとでコピーして貼り付けます。

CSS編集デザインに記載されているCSSタグの一番最後に下記を入れます

/* ヘッダーの背景色とヘッダー画像を設定する */
.skin-bgHeader {
background: no-repeat scroll center;
background-color: 【背景色】;
background-image: url(*);
}
/* ヘッダーの横幅を設定する */
.skin-bgHeader [data-uranus-layout="headerInner"] {
width: 1120px;
}
/* ヘッダーの高さを設定する */
.skin-bgHeader [data-uranus-layout="headerInner"]>a {
height: ヘッダーの高さを入れるpx;
}
/* ブログタイトルと説明文を非表示にする */
.skin-headerTitle {
display: none;
}

 

こちらを入力します。 background-image: url();のところに、先ほどアップされた画像のパスのURLを入れてください。 ヘッダーの高さは作ったヘッダーの高さに合わせて入力してください。

設置例

こんな感じで設置されました。

 

ヘッダー部分全体で設定する場合は、こんな感じです。

 

カンタンなので、ヘッダー画像がある方はぜひお試しください!

 


 

アメブロカスタマイズ講座をリリースしました。
テンプレートを元にカンタンにアメブロをカスタマイズ可能です♪

 

詳しくはこちらから

関連キーワード
ブログの関連記事
  • オシャレ&カンタンに作れるヘッダー画像の作り方のコツ
  • 起業ブログ、アメブロとWordPressはどちらを使う?
  • <重要>アメブロテンプレート&アメブロカスタマイズ講座をご購入の方へ
  • アメブロ Perfect GuideBook 改訂第3版が4月27日に発売
  • アメブロのアクセス数と実際のPVの差は?
  • アメブロからWordPressに移行してもうまくいかない理由

この記事が気に入ったら
フォローしよう

最新情報をお届けします

おすすめの記事
ウェブサービス
登録不要で画像加工が出来るサイトバナー工房というサイトを見つけました。 レポしてみます。 Contentsバナー工房で画像編集!画像加工をし...
ウェブサービス
ホームページやブログは、どこからアクセスがあるのか? スマホとPCどちらが多いのか?エリアはどこの地域が多いのか? 現状をきちんと知るための...