PC苦手な人でも出来る！ヘッダーの作成方法

今日は久しぶりに

お役立ち記事を書こうと思います。

最近お役立ち記事

書けていなかったので

「教えて下さい」っていう

メッセージも頂いています。

これからはちょこちょこ

書くようにしますね

先日アメブロは

どこから見るかによって

見え方が違うというお話を

させて頂きました。

その時の記事がこちら

「ブログの見え方が違うって知っていますか」

アプリから見る方が

一番多いのですが

ビジネスをしている場合は

パソコンから見るって方も

多いんです。

ブログを見ていると

ブログカスタマイズって言葉

よく聞くと思うのですが

パソコン版のアメブロは

オリジナル性が高く

自分の好きなように

カスタマイズ出来る機能が

ついているんです。

オリジナル性があるブログは

やっぱり一目置かれるし

パッと見て素敵なブログに

なるんですよね

デザイナーさんに依頼するには

お金がない

でも素敵なブログにしたいって

思いますよね

そんな時あなたが自分で出来る

カスタマイズがあるんです。

今日はそれをご紹介しようと思います。

起業初期・安定した売上がまだないあなたへ
ブログを素敵に見せるコツのお話

自分で出来るカスタマイズ

それはヘッダーです。

ヘッダーとは

文章などの上にある部分でアメブロで言うと

ここになります。

これを自分で作成することが

出来ちゃいます

作成出来たら嬉しいし

愛着わきますよね～。

それでは早速やっていきましょう

STEP1

まずはヘッダーに使う画像を作成しましょう。

画像の大きさは縦300～500

横1120ピクセルで作ります。

ちなみにわたしのヘッダーは

縦400ピクセルで作っています。

縦幅イメージの参考にして下さいね

画像を作成する時はPowerPointや

無料ツールを使って作ると

キレイに作れますよ。

無料ツールだとCanva（キャンバ）

がおススメ

（こちらから登録すると1クレジットもらえますのでお得）

私もCanvaで10分くらいで

作っちゃいました(笑)

これが私が作った画像です。

STEP2

画像を作り終えてパソコンに保存したら

アメブロに設定していきます。

ホーム画面ブログ管理デザインの設定

の順にクリック

ヘッダーを設定出来るように

ブログデザインの変更をします。

上の画面になったら

下へスクロール（移動）していくと

こういう画面がでてきます。

四角で囲ってある

「カスタム可能」をクリックします。

カスタム可能デザインから

「CSS編集用デザイン」と書いてある

ものを選びましょう。

デザインを選んだら

表示を確認する適用するをクリック

下記の画面になったら

「CSSの編集をする」をクリック

ブログデザインの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;
}