パソコンのアメブロヘッダーを好きな写真に変えたいなぁと常日頃から思ってて、次また画像変えるときに忘れないよう残しておこう。
なお、こんな面倒なことしなくてもブログ管理からデザイン変更は簡単に出来ます
めっちゃ可愛い画像やデザインがいっぱいあります。
手順① 画像を選ぶ、編集する
好きな画像（写真やイラスト）のスクショを撮る。またはパソコンに取り込む。
大きさはあまり気にしない。
画像をアメブロヘッダーの大きさに合わせれるようcanvaというフリーツールで加工する。
ほかにもあると思いますが知らないのでこれでいきます。
これ、有料もありますが無料でも使えます。今回私も初めて使いました。
グーグルで検索してサイトに飛んだら勝手にグーグルアカウントでログインしてた。なんか怖いわ。
カスタムサイズの赤い矢印をクリック。ヘッダーは大きさ決まってるのでこういうツールで編集しないと切れてしまうらしい。
大きさは以下の通り。1120x400。
で、〈新しいデザインを作成〉をクリック。
そうすると以下の画面に切り替わる。
この赤い矢印（うまく書けませんでした）をクリック、アップロードする。
下記の画面になるから紫の〈ファイルをアップロード〉をクリックすると、多分スクリーンショットの画面になるのでそこから先ほど自分で撮った画像を選択する。
どんだけスクショ撮ったねん・・・。MV1曲で182枚？頭おかしいの？
このままだとテテちゃん小さいままなんで、角っこ持って引き伸ばす。
大きくなった♡
だけど両端がまっ白いままは変か・・・？
テテちゃんをぶいーんと引き伸ばす。。
あ、もっと大きくなった。アスペクト比を考慮してくれてるからのびのびテテちゃんにならずに済みました。でもきっと画像は荒いんでしょうなぁ。この辺はお好みだね。
ちなみに私はこの、のびのびテテちゃんのまま
この透明度を40％くらいにして
もう一度左からテテちゃん持ってきて重ねてもいいかなと思いました。
現在の私のブログのヘッダーもそうしてます
（もっといい方法があるかもしれないけどとりあえず）
ここの画面で文字も入れれます。メッセージや自分のブログ名なんかを
この〈テキスト〉から入れられるのでクリックして
紫の〈テキストボックス〉を追加をクリック、字が小さいのでフォントの大きさを先に変えて、文字を打ち込み、つかんで位置を決める。色も変えれるしもちろんフォントの種類も変えれます。
完成。
右上の〈共有〉をクリックすると
こーなるので〈ダウンロード〉をポチ。これで画像編集は終了です。
パソコンのダウンロードファイルに保存されてるはず。
手順② ブログ管理からデザインを変更する
アメブロに戻ってブログ管理画面から〈デザインの変更〉をクリック。下の方までスクロールすると〈カスタム可能〉てのがあるからそれをクリック。
また下にスクロールすると〈CSS編集用デザイン〉という4種類が出てきます。
この中から自分の好みで選びますが、どうやら新旧あるようでたぶん上の3つが新しくて下が旧なんだと思います。どっちを選んだか覚えておいてください。後にコードを入れるとき新旧それぞれ違うので・・。
ちなみに今の私のブログは上の段の一番左です。
今回の例では上の段の一番左を選んでみます。（新コード使います）
するとこのような画面に変わるのでブログデザインのレイアウトを自分の好みで決めます。
私は左から2番目選びました。選んだら〈適用する〉をクリック。
そしたらこの画面になるので、そのままCSSの編集をします。右をクリック。
この画面で〈ファイルの選択〉をします。先ほど自分で作ったダウンロードファイルから持って来ます。
選択後、アップロードをクリックすると下に小さく画像とコードが出てきます。
さっき作ったテテちゃんのが出てきました。
もう少しで作業完了ですので頑張ってー
この画面の下の方にコードがずらーーーっと書いてあるのを触らない様に一番下までスクロールします。
ここまでね。
そして一番下のところにヘッダー変更のコードを入れ込む！
/************************************************ 新CSS：ヘッダー画像を表示する ************************************************/ /* ヘッダーの背景に画像を設定する */ .skin-bgHeader { background: no-repeat scroll center top; background-image: url("画像のURL"); } /* ヘッダーの高さを設定する */ .skin-bgHeader, .skin-bgHeader a { height: 400px; } /* ブログタイトルと説明文を非表示にする */ .skin-headerTitle { display: none; }
これそっくりそのままコピーします。で、この最後のところにペースト！
こうなってますか？
最後にこの〈画像のURL〉の字のみをポチポチ消して、
このテテちゃんの画像パスコードをクリックすると色変わるからそれをコピーして、その〈画像のURL〉を消したスペースに（スペースなんてないけど）上手にペーストします！
ちゃんと ” と ” の間にペースト出来てたら成功です。
そして、〈表示を確認する〉をクリック！自分のヘッダーが変わっているか確認します。まだ保存は押さない！
ほい！変わってます～
このレイアウトはサムネ画像が大きくなるのね。いいね、これも
変わってるのを確認したらここでようやく保存！
これで作業終了です～お疲れっした～
私はパソコン詳しくないけど触るのも作業するのも好きなので苦ではなかったな。
今はスクショ撮るためにテテちゃん起用しましたが、保存してないのでマイアミビーチの画像に戻ってるはず
もーややこしい、わからんわ！となったらコメントどうぞ。私のわかる範囲でお答えします お気軽に～