« 工事します | トップページ | へたえ解釈しりとり(42) »

2006.03.24

ベーシックでもできるんだね

昨日の夜からはじまったサイトの工事、一応完了しました。

どこがどう変わったの?という人のために

前はこんな感じ。ねっ、変わったでしょ?

いい年してピンクとか黄色とか淡い色が好きなので、タイトルの部分をピンクにしたかったのです。

でも、パソコン音痴だし、無料のベーシックだしと半ばあきらめていました。

と、こういう時にいつも優しいzordさんが助け舟を出してくださるのです。

本当にありがたいです。

というわけで、ここからは覚書。

まずは自分のCSSを見なければいけません。どうやったら見られるのか、私知らなかったんですよね~。

IEのアドレスで見られなかった私はココログにログインしてコントロールパネル→ファイル→fancy_petに入りました。ここにstyles.cssがありました。
あったら、これを右クリックして「対象をファイルに保存」しました。名前はfancy_pet_styles.cssで保存。それをワードから開きます。

英語の羅列されている文字や英語や番号がズラズラ~ッと出てきて、はは~ん、これがあばら骨か・・と思いました。

触るのこわ~っ。色々ある中ここを特にいじりました。

#banner {

       font-family: 'Trebuchet MS', Verdana,sans-serif;

       color: #FFFFFF;

       background-color: #8C5C2C;

       text-align: left;

       padding: 18px;

       border-bottom: 1px dotted #8C5C2C;

       }

の♯から始まる部分が色コードなんですね~。初めて知った^^;

私の場合、2箇所ある#8C5C2Cを両方とも#F192DEに変えました。

ピンク色のコード番号はzordさんに教えていただいたものを使いました。

他の色コードについてはhttp://www.tagindex.com/color/color_name.htmlを参考。

あと、タイトルの文字を装飾系文字にしたかったので、
font-family: 'Trebuchet MS', Verdana,sans-serif;を

font-family:fantasy, 'Trebuchet MS', Verdanaに変えました。

全部の作業を終え、保存しなおします。

そして、ココログにもう一回ログインしてコントロールパネル→ファイル→「ホーム/fancy_pet/images」にfancy_pet_styles.cssをアップロード。

今度はブログ→fancy_pet→設定に移動してブログのサブタイトル部分に<link rel="stylesheet"href="http://harujion.tea-nifty.com/fancy_pet/images/fancy_pet_styles.css"type="text/css"/>と入れて変更、反映させます。

というわけで、これはほんの一部なのだけど、今回タイトルの色とフォントを変えるやり方だけはマスターできました。

zordさん、丁寧にわかるように教えてくださって本当にありがとうございましたm(__)m

忘れないように、ここに書かせていただきました。

【追記】

タイトルの装飾系文字は見るパソコンによって全く見え方が違うということがわかったので、またsans-serifのゴシック文字に戻しました。

|

« 工事します | トップページ | へたえ解釈しりとり(42) »

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

コメント

お疲れ様でした^^
僕は仕事場のPCのFirefoxで見ていたので違いがあまり分からなかったんですが、家に帰ってIEで見るとフォントとか結構凝ってますね~^^
fantasy という文字設定、見るPCとブラウザーでかなり見え方が違うみたいですですね。

styles.cssを別名で作って、わざわざリンクで指定している理由ですが、本物のstyles.cssを上書きすることもできますけど、そうするとココログの仕組み上、コメント投稿やエントリーを書いた時に、オリジナルのstyles.cssに戻ってしまうんです。なので今回は「ホーム/fancy_pet/images」に別名で作成してもらい、リンク指定してもらいました。
ちょっと応用すると画像をタイトルバナーに貼り付けることもできますので、それはまたそのうち^^

投稿: zord | 2006.03.24 19:56

あっ,このあたり,今度のバージョンアップでやり方が変更になるようです.
(直接CSSを編集できるようになる?)
でも,CSSファイルを書き換えるのは同じだからいいですね.
私も勉強しないと!と思いつつ,はや数ヶ月…見習わねば…

投稿: ひろひろし | 2006.03.24 20:16

zordさん、ひろひろしさん、こんばんは~。
コメントをありがとうございます。

zordさん

本当にお世話になりました。
見え方が違うのですね。
自分のパソコンでは満足な出来上がりです^^

>styles.cssを別名で作って、わざわざリンクで指定している理由ですが、本物のstyles.cssを上書きすることもできますけど、そうするとココログの仕組み上、コメント投稿やエントリーを書いた時に、オリジナルのstyles.cssに戻ってしまうんです。

そういうことだったのですね。
わけもわからず、必死に言われたとおりにやりました(^^)

でね、zordさん!聞いてくださいよ。
私がこんなに苦労したのに、次女ったら
簡単に自分のサイトのタイトルを装飾系文字に変えちゃったんです。
エキサイトブログはcssがまるみえで変えやすいみたいです。
ココログはちょっと面倒くさいですね~。

>ちょっと応用すると画像をタイトルバナーに貼り付けることもできますので、それはまたそのうち^^

今、脳がパンパンですのでそのうち容量が減った頃
また教えてくださいね~(^^)


ひろしさん

今度のバージョンアップでベーシックも簡単にできるようになるのでしょうか?
色々期待していてできなかったらがっかりだし・・・
ということで早めにサイトを変えてみました^^
今回、これがcssというやつか~とすごく勉強になりました。

