2017年10月
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31        

過去の記事

« ゲーセンと母親 | トップページ | スタイルシート:バナーと幅の変更 »

2006年2月 4日 (土)

スタイルシート:入手&アップロード編

少し前のことになりますが、宝塚カテゴリーでご一緒しているサイトの方が、このcocologでスタイルシートを変更していらっしゃいました。わ~素敵~私もやりたいなぁと思っていたのですが、とりあえず昨日の目標は

  • 一番上のバナーの高さを小さくする
  • 3列だと本文の幅がすごく狭くなるため、今の幅を保ったまま3列にする。

をゴールとして、改造に着手してみました(^^; きっと私のことだから、数ヶ月経ったら何をやったか忘れてしまうので、以下にまとめておこうと思います。ココログプロにしなくても大丈夫でしたよ!これが出来るようになったら、コメントをツリーで表示するとか、自分の好きな背景に変更するとか、いろいろできますよね~。

スタイルシートを手に入れる

(1) 自分のブログを表示し、ブラウザのメニューからそのソースを表示させる。
(2) そこから link rel="stylesheet" href="☆"type="text/css"/ という記述を探す。
(3) ☆の部分をブラウザのURLに貼り付けて直接表示する。
(4) そのスタイルシートを”<自分で指定した名前>.css”という名前で保存する。

スタイルシートを変更する

(1) *.cssをメモ帳などのテキストエディタで開く。
(2) "url(icon_title.gif)"という記述の場合は、自分のディレクトリにその画像がないと表示されないので、全て☆のところからコピーしてくるか、自分で用意した画像の名前に変更する。

変更したスタイルシートで表示する

(1) コントロールパネルのファイルタブから、自分の指定フォルダへアップロードする。
(2) ”ブログ”の”設定”タブから、以下の記述をを貼り付けて、サブタイトルを変更する。
  <link rel="stylesheet" href="(css fileのfull path)"type="text/css"/>
(3) 保存、反映をして確認。

ここで注意ですが、全部の記事に反映すると失敗した時に影響が大きいので、カテゴリーだけ反映、などを選んで確認します。私は、スタイルシートの変更のところで、下で紹介している部分などに変更を入れて、高さや幅の変更をしました。ちなみにbanner-bg.jpgは、802pixel×300pixelでしたが902pixel×150pixelで保存し、アップロードしてあります。

#banner {
 background: url(http://chie.air-nifty.com/style/banner-bg_902.jpg) no-repeat top center;
 width: 902px; ←802だったけれど、ここを902に。
 height: 150px; ←もともとは300。
}

参考にさせていただいたブログは以下の通りです。ありがとうございました!

PURAPURA PANDAさま:
   http://marimon-marimon.air-nifty.com/purapurapanda/2006/01/post_e97f.html
るるが株式会社さま:
   http://ruruga.cocolog-nifty.com/rurugainc/2005/01/post_22.html

« ゲーセンと母親 | トップページ | スタイルシート:バナーと幅の変更 »

ウェブログ・ココログ関連」カテゴリの記事

コメント

お~こりゃまた手の込んだことを…。
そうなんですよね、3コラムのテンプレートを使うと、表示される情報量は増える気がするんですが、肝心の本文の幅が狭くなってしまうのが泣き所。ただ未だに800×600の解像度のPCでアクセスしてくれる方もいらっしゃるようなので、ただ横に伸ばせばいいというもんでもないですし、その辺りのバランスが難しい…。
ちょいと別の記事へのコメントになりますが、うちはフツーにゲーセン行きます。

こんにちは~!
さっそくお邪魔します♪

詳しく書いていらっしゃいますね~。
思いついたまま、何にも考えずに着手した私とはやはり違いますね(^ ^;)

私は他の方のブログに公開されてるモノをコピーさせて頂いて、自分のブログ用に少し手を加えたりアレンジするだけだったので、いまいち理解できてない部分もあったのですが、この様に整理して書くとスッキリわかるかな~っと思いました!めんどくさがりの私ですが、時間ができたらやってみよう・・・・。

それではまたお邪魔しますネ~(^ー^* )

φ(¨;)ウーン 意味はだいたい…
Googleの検索も入れたい…
実行は可能かしらん?(^^;

>じぇふさま
スタイルシートの変更は出来ません、というコース設定なのに、裏技で変えることに今まで多少抵抗があったんです。でも、じぇふさまのところからcocologの比較表を見て、なんだフリーでも手書きcssが開放されているのに、お金を払っている私がだめって言われる筋合いはないわ(^^;って思って、開始してしまいました(笑)

800が最大の人もいるのですね。900への変更が出来たので、800でサイドの文字を小さくして、本文を幅広に出来ないかなぁ~なんて思いました。

UFOキャッチャーは、私も一回はやったことあるはず…。でもあまり記憶にない…。ゲーセンではなく、デパートとか温泉宿とか、そんなところだったのかなぁ(^^;

>marimonさま
こちらにも来てくださってありがとうございます!marimonさんのところが素敵だと思ったから改造してみようと思い立ったわけで、感謝しています~m(_ _)m

>恵さま
Googleはスタイルシートとは関係なくできますよ。
http://chie.air-nifty.com/sumire/2005/09/post_8ed3.html
にあるように、googleに申し込みをして、そこで指定されるscriptを
マイリストのリンクとして登録すればOKです!

コメントを書く

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

トラックバック

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

この記事へのトラックバック一覧です: スタイルシート:入手&アップロード編:

« ゲーセンと母親 | トップページ | スタイルシート:バナーと幅の変更 »

足あと代わりに押してね♪

  •  
    匿名のまま、読んだことを知らせることができます(ボタンが押された回数のみカウントされます)。誰かは分からなくても、読んでくださったんだ~!と、とっても励みになるので、是非ぽちっと押して下さると嬉しいです。よろしくお願いします♪

    結果のグラフ例はこちら

トンボ玉販売

無料ブログはココログ