アメブロのヘッダーを
自分でオリジナルのヘッダーに設定しよう♡
CSSに下記コードと画像URLを追加するだけなので
ぜひ活用してください♡
/* ▼ヘッダー画像の設定▼*/
/* ヘッダー画像を設置 */
.skin-bgHeader {
background: no-repeat scroll center top;
background-image: url(ヘッダー画像のURL);
} /* ヘッダーの高さを設定 */
.skin-bgHeader a {
height: 400px;
} /* ブログタイトルと説明文を消す */
.skin-headerTitle { display: none; }/*
▲ヘッダー画像の設定▲*/
/* ヘッダー画像を設置 */
.skin-bgHeader {
background: no-repeat scroll center top;
background-image: url(ヘッダー画像のURL);
} /* ヘッダーの高さを設定 */
.skin-bgHeader a {
height: 400px;
} /* ブログタイトルと説明文を消す */
.skin-headerTitle { display: none; }/*
▲ヘッダー画像の設定▲*/
オリジナルヘッダー準備
アメブロのヘッダーは
あなたのブログを見た時に一番最初に目に入る
いわば看板♡
ヘッダーを作るときは
Webデザイン作成ツール
canvaがおススメ♡
カスタムサイズから
アメブロヘッダーに合わせたサイズを
選択しましょう
ヘッダーをデザインするときは
こういった文字を配置して
見やすくわかりやすく作ると
お客さまに伝わりやすいです♡
ヘッダー設置
気軽にやってみてくださいね♡
アメブロのマイページ→設定→デザインの設定
下にスクロールすると
カテゴリが出てきますので
この中から
「カスタム可能」を選択
カスタム可能なデザインの中
「CSS編集用デザイン」を選択
※「新CSS編集用」の設定方法なので
「旧CSS編集用」と間違えないようにしてください
3つの中からお好きなタイプを選んでください
おススメは真ん中のスタンダード♡レイアウト設定
おススメは2カラム・メニュー右
★適用ボタンクリック★
![](https://stat.ameba.jp/user_images/20210502/14/iroaiiroai/55/b7/p/o0016001614935415044.png?caw=800)
CSSの編集をクリック▼
![](https://stat.ameba.jp/user_images/20210524/09/iroaiiroai/5a/2b/j/o0344012814946636775.jpg?caw=800)
編集画面に変わったら
まずは
▼ファイルを選択▼
![](https://stat.ameba.jp/user_images/20210524/09/iroaiiroai/44/2b/j/o0857010214946637132.jpg?caw=800)
最初に準備しておいたオリジナルヘッダーを選んで
![](https://stat.ameba.jp/user_images/20210524/11/iroaiiroai/eb/cc/p/o1120040014946686208.png?caw=800)
ダウンロードしたら
「アップロード」ボタンをクリックすると
下記のように反映されます
![](https://stat.ameba.jp/user_images/20210524/09/iroaiiroai/e9/ba/j/o0548050514946636966.jpg?caw=800)
![](https://stat.ameba.jp/user_images/20210502/14/iroaiiroai/55/b7/p/o0016001614935415044.png?caw=800)
現在使用中のブログデザインCSSを
一番下までスクロール
![](https://stat.ameba.jp/user_images/20210524/12/iroaiiroai/d8/be/j/o1500160014946689756.jpg?caw=800)
スクロールしたら
下記コードをコピー
/* ▼ヘッダー画像の設定▼*/
/* ヘッダー画像を設置 */
.skin-bgHeader {
background: no-repeat scroll center top;
background-image: url(ヘッダー画像のURL);
} /* ヘッダーの高さを設定 */
.skin-bgHeader a {
height: 400px;
} /* ブログタイトルと説明文を消す */
.skin-headerTitle { display: none; }/*
▲ヘッダー画像の設定▲*/
/* ヘッダー画像を設置 */
.skin-bgHeader {
background: no-repeat scroll center top;
background-image: url(ヘッダー画像のURL);
} /* ヘッダーの高さを設定 */
.skin-bgHeader a {
height: 400px;
} /* ブログタイトルと説明文を消す */
.skin-headerTitle { display: none; }/*
▲ヘッダー画像の設定▲*/
スクロールした一番下にペースト(貼り付け)
※ヘッダーの高さが400以外の場合
「height: 400px;」の青文字の数字を
デザインしたサイズに変更してください
![](https://stat.ameba.jp/user_images/20210502/14/iroaiiroai/55/b7/p/o0016001614935415044.png?caw=800)
また上にスクロールして画像部分まで戻り
画像のURLをコピー
▼この画像のパス▼
![](https://stat.ameba.jp/user_images/20210524/12/iroaiiroai/10/e3/p/o1500160014946692603.png?caw=800)
さきほど追加した
/* ▼ヘッダー画像の設定▼*/
/* ヘッダー画像を設置 */
.skin-bgHeader {
background: no-repeat scroll center top;
background-image: url(ヘッダー画像のURL);
} /* ヘッダーの高さを設定 */
.skin-bgHeader a {
height: 400px;
} /* ブログタイトルと説明文を消す */
.skin-headerTitle { display: none; }/*
▲ヘッダー画像の設定▲*/
/* ヘッダー画像を設置 */
.skin-bgHeader {
background: no-repeat scroll center top;
background-image: url(ヘッダー画像のURL);
} /* ヘッダーの高さを設定 */
.skin-bgHeader a {
height: 400px;
} /* ブログタイトルと説明文を消す */
.skin-headerTitle { display: none; }/*
▲ヘッダー画像の設定▲*/
こちらのピンクの文字を消して
ヘッダー画像URLを入れる
![](https://stat.ameba.jp/user_images/20210524/12/iroaiiroai/1c/3e/j/o0481035814946695386.jpg?caw=800)
これでCSS編集は完了♡
![](https://stat.ameba.jp/user_images/20210524/11/iroaiiroai/eb/cc/p/o1120040014946686208.png?caw=800)
まだ保存はしませんよ♡
コツコツ努力型の速水祥子♡関連記事