下町に住む 風と鈴の気ままな猫生(にゃんせい)

2013年10月
-
-
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
-
-
PROFILE
わらび

愛玩動物飼養管理士(ペットケアアドバイザー)1級      これからも、日々勉強の積み重ねで頑張ります。        -----------------------

ひよこ豆

年上の♀友達。        わらびと一緒に住んでます☆  -----------------------

ミャオ ♀

1987.2.14-2003.8.16 享年16歳白血病を持っていたミャオとワタシが一緒に暮らし始めたのは、ミャオが11歳のときでした。縞三毛でない正統派(?)三毛です。   -----------------------

風(ふう)♀

03年8月、真夏の野外に兄弟達とダンボールに入れられ放置されてました。3歳過ぎまで空腹の意思表示すらしない子でしたがアピールできるようになりました。(目の前に出しても気づかないけど)        03年7月20日(旧:海の日)を誕生日に。             -----------------------

鈴(りん)♀

03年8月、真夏の野外に兄弟達とダンボールに入れられ放置されてました。生まれたときから一緒の『風』と 人間が大好き☆    03年7月20日(旧:海の日)を誕生日に。              -----------------------

麦(むぎ)♂ 旧:リュウタ

沖縄多頭飼育崩壊「80頭を救いたいプロジェクト」出身。ちょっと怖がりですが 優しい男の子です。ひよこ豆家の子。     05年12月19日を誕生日に。             -----------------------

花(はな)♀

08年8月に千葉県の動物愛護センターより引出し。曲がったままだった右後足の手術も終わりリハビリを頑張ってる元気いっぱい(元気すぎ?)な女の子。色々ありましたが麦の妹になりました。  -----------------------

LINK
CATEGORY
RECENT
RECENT TRACKBACK
ARCHIVES
RECENT COMMENTS
MYALBUM
SEARCH
PR




2007/05/29
カスタマイズ 〜title編

 

今日は すごぉく久々の「カスタマイズしてみよう☆」の続編です。
自分でもどこまで書いたのやら・・・でしたが、スタイルシートの一番初め「body」から始めて、リンクの辺りまで書いてありました。
それでは「title」から行ってみましょう☆

※数値、カラーコード(色を指定する番号)は「江戸風鈴」仕様です。

 


.title {
 font-size: 25px;
 font-weight: bolder;
 color: #000000;
        margin: 60px 0px 0px 20px;
}

 

title とは まさにタイトル、左上の「江戸風鈴」の文字です。
それでは順番にいってみまーす。

 

font-size: 25px;

この数字を大きく、たとえば100pxすると「江戸風鈴」がどーんっと大きくなります。

 

font-weight: bolder;

文字の太さで「bolder」とは「太目の文字」を意味します。
ちなみに その逆に「lighter」と書くと「細めの文字」にもなります。

 

color: #000000;

タイトル文字の「色」のことです。

「#000000」は「カラーコード」で「黒」を意味しますが、英語に自身のある方は「black」など英語でもOK☆
詳しくは「カスタマイズ 〜body color編」をご覧くださいマセ。

 

margin: 60px 0px 0px 20px;

「江戸風鈴」の文字の上下左右のマージンで、順番に 上、右、下(サブタイトルとの隙間)、左 になります。

 

 

続いてタイトルのリンク設定部分です。


.title a:link {
 color: #000000;
 text-decoration: none;
}

 

一番下の「text-decoration: none;」とは「装飾なし」、リンク設定をした時の下線も表示しないということです。
色も指定してますが、未アクセス時の色なので、このブログを開いてるということは、すでにアクセスしてます。
だから、ここの色設定は意味があるような無いような…( ̄ω ̄;)

 


.title a:visited {
 color: #000000;
}

 

「visited」は「アクセス済」の色なので、同じ色にしておいたほうが良いかもしれません。

 


.title a:hover,a:active{
 color: #000000;
 text-decoration: underline;
 background: none;
}

 

「a:hover」は「ポイント時」、「a:active」は「アクティブ時」なので、江戸風鈴は同じ色設定ですけど色を変えてみてもオモシロイと思います。
「text-decoration: underline;」は、タイトルリンク設定のところの「none;=装飾なし」の逆「下線あり」です。
「background: none;」とは「背景設定なし」のことですが、例えば「background-color: red;」とすると、カーソルを当てると「赤い背景」が出ます。

 


.subtitle {
 color:#000000;
 font-weight: bold;
 font-size: 13px;
          margin: 5px 0px 0px 20px;
}

 

これは「サブタイトル」、ブログの下の説明文の設定になります。
内容は「タイトル」と同じになります。


