ブログの見た目を変更！アメブロヘッダー画像サイズとCSS・Amebaレッスンレポート

今日のアメブロスクールはこれ

下矢印

 

 

サムネイル
 

受講目的

ヘッダー画像の設定が失敗しまくっていて、CSS読むのが面倒で、長年放置してきたので、解決するといいな

濃すぎる内容なのでついていけるかな

「アーカイブ」でじっくり復習しながら作成のほうがいいかな〜

時間がないからついていけるところまで、ついていこう！

 

ブログカスタマイズの重要性

  • 他のブログとの差別化
  • 読者からの信頼を得られる
  • ファンが付く
  • アクセスアップ
文章が下手だと差別化難しい私
見た目から入ると差別化できるかも？
 
ヘッダー画像の設定
  • ヘッダー画像が設定可能なブログデザインを選ぶ
  • ヘッダーが憎悪設計図を作成
    • ゴールのイメージを描く
    • 要素を考える
    • 何についてのブログか
    • 自分らしさ
  • Canva画像の制作
    • テンプレート
    • 1120✗400
  • ブログデザイン
  • デザインの設定
/* (2-3) ヘッダー画像の設定

/* ヘッダー画像を設置 */
.skin-bgHeader {
background: no-repeat scroll center top;
background-image: url(アップロードした画像のURLを貼る);
} /* ヘッダーの高さを設定 */
.skin-bgHeader a {
height: 400px;
} /* ブログタイトルと説明文を消す */
.skin-headerTitle { display: none; }/*
  • メニューバーの設定
  • AmebaオウンドかCSSで設定
 
サムネイル
 

ヘッダー画像がうまく設置できないのはCSSを書かないとダメなんだろうなって思っていたけど、やっぱりか！

CSS書くのが面倒で放置してきたけど、今回、受講してよかった！

 

ただHTMLがわからない人はCSSは難しいだろうな

いくらコピペするだけとはいえ

 

こんな面倒な設定をしなくても、設定メニューを作ってもらって、ボタンをポチポチするだけで設定できるようにシステムを変更してもらいたい（笑）

 
これ以降、実際に操作したので、ブログに受講中投稿をして設定した

＼吹き出し使ってる？／

右矢印 アメブロSEO対策テンプレート

仕事のこと

執筆ご依頼ありがとうございます！

右矢印クラウドワークスで文字起こし｜

右矢印アメブロは1日何記事書けばいいの？

右矢印ノートPCの熱対策

スマホ アメブロのことを考えてる

最後まで読んでいただき、ありがとうございました！
次回もお楽しみに！

 

Web記事・シナリオライター

Atelier-hanamiのhanamiでした！

フォローしてね…

指差しポチッと応援してね