アメブロのブログヘッダー画像の変更方法

こんにちはぁーいわのりです('◇')ゞ


この記事は…通常のカスタマイズテンプレートでの変更方法ではなく。
無料で配布されているTCDの素敵なアメブロテンプレートのヘッダー画像の変更方法です。

案内なんていらないわっ★直接ダウンロードに行くよ！な方はこちら★
メールアドレスを入力するだけで、2種類のテンプレートがすぐさま貰えます

さて、本題。
当ブログではTCDさん製無料ブログテンプレートに合わせたサイズの画像を配布しております。
900ピクセルx110ピクセルの画像たちです。

ヘッダーバナー(ブログタイトル画像)の変更方法はテンプレートをダウンロードした際についてくるマニュアルにも記載があります。
マニュアルのファイル名は「TCDアメブロテンプレート移行マニュアル.pdf」です。

ヘッダーの画像の変更方法は32ページ載ってます。が、
わざわざ見るのが億劫な方のために、いわのり式適当な変更方法を案内です

ゆるいのが苦手な方は、本家様のマニュアルを熟読ください。かなり丁寧です！


前提として、無料テンプレートにデザイン変更済み！なところからお話を進めます。
デザイン変更の方法は、それはそれは判り易く本家マニュアルに載っておりますのでそちらを是非ご参照ください
そしてなにより…非常に簡単ですｗ

ヘッダー画像変更方法をご案内したくなった理由があるのです。
無料テンプレにデザイン変更した直後が下画像なのです。

…ヘッダーバナー内に描かれている文字は画像に直接描かれてましてね。
BLOG TITLEってどうよ？でしょ。可愛いけど。
これは本家様がきっとオリジナルに変えなさいよ…とおっしゃっておるのだと思うのです。
なのではい、変更しましょ

さてどんな画像に変更しましょうか…
とりあえず、ごった煮画像庫にアップした画像を使うことにしましょう。
適当な画像編集ソフトで、画像内にブログタイトルを描きます。
えっと…その辺の話は割愛です。画像の文字入れはまた改めて案内致します。

もともとの画像はこれ。(表示上縮小してます)
このヘッダー用画像は、過去記事で配布中。


ブログのタイトルとか、説明文も載せてみました。

画像が用意できたところで、CSSのカスタマイズページを開きます。
デザインカスタマイズが出来たあなたは知ってるはず。

そして、今作ったヘッダー画像を上画像の下部分からアップロードします。
ヘッダ・背景用画像の追加って書いてあるでしょ？そこからそこから。

で、アップしたらこんな感じに画像のパス（アドレス）が表示されます。

次は気合いを入れて探すのです。
CSS記述部分から/*■■■ Header Setting ■■■*/って書いてあるところを！

見つけたら下画像の文字反転部分を、今アップした画像のパスに変更です。
(画像をクリックしたら拡大するので参考にされて下さいまし。)

さっき作ってアップロードした画像のURL(アドレス)に書き変えてから

「表示を確認」して画像が変更されてたら、保存ね★

余白がある…って場合は、画像が900px×110pxじゃないです。
画像が切れるって場合も、900px×110pxじゃないです。確認してね。

「アメブロを書く」タブの「画像の追加」を使用した場合は、もれなく横幅が850pxになるっぽいから、必ずCSSの編集ページにある、画像アップロードでアップしてね！！


さぁて…ブログはどんな風になったかというと、こんな風になりました。

なにやらもれまくってる気がするけど、こんな感じで、
TCD無料テンプレートのヘッダー画像は簡単に変更できるのでした

そして本家のマニュアルには「ブログタイトルをテキストで表示する場合の設定」も載っておるのです。（35ページ目に！）
画像編集ソフトがなくても安心仕様なのですが、今回は以上で終了

案内なんていらないわっ★直接ダウンロードに行くよ！な方はこちら★
メールアドレスを入力するだけで、2種類のテンプレートがすぐさま貰えます