なるべく簡単にヘッダーを作る動画解説

なるべく簡単にできるヘッダーの作り方の動画解説です

windowsもMacも使えて、インストール不要のソフトを使っています。

pixlr(ピクセラー)
Photo editor online

参考にしてみてくださいね

初心者にもできるアメブロカスタマイズ」では、

● ヘッダーの簡単な作り方
● 文字に縁をつける
● 画像の縁をぼかす
● 人物を切り抜く
● 画像に効果をつける

なども動画解説しています。

アメブロ (旧)ヘッダー上の ニックネーム ルーム|ブログ を消す

内藤です。

アメブロの旧カスタム可能デザインの【ベーシック】で、ヘッダー上の ニックネーム ルーム|ブログ を消すやり方です。



スキンCSSの編集で、次を入れます。

/*ヘッダー上のニックネーム類非表示*/
#overHeader #userNaviArea{
display:none !important; /*表示設定*/
}

これで、ヘッダー上のニックネーム類がなくなります

ヘッダー画像URLの取得の仕方

内藤です。

ヘッダー画像のURLの取得の仕方です

アメブロの管理画面から [クイックリンク]右上の三本線から デザインの変更 ⇒ [CSSの編集] で

『ブログデザインヘッダ・背景用画像の追加』 からパソコン内から画像をアップロードします。


アップロードされた画像が表示された「画像のパス」というのがURLになります


このURLをコピーして使うようにします。

アメブロ (旧)ヘッダー画像を挿入する

内藤です

旧カスタム可能デザイン【ベーシック】で、ヘッダー画像を挿入するやり方です。
ヘッダー画像でタイトルを画像として埋め込まない場合は代わりにこちらを入れます。
⇒ タイトルを画像化する場合はこちら

スキンCSSの編集で、一番最後に次を追加します

/*ヘッダー画像*/
#header {
background:url(画像のURL) no-repeat; /*画像*/
height: 300px; /*画像の高さ*/
}

※ no-repeatは 繰り返しなし を意味します。
画像URLを入れる際に ( )は削除しないでください。

アメブロ (旧)ヘッダー画像を挿入する(タイトルを画像化)

旧カスタム可能デザイン【ベーシック】でブログタイトル、説明文を非表示にし(タイトルや説明文も画像として埋め込)、ヘッダーをクリックしたときにトップページへ移動するリンクをはるようにします。

スキンCSSの編集で、一番最後に次を追加します
※ヘッダー画像が800px×300pxの場合

/*ヘッダー画像*/
#header{
background:url(画像URL) no-repeat; /*背景*/
height: 300px!important;/*高さ*/
}
/*ブログタイトル、説明文位置初期化*/
#header h1,#header h2{
margin:0; /*マージン*/
padding:0; /*余白*/
}
/*ヘッダー画像のリンク設定*/
#header h1 a{
width:800px;/*画像の横幅*/
height:300px;/*画像の高さ*/
display:block; /*表示設定*/
position:absolute; /*位置設定*/
text-indent:-9999px; /*テキストインデント*/
text-decoration:none; /*文字装飾*/
}
/*ブログ説明文を非表示*/
#header h2{
display:none; /*表示設定*/
}

ヘッダー画像の大きさに合わせて、高さと横幅は変更します。
画像URLは、アメブロにアップロードした画像URLにしてください

ブログタイトルとヘッダー画像が重なり見えにくい場合

ヘッダーは、

  • 文字
  • 写真


この2つで作ることができます。

両方とも、とても大事です。

例えば、

写真だけだと花屋なのか、フラワー教室なのかわからりません

写真だけならば、お花屋さんのブログなのか、フラワー教室のブログなのか、分かりません。

逆に、
『○○駅5分 フラワーショップ』
など文字だけならば、何のブログかは分かります。

しかし、良さがわからず、魅力に欠けます。

これが写真と文字両方あれば、何のブログかわかり、魅力も伝えやすくなります。

文字を画像化させずに、アメブロの基本設定で設定したブログタイトルをそのまま表示させた場合、写真と文字が重なって見えにくくなる事があります。

こんな感じで。
写真とタイトルが重なると見にくい
これだと文字の役割が果たされませんので、もったいないです。

このようにブログタイトルと、写真が分かれて表示されていると文字も見やすくなります。