>私も勉強しないと!と思いつつ,はや数ヶ月…見習わねば…

ひろしさんはお出来になるでしょ(^^)

投稿: ぶんぶん | 2006.03.24 20:29

すごい、ぶんぶんさん。
私も読ませて頂いて、途中までやってみた物の
あまりにズラズラ英語が並んで、
目の前がクラクラしちゃいました・・・

時間のある日に、ゆっくり取り組んでみたいと思いました。
ありがとうございました。

投稿: 陶片木 | 2006.03.24 21:17

うちもベーシックですよ。
もう触る気力がありませんけど・・(^^ゞ

投稿: みやざき | 2006.03.24 21:27

陶片木さん、こんばんは^^
コメントありがとうございます。

ズラズラ英語怖いですよね^^
何が何を表しているのかよくわからないし・・・
私もzordさんに教えていただかなければ、とてもとても・・・

http://www.cocolog-nifty.com/cocoflash/categories/new/html/de13abf3f38fec58f7fc532000a258d0.html
も参考になりますよ^^

あと、もしいじるのであれば、標準テンプレートからじゃないと
できないのかもしれません。私のはあゆというテンプレートが基準です。

投稿: ぶんぶん | 2006.03.24 21:29

みやざきさん、こんばんは~。
コメントありがとうございます。


みやざきさんもベーシックだったのですね。
ベーシックでも皆さん色々自分の好きなように変えているのですね~。

>もう触る気力がありませんけど・・(^^ゞ

かっこいいテンプレートだから
もういじる必要ないですよー。

投稿: ぶんぶん | 2006.03.24 21:32

こんばんは!
やりましたねっ(^O^)/凄い!!

読んでも読んでも、よく分からない・・・。
けど、ここを乗り切れば、きっと後に繋がるんでしょうね。。。

ピンクとクリームの感じがとてもいいです!!
私も参考にさせてもらって、いつの日にか、トライしたい
です☆
このページをページごと保存しまーす☆
ありがとう~~~~!!

投稿: メイリ | 2006.03.24 22:24

メイリさん、おはようございます。
コメントありがとうございます。

やりましたっ(^^)

私が出来たからメイリさんでもできると思いますよー。
私の書き方はちょっとはしょっちゃってるから
わかりづらいかも・・・

お時間のある時に挑戦してみてくださいね~。

投稿: ぶんぶん | 2006.03.25 06:56

私のところからIEで見るとタイトルがバーコードになります(^^;
バーコードフォントが入ってる影響だと思いますが。
普段はFireFoxでしか見てないので問題はないですけど。

投稿: MAD | 2006.03.25 11:50

私ももう弄る気力ない。(;´Д`)
季節にあわせて背景画像差し替えてるだけ。(爆)

ひろし君の情報だと今度からCSSの編集方法が変わるみたいだけど、
今までの中では詩織さんとこがピカイチだったよ。<いじり方の説明
http://siolli.cocolog-nifty.com/blog/2003/12/post_1.html

あと、フォントは、指定したフォントが見る相手のPCに入ってないと
自分が見てる通りには反映されず、相手PCのデフォルトフォントで表示される
というのも覚えておくといいと思います。

ちなみにIEで見ると、うちもフォントが違って見える。
Firefoxだとちゃんとfantasyで見えます。

投稿: 黒陣馬 | 2006.03.25 12:27

MADさん、黒陣馬さん、こんばんは^^
コメントありがとうございます。

MADさん、

>私のところからIEで見るとタイトルがバーコードになります(^^;

ひぇ~、マジですか!装飾系じゃない場合、ゴシックで見えるものかと思っていました。
それは困ります。
教えてくださってありがとうございます。
やっぱりこれから元に戻そうと思います。


黒陣馬さん

黒陣馬さんのところは素敵です。
すごくセンスが良くて、真似しようと思ってもできませんもん。


>今までの中では詩織さんとこがピカイチだったよ。<いじり方の説明


教えてくださってありがとうございます。
そちらでも勉強させてもらおう^^

>ちなみにIEで見ると、うちもフォントが違って見える。
Firefoxだとちゃんとfantasyで見えます。

Firefoxが何かわかってない私にはちんぷんかんぷんなのですが、タイトルがバーコードに見えるとあまりに悲しすぎるので
また直そうと思います。

投稿: ぶんぶん | 2006.03.25 20:08

本当だ!IEとFirefoxと違って見えますね。

IEだと、バーコードじゃないけど、fantasyでもないですね。
Firefoxだと、ちゃんとfantasyで見えますよ!

いつもはIEで見ています。本当はFirefox使った方がいいと
言われているんですが、(セキュリティの面でかな?)
Firefoxだと文字が小さく見えてしまうので使わないんですよね・・・。

投稿: riro | 2006.03.25 20:27

riroさん、こんばんは^^
コメントありがとうございます。

>IEだと、バーコードじゃないけど、fantasyでもないですね。
Firefoxだと、ちゃんとfantasyで見えますよ!

Firefoxがわからず思わず検索してしまいました(汗)
うちはFirefoxは入れてないと思うのですが、
なぜfantasy文字で見えたんだろう・・・不思議~。

というわけで、またゴシック文字に戻しました(^^)

投稿: ぶんぶん | 2006.03.25 20:40

コメントを書く



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




トラックバック

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

この記事へのトラックバック一覧です: ベーシックでもできるんだね:

« 工事します | トップページ | へたえ解釈しりとり(42) »