PCインストラクターの川上です。
※この記事は、プロフィール画像が四角いバージョンでの説明になります。
プロフィール画像が丸いバージョンの方は、こちらをご覧くださいませ↓
『最新デザインでヘッダー画像を設置する方法』
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
新しくヘッダー画像を作成して、設置してみたら、なんか違和感が･･･^^;
といったご質問をいただいております↓↓↓
新しいヘッダー画像を作ったのですが、先に書いてあったブログタイトルと説明の文字を消すには、どうしたらいいですか？
ヘッダー画像に文字を埋め込んだ場合は、アメブロの基本設定で書いたブログタイトルや説明文は非表示にする必要がありますね。
しかし、基本設定のブログタイトルや説明文は検索の対象になるので、消してはいけません！
では、どうするのか？
CSSの編集で、テキストを欄外に表示させるように移動したり、説明文を非表示にしたりしてあげます。
例えば、
次のCSSソースのように
/* ヘッダー画像 */
.skinHeaderArea {
background:url(画像URL) left top no-repeat; /* 画像を配置 */
height: 300px;/* ヘッダー画像の高さ */
padding-bottom:10px;/*ヘッダ画像とメインの間のスペース*/
}
/* ヘッダー画像をリンクする */
h1.skinTitleArea a{
width:980px;/* 画像の横幅 */
height:300px;/* 画像の高さ */
display:block;/* ブロック要素とする */
position:absolute;/* 位置を固定 */
text-indent:-9999px; /* テキストを範囲外へ移動 */
}
/* 説明文を非表示 */
.skinDescriptionArea{
display:none; /* 非表示にする */
}
/* ヘッダー上下の余白をなくす */
.skinBlogHeadingGroupArea{
padding-top:0;
padding-bottom:0;
}（注意！ 画像URLはご自分の取得した画像URLをコピペしてください。）
または、ブログタイトルをnoneで非表示にする方法もあります。
（ただし、ヘッダー画像をブログトップに戻るリンクを設定したい場合は、この方法は使わないほうがいいです。）
/* ブログタイトル */
.skinHeaderFrame h1.skinTitleArea {
font-weight :bold; /* 文字の太さ */
font-size :1.2em; /* 文字サイズ */
padding :170px 0px 0px 50px; /* 上 右 下 左 からの位置 */
text-align :left; /* 文字揃え */
display :none;/* 非表示に */
}さらに、ブログタイトルと説明文をいっぺんに非表示にする方法もあります。
/* タイトルと説明を囲うエリア */
.skinBlogHeadingGroupArea{
padding:20px 0 30px; /*上下の指定*/
display:none; /*非表示に*/
}※ 値を3つ指定した場合： 記述した順に[上][左右][下]のパディングになります。
さぁ、これでどうでしょうかね^^!
･･･ところで
私のブログでヘッダー画像の作り方、
を検索されている方･･･
画像ソフトでヘッダー画像を作るのが当たり前･･･
と思っている方
実は、エクセルでもヘッダー画像って作れるのです↓↓↓
エクセル（Excel）でヘッダー画像を作るには
＜追記１＞
うまくCSSが反映されない場合は、こちらの記事もご参照くださいませ。
『ヘッダーやメニューバーを設置したのにうまく表示されないのですが･･･』
『CSSソースコードをコピペしたのにうまくいかない原因はコレでした』
＜追記２＞
最新デザイン（2016年～）の場合は、こちらをご覧くださいませ↓
『最新デザインでヘッダー画像を設置する方法』
以上、ワンポイントレッスンでした。
LIDS澄川・ライフデザインスクール
川上 雄大