アメブロのヘッダー画像を変更したい。でもCSS編集って難しそう（泣き）
確かにあの英数字の意味不明の羅列は初心者にとっては高いハードル
最初は真似するのが一番
意味はあとから考えていけば良いのです。
ヘッダー画像の推奨サイズは横1140px × 縦400px
Canvaで作成するのが良いですね♪
Canvaにログイン
Canvaにログインしてトップ画面から作成（＋）を押し
デザインを作成、画面を下にスクロールしていくとカスタムサイズという項目があるので
横を1120、高さを400と入力し新しいデザインを作成ボタンを押す
画像サイズを決めたら、デザインを作成していきます。
今回はパソコン講師のブログ作成をしていきますので検索窓に「パソコン」と打ち込みます。
Canvaはテンプレートが豊富に揃っていますので
デザイン作成は楽ちんですね♪
今回はこのテンプレートを使用していきます
Canvaはテンプレートを加工なしの使用はNGです。
写真を差しかえ、文章も変更していきます。
てつやって誰だよというツッコミはいらんですぞ
右上にある共有ボタンからダウンロードをクリック
画像にステッカーなどアニメーションがあるものが入っているとMP4形式の動画を選んでしまうので注意です。PNGもしくはJPEGを選択してください
ダウンロードが終わったらブログページに画像を入れていきます。
「ブログ管理」から「デザインの設定」
「デザインの設定」を下にスクロールさせ「カスタム可能」を選択ザインの設定」を下にスクロールさせ「カスタム可能」を選択、そこから「CSS編集用デザイン」
2カラム・メニュー右を選択
カラムとは列のこと、2列でメニューは右ですという意味です。
人は左から見ることが多いので記事を左にすると違和感を感じにくいのです。
適用するをクリック
画面が変わり、「CSSの編集をする」を選択
ブログデザインヘッダ・背景画像の追加
ファイルを選択で先ほどダウンロードした画像を選択し、アップロードを押す。
すると、この画像のパス（格納されている場所）が生成されます。
この生成されたパスを取り込んでいきます。
/* (2-1) ヘッダー背景の.skin-bgHeader {
background-color: #ffffff;の後ろに
background: no-repeat center top;
Amebaのヘルプページに詳しく解説されています。https://ameblo.jp/ameba-business-official/entry-12802599504.html
background-image: url(この画像のパスを記載する);
こちらのコードを記載します。
(この画像のパスを記載する)の中に画像のパスを入力
コピペするときに；や ｝を上書きしないように注意、これらを消してしまうと反映されません（涙）
更にその下のコードに下記を記載
heightは高さなので400
widthは幅なので1120を入力
.skin-bgHeader a {
height: 400px;
width: 1120px;
}
次にブログのタイトル・説明文を非表示にします。
/* (2-2) ヘッダータイトル、説明文の下
/* ヘッダータイトル */の中に記載していきます。
display: none;を追加
これを
/* ヘッダータイトル */
.skin-headerTitle {
padding-top: 80px;
padding-bottom: 80px;
text-align: center;の下の行へ
そうするとごちゃごちゃしていたヘッダータイトルが消えスッキリしました。
こんな感じで最初は難しいなと思うかもしれませんがやってみると
意外に簡単にできます。
Amebaはヘルプページが充実していますので、それを参考にしていくと良いと思います。
