晴れ時々曇り

ブログのデザイン変更のページへのアクセスが多いようです。
TypePad ベーシックでcssを変更のページです。
バムの人さんからトラックバックを頂いてから来られる方が増えたみたいです。
みんなでデザインの改造に挑戦しましょう！！

始まりはちょっとした好奇心でスタイルシートをいじりだしただけなのに・・・
こんなことまではまってしまいました。背景画像を作ってみました。

背景画像にルーズリーフ風を作成してみたところ、文字の行間がずれていたのが気になって調整してみました。でもＩＥ以外で見るとまたずれて見えるんでしょうね。
でもＩＥでちゃんと見えれば良しとしておきますか。

-今日の食事-
（始まりは炭水化物ダイエット・・・）
　朝：たまごご飯
　昼：調理パン×三個
　夜：掛けそば
　風呂から上がってダイエットチェック
　体　重:６２.２Kg
　体脂肪:２５.３%
　評価:1０(やや肥満)

久しぶりにスタイルシートをいじってみました。
ひさしぶりなものですっかり忘れてしまっていました。
文字サイズも解らない程度に変更してみました。
多分解らないと思います。自分でも前のサイズを忘れてしまいました。（笑）
スタイルシートで文字サイズに合せて、行間を変える様にしてみたのですがあまり効果が無いような？
もう一ついじったのは引用の枠の背景に背景画像を入れてみました。
何だかカッコいい様なダサい様な、しばらくはこれで行ってみましょう。

引用ボタンでこんなに簡単に枠付きのコメントが書けるなんて、もっと早くやってみれば良かった。以前にこんなルーズリーフ風の背景の入ったブログを見たことがありましたっけ、遂に私でも出来ました。

スタイルシートで行間を指定のテスト
フォントのサイズによって行間を変更する。

フォントサイズが大きくなると
行間隔は大きくなっているか？
残念！！
もっとフォントサイズを大きくする

引用ボタンでコメントを枠付きにする方法をもう少し説明します。
昨日説明した様に下のタグをstyles.css（スタイルシート）に記入するだけです。
と言ってもスタイルシートって何？
どこへ記入すればいいの？
引用ボタンてどれ？
と言う人のためにちょっとだけ説明します。
TypePad ベーシックでcssを変更でも説明していますが、もっと簡単に説明してみます。
※あくまでも自己責任でstyles.cssの変更はやってください。私責任取れません。m(_ _)m

①自分のスタイルシートはどこにあるのですか？
　タイプリストの中にあります。もっと簡単に探す方法はメインのページで右クリックして、ソースの表示を選択します。そうするとメモ帳が開きソースコードが表示されます。
そうしたら編集から検索（Ｆ）を選択してｃｓｓを検索して自分のstyles.cssのアドレスを探します。探せたらそのアドレスをコピーして上のアドレスバーにペースト（貼り付け）ます。
そうするとダウンロードの確認画面が表示されますのでので、ディスクトップに保存してください。
②ダウンロードされたstyles.cssをメモ帳やMKEditor for Windowsなどで開いて、その一番下の部分に前回説明したタグを挿入します。
下の画像の様に（左の行数は各々違います）
※色のコードはカラーチャートを参考にしてください。
styles.cssを記入したら保存してコントロール→ファイル→今入っているディレクトリー（フォルダー入れ物）にアップロードします。そうすると現在同じ名前の書類があります、上書きしますか？と聞かれますから上書きを選択してください。
※この時に必ず元のstyles.cssは別にパソコンのどこかに保存しておいてください。元に戻せなくなった場合にそれをアップロードして復旧するためです。
③styles.cssがアップロード出来たらエントリー（投稿）します。投稿文を記入して枠線で囲みたい部分の前でエントリー記入画面の上の（ ” ）引用の開始をクリックして枠のタグを挿入してください。エントリーサクセイ画面ではボタンを押しても文章の始りの位置が右にずれるだけで何にも変化はありません。
保存してサイトを確認するとたぶん引用ボタンを押した後の文章が枠の中に入っていると思います。
成功するとうれしいし、面白いついついはまってしまいます。（笑）
※不明な点はコメント下さい。

blockquote{
border : 1px dashed #3366FF ;
padding : 1em 1em 1em 1em ;
margin : 2em 0 2em 0 ;
background-color: #F0F7FF;
}

-今日の食事-
　朝：ホットケーキ×二枚
　昼：うどん
　夜：エビフライ・ご飯
　風呂から上がってダイエットチェック
　体　重:６３.０Kg
　体脂肪:２２.８%
　評価:1０(やや肥満)

