yozuです
前回のプロフィール作成に引き続、アメブロ開設時の流れの記録です
個人的に残しておけば、後日変更するときに調べなくてもよいので・・・
今回はブログのヘッダー変更についてです
アメブロは豊富なテンプレートを用意しており、
個人ブログ程度であれば、テンプレートのほうが手軽なのですが
私は手帳の見た目にこだわるタイプなので
ヘッダーも画像に変えていくし
後日メニューバーだって作っていこうと考えています
ヘッダーはお店や商品の紹介であれば「看板」と強調して伝えるかもしれませんが、ここは個人ブログ
新しい手帳を・・・いやそれよりもっと下、ノートに名前を書く作業のワクワク感と表現しておきます
やる事としては
①ヘッダー画像を作成 横1120px・縦256px
②CSSレイアウトを変更できるようなアメブロのテンプレートに設定
③作成したヘッダー画像を設定
④CSSの編集
になりそうだな～とイメージしながら作業していきます。
▽変更前 殺風景ですが、これはこれで味がある
①ヘッダー画像を作成
横1120px・縦256px
以前作成したプロフィール用のバナーのサイズを流用統一しています
▽作成したもの 横1120px・縦256pxで作成していますが、見ればわかるので画像サイズ中（420*96）でアップロードしています
②CSSレイアウトを変更できるようなアメブロのテンプレートに設定
ブログ管理＞デザインの設定 の順にクリック
他のカテゴリからブログデザインを探す というエリアの中から カスタム可能 をクリック
出てきたデザインの中から①CSS編集用 かつ ②思い描くトップページのレイアウトに近いものを設定
※必ずCSS編集用という名前のテンプレートを選ぶこと
カラムを変更するとCSSの編集内容が消えてしまうため、この時点で今後のカラム数は確定していくものとする
▽途中経過 シンプルスタンダード（2カラム）とあまり変わらない印象のCSS編集用を選びました
③作成したヘッダー画像を設定
デザインの変更＞CSSの編集 をクリックし
ブログデザインヘッダ・背景用画像の追加から先ほど作成した画像を設定します
アップロード後、出てくるこの画像のパスはこの後の工程（④CSSの編集）で使うのでコピーしておく
④CSSの編集
先ほどヘッダー画像をアップロードした画面をスクロールするとCSSの編集エリアがある
編集エリアのいづれか（CSSの技術明るくない場合はとりあえず一番下がベター）に
ヘッダー画像を設置するような記述を加え【表示を確認す】れば、完成である
今回はCSS編集用の記載内容に「 (2-1) ヘッダー背景」とあったので、その下に追記する形をとった
/* ヘッダー画像を設置 */
.skin-bgHeader {
background: no-repeat scroll center top;
background-image: url(https://stat.blogskin.ameba.jp/blogskin_images/20240227/16/fa/y4/p/o11200256yozu3431709017471230.png);
}
/* ヘッダーの高さを設定 */
.skin-bgHeader a {
height: 256px;
}
/* ブログタイトルと説明文を消す */
.skin-headerTitle { display: none; }/*
.skin-bgHeader {
background: no-repeat scroll center top;
background-image: url(https://stat.blogskin.ameba.jp/blogskin_images/20240227/16/fa/y4/p/o11200256yozu3431709017471230.png);
}
/* ヘッダーの高さを設定 */
.skin-bgHeader a {
height: 256px;
}
/* ブログタイトルと説明文を消す */
.skin-headerTitle { display: none; }/*
最後に
表示を確認します
レイアウトを確認しながら作成したので
ブログ投稿用に確認しただけですが、とりあえずできたので、よしとします
おわり