本サイト

無料ブログはココログ

« タイトルの文字の色が変えられません | トップページ | 九州新幹線「つばめ」のマウス »

2004.02.22

タイトル画像の張り方(ココログ超初心者用)

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

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

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

http://自分のココログのURL/styles.css

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

(例) http://acela.way-nifty.com/acela/styles.css

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

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

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

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

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

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

}

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


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

 http://自分のココログのURL/画像ファイル名 (画像ファイル名は、<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;
}

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

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

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

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

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

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

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

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

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

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

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


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

#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;
}

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


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

« タイトルの文字の色が変えられません | トップページ | 九州新幹線「つばめ」のマウス »

(8)ココログ」カテゴリの記事

コメント

はじめまして。

・タイトル画像あり
・タイトル画像からTOPページへリンクあり
・タイトル文字なし
・サブタイトル文字なし

これらをココログ・ベーシックで実現したく、参考記事を探していたところ、こちらのページにたどり着きました。

おかげさまで、とても参考になりました。
ありがとうございます。

#banner h1 の部分に、「background-image: url」を書いてみました。
タイトル画像のサイズは、700×100です。

以下のように設定したところ、希望どおりのデザインになりました。

#container {
line-height: 140%;
margin-right: auto;
margin-left: auto;
text-align: left;
padding: 0px;
width: 700px;

background-color: #FFFFFF;
border: 0;
}

#banner {
font-family: 'MS PGothic', 'Hiragino Kaku Gothic Pro W3', Osaka, sans-serif;
color: #FFFFFF;
text-align: left;
padding: 10px;
border: 0;
}


#banner a {
color: #FFFFFF;
text-decoration: none;
text-align: right;
display: block;
width: 700px;
height:100px;
text-decoration: none;
}


#banner h1 {
background-image: url(画像ファイルのURL);
}

#banner h2 {
display: none;
}

初めまして

スタイルシートの張り方大変わかりやすくて
助かりました。ありがとうございました。

記事、お借りします。

初めまして
ココログ・小技で検索してこちらの記事に辿り着き、コメントやトラバを参考に画像を入れることが出来ました
感謝です! 事後報告で申し訳ありませんが 私の記事で紹介させていただきました。

ブログへの画像のタイトル表示方法。勉強させてもらいました。参考になりました。現在、自分のブログに設置できています。ありがとうございました。

はじめまして。
「タイトル画像の張り方」。さっそく試してみましたが、難なく成功しました。
とてもわかりやすい説明でした。
ありがとうございました。
ちなみに初トラックバックでもあります。

 改めまして。
 私の拙いHPの方にもお越し頂き、ありがとうございます。
 すごく嬉しかったです。
 また遊びに来させて頂きますね!

 はじめまして。
 こちらの記事を参考にさせて頂いて、なんとか画像を貼ることができました。
 まさに超初心者のワタシにもできるように書いて下さって、ありがとうございます!

はじめまして。
こちらの記事を参考にさせて頂き、タイトル画像を張り付ける事が出来ました〜ッ。
丁寧な解説、ありがとうございました。

