タイトルを画像に （ 2 ）

■ ブログタイトル入りのヘッダー画像を作成して、
■ タイトルのある場所に透明 GIF 画像を合わせる方法。

初めにヘッダー画像を作成して現在のテンプレートから変更しなければいけませんね。みなさん色々と個性のあるテンプレートを選択し、それぞれの好みで毎日の記事を頑張ってあげている事と思います。今回の説明では、テンプレートの幅を変更したり、サイドカラムの幅を変更する方法の説明は割愛します。むちゃくちゃ記事が長くなりますから ・・・

現在のテンプレートの CSS （ スタイルシート ） をのぞいて下さい。通常ヘッダー （ ブログ上部 ） に画像や写真を使って構成されているテンプレートは、ほとんどが、#banner, #subbanner{ } の中に画像の表示指示が記述されています。例えばこういう表記があったとします。


この表記を見れば、#banner, #subbanner の領域に、横幅 810px 、高さ 400px の gif 画像が使用されているのがわかります。

これがあなたのブログのヘッダー （ ブログ上部 ） に使用されている画像のサイズです。これに合わせて同じサイズの画像を作成し、それをサーバーにアップロードします。通常の記事をあげる時の、アップロードする写真画像と同じ要領でおこなえば良いでしょう。

その後そのアップロードした画像のアドレスを確認し、background:url( ) の中にそのアドレスを書き込めば入れ替え完了です。background:url( ) の中に書かれている画像の拡張子が初めは gif だからと言って、絶対に gif 画像にしなければならない事はありません。jpg でも、png でもお好きなようにして下さい。

ただし、あまり重たい解像度のものは好ましくありません。初めのブログの読み込みが遅くなりますので、ほどほどのサイズの画像を作成して下さい。この時に、ブログのタイトルを入れて作成する事を忘れずにお願いします。

これができたら、とりあえず CSS （ スタイルシート ） を保存して、一度再構築をして下さい。どうですか 自分好みのかっちょいい〜ヘッダーに変わっていますか

それじゃ〜今、そのヘッダーに表示されているタイトルをクリックして下さい。・・・ 何にもなりませんよね。 そりゃそうです。まだ何も設定はしていませんから。^^;

次にもうひとつ画像を作成して下さい。今度はそのヘッダー画像に書き入れてあるブログタイトルよりも、少しだけ大き目の真四角の透明のgif 画像を作成します。縁取りなんか付けちゃダメですよ。ホントに何も無い真四角の透明 gif 画像です。これも何かの画像作成ソフトで頑張ってお作り下さい。

できあがった透明 gif 画像をサーバーにアップロードします。管理画面の中の 『 ファイルのアップロード 』 をクリックして、該当する透明 gif 画像をアップロードして下さい。この時、『 サムネイル作成 』 のチェックは必ず外しておきます。

次に管理画面の 『 カスタマイズ / 管理 』 のタブをクリックし、上から ３ 項目めの 『 ブログの説明 』 の個所に以下のタグを書き込みます。



ピンク字の画像の高さと幅は数字だけで結構です。px などは記載する必要はありません。緑字 の alt のところは title と書き換えても OK です。書き込む場所は、ブログの説明文章 （ description ） があらかじめ書いてあると思います。その上に書き込めば良いでしょう。

次に書き込みが終わったら、いったんその設定を保存しましょう。その同じページの下に 『 設定を保存する 』 がありますから、そこをクリックして保存します。そして、トップページだけ再構築をかけます。あなたのブログのヘッダー上部の中に透明 gif 画像が入れば成功です。

確認の仕方は、透明 gif 画像があるであろうと思われる場所の上で、左クリックしながら上をなぞると画像が反転します。この方法は Windows の IE の方法であり、各ブラウザーによって変わってきますので、それぞれの確認の方法は工夫してください。^^;

このままでは元々あったタイトル （ テキスト ） が見えていてかっこ悪いです。 これを非表示にしましょう。次は CSS の中に新たな記述を追加します。『 カスタマイズ / 管理 』 > 『 デザインの設定 』 > 『 カスタマイズ 』 > より、CSS の項目の中の .blogtitle{ } の中に、以下の記述どちらかを追記します。


AQ 的には上の display:none; がおすすめ。(^^) 必要としないのであれば、description （ ブログの説明 ） も同じ方法で非表示にしておいても問題ないですよ。CSS の中の .description{ } の中に上記の非表示の指示タグを書き入れます。SEO 的に気になさる方は、各 HTML の <title> 〜 </title> の中に、ブログのタイトルと並べて、ブログの説明文章と同じ内容を書き込んでおけば問題ないです。

そして最後です。透明 gif 画像の位置を、入れ替えたヘッダー画像のブログタイトルの位置へ合わさなければなりません。同じ .blogtitle{ } 内の、padding: ○○ px ○○ px ○○ px ○○ px; の部分を変更します。 このパディングの説明は過去記事のこちらをご覧下さい。


ここまでできたらブログの再構築を 『 全て再構築 』 しましょう。これで完成です。どうですか 無事にできましたでしょうか？ わからない事があったらコメント欄にてご質問下さい。頑張って下さい。(^^)

■ 訂正 ： 2006年04月12日
ごめんなさい ^^; 透明 gif 画像の位置を、入れ替えたヘッダー画像のブログタイトルの位置へ合わさなければなりません。 ・・・ のところで間違っていました。あらためて追記します。

透明 gif 画像を、ブログタイトルが書かれている位置に変更したい場合は、前述したタグの前後に <div> 〜 </div> で囲み、クラス属性をつけて新たな指示を CSS （ スタイルシート ） に追加記述します。例えばこうです ・・・


オレンジ色 の部分が新たに付け足したタグです。クラス属性の中の toumeititle は、お好きな表記を用いて下さい。このままでもかまいません。このあと CSS （ スタイルシート ） の中にそれに対する指示を書き加えます。



■ 追記 ： 2006年04月13日
上記の訂正文章を書いた後にご指摘をいただきました。CSS （ スタイルシート ） の中の .description{ } のプロパティ padding の数字を変更すれば、新たなクラス属性を追加しなくても調整は可能です。AQ もうっかりしていました。 ただし以下の事について気を付けて下さい。

.description{ } の中の padding の数字を変える事で透明 gif 画像の移動は可能ですが、ブログタイトルの下に表示されるブログの要約説明も同じように移動します。透明 gif 画像とブログ要約説明を別の動きで調整したい場合 （ 例えば、透明 gif 画像は右側に、要約説明は左側になど ） は、上記の説明どおり新たなクラス属性を追加する方が良いでしょう。

ブログの要約説明を削除、もしくは非表示と設定している場合や、透明 gif 画像の移動と同一の動きでよろしいのであれば、.description{ } の中のプロパティ padding の数字を変更し、調整をおこなって下さい。