1. TOP
  2. アメブロカスタマイズ
  3. カスタマイズ⑧・(3-2) ブログヘッダー・アメブロカスタマイズ

カスタマイズ⑧・(3-2) ブログヘッダー・アメブロカスタマイズ

お知らせ(2016年3月8日追記) 2016年3月より、「CSS編集用デザイン」テンプレートが新たに3つ追加されました。そちらのカスタマイズでは以下のカスタマイズが使えないものも多いため、「新CSS編集用デザイン徹底解剖」と題して新たに目次を設けてカスタマイズの方法を公開中です。2016年3月前の従来のCSS編集用デザインについてのカスタマイズは、当ページでカスタマイズができますので、ご利用状況に応じて使い分けてください。 新CSS編集用デザインでのカスタマイズがご希望のかたは、こちらの目次をご覧くださいませ→新CSS編集用デザイン目次

>>こちらもどうぞ

このコラムは連載コラムです。過去の記事は上記のアメブロカスタマイズガイドまたは、以下の記事をご覧ください。前回の記事はこちらです。まだ見ていない方はこちらから見ていただくとより理解が深まるかと思います。

アメブロヘッダ画像を設定したときに、すでにある文字や説明文はどうすればよいのか?

では早速はじめましょう。今回も前回に引き続きCSS編集用画面の(3) エリアのスタイルブロックの中の、「(3-2) ブログヘッダー」の解説をします。第8段となります。ブログヘッダーの最終章です。今回は、あなたが用意したヘッダー画像に既に文字が入力されていた場合のタイトルと説明文の設定の仕方を解説します。

ヘッダー画像を作成するときは、実はタイトル文字や説明文を含めて作ったほうが、よりきれいなヘッダー画像となります。でもそうすると障害になるのは・・・既にあるタイトルと説明文の文字のやりどころです・・・今回はそのときのカスタマイズの方法を解説したいと思います。

タイトルと説明文付きのヘッダー画像を設定する方法

まずは以下のイメージを見てください。

image-11053703262-11564847492

上の画像のように、ヘッダー画像にタイトルを入れた場合(上の場合は、白い文字です)、もともとアメブロで書いているタイトルと説明文とが画像とかぶってしまうことがあります。これを対処するにはどのようにしたらよいのでしょうか?

やってはいけない方法

一番考え付きそうな簡単な方法は、タイトルと説明文を空白にしてしまう方法です。ですが、アメブロは空白でタイトルを終わらせることを許していません。ですので「.」(ピリオド)だけ打って消えたようにするということで強引に消えたようにしている方が中にはいます・・・

この方法は、それをされている方には申し訳ありませんが・・・やめましょう。

タイトルはブログで一番大切な部分です。ホームページを評価する際に一番初めに見るのはこのタイトルだといっても過言ではありません。あなたに例えるならば、あなたの名前にあたるものです。あなたの名前は「.」(ピリオド)ですか?ってことです。なのでこれは絶対にやめましょう。

今回お勧めする方法は?

今回はおそらくどのカスタマイズサイトでも、あまり紹介されていない方法を、紹介します。

それは下の画像のように、ブログのタイトルと説明文を上に収める方法です。

画面上からこれらを消してしまう方法もありますが、集客しやすいサイトではできればこの方法の方がおすすめです。

image-11053703262-11564879176

タイトルと説明文を上手に設置するアメブロカスタマイズの方法

前置きが長くなりましたが、解説します。

手順その1

まずCSS編集用画面を開き、スタイルシートの中の「(3-2) ブログヘッダー」の部分のコードに以下のように追記します。赤字と緑字が追記箇所です。

/* (3-2) ブログヘッダー
--------------------------------------------*/

/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{background-image:url(あなたの画像のURL);
background-repeat:no-repeat;
height:高さの値px;}/* ←ブログヘッダー画像の高さを入力 */

/* skinBlogHeadingGroupArea タイトルと説明を囲うエリア */
.skinBlogHeadingGroupArea{
padding:20px 0 30px;
}

/* skinTitleArea ブログタイトルのエリア */
.skinTitleArea{
padding-bottom:4px;
font-size:5px;/*タイトル文字の大きさ*/
position:absolute;
top:-17px;/*上からの位置、大きくすると下に下がる*/
left:0px;/*左からの位置、大きくすると右に移動*/

}

/* skinDescriptionArea ブログの説明エリア */
.skinDescriptionArea{position:absolute;
font-size:10px;/*ブログ説明文の文字の大きさ*/
top:-17px;/*上からの位置、大きくすると下に下がる*/
left:300px;/*左からの位置、大きくすると右に移動*/

}

.skinFrame2{
width:980px;margin:auto;position:relative;}/*基準点を置く(あなたの設定によってはこの緑の部分は削除します)*/

※あなたの画像のURL、高さの値の解説は前回までのヘッダーコラムで解説してありますのでそちらをご確認ください。

 手順その2

注意!!!上記コードの一番下の緑字の部分に注目してください。基準点を置くというコードが追加されています。ここが曲者で、たとえばあなたが既にいろいろとカスタマイズをしていてナビゲーションを設定していたりすると、もしかしたらこの設定ではうまくいかない可能性が大です。ですので、もしそのような場合は、緑の部分は全て削除してください。

※私のサイトでは一貫して基準点の置き方を統一しております。ですので私のサイトでのカスタマイズにはまったく他のことの支障をきたしませんのであしからず♪

そうすると今度は位置関係がずれるので、top,とleftの数値を変更し、それぞれの位置関係を修正してください。

ここが高度な部分です。うまく伝わっていないかもしれませんが、もし挑戦してみて分からなくなったら、質問してください。

完成は以下のようになります。

image-11053703262-11565456576

こうすることで、画像にタイトルと説明文がかぶらない設定が完成しました。

ひとまずこれでブログヘッダー編は終了です。

その他のカスタムはこちらを押してアメブロカスタマイズガイドを見てください

>>ページのトップへ

おすすめ

無料メルマガ
optin
自分で作るアメブロカスタマイズ