初めまして。
ずっとタイトル画像を付けたかったんですが、出来ずにいました。
こちらと詩織さんの記事を参考にさせて頂き、
何とか画像が貼れたようです(^^ゞ
あと、フォントカラーやら何やら、
いじりたいところは一杯ですが、
ゆっくりと勉強していきたいと思います。
ありがとうございました。

追記です。
「lt;」にしておけば、コピペできそうですね。タグを閉じる方は「gt;」で表示できると思います。

生成されたソースを読んでみたら、自前のstyle.cssをアップロードしてやれば大丈夫だろうな、と思ってトライしたのですが、レイアウトを変更したら元に戻ってしまったので、どうしたものかと頭を悩ませていました。

ココログで最初に訪れたのがここでしたので、デザイン変更についてわかりやすく説明されていて大変参考になりました。ありがとうございました。

ところで、自分のサブタイトルのところに、項目<6>で例に示されているタグをコピペしたものぐさな僕には、ちょっとかっこ悪い結末が待ち構えていました。

表示の関係で最初の「<」が大文字になっている旨を明記してくださるか、「lt;」としてペーストしたときにすぐにわかるようにしておいてくださると、更に親切かと思いました。僕のようなうっかりさんは、そうは居ないと思うのですが。

追加です.
私がカウンタを右欄に置いているのも同じ理由からです.

初めまして.
貴HPの記事を私のHP(別館DATABASE)で勝手に引用(転載?)させて頂いていますTAMOといいます.
h2タグ内に書くとRSSリーダで表示されてしまうので,一度/h2と書いてからリンク部分を書き最後に強制的に終わらせたh2を追加しておくと問題が起きにくいようです.
私のblogのソースを見て頂くと判ると思います.
PS:引用の件問題があれば削除しますので,その旨ご連絡ください.

はじめまして。
参考になりました!
詞織さんので全然できなかったんですが、
<3>のwordpadで開くというのが分かったので、
ばっちりです!
あとは、見よう見真似で、色々いじってみようと
思います。
タイトルのカラーも変えられました。

本当にありがとうございます、
感謝!!

コメントを書く

コメントは記事投稿者が公開するまで表示されません。

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/13274/222539

この記事へのトラックバック一覧です: タイトル画像の張り方(ココログ超初心者用):

» スタイルシートに成功! [明日は明日の風が吹く]
私は自分のサイトを持ったのが初めてなので、 HTMLやCSSに関する知識が全くなかった。 で、ココログを始めた時、いくつかのサイトのデザインがカスタマイズされて... [続きを読む]

» タイトル画像を貼る [うぇぶろぐ初体験]
海外鉄道旅行愛好者 タイトル画像の張り方(ココログ超初心者用) を見ながら、タイトル画像貼りに挑戦してみる。 ぼくのblogの場合、画像サイズは 802*120... [続きを読む]

» 海外鉄道旅行愛好者: タイトル画像の張り方(ココログ超初心者用) [此処録ANNEX : ココログTIPS]
海外鉄道旅行愛好者: タイトル画像の張り方(ココログ超初心者用)... [続きを読む]

» 永遠の初心者・ココログをカスタマイズする [とさか日記 日常編]
ココログカスタマイズに挑戦した。今日手をつけたところはタイトル画像関係と、文字の [続きを読む]

» バックオーライ! [Let go.]
眺めててもわからんよねーという事で、トラックバックを試してみる。 ニフ鯖ではト [続きを読む]

» タイトル文字色を変更 [伊豆の登り子]
 「海外鉄道旅行愛好者」というココログのこの記事を参考にして、タイトルの文字色を [続きを読む]

» デザイン [nari's diary]
cocologのデザインをいじれる方法が解ったので早速、イメチェン。あれこれ試行 [続きを読む]

» 初の試み [えっち家のひとびと]
いろいろなかたのココログを見ると、タイトル部分に画像が入っていてかっこいい!とい [続きを読む]

» (*/∇\*)キャー [AG blog]
どうにかカウンターも設置できたーっ♪ いやー ここまで変えられるとは…(笑 こ [続きを読む]

» ココログの模様替え [月見亭~瓦版~]
レポートの資料がなかなか見つからず、気分転換にゲームをと思っても 微妙にやる気が [続きを読む]

» ココログカスタマイズ [rhino10 diary]
ずっと、ココログのテンプレートそのまま使っていましたが、メインのページにデザイン [続きを読む]

» タイトルのデザインを変えてみました [流石奇屋別宅]
流石奇屋ヒットです。 初心者の登竜門。「タイトルのデザイン」を変えてみました。 [続きを読む]

» タイトルに画像を貼る。 [Sachu.]
旦那ちゃんが、「タイトルにどうしても画像が入れられない。やってみて。」というので [続きを読む]

« タイトルの文字の色が変えられません | トップページ | 九州新幹線「つばめ」のマウス »

Google

  • Google

AMAZON