自分でアメブロのヘッダーを作りたい！
無料でヘッダーが欲しい！
そんな方は
無料デザインアプリcanvaを使って
ヘッダーを自分で作りましょう♡
この記事でわかること- アメブロヘッダーサイズ
- canva登録方法
- テンプレートを使ったヘッダー作成
- ヘッダータイトルのつけ方
- ヘッダー設置方法
まず初めに
アメブロのヘッダーサイズを決めます♡
アメブロヘッダー基本サイズ
新CSS→横１．１２０px × 縦４００px
旧CSS→横９８０px× 縦４００px
※カスタム可能デザインでないとヘッダーは設置できません
縦の長さなどサイズは調節はできるけど
基本のこのサイズが一番見やすい(*^^*)
選ぶのに迷う方はピンク枠の中にある
新CSSの
真ん中のデザインがオススメ♡
Canva（キャンバ）
PCのかた▸ PCサイト
作成からそのままブログ設置まで
やりたい方はPCサイトがオススメ♡
canvaトップページにアクセスし
画面右側にある
「カスタムサイズ」を選択
こちらにヘッダーサイズ
新CSS→横１．１２０px × 縦４００px
「新しいデザインを作成」をクリック
これで準備はOK♡
画像を入れたり
文字を入れるのですが
白紙の状態から作るのが難しいかたは
canvaの左上にあるテンプレートから
「banner」で検索すると
サイズなどが合う使いやすい画像が出てきます♡
好きな画像や写真を探して
サイズを合わせてもOK！！
今回は
こちらのお花の画像のデザインを使って
オリジナリティをだすため
はやみずしょうこの写真を差し替えて
枠を広げて文字挿入♡
▼あっというまにヘッダーできあがり▼
アメブロのヘッダーを作るときに
悩むのがタイトルや言葉ですよね
CSSデザインでのヘッダーは
基本設定のブログタイトルやブログ紹介文と違い
検索キーワードなどには全くひっかからないので
あなたの想いが伝わるタイトルにしましょう♡
- あなたが何をしているのか
- ブログで伝えたいこと
- サロンの場合は地名や場所
- パッと見た時に意味がわかる
この４つを意識して考える
CSS編集画面を開いて
下記コードと画像URLを一番下に追加
/* ヘッダー画像を設置 */
.skin-bgHeader {
background: no-repeat scroll center top;
background-image: url(ヘッダー画像のURL);
} /* ヘッダーの高さを設定 */
.skin-bgHeader a {
height: 400px;
} /* ブログタイトルと説明文を消す */
.skin-headerTitle { display: none; }/*
▲ヘッダー画像の設定▲*/
▼スマホでもヘッダーを見せる方法▼
オリジナルのヘッダーがつくと
ブログを開くのがワクワク楽しくなります♡
オリジナリティが輝く
自分だけのブログを育てて
あなたの魅力を魅せていきましょう(*^^*)
