2007年06月09日

ライブドアブログのヘッダーには、背景に画像が使われているテンプレートが多いようです。

ヘッダーの背景画像をオリジナルのものに変更するだけでも、そのブログの印象はかなり変わりますよね。

では、この背景画像を変更する方法を説明していきます。
*ここでヘッダーとは、ブログタイトルブログ説明文がある部分を指します。

ライブドアブログのヘッダーの背景画像は、ブログタイトルとブログ説明文のデザイン設定を行うスタイルシート(CSS)の部分に指定されています。


それでは、その部分を確認してみましょう。

ブログの管理ページから、【カスタマイズ/管理】→【デザインの設定】→【カスタマイズ】の順番で、スタイルシート(CSS)ファイルを開いてください。

ここまでの手順は、「カスタマイズ応用編では」を参考にしてください。

ライブドアブログのヘッダーの背景画像は、下記のように記述されています。
*ここでは、ライブドアブログテンプレートから、「シーズン」→「空02」のテンプレートのスタイルシート(CSS)を使って説明します。

「#banner,#subbanner」で、はじまる箇所を探してください。
*テンプレートによっては、「#banner」のみしか記述がないものもあります。
また、あなたがお使いのテンプレートによっては、ヘッダーの背景画像が、「#banner,#subbanner」に記述されていない場合があるかもしれませんが、多くのライブドアブログのテンプレートで、ヘッダーの背景画像は、「#banner,#subbanner」もしくは、「#banner」の部分に記述されていると思われます。

#banner,#subbanner{
 width:722px;
 height:209px;
 text-align:left;
 background:url(http://image.blog.livedoor.com/img/usr/sky_02/
main.jpg) no-repeat 50% 0; }

上記のスタイルシート(CSS)を少し読み砕いてみると、

「width:722px;」は、背景画像の幅が「722px」だということを指定しています。
「height:209px;」は、背景画像の高さが「209px」だということを指定しています。

ヘッダーの背景画像を変更する際は、このサイズの画像を用意します。


「text-align:left;」は、ここは画像には直接関係はありません。ブログタイトルとブログ説明文の文字の配置を左寄せに指定しています。
*ブログタイトルとブログ説明文の実際の配置は、「.blogtitle」「.description」などで指定されています。
参考:「ブログタイトルの文字の大きさを変更する」「ブログ説明文の文字の大きさを変更する

background:url(http://image.blog.livedoor.com/img/usr/sky_02/
main.jpg) no-repeat 50% 0;

ここが、背景画像を指定している箇所です。

この部分の
「http://image.blog.livedoor.com/img/usr/sky_02/main.jpg」
は、ヘッダーの背景画像が置かれている(保存されている)場所です。

この部分をあなたが変更したい画像と置き換えます。


*補足ですが、このようにurlで画像へのリンクを設定する方法を、「絶対パス」といいます。
ライブドアブログ有料版(プロ)では、「絶対パス」による画像のリンク設定ではなく、FTP機能を利用して、「相対パス」による方法で画像のリンク設定が行えます。


念のため、このurlがヘッダー画像であるかどうか確認してみましょう。

このurlをコピーして、Webブラウザーで確認します。

ヘッダー画像確認

Webブラウザーのアドレス欄に、コピーしたurlを貼り付けてあなたのパソコンのキーボードの「Enter」キーを押してください。

ヘッダー画像確認2

*違う画像が表示された場合は、その箇所はヘッダー画像を表す箇所ではありません。

このように背景画像は、「background」プロパティで、「url」にて指定されています。

ここの「(    )」にも意味がありますので、削除しないでください。

「no-repeat 50% 0」は、画像を繰り返さないで(1度だけ)表示し、横方向の位置は、「#banner,#subbanner」の中央、縦方向の位置は、「#banner,#subbanner」のトップに表示する、という意味です。

わかりにくい部分ですので、画像を定位置に表示するためのおまじない程度に考えて、記述はそのままにしておきましょう。

なお、この部分はテンプレートによっては、記述内容が違う場合がありますが、その場合も変更しない方が無難です。


変更したい画像は、あらかじめアップロードしておく必要があります。

画像のアップロード方法は、「画像のアップロード方法」を参考にしてください。


なお、ヘッダーの背景画像をアップロードするときは、サムネイルを作成する必要はありませんので、「サムネイル作成」のチェックは、はずしてください。

アップロードした画像のurlの確認方法は、

画像のアップロード6

ここで、上の画像の赤丸部分、画像につけたタイトル部分をクリックすると、Webブラウザー(インターネットエクスプローラー、Firefoxなど)が立ち上がり、その上部のアドレス欄に、アップロードした画像が置かれているURLが表示されます。

ヘッダー画像URL

このurlをコピーして、テキストエディタに一旦貼り付けます。

ヘッダー画像URL2

このurlで、アンダーラインの部分、「jpg」までが画像のurlです。

その後ろ、「?」から後は必要ないので、削除しておきます。

ヘッダー画像URL3

このurlを下記のスタイルシート(CSS)の
「http://image.blog.livedoor.com/img/usr/sky_02/main.jpg」の部分と置き換えます。

#banner,#subbanner{
 width:722px;
 height:209px;
 text-align:left;
 background:url(http://image.blog.livedoor.com/img/usr/sky_02/
main.jpg) no-repeat 50% 0; }

「http://image.blog.livedoor.com/img/usr/sky_02/main.jpg」を削除し、テキストエディタに貼り付けてあるurlをコピーして、貼り付けます。


ヘッダーの背景画像の変更が終わったら、管理画面の下の方にある、【この内容で保存する】をクリックし、その後、ブログを再構築してください。

再構築は、【スタルシート(CSS)】だけでもOKです。

再構築が終わったら、あなたのブログを実際に見て、確認してください。



take-web at 20:38│Comments(0)TrackBack(1)clip!画像関連 

トラックバックURL

この記事へのトラックバック

1. ブログのデザインを変更するその前に、、  [ ビギナー大人ブログ 〜はやく大人になりたい〜 ]   2009年04月23日 22:34
タイトルどおりブログのデザインをするその前に先輩ブロガーさん達のブログを見て勉強しようと思う。なぜならそれは、、、自分のブログのデザインのイメージが分からないからっ!!

この記事にコメントする

名前:
URL:
  情報を記憶: 評価: 顔