写真とタイトルが分かれていると見やすい

以前のカスタム可能デザインの『ベーシック』では、ヘッダー画像の方で文字が来る余白の部分も作る必要がありました。

それが、CSS編集用デザインでは、CSSで設定可能です。

[クイックリンク] ⇒ [スキンCSSの編集] でヘッダー画像を入れる次のCSSを追加します。

/*ヘッダー画像*/
.skinHeaderArea {
background:url(画像URL) left bottom no-repeat; /*背景*/
height: 400px!important;/*高さ*/
}

画像URLの部分は、アメブロにアップロードしたヘッダー画像のURLに変えます。

●例えば、ヘッダー画像の高さが300pxだとします。
heightも300pxにした場合、上の例のように画像と文字が重なります。

●下の例では、ヘッダー画像の高さよりも、hegihtを100pxほど大きくします。
ヘッダーの範囲が400pxになりましたが、画像の大きさは300pxです。

画像URLの後ろにある left bottom で画像の基準を左下にすることで、ヘッダー画像の上に100pxほどの余白ができます。



その余白の部分に、ブログタイトルがくるという事です。
これで見やすくなります。

heightの数字は、環境に合わせて変えてみてください

アメブロ ヘッダー画像を入れてみる

ブログデザインヘッダ・背景用画像の追加からアップロードします

アメブロのカスタマイズで、ヘッダー画像を入れるやり方です。

カスタマイズは、CSS編集用デザインを利用してくださいね。
デザインの選択方法はこちら

ヘッダー画像をアップロード

今のアメブロは、ブログ幅が980pxですので、ヘッダーも980pxのものを用意します。
カスタマイズで幅を変えている場合は、ヘッダーもその幅に合わせます

管理画面のクイックリンクから、スキンCSSの編集で、CSS編集画面に移動します。

『ブログデザインヘッダ・背景用画像の追加』から、パソコン内のヘッダー画像をアップロードします

ヘッダー画像のアップロード

ブログデザインヘッダ・背景用画像の追加からアップロードします

アップロード後表示される、『この画像のパス』がヘッダー画像のURLになります。

ヘッダー画像URLの取得

この画像のパスがヘッダー画像URLになります

ヘッダー画像を入れるCSSを追加

CSSの編集ページで、紹介するCSSコードを一番下に追加します。
※直接追加するのではなく、パソコン上のメモ帳などに移して編集した方が安全です。

タイトル、説明文を残す場合

アメブロの基本設定で入力する、ブログタイトル、説明文をそのままテキスト表示させる場合は次を追加します。

.skinHeaderArea {
 background:url(画像URL) left top no-repeat;
 height: 300px!important;/*高さ*/
}

画像URLの部分を、上でアップロードしたヘッダー画像のURLに変更。
高さの数値を、ヘッダー画像の高さに調整します。

タイトル、説明文をヘッダーに画像として埋め込んだ場合

ヘッダー画像に、タイトルや説明文などを画像として埋め込んだ場合、上記のCSSだけではテキストのタイトル、説明文も表示されてしまいます。

タイトル、説明文を画像として埋め込んだ場合は、テキストのタイトル、説明文は表示されないように次のCSSを追加します。

.skinHeaderArea {
background:url(画像URL) left top no-repeat;
height: 300px!important;/*高さ*/
}
h1.skinTitleArea,h2.skinDescriptionArea{
margin:0;
padding:0;
}
h1.skinTitleArea a{
width:980px;/*画像の横幅*/
height:300px;/*画像の高さ*/
display:block;
position:absolute;
text-indent:-9999px;
}
h2.skinDescriptionArea{
display:none;
}

こちらも同様に、画像URLの部分をヘッダー画像のURLにします。
高さの数値も調整します。今回は2ヶ所あります。

アメブロの基本設定で入力したタイトル、説明文を非表示にして、ヘッダー画像全体にトップページへのリンクがはられた状態になります。

また、タイトルや説明文を画像として埋め込んだ場合でも、基本設定で入力するタイトル、説明文は『.』などと省略せずに、正しく書きましょう。
検索ロボットは画像に埋め込まれた文字を認識できませんし、他のアメブロの『お気に入り』などでリンク表示される場合も、基本設定のものになります。