アメブロのブログヘッダーをオリジナルヘッダーに変更する方法 | パソコン歴20年の村田理恵子が教える!初心者でもわかるアメブロ講座(大阪)

パソコン歴20年の村田理恵子が教える!初心者でもわかるアメブロ講座(大阪)

ブログやホームページ、SNSなど
今では自分のことを発信するのが当たり前!
「パソコンが苦手」「始めたばかりでやり方がわからない」そんな方のための情報を随時お届けします。

お届けするのは、小学生の娘2人と1歳児の息子の育児奮闘中のママです。


テーマ:

ブログのタイトルや説明が書いてある部分を

ヘッダーと言います

 

 

パソコンで見るこちらの画面のみ

自分の好きなヘッダーに変えることができます

スマホで見るほうは変更はできません

 

 

 

まずは、独自でヘッダーを作りましょう

サイズは1000×300ピクセルです

 

画像加工のソフトをもっていない場合は

無料でオンライン上で作業ができる

このサイトで、ヘッダー画像を作れます

下矢印

Online Photo Editor | Pixlr Editor 

 

私もココを使って作りました

 

 

さて、画像が準備できたら

いよいよデザインの変更です

 

1デザインの変更をクリック

 

 

2下の方にある「カスタム可能」をクリック

 

 

3「CSS編集用デザイン」を選択

 

 

 

4デザインを適用するとこの画面になります

「CSSの編集をする」をクリック

 

5ブログデザインヘッダ画像の追加で「ファイルを選択」をクリック

作った画像を選択して「アップロード」

 

 

 

 

6その下にブログデザインのCSSと書いてあるところ

数字やローマ字などがたくさん並んでる一番最後に

こちらのタグをコピペしてください

 

 

/* ヘッダー画像を設定する */
.skin-bgHeader {
  background: no-repeat scroll center top;
  background-image: url(アップロードした画像の下にあるURLをコピペ);
}

/* ヘッダーの高さを設定する */
.skin-bgHeader [data-uranus-layout="headerInner"]>a {
  height: 300px;
}
/* ブログタイトルと説明文を非表示にする */
.skin-headerTitle {
  display: none;
}
 

7赤字のところを変更

8「保存」したら完了です

 

 
サービス
あなたのわからないことをズバッと解決!
アメブロ・フェイスブック・スカイプ・ズームなど
2時間8,000円(村田自宅・スカイプ・ズームにて開催)
 
お問い合わせフォームを作りたい人へ
全て作ってもらうお任せコース
作り方を学ぶ、レッスンコース
2種類をご用意
共に1,500円
 
あなたのブログは読者にはどのように見えている?
メールにて結果をお知らせします
5,000円
 
 
セルフマガジン申込みフォーム
今さら聞けない!?アメブロ・フェイスブック基本設定ポイントブック
無料でご提供中
 
星メルマガ・ステップメール星
ステップメール手紙毎日20時に届きます
1週間でアメブロを整える

 

 

村田理恵子(りー)さんをフォロー

ブログの更新情報が受け取れて、アクセスが簡単になります

SNSアカウント

Ameba人気のブログ

Amebaトピックス