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

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

 

アメブロの新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に移行してもうまくいかない理由

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

最新情報をお届けします

この記事を読んだ人はこちらの記事も読んでいます。