タイトルを画像に （ 1 ）

やり方は色々とあります。本来はその人のブログのデザインやテンプレートに合わせて考えていかなければならないのですが、今日は汎用的に簡単な導入の方法をご紹介します。

■ ブログタイトルの画像を作成して、それを表示させる方法。

初めにタイトルとして使用する画像を用意します。お持ちの画像編集ソフト （ ペイントショップ、イラストレーターなど ） を使用して " かっちょいい〜 " タイトル画像を作成して下さい。拡張子は、gif、jpg、png のいずれでも良いですよ。あまり大きいものはどうかと思います。 ブログ全体のデザインに合わせて適当なものを作成して下さい。

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

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



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

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

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


AQ 的には上の display:none; がおすすめ。(^^)

ここまでできたらブログの再構築を 『 全て再構築 』 しましょう。これで完成です。ブログタイトル画像の位置を、自分の好みの位置に変更したい場合は、同じ .blogtitle{ } 内の、padding: ○○ px ○○ px ○○ px ○○ px; の部分を変更します。 このパディングの説明は過去記事のこちらをご覧下さい。


■ 訂正 ： 2006年04月12日
ごめんなさい ^^; ブログタイトル画像の位置を、自分の好みの位置に変更したい場合は ・・・ のところで間違っていました。あらためて追記します。

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


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



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

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

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