アメブロをホームページ風に 〜 ヘッダー作成編 〜

アメブロをホームページ風に

ヘッダーを作成しました。

《関連記事》

• 「macでメニューボタン作り」はこちら
• 「グローバルメニュー 1」はこちら
• 「グローバルメニュー 2」はこちら

ヘッダーをCanvaで作成

アメブロのヘッダー　横幅 1200px  縦幅 300〜400px

いろんな作り方があると思いますが、

私は、Canvaで作成してみました。

Canvaは、無料でもセンスのいいバナーが作れます。

Etsyショップ用カバーが横幅 1200px  縦幅 300px なので

そのまま使えます。

アメブロのヘッダーには、JPG,PNG,JIFが使用できるので、

今回は、JIFに挑戦！

 JIFは、複数の静止画を複数合わせた動画にしたものです。

JIF変換も色々とありますが、私は、こちら

写真を選択して、点滅の間隔を設定して終了

とても簡単！

私が作ったのは、こんな感じ。

丸のレースは、da-lace

素敵なレースの素材がたくさんあります。

作ったヘッダーをCSSに保存

※CSSは、「グローバルメニュー 1」を参考

1. ブログ管理のデザインの設定　CSS編集で

「ブログデザインヘッダ・背景用画像の追加」に先ほどの画像を追加

2. 「現在使用中のブログデザインCSS」に下記をコピペ

/* (3-2) ブログヘッダー

--------------------------------------------*/

/* ヘッダーの背景色とヘッダー画像を設定する */

.skin-bgHeader {

background: no-repeat scroll center;

background-color: 【背景色】;

background-image: url(＊); 

}

/* ヘッダーの横幅を設定する */

.skin-bgHeader [data-uranus-layout="headerInner"] {

width: 1200px;

}

/* ヘッダーの高さを設定する */

.skin-bgHeader [data-uranus-layout="headerInner"]>a {

height: 300px;

}

/* ブログタイトルと説明文を非表示にする */

.skin-headerTitle {

display: none;

}

url(＊)の＊に１のURLをコピペ

縦幅も作った画像に変更してください。

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

メールマガジン

「7日間で習得！ 今さら人には聞けないホリスティックケア」

人もペットにも使えるホリスティックケアをお伝えしています。

https://ssl.form-mailer.jp/fms/1e6a1449562611

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