レビュー :  ★★★★☆

Time   : 05分35秒

形式    : 講義

作成者  :  パーフェクトマスター アメブロカスタマイズ講座  さん

 

《ここがオススメ》

アメブロのヘッダー画像を変更して、表示させる方法を、
Youtube 動画で解説しています。
初心者の方にも、とても分かりやすい説明です。

 

《この動画の要約 or 詳細》

アメブロにログインして、「マイページ」の上部左にある
「アメブロ」をクリックします。
左メニューの「デザインの変更」をクリックします。

  ↓  ↓  ↓

画面を下にスクロールして、
「他のカテゴリからブログデザインを探す」の中の
「カスタム可能」をクリックします。

  ↓  ↓  ↓

「カスタム可能」デザインの中の、
「CSS編集用デザイン」を選択します。
今回は、例として、画面の上の方に表示される、
「CSS編集用デザイン」の中の
「2カラム・メニュー右」を選択して、
「適用する」をクリックします。

  ↓  ↓  ↓

「ブログデザイン適用完了」、
『「CSS編集用デザイン」を適用しました。』という
表示が出ますので、「ブログを確認する」ボタンを押すと、
タイトルだけのシンプルなブログが出来上がります。

※ こちらのテンプレートにヘッダー画像を付けていきます。

それでは、
「マイページ」の上部左にある、「アメブロ」をクリックします。
左メニューにある、「デザインの変更」に移り、
「CSSの編集」のリンクをクリックします。

「ブログデザインのCSSの編集」画面になります。
「ブログデザインヘッダ・背景用画像の追加」のところで、
「ファイルを選択」ボタンを押して、
アップロードしたい画像を選択し、アップロードを行います、

  ↓  ↓  ↓

「アップロードされた画像」が表示されますので、
その下の「この画像のパス」なかのURLを
すべて選択してコピーしておきます。

  ↓  ↓  ↓

下の方に、「現在使用中のブログデザインCSSの」の部分で、
「ヘッダー」という字句で検索をしてみますが、
上の方に「ブログヘッダーに背景画像を敷きたいとき」という
文字列を発見できると思います。

  ↓  ↓  ↓

.skinHeaderArea{
backgraond:url()  →→→ このように入力します。
}/* 
              

このカッコの中に、先ほどコピーした
URL をペーストします。

  ↓  ↓  ↓

閉じカッコの右に、半画スペースを入れて、

“no-repeat;” を入れ、改行して、

width:  980px;
height:  380px;

と入力してCSSの記述を完了します。

  ↓  ↓  ↓

「保存ボタン」をクリック後、表示を確認すると、
ヘッダー画像が変更されていることが分かります。

・・・

つぎに「ヘッダーのタイトル」を消す作業です。

「マイページ」の上部左にある、「アメブロ」をクリックします。
左メニューにある、「デザインの変更」から、
「CSSの編集」のリンクをクリックします。

  ↓  ↓  ↓

編集画面の一番下にある、
「その他拡張があれば記述」のところに、

header  h1,header  h2{
display:  none;
}

と記述し、「保存ボタン」をクリックします。

これで、タイトルの文字を消すことが出来ます。

 

《一言》

今回の「ヘッダー画像」をアップして変更する方法は、
CSS の記述を少々変更するので、
初めての方は、少し難しく感じるかもしれませんが、
落ち着いて実行すれば、大丈夫です。

この動画の方法で、ヘッダー画像を変更して、
オリジナル色のある、アメブロを作成してみましょう。