2016年3月より、「CSS編集用デザイン」テンプレートが新たに3つ追加されました。そちらのカスタマイズでは以下のカスタマイズが使えないものも多いため、「新CSS編集用デザイン徹底解剖」と題して新たに目次を設けてカスタマイズの方法を公開中です。2016年3月前の従来のCSS編集用デザインについてのカスタマイズは、当ページでカスタマイズができますので、ご利用状況に応じて使い分けてください。新CSS編集用デザインでのカスタマイズがご希望のかたは、こちらの目次をご覧くださいませ→新CSS編集用デザイン目次>>こちらもどうぞブログで集客したい!3980円で確実に自分でカスタマイズ!このコラムは連載コラムです。過去の記事は上記のアメブロカスタマイズガイドまたは、以下の記事をご覧ください。前回の記事はこちらです。見ていない方はこちらから見ていただくとより理解が深まるかと思います。ブログヘッダーアメブロヘッダ画像を設定したときに、すでにある文字や説明文はどうすればよいのか?では早速はじめましょう。ブログヘッダー」の解説をします。ブログヘッダーの最終章です。今回は、あなたが用意したヘッダー画像に既に文字が入力されていた場合のタイトルと説明文の設定の仕方を解説します。ヘッダー画像を作成するときは、実はタイトル文字や説明文を含めて作ったほうが、よりきれいなヘッダー画像となります。すると障害になるのは・・・既にあるタイトルと説明文の文字のやりどころです・・・今回はそのときのカスタマイズの方法を解説したいと思います。タイトルと説明文付きのヘッダー画像を設定する方法まずは以下のイメージを見てください。上の画像のように、ヘッダー画像にタイトルを入れた場合(上の場合は、白い文字です)、もともとアメブロで書いているタイトルと説明文とが画像とかぶってしまうことがあります。考え付きそうな簡単な方法は、タイトルと説明文を空白にしてしまう方法です。アメブロは空白でタイトルを終わらせることを許していません。「.」(ピリオド)だけ打って消えたようにするということで強引に消えたようにしている方が中にはいます・・・この方法は、それをされている方には申し訳ありませんが・・・やめましょう。タイトルはブログで一番大切な部分です。ホームページを評価する際に一番初めに見るのはこのタイトルだといっても過言ではありません。あなたに例えるならば、あなたの名前にあたるものです。あなたの名前は「.」(ピリオド)ですか?ってことです。これは絶対にやめましょう。今回お勧めする方法は?今回はおそらくどのカスタマイズサイトでも、あまり紹介されていない方法を、紹介します。それは下の画像のように、ブログのタイトルと説明文を上に収める方法です。画面上からこれらを消してしまう方法もありますが、集客しやすいサイトではできればこの方法の方がおすすめです。前置きが長くなりましたが、解説します。ブログヘッダー」の部分のコードに以下のように追記します。赤字と緑字が追記箇所です。*/.skinDescriptionArea{position:absolute;font-size:10px;/*ブログ説明文の文字の大きさ*/top:-17px;/*上からの位置、大きくすると下に下がる*/left:300px;/*左からの位置、大きくすると右に移動*/}.skinFrame2{width:980px;margin:auto;position:relative;}/*基準点を置く(あなたの設定によってはこの緑の部分は削除します)*/※あなたの画像のURL、高さの値の解説は前回までのヘッダーコラムで解説してありますのでそちらをご確認ください。手順その2注意!!!上記コードの一番下の緑字の部分に注目してください。基準点を置くというコードが追加されています。ここが曲者で、たとえばあなたが既にいろいろとカスタマイズをしていてナビゲーションを設定していたりすると、もしかしたらこの設定ではうまくいかない可能性が大です。そのような場合は、緑の部分は全て削除してください。※私のサイトでは一貫して基準点の置き方を統一しております。私のサイトでのカスタマイズにはまったく他のことの支障をきたしませんのであしからず♪そうすると今度は位置関係がずれるので、top,とleftの数値を変更し、それぞれの位置関係を修正してください。ここが高度な部分です。うまく伝わっていないかもしれませんが、もし挑戦してみて分からなくなったら、質問してください。完成は以下のようになります。することで、画像にタイトルと説明文がかぶらない設定が完成しました。これでブログヘッダー編は終了です。新CSS編集用【2016年3月追加分】アメブロの記事下に定型文を張るためのサンプルカスタマイズ記事下に定型文を挿入する方法が、できなくなる。パソコン初心者でもできる。