…とここまで書いたら、結構長くなっちゃいましたので、今日はこの辺で。
興味のない方には 何のことやら、いつも以上につまらない記事だったかとσ(^_^;)アセアセ

 

 

1180443877292868.jpg
 
生後5ヵ月の頃の風(ふう)です。
 
  ◆羽根.gif
  
ワン&ニャン保護資金稼ぎの 「ニャンコ用ネックレス」の通販をしております。
 
素人が作った お恥ずかしいような物ですが
売上は、Little Catsの保護ワン&ニャンのために使われますので
お友達にもご紹介いただけたらウレシイです。
よろしくお願いいたします。
 ネックレスのホカ 可愛いGOODSがたくさんです。
ぜひ お立ち寄りください(≧▽≦)
 
ファーミネーター(新品)十数本 70本が入荷しました。
ただいま販売準備中ですが、ネット最安値を予定しているそうです。
ぜひこの機会にお買い求めくださいっ★
もちろん、この売上げもワンニャン保護資金に使わせていただきます。
 
 ネットで買えるのは、こちらのお店だけとなります。
かにさん家の縁側.jpg
  
2006/07/17
カスタマイズ 〜body 続編
昨日は「どこが変わるかな編機廚鮟颪ましたが、「body」の説明が不十分だったことに気付きました。
スミマセンっ!(汗)
説明が前後してしまいますが、お許しくださいませ。
 
 
body { background-color:#FFFFFF; color:#000000; font-family: Osaka,Verdana,"MS Pゴシック",Arial,Helvetica,sans-serif; font-size: 12px; }
 
3行目までは 説明が終わりましたが、4行目からが抜けてました。
 
「font-family:」これは、皆さんのブログがどんなフォントで表示するか、を指定するところです。
イマドキのPCは 購入したときからイロイロなフォントが入っていますが、どこのメーカーのPCにも必ず入っているとは限りません。
ご自分で年賀状ソフトなどからインストールしたフォントは なおさらです。
なので、どんなに「カッコイイ」とか「カワイイ」フォントを指定しても、見てくれるお客さんのPCに入っていなければ表示してくれません。
そんなワケで、指定するフォントは 一般的なものにした方がヨロシイかと思います。
 
ペログーさんがWindows(以下Win)で使いやすい様にできていることもあり、ほとんどの方はWinをご使用されてますよね?
なので「font-family:」のあとに続く「Osakaって???」と思われると思います。
その辺をちょこっと説明してみましょう。
 
Osaka
Macintosh(以下Mac)の標準フォントの一つです。
…しかし、なぜに「Osaka」???「Tokyo」はないですよね???
 
Verdana,"MS Pゴシック"
「Verdana」も「MS Pゴシック」も、Winの標準フォントの一つです。
「MS Pゴシック」がなぜ「" "」で区切られているのか?ですが、それは「MS」と「Pゴシック」の間にスペースが有るからです。
「これは一つの単語だよ」という意味です。
 
Arial=Mac標準フォント Helvetica=Win標準フォント
似たようなゴシック系のフォントです
  
sans-serif
具体的なフォント名ではなく「ゴシック系」というフォントの種類のことです。
上で指定したフォントが、どれも入っていない場合は「ゴシック系の文字で表示してね」という意味です。
 
 
3行目の「color:#000000;」と5行目の「font-size: 12px;」は、本文に関する色指定とフォントサイズの指定だと思うのですが…有効ではないように思います。
(もし違ってたら ご指摘をヨロシクお願いいたします)
 
 
あー、これでスッキリしました(笑)
 
 
ミー太くん2.jpg
 
 
 
●ファー不買2.gif

ピースハウス.gif

2006/07/16
カスタマイズ 〜どこが変わるのかな?編
以前に スタイルシートの一番初め「body」について説明いたしました。
今日はその続編に行ってみたいと思います。
それでは「body」の次から順番に行ってみましょう☆
 
td,tr,p,ol,ul {
 font-size: 12px;
 color:#666666;
}
 
これは、今 皆さんが見ている この記事(投稿)の文面の下にある
  この記事へのトラックバックURL
  
http://cat.pelogoo.com/kleine_katze/rtb.php?no=1153060052070426
 
さらにその下の
  この記事への返信
  ◇返信フォーム
  名前、メール、URL、題名、内容
という文字のことです。
 
だから、3行目の color: の「色コード」を「好きな色の色コード」に変更していただくだけです。
そしてその応用、2行目の font-size: 12px; の 12 というところを変えると、文字の大きさが変わります。
(数字が大きくなると 文字も大きくなります)
 
 
次に行ってみましょー。
 
a:link {
 color: #666666;
 text-decoration: none;
}
 
a:visited {
 color: #666666;
 text-decoration: none;
}
 
a:hover,a:active{
 color: #FF0000;
 text-decoration: none;
 background: none;
}

この3つは、リンクの色を表しています。
一番上が「未訪問のリンク」
真ん中が「訪問済みのリンク」
一番下が「ロールオーバー時(クリックをせずカーソルを上に乗せただけの時)」
のことです。
 
 
form {
 padding-right: 0px;
 padding-left: 0px;
 padding-bottom: 0px;
 margin: 0px;
 padding-top: 0px;
}
padding とは「内側の余白」のことです。
「江戸風鈴」を例にしますと、文字が書いてあるエリアと、左右の紫陽花の絵との間に、グレーの線がありますよね?
その線と紫陽花の絵の間の余白のサイズをここで変えられます。
でも、0px のままで良いと思います。
 
 
input {
 font-size:12px;
}
 
「返信フォーム」などで、名前・メール・URL・題名など(内容欄以外)を書く欄の文字の大きさを指定できます。
 
 
textarea {
 font-size:12px;
}

「返信フォーム」の内容を書く欄の文字の大きさを指定できます。
 
 
今日は7ヶ所の説明をしてみました。
次回は この続きを書いて行きたいと思います☆
 
 
 
ミー太くん.jpg
04年12月に保護した生後2ヶ月くらいの仔猫♂です。
いろいろありましたが、1ヶ月後に友人宅に貰われて行きました。
今は…巨大ネコに成長。
ちっちゃかった面影はどこへ!?(笑)
 
 
●ファー不買2.gif
●ピースハウス.gif
2006/07/04
カスタマイズ 〜直リンク編

「直リンク」のご質問がありましたので、さら〜っとカンタンに説明します。

直リンク…「ちょくりんく」「じかりんく」と読みますが、「ページやファイルに直接ハイパーリンク」を貼ることを言います。

と言うと「リンクなんて いつもフツーにしてるのに?」と思われますよね?
実は、皆さんが「仲良くなったブログの方とリンクをする」のとは、少〜し違いがあるのです。

皆さんがフツーにされる「リンク」は、マウスでクリックするとリンク先にジャンプするようになってますよね?
逆に言うと、クリックしなければリンク先に行くことはありません。

ですけど「直リンク」は違います。背景・紫陽花170×102.jpg
たとえば…「江戸風鈴」の壁紙「紫陽花」が気に入った、なんて方がいらっしゃったとします。
「自分のブログの壁紙にしちゃお〜っ」と、この画像をクリックして開いたウインドウのURL

http://cat.pelogoo.com/kleine_katze/pic/1150462

827485538.jpg を貼ってしまった…これが直リンクです。
こう書くと、「著作権でダメなら分かるけど、無料素材なら好きに使ってイイのでしょ?」と思われますよね?

ではちょっと視点を変えて…
「江戸風鈴」の紫陽花の壁紙を「素材屋TOKYO」という無料素材HPから「直リンク」してたとします。
そうすると、誰かが「江戸風鈴」を開くたびに、「素材屋TOKYO」のHP(の一部)が自動的に開く事になってしまうのです。
「江戸風鈴」だけなら 大した数のアクセスはありませんが、同じことをしてる人が10人いたら、100人いたら…。
一日のアクセス数が1000人のブログが100人やってしまったら…。
「素材屋TOKYO」のサーバーは大混乱…。

なので、一度 マイピクチャー(マイドキュメント)に保存してから使用してくださいねーってことなのです。


 

どわー、これは説明がムズカシイ〜っ!! 

ぜんぜん「さら〜っと」じゃなくなっちゃいました(汗)

ご質問があれば補足説明いたしますので、お気軽にコメントくださいマセ。

 

ファー不買.gifピースハウス.gif

2006/07/02
カスタマイズ 〜body image編
前回は「背景色の変更」を書いてみましたが、今夜はその続編です。
今度は「body」を好きな画像に変えてみましょう。

body {
background-color:#FFFFFF;
color:#000000;
font-family: Osaka,Verdana,"MS Pゴシック",Arial,Helvetica,sans-serif;
font-size: 12px;
}

上記の英文の二行目 background-color:#FFFFFF; は「背景色(background-color)は白にする」ということは、前回 説明いたしました。
好きな画像にするのも、理屈が分かればカンタンです。
では さっそく。
 
body {
 /*background-color:#FFFFFF;
 color:#000000;*/
 background-image: url(http://cat.pelogoo.com/kleine_katze/pic/1150462827485538.jpg);
font-family: Osaka,Verdana,"MS Pゴシック",Arial,Helvetica,sans-serif;
font-size: 12px;
}

初めの英文と比べていただくと、行数が増えてるのがお判りいただけますでしょうか。
4行目に「 background-image: url」と入っています。
これは前回の「背景色(background-color)はこの色」の応用、「背景画像(background-image)はこのURL」と書いてあるだけなのです。
「このURLとは…」というのが5行目のことです。
 
さて、ここで一つ問題が。
「使いたい画像はマイドキュメントにあるけど、URLなんて無いよー?」って思われますよね?
はい、その通りです。
それではURLの説明に入りますね。
 
背景・紫陽花170×102.jpgこの紫陽花の画像をクリックしてみてください。
別のウインドウで画像が開きましたでしょうか?
そのウインドウの「アドレス欄」に入っている「http://cat.pelogoo.com/kleine_katze/pic/1150
462827485538.jpg」が紫陽花のURLになります。
ブログ更新するときの要領で、ファイル(画像)をアップロードして、閲覧をクリックするとウインドウが開きます。
これがURLです。
それを5行目の入れてあげるだけなのです。
でも ただURLを入れるだけだと、初めと終わりが判らないので(" ");でくくってあげましょう。

結構カンタンですよね?
最近は「無料HP素材」などを検索すると、カワイイ画像がたくさん見つかります。
それをマイドキュメントなどに「名前をつけて画像を保存」で保存してから使用するとお金を掛けずカスタマイズできます。
その場合の注意ですが、「無料HP素材」の画像のURLを そのまま使うことは絶対にやめてください。
「直リンク」とも言いますが、そのHPに迷惑が掛かる迷惑行為になりますので、必ず一度 PCに保存してから使用してくださいね。
 
最後になりましたが、気付かれた方もいらっしゃると思いますが
2〜3行目の
 
/*background-color:#FFFFFF;
 color:#000000;*/
 
一番前と後ろに/* */ が付いています。
「/* */」というのは「ここからここまでは無効です」という意味になります。
「背景画像」を決めたので「背景色」は必要ないので、消しちゃっても結構です。
ただ、消しちゃうと戻すのが面倒なので「無効」という意味のマークをつけてみました。
 
 
次回は、他の部分の色の変え方を説明しますね。
 
凪5.jpg
 
 
ファー不買.gifピースハウス.gif
 
2006/06/18
カスタマイズ 〜body color編
今夜はカスタマイズについて書いてみます。
ヘッドの部分を変えられてる方がほとんどかと思いますので、基本はみなさんご存知かと思います。
なので基本は省いて、スタイルシートの変更をちょっと載せてみますね。


スタイルシートの編集を開けていただくと

body {
background-color:#FFFFFF;
color:#000000;
font-family: Osaka,Verdana,"MS Pゴシック",Arial,Helvetica,sans-serif;
 font-size: 12px;
}

こんな英文がズラズラ〜っと出てくると思います。
一瞬 引くと思いますが(笑)、実は大した事が書いてあるわけではありません。
一番上の「body」とは、文章や写真が載るエリアの両端、今現在の「江戸風鈴」でいう両端の紫陽花の花の部分です。
背景・紫陽花170×102.jpg←この紫陽花です。
 
一見 両端にしか見えていませんが、紫陽花の縦線(?)がいくつも並んでる上に、文章や写真が乗っていると考えていただければ分かり易いかもしれません。
 
上記の英文の二行目 background-color:#FFFFFF; は「背景色(background-color)は白にする」ということが書いてあるだけです。
「何でこれで白になるの???」と思われますよね?
実はカラーコードというのが決まっていまして「#FFFFFF=白」なのです。
これは英文なので、英語が得意な方は英語で「white」でもOKですヨ。
だからこれを変えてあげれば、何色にでも変更できちゃうワケです。
「pink」にすればピンクに変わります。
でもピンクっていろいろあるしー、とか、ビミョーな色の呼び名が分からない〜っ!という方がほとんどだと思いますので、「カラーコード表」などを検索して頂くとヨロシイかと。
色を変更するのって、意外とカンタン♪なのです。

ここで「えーっ!出来ないよーっ!」という方、落ち着いて見直してみてください。
「;」や「,」が抜けてませんかぁ???
一番下の「保存」をクリックすると保存されてしまうので、保存の前に「プレビュー」で確認します。


次回は「江戸風鈴」のように紫陽花に変えてみよー!です。
…一気に書いてしまおうと思ったのですが、サッカーが気になってぇ(汗)
 
凪4.jpg
 

 

ピースハウス.gif