アメブロ　ヘッダーに動きのあるGIFを入れる方法

INDEX（PCのみリンクジャンプします）
1.ヘッダーに動きのあるGIFを入れる方法
2.挿入する元画像を作る方法
3.Gif制作　無料オンラインアプリの紹介と方法
4.アメブロヘッダーにGifを挿入
5.注意点

1.ヘッダーに動きのあるGIFを入れる方法

只今、アメブロリメイク中です(;^ω^)

昨夜ヘッダーに動きのあるGIFを

入れてみたのでその方法をお伝えします

Photoshopなどのソフトで作ると

一枚一枚の切り替わりがもっとなめら

なのですが、今回は特別な技術もいらず

無料で出来る方法をお伝えします

使ったのはオンラインアプリ２つだけです

ではご覧ください。

2.挿入する元画像を作る方法

Canvaなどの画像加工アプリで

縦1120×横（300～400）の画像数枚を作ります。

これは画像加工アプリならどれでも大丈夫ですが、

私がCanvaを使う理由は、サイズ設定が楽だからです。

（Canvaの例）

ここに数字を入れてサイズを合わせます。

後は写真を選び文字を入れていき保存します。

この時にZiｐで保存されるので

開く時には展開または

入れたいフォルダがある場合は

参照をクリックして入れたいフォルダに保存してください

3.Gif制作　
無料アプリの紹介と方法

私はこちらのオンラインアプリを使いました。
https://www.bannerkoubou.com/

右上の白い３本線をクリックすると

画像加工と編集

GIFアニメ作成👈これを選ぶ

GIF再編集
GIFアニメのサイズ縮小
QRコード作成
バナー作成

が表示されます。

あとは、サイトに書いてある順に従い、
画像の切り替わり時間を設定し

完成です。

出来上がりはパソコンの中にダウンロード♪

4.アメブロヘッダーにGIFを挿入

次はアメブロのヘッダーに作ったGifを挿入する方法です。

【デザインを変更する手順】

アメブロ・ブログの管理からデザインの設定画面

カスタム可能なデザインから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: ヘッダーの高さ（300～400の任意の数字）px; } /* ブログタイトルと説明文を非表示にする */ .skin-headerTitle { display: none; }