アメブロのヘッダーを
自分でオリジナルのヘッダーに設定しよう♡
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がおススメ♡
カスタムサイズから
アメブロヘッダーに合わせたサイズを
選択しましょう
ヘッダーをデザインするときは
BLOG内容をイメージしやすい画像
お仕事が伝わる言葉
場所や肩書、キャッチコピー
こういった文字を配置して
見やすくわかりやすく作ると
お客さまに伝わりやすいです♡
ヘッダー設置
気軽にやってみてくださいね♡
アメブロのマイページ→設定→デザインの設定
下にスクロールすると
カテゴリが出てきますので
この中から
「カスタム可能」を選択
カスタム可能なデザインの中
「CSS編集用デザイン」を選択
※「新CSS編集用」の設定方法なので
「旧CSS編集用」と間違えないようにしてください
３つの中からお好きなタイプを選んでください
おススメは真ん中のスタンダード♡
レイアウト設定
おススメは２カラム・メニュー右
★適用ボタンクリック★
CSSに画像アップロードCSSの編集をクリック▼
編集画面に変わったら
まずは
▼ファイルを選択▼
最初に準備しておいたオリジナルヘッダーを選んで
ダウンロードしたら
「アップロード」ボタンをクリックすると
下記のように反映されます
CSS変更と追加現在使用中のブログデザイン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; }/*
▲ヘッダー画像の設定▲*/
スクロールした一番下にペースト(貼り付け)
※ヘッダーの高さが４００以外の場合
「height: 400px;」の青文字の数字を
デザインしたサイズに変更してください
画像URLを追加また上にスクロールして画像部分まで戻り
画像の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編集は完了♡
まだ保存はしませんよ♡
CSSは必ず確認してから保存ヘッダーがきちんと反映されているか
プレビュー画面で確認します
保存を押してしまうと
もとに戻せなくなりますので
必ず「表示を確認する」をクリックして
きちんとできているか
見てから保存しましょう♡
※キャッシュが残っていると反映されない場合があります
お使いのパソコンによりますが
[設定]→ [プライバシー] - [閲覧履歴データを消去する]
[キャッシュされた画像とファイル]
[データを消去] でキャッシュが削除できます
アメブロにオリジナルのヘッダーが設置できると
まさに自分だけの空間♡
ブログを書くのが楽しくなります(*^^*)
アメブロのヘッダーは
パソコンからしか見られないので
もじスマホからもヘッダーを表示させたい場合は
こちらの記事を参考にしてみてくださいね♡
▼アメブロヘッダーをスマホで表示できる設定方法▼
コツコツ努力型の速水祥子♡関連記事