引用で文章に枠を付けたくていろいろと探していたところ、ありました。
スタイルシートに書き込むだけで引用ボタンをポンで枠が設置出来ます。
（タグが自動的に入ります）これは便利とばかりに早速試してみました。
独創的 LIFE STYLEさんで紹介されていました。感謝!!

引用ボタンで自動にタグが挿入されます。

以下は私がcssに記入したものです。
blockquote{
border : 1px dashed #3366FF ;
padding : 1em 1em 1em 1em ;
margin : 2em 0 2em 0 ;
background-color: #F0F7FF;
}

スタイルシートの変更はTypePad ベーシックでcssを変更するを
参考にご覧下さい。

よくブログを見ていると枠で囲まれている文章を見かけますが、それは引用のタグを使うらしいのですが。

-今日の食事-
　朝：納豆・ご飯
　昼：釜飯
　夜：餃子・ご飯
　風呂から上がってダイエットチェック

　体　重:６３.４Kg
　体脂肪:２２.６%
　評価:1０(やや肥満)
　※最近腰を痛めてからあまり体を動かしていないのと、ご飯の食べすぎ!!

アクセス統計を設置してみました。
どのページが読まれているのか一目瞭然です。
晴れ時々曇りが二つ表示されているのはhttps://tarou.kazelog.jp/とhttps://tarou.kazelog.jp/win/の違いです。
おもしろいですね!!　

-今日の食事-
　朝：焼き魚・ご飯一杯
　昼：タケノコご飯少し・ドーナッツ一個
　夜：ギョーザ・モヤシ炒め・ご飯一杯
　風呂から上がってダイエットチェック
　体　重:６２.１Kg
　体脂肪:２５.４%
　評価:1０(やや肥満)

ベイシックタイプでもデザインが自分の好きな様に変更出来るんです。スタイルシートなんて難しく考えないで、みんなでチャレンジしてみましょう。
TypePad ベーシックでcssを変更するでは、出来るだけ初めての方でも簡単に出来る様に解説してみました。やってみると結構簡単で楽しいですよ。ぜひ、チャレンジしてみてください。

-今日の食事-
朝：たまごご飯と納豆
昼：かきフライ弁当
夜：焼肉野菜巻き・サラダ
風呂から上がってダイエットチェック
　体重：６３．２Ｋｇ
　体脂肪率：２５．２％
　評価：１１（やや肥満）

天気予報をコピペで設置する方法
はじめよう! みんなのブログ Vol.2でも紹介されていた「RSS Feed ZOO!」さんの
RSSを取得して整形したテキストを配信するサービス？を使ったgoo天気を自分のblogに
表示してみる。方法はいたって簡単です。
　設置方法・・・
まず天気を表示したい地域(goo天気のページ)へ行きRSSページアドレスを取得する。
私は群馬県の南部の天気のページを取得http://weather.goo.ne.jp/area/4210.rdf
次に「RSS Feed ZOO!」さんのページへ行きTOP→Build →「よく分からないという方はこちら」をクリックする。分かる人はそのままBuild から設定してください。
ページを表示したらまずはじめに上の方にある「表示する文字コードを選択」をセットします。私の場合UTF-8なのでUTF-8をクリックし設定する。ここで先にアドレスを入力してしまうと取り消されてしまうので文字コードを先に入力のこと。
次にRSSのURLを入力に、さっきのgoo天気のアドレスを入力する。
あとは表示方法を選び入力して行き一番下のプレビューをクリックすれば天気予報のプレビューが表示されます。
注意・・良くエラー画面が現れます、リロード(更新)を何度もゆっくりとクリックすれば現れます。表示がOKならば一番下のコードを取得をクリックしjavascriptコードを表示させ、それを自分のblogページにコピペして終了です。
※たまに表示しないことがあります、その時はリロード(更新)をクリックしてください。
右にgoo天気が設置されています。goo天気も内容は晴れ時々曇り程度の情報しかありませんが自動で天気情報を取得してくれるので取り合えずは良しとしましょう。

タイトルの背景に画像を表示させるための画像の作り方
画像を編集するのにわざわざソフトを買わなくてもｗｉｎｄｗｓなら付属のソフト（ペイントソフト）で編集が出来ます。

まず、スタートメニュー → すべてのプログラム → アクセサリー → ペイントソフトを起動させます。
背景に使いたい画像をファイルから開きリサイズ（サイズの変更）します。
リサイズするには左のツール（道具）から四角い枠（選択）を選びメニューの変形からキャンバスの色とサイズを選択して使いたいサイズへ切り出します。
この時、右下（ステータスバー）に切り出し範囲のサイズが表示されていますので目安にしてください。
使用する画像のサイズが大きすぎる場合は始めに縮小して置いてください。
方法は変形から伸縮と傾きを選択して縮小の％を入力して全体的に画像を小さくします。
タイトルに背景を設定する為の画像はご自分のブログのタイトルの枠によって違います。色々と試してみてください。
私のタイトルの背景画像サイズは高さ150px横1000pxです。

