アメブロのヘッダーを
自分でオリジナルのヘッダーに設定しよう♡
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カラム・メニュー右
★適用ボタンクリック★
CSSに画像アップロード
CSSの編集をクリック▼
編集画面に変わったら
まずは
▼ファイルを選択▼
最初に準備しておいたオリジナルヘッダーを選んで
ダウンロードしたら
「アップロード」ボタンをクリックすると
下記のように反映されます
CSSの編集をクリック▼
編集画面に変わったら
まずは
▼ファイルを選択▼
最初に準備しておいたオリジナルヘッダーを選んで
ダウンロードしたら
「アップロード」ボタンをクリックすると
下記のように反映されます
CSS変更と追加
現在使用中のブログデザインCSSを
一番下までスクロール
スクロールしたら
下記コードをコピー
スクロールした一番下にペースト(貼り付け)
※ヘッダーの高さが400以外の場合
「height: 400px;」の青文字の数字を
デザインしたサイズに変更してください
現在使用中のブログデザインCSSを
一番下までスクロール
スクロールしたら
下記コードをコピー
/* ▼ヘッダー画像の設定▼*/
/* ヘッダー画像を設置 */
.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;」の青文字の数字を
デザインしたサイズに変更してください
画像URLを追加
また上にスクロールして画像部分まで戻り
画像のURLをコピー
▼この画像のパス▼
さきほど追加した
こちらのピンクの文字を消して
ヘッダー画像URLを入れる
これで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; }/*
▲ヘッダー画像の設定▲*/
こちらのピンクの文字を消して
ヘッダー画像URLを入れる
これでCSS編集は完了♡
まだ保存はしませんよ♡
コツコツ努力型の速水祥子♡関連記事