汽車のりＢＬＯＧ

詞織さんのページにある「自作スタイルシートの適用」を参照に、当ココログのタイトルに画像貼り付けを成功させることが出来ましたので、そのレポートをこちらに残したいと思います。

＜１＞タイトル画像を用意する
まずタイトルに使用したい画像を用意しましょう。
サイズはココログの通常の使用であれば「802*120」のサイズのようです。
画像フォーマットはjpgでもｇｉｆでも良いようですが、私はｊｐｇで準備してみました。
私の場合は「back_001.jpg」名で作成しました。

＜２＞スタイルシートの入手
ココログのデザインは「スタイルシート」というもので定義されているとのことです。
先ず自分のココログで現在使用されている「スタイルシート」を入手します。
方法としては、ブラウザのアドレス欄に次のＵＲＬを入力します。

http://自分のココログのＵＲＬ/styles.css

注意点としては、自分のココログのＵＲＬにフォルダを忘れないこと。
参考として、当ココログでの例を表示します。

（例） http://acela.way-nifty.com/acela/styles.css

入力を終えたら、Enterキーを押しましょう。
すると、多分「メモ帳」が勝手に立ち上がって、
body {margin: 0px 0px 20px 0px;・・・・・・
なるものが記載されていると思います。これが「スタイルシート」なる設定ファイルです。
これをＰＣ内に保存します。
このときに名前を「styles.css」ではなく、別の名前で保存します。
私の場合は「styles-acela.css」として保存しました。

＜３＞スタイルシートを正しく保存しなおす。
先ほど＜2＞で保存したスタイルシートをダブルクリックで開けると

body {↑margin: 0px 0px 20px 0px;↑　background-color: #000022;
#000033;↑　overflow: hidden;↑}　#center {
・・・・・

このように表示されてしまった人は、一度ファイルを閉じ、wordpadを指定して開いてください。
（ＸＰの場合、ファイルをマウスで指して、右ボタン。プログラムから開く、でwordpadが指定できます。）

wordpadで開くと、さっきまで横に長かったものが、途中で改行され次のように表示されればＯＫです。

body {
margin: 0px 0px 20px 0px;
background-color: #000022;
text-align: center;

}

このまま、上書きで保存してください。私の場合は「styles-acela.css」で保存しました。

＜４＞スタイルシートの加工　画像ファイルの指定
スタイルシートをダブルクリックで開き、#banner と書いてある場所を探します。
ここに下の下線で表示されている記述を追加します。
勿論、url(http://acela.way-nifty.com/acela/back_001.jpg)の部分は、ご自身の設定変更してください。

　http://自分のココログのＵＲＬ/画像ファイル名　（画像ファイル名は、＜1＞で作成したもの）

#banner {
font-family: Verdana, Arial, sans-serif;
color: #f5f5dc;
　　　 background-image: url(http://acela.way-nifty.com/acela/back_001.jpg);

text-align: left;
padding: 15px;
border-bottom: 1px solid #999999;
height: 39px;
}

＜５＞ファイルのアップデート
＜１＞で作成した画像ファイル及び、＜４＞で加工したスタイルシートを、自分のココログにアップロードします。
方法としては、ココログの記事投稿画面で記事用の写真をアップロードするのと同じ感覚で構いません。
注意として画像ファイルをアップロードする際に、自動縮小されないようにボックスのチェックをはずすのを忘れないようにしましょう。

＊ここまでで準備はＯＫです。　
　まだこの段階では、貴方のココログには何も変化はないはずです。
　では、準備したファイルを使用し、ココログのタイトル画面に画像を表示させて見ましょう。

＜６＞サブタイトルにタグを挿入
ココログにログインし、「ウェブログ」→「設定の変更」と進みます。すると右のほうに
「ウェブログのサブタイトル（キャッチフレーズ）：」と書かれたタイトルとその下に入力用のＢＯＸがあるのが確認できます。
多分そこには、貴方のココログを表示したときに、タイトルの下に現れる貴方のココログの紹介が記述されていることと思います。　ここを加工するのです。

私の場合、スタイルシート設定前は
「更新の遅い「国内外の列車旅行を中心としたＨＰ」管理者のつぶやき」
とのみ書いてありましたが、ここに先ほど作成した「スタイルシート」を参照するように記述する必要があります。
下の太字の部分の記述をコメントの前に記述します。

＜link rel="stylesheet" href="http://acela.way-nifty.com/acela/styles-acela.css" type="text/css" />
更新の遅い「国内外の列車旅行を中心としたＨＰ」管理者のつぶやき
　
勿論、http://acela.way-nifty.com/acela/styles-acela.css　の部分は、自分のココログのＵＲＬと、＜４＞～＜５＞の部分で作成したスタイルシート名に変更してください。

記述が終わったら、画面下にある「変更を保存」ボタンを押して、その後画面右上の方に表示される「サイトに反映」ボタンを押します。
すると別ウインドウが開きますので、「全てのファイル」を更新対象にして処理が終わると・・・・

貴方のココログにタイトル画像が表示されているはずです　　どうでしょうか？

＜参考 応用編＞
タイトルの画像表示がうまく出来たら、今度はタイトルとサブタイトルの文字を変更したい場合が出るかもしれません。
その場合は、「スタイルシート」次の部分に変更を加えて、再アップデート＆サイトへ反映を行ってください。
（情報提供：なな様）

＜タイトル文字　私の場合「海外鉄道旅行愛好者」の部分＞

#banner a {
color: #eee8aa;
text-decoration: none;
}

上記、太字部分を１６進で色指定します。

＜サブタイトル文字　私の場合「更新の遅い「国内外・・・・」の部分＞

#banner {
font-family: Verdana, Arial, sans-serif;
color: #f5f5dc;
　　　 background-image: url(http://acela.way-nifty.com/acela/back_001.jpg);

text-align: left;
padding: 15px;
border-bottom: 1px solid #999999;
height: 39px;
}

上記、太字部分を１６進で色指定します。

ご参考になりましたでしょうか？
間違っている部分、よく分からない部分など、コメントをいただければ修正したいと思います。
またうまく出来た方からのメッセージもお待ちしています！