以前の私のブログは色だけであまり楽しそうではありませんでした。そこでスタイルシートの変更にチャレンジしてみたのです。
以下に私のスタイルシートの変更方法を書きます。
参考にされる前に一言、以下の内容は自己責任にて実施の事。
不具合など発生しても私は一切責任を負いません。

それでは自分の風ブログのトップページを開き、マウスで右クリックしてソースの表示を選択してください。
するとソースがメモ帳で開かれます。開かれたソースの中から以下の部分を探してください。
＜link rel="stylesheet" href="http://xxxx.kazelog.jp/xxx/styles.css" type="text/css" /＞は書かれている部分(xxxxは皆さん違います、自分の物に変えてください)
次にそのhttp://xxxx.kazelog.jp/xx/styles.cssをアドレスバー(上のアドレス(D)と書かれているところ)にコピーしてstyles.cssを開きstyles.cssを開きます。
たぶん開くとそのままダウンロード画面になると思います。（ホームページ作成ソフトFrontPageなどお持ちの方はソフトが立ち上がってしまう事があります）そのソースをメモ帳などにコピーしてお使いください。

ダウンロードしたstyles.cssをメモ帳などで開き、必要な項目を記入し保存します。（ここでstyles.cssに別の名前を付けて保存すると便利です）ここからは区別するためにxxx.cssとします。
※注意・・・ここでは必ず元のstyles.cssは別に保存して置きましょう。(万が一の為)
保存が完了したら次にコントロール→ファイル→先程のディレクトリー(入れ物)私で言えばwinのディレクトリーの中にstyles.cssをアップロードします。（styles.cssの名前を変えない場合は元のstyles.cssが入っているディレクトリーに入れると上書きになってしまいます。注意してください。）必ずどこにアップロードしたか控えておいてください。入っている場所が解らないと、後でxxx.cssを指定出来なくなってしまいます。(アップは何処でも構いません)
(アドレスを控える)ファイルからは画像と違ってどこにあるか表示されません。
2005/4/11のバージョンアップで表示される様になりました。m(_ _)m

※注意・・・今度作ったstyles.cssの名前も覚えやすい名前に変えておきましょう。

*****改造(変更箇所)*****以下の部分を探して変更してください。
変更箇所は/**/の部分です。
※color: #xxxxxxの部分は色の指定です。自分の好きな色を指定してください。
※font-familyはフォントの種類・font-sizeはサイズ・font-weight文字間・line-height行間・text-align文字を揃える方向・margin-bottom枠からの上の離れです。
※下の方にカラーチャート（色見本）へのリンクを貼ってあります。
　　参考にしてください。

①本文の文字サイズ
<変更前>
.content p {
color: #333333;
font-family: Georgia, Times, serif;
font-size: small;
font-weight: normal;
line-height: 150%;
text-align: left;
margin-bottom: 10px;
}

<変更後>
.content p {
color: #333333;
font-family: MS UI Gothic, Times, serif; /*フォントの指定*/
font-size: medium; /*フォントサイズの指定*/
font-weight: normal;
line-height: 150%;
text-align: left;
margin-bottom: 10px;
}

②タイトルの背景に画像を入れる
<変更前>
#banner {
font-family: Georgia, Times, serif;
color: #FFFFFF;
background-color: #869BB0;
text-align: left;
padding: 15px;
border-bottom: 1px dashed #FFFFFF;
height: 69px;
}

<変更後>
#banner {
font-family: Georgia, Times, serif; /*フォントの指定*/
color: #FFFFFF;
background-color: #597FA3; /*背景色指定背景画像に近い色に変更*/
background-image:url(http://xxxxx.kazelog.jp/xxx/images/xxxx.jpg); /*背景画像のアドレスを指定*/
background-repeat: no-repear; /*背景画像は繰り返さない指定*/
text-align: left;
padding: 15px;
border-bottom: 1px dashed #FFFFFF;
height: 150px; / * 画像の高さ */
}
注意・・・画像の高さを記入する、繰り返さないも記入すること。

③タイトルの前にアイコンを付ける
<変更前>
.content h3 {
color: #6699CC;
font-family: Verdana, Arial, sans-serif; /*フォントの指定*/
font-size: small;
text-align: left;
font-weight: bold;
margin-bottom: 10px;
}

