| ステップ1：あなたのココログのスタイルシートを引っ張り出そう！ |
| 私のココログのスタイルシートで説明します。当然あなたのスタイルシートとは多少違うはずです。 まず最初にあなたのココログを立ち上げてください。スタイルシートを捕まえに行きましょう！ ブラウザのツールバーから”表示”クリック”ソース(C)”クリックします。すると下のようなソースが自動的に立ち上がります。 その中にある赤い文字の部分が(わかりやすいように赤にしてあります)禁断の果実ココログを縛り付けているスタイルシートです。こんな所に隠れていたんですね。悪いやっちゃ！ もちろんこの部分は各自違うアドレスです。頑張って見つけてください。 |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="generator" content="http://www.typepad.com/" /> <title>おとぼけ.com</title> <link rel="stylesheet" href="http://otoboke.txt-nifty.com/torio/styles.css" type="text/css" /> <link rel="alternate" type="application/rss+xml" title="RSS" href="http://otoboke.txt-nifty.com/torio/index.rdf" /> <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://app.cocolog-nifty.com/t/rsd/4988" /> <link rel="meta" type="application/rdf+xml" title="FOAF" href="http://otoboke.txt-nifty.com/foaf.rdf" /> |
| ステップ2：スタイルシートをさらし者にしよう！ |
| 見つけ出したスタイルシートアドレスをブラウザにコピーペースト”移動”をクリック！この作業でメモ帳などで自動的にスタイルシートの中身が表示されたあなた！幸せ者です！とりあえずお待ちください。 さて残念ながたウンともスンとも反応がなく下のようなおなじみの物が出てしまったあなた！  ←これじゃ！ご安心ください。アプリケーションの一覧からワードなどのテキストをいじれるソフトを指定してやればタイルシートの中身が表示されます。 まれにエラーになって5〜6行しか表示されない時があります。正常に表示した場合ズラズラーと訳にわからない文字が並びますから直ぐわかります。 相性の問題かと思うのですがどうしてそうなるのか考えても仕方が無いので相性のいいソフトを探してください。 |
| ステップ3：スタイルシートを好きな場所に別名で保存にしよう！ |
| http://otoboke.txt-nifty.com/torio/styles.css の中身が下に書いてあります。 今回の場合タイトル部分にスタイルシートを使い画像を表示させるのがテーマですので必要な部分のみ書き出しました。私のココログの場合最初の「body {〜 height: 38px;」に全てその要素が含まれています。 |
| body { margin: 0px 0px 20px 0px; background-color: #BB9D28; text-align: center; } a { text-decoration: underline; } a:link { color: #F5EFFF; } a:visited { color: #EDEFFF; } a:active { color: #EDEFFF; } a:hover { color: #E7EEFF; } h1, h2, h3 { margin: 0px; padding: 0px; font-weight: normal; } #container { line-height: 140%; margin-right: auto; margin-left: auto; text-align: left; padding: 0px; width: 800px; background-color: #000000; } #banner { font-family: Georgia, 'Times New Roman', serif; color: #BB9D28; background-color: #000000; text-align: center; padding: 15px; border: 1px solid #BB9D28; height: 38px; } |
| ココログのスタイルシートのファイル名はstyles.cssとなっているのがおわかりですね。この正規バージョンは大事にとりあえずそのまま”好きな場所に好きなホルダーの名前”で保存します。 保存しましたか？では保存したstyles.cssをどんな名前でもいいのですが正規バージョンと区別するために別名保存をしましょう。私はstyles-torio.cssという名前で保存しました。 次にいよいよ書き換え作業です。さっき別名保存したstyles-torio.cssを開いてください。 |
| ステップ4：スタイルシートを書き換えよう！ |
| こんなに面倒をしてスタイルシートを引っ張りだしたのに書き換えるところはたった一ヶ所です。スタイルシートの中にわかりやすく赤い文字にしてある部分です。 ↓この部分を探すのじゃ！ background-color: #000000; 私のスタイルシートは上から数えて約51番目じゃ！約と言うのは途中でどこ数えているかわからなくなったから♪ background-color: #000000; ←この部分の赤い文字を↓下の文字に書き換えます。 image:url(http://otoboke.txt-nifty.com/torio/hana2.gif) ↓これで完成です。あといじる所はありません。 background-image:url(http://otoboke.txt-nifty.com/torio/hana2.gif); 今回テストでスタイルシートの実験をしてみたいという方も居ると思います。「壁紙なんてないよー」という人のために直リンクしています。http://otoboke.txt-nifty.com/torio/hana2.gifの部分がそうです。スタイルシートを使ってタイトル部分に画像を表示させつことができた人はhttp://otoboke.txt-nifty.com/torio/hana2.gifの部分を自分用の画像アドレスに書きかえてください。もちろんこのまま使い続けてもかまいません。お好きにどうぞ(笑) |
| ステップ5：スタイルシートをアップロードしよう！ |
| ココログにログインして”投稿”→”アップロード”アップロード先を選択するでstyles-torio.cssを選択してアップロードボタンを押してください。これでスタイルシートの作業は完了です。 |
| ステップ6：お疲れ様でございます。最後にいよいよ画像を表示させましょう！ |
| ココログにログインして”ウエブログ”→”設定の変更”→”ウェブログの基本情報”までどんな手段でもかまいませんからたどり着いてください。 運良く下のページにたどり着けたら”ウエグログのサブタイトル（キャッチフレーズ）に魔法の呪文を貼り付けます。  ←この部分に魔法の呪文を貼り付ける魔法の呪文↓を書く もちろん赤い文字の部分は自分用のスタイルシートアドレスに書きかえてください。 <link rel="stylesheet" href="http://otoboke.txt-nifty.com/torio/styles-torio.css"type="text/css"/> |
| これでタイトルページにスタイルシートを使って画像を表示できるはずです。頑張って挑戦してください。 なお、あくまでも自己責任でお願いします。ここに書いてあることを実行して起こった苦情はいっさい受け付けません。受け付けているのはカンパだけです。 |