<変更後>
.content h3 {
color: #DC143C;
font-family: MS UI Gothic, Arial, sans-serif; /*フォントの指定*/
font-size: medium; /*フォントサイズの指定*/
padding:10px 0px 10px 40px; /*余白を設定 */
background-image: url("http://xxxxx.kazelog.jp/xxx/images/xxxx.gif"); /*アイコン画像のアドレスを設定*/
background-position: topleft; /*左寄せの設定*/
background-repeat: no-repeat; /*画像は繰り返さない指定*/
text-align: left;
font-weight: bold;
margin-bottom: 10px;
}

注意・・・padding:10px 0px 10px 40px;でアイコンを入れた時の周りとの余白を調整する。
　　　　　pxは上右下左の余白の順番です。画像は繰り返さない指定をしないとアイコンだらけになってしまいます。
最後にアップロードしたxxx.cssを使う設定に変更します。
ウェブログ→設定を変更する→ウェブログの副題（キャッチフレーズ）：の欄に下記を追加します。
＜link rel="stylesheet" type="text/css"href="http://アップロードしたxxx.cssのアドレス記入"/＞
以上でスタイルシート(styles.css)は変更になっていると思います。だめならもう一度はじめからやってください。m(_ _)m
よくスペルの書き間違いがあります、落ち着いて記入してください。
(不明の点はスタイルシート css などで検索をかけてみてください。丁寧に説明されているページがあります。)
※晴れ時々曇りのカラーチャートです参考にしてみてください。

■ＣＳＳには余計な改行はしないでください。・・・それではがんばってね !!

muro MAGAZINE 略してムロマガ！へトラックバック
ムロマガさんでコメントに説明文を入れると言うのをやっていたので私も早速入れてみました。
コメントを入れる時にメアドも入れるのか迷うのですが、これで迷いません。

昨日に引き続きスタイルシートの変更を強行!!　(笑)
やっぱりセンスの無さに愕然としながらも現状のデザインまでは変更が出来ました。もう少し今度はじっくりと変更してみましょう。
字が大き過ぎなんて言わないでください。
子供からお年寄りまで『楽しんでもらうblog』を目指してしるんです。
本当は目が疲れちゃうんです。(笑)
デザイン的に(見た目が)変じゃないか心配でしたが、段々目が馴れて来たのでしょうか？変ではありません。よね!!

TypePadのベーシックでスタイルシートを変更出来ました。でもデザインがあまり変わり映えしない。才能ですか？『残念～ん!!』
スタイルシートが良く解らないのでこんなもんですかね!!
でもやれば出来るものですねー。

muro MAGAZINE 略してムロマガ！
muroroさんが付けていたRSSTIMESを私も付けて見ました。仕事以外は遅くまでがんばっているのがばれてしまいます。・・・(笑)
今までこのRSSTIMを他の人のblogで見かけたのですが更新時間の記録だったとは気が付きませんでした。

『続きを読む・・・』を導入してみました。長い文章があると下の方まで長くなってしまうのを防ぐ役目をしてくれます。前は最近のコメントなどサイドメニューを折り畳むものを導入しています。左の最近の投稿などがそれです。

それと今日はレイアウトの変更をやってみました。初めのやり方が間違えていたためにレイアウトの変更が出来ずにいました。(涙)　今日という今日はずっとブログをいじっていました。明日朝がまた早いのでもう寝ます。・・・ZZZZ

こんなやつです。[続きを読む・・・]　改行すると自動的に畳んでくります。結構便利かもね・・・　

ようやくブログで音楽を流せるものを見つけて設置しました。
今結構流行っているらしいんです『Radio.Blog』右側の黒ねこの下に設置しました。
■使い方は・・・
・枠の中の曲名をクリックするだけ演奏が始まります。
・停止のさせ方はPous(ちょっと見ずらい)をクリックすると止まります。→Playに
　変ります(クリック)で再スタートです。
・音量はVolumeのラインをマウスで右・左にして調整します。
・左にすると小さくなります。
それ以外は試してみてください。
※右上のZAP!をクリックすると一曲づつ流れます。
Flashのサイズが合わなくてリサイズしたため文字が見えずらくなってしまいました。
注意・・・当たり前ですが音を消していては音楽は流れません。m(_ _)m
2005/4/16現在は取り外してあります。

やっぱりbbsを設置しました。気に入ったアイコンを設置できるブログ用で、サイドメニューに設置できるものにしました。
ちょっとだけ表示が遅くなっちゃたかな?難しいですね。

サイドバーが最近長くなって来たので『サイドバー折り畳み』なるものを試しにやったみました。
本当に短くなりました。+は折りたたんだ状態で-が開いた状態です。
参考ページはfacet-diversさんのサイドバー折り畳み2です。