山手線つながり・・・

山手線つながり・・？

コレはナンでしょう？

答えは・・・

それは・・・・

じつは・・・・

じゃ～ん！！！！

ペットボトルのお茶でした・・・・・

山手線は知っていましたが京浜東北線まであったなんて・・・

チョット高いですが・・・・　衝動買いです

イオンショップ(aeonshop.com)で358円です

↓クリックしてみて・・　アフェリもしていないただのリンクです・・

　　　　　　　

山手線

山手線が2009年に命名100周年を記念して
旧国鉄時代の電車をモチーフにした
復刻調ラッピング電車「100周年記念列車」

山手線命名100周年というより・・
ただの・・明治のチョコの広告電車って感が・・・

車内は明治の広告だけ・・・

運行は12月4日まで

でも・・昔の電車を走らせてほしかった・・

1988年4月には　JR東日本発足一周年記念で実際に走ったようですね

｢PHOTO：1980年代国鉄撮影日記｣
http://kumoya90.hp.infoseek.co.jp/

2チャンネルが役に立つとは思いませんでした・・・

チョコとかチョコ電で書かれています
http://anchorage.2ch.net/test/read.cgi/rail/1248773568/ ​
運休の日もあるようですから
乗ってみたい方はお出かけ前に調べるといいですよ・・

ただ・・いたって普通の電車ですが・・

CSS 日付・・・の消印みたいなの？

ここのブログの消印のような日付はどうやるんですか？
リク記事です・・・

遅くなってすみません

なんせ・・　3回最初から書き直していたものですから・・

何とか休み中に間に合いました

最初に日付の表示形式を決めます

好きな表示形式を選択してください

※日付の途中にあるスペースの部分で改行します

※表示形式にあわせたサイズの画像を作ってください・・・　

　多少はＣＳＳで文字サイズや表示位置は調整できます

画像サイズをＣＳＳで変更することは出来ません
ですので・・最初にＣＳＳをやってプレビュー画面をプリントスクリーン で画像にして

それにあわせて画像を作った方が・・もしかして楽？

出来上がった消印みたいな画像を設置します(お持ち帰り自由に)

　　　　

.entry .entry_head{/*消印画像*/
width:110px;/*画像の横*/
height:101px;/*画像の縦*/
background-image:url(画像のＵＲＬ);
background-repeat:no-repeat;
}

すると・・こうなりますので・・・日付をピッタリ合うように移動させます

↓　日付のフォントサイズが 16px 書体が Arial の場合・・・

　　　　　　　　　　↓　　　　↓　　　　↓

.entry .date{
background-color:transparent;/*背景色を消す*/←緑色の背景を消します
border:none;/*枠線を消す*/←緑の縁にある線を消します
white-space:normal;/*自動的に改行*/
width:83px;/*横幅*/Ａ
padding:38px 0 0 10px;/*上Ｂ・右・下・左Ｃ*/
color:#3333cc;/*文字色*/
font-size:16px;/*文字サイズ*/
font-family:Arial;/*書体*/
text-align:center;/*中央寄せ*/
line-height:1.0;/*行間*/Ｅ
display:block;
}

本来なら日付は　2009-09-06 09:04:47　と1列で表示されますが
width:83px;（font-sizeや日付の表示方法によって変ります）とwhite-space:normal;で
横幅を決めてしまったので09:04:47部分が2行目に行を変えて表示されます

この83pxは文字サイズや書体によって違いますのでうまく分かれるように試してください

2009年04月02日▲12時00分32秒
2009年04月02日(木)▲12時00分32秒
April▲02,▲2009▲12:00:32

のような　スペース（▲）の部分で改行されます

どうやって・・　説明すればわかりやすいのか・・・・

April 02, でしたら・・　Aから2の右のコンマまで横幅が58pxあります

ので・・width:83px;/*横幅*/Ａ　が58px以上でしたらそのまま表示できますが

横幅が57pxですと表示できません（横幅57pxに横幅58pxが入るわけが無い）

ので間のスペース部分で改行されてApril と　02, に分かれて表示されます

white-space:normal;がありますので改行はスペース部分で改行されます

横幅が164px以上でしたら1行で表示できますので改行はされません・・・

・・・？

じゃあAの57px以下の場合で　12:00:32　とかは57px以上あるのに改行されないの？

答え・・・　12:00:32　この中にスペースがないので改行したくても出来ないんです・・・

なので・・

width:83px;/*横幅*/Ａの例でしたら83pxでなくても90pxとか100pxでも同じ表示になります

※この部分がわからなくても質問はナシで・・・　これ以上の説明はできません・・

日付部分だけでしたら以上で終わりです・・・

次に・・・　タイトルを日付の右側に移動する場合は・・・

.entry .entry_head{/*消印画像*/
width:110px;/*画像の横*/
height:102px;/*画像の縦*/
background-image:url(画像のＵＲＬ);
background-repeat:no-repeat;
float:left;
}

消印画像のＣＳＳの中に　float:left;　を入れることによりタイトルを右に回り込ませます

.entry h3.title{
width:280px;/*横幅*/Ｆ
color:#333333;/*文字色*/
font-size:18px;/*文字サイズ*/
font-weight: bold;/*太字*/
line-height:1.5;/*行間*/
display:block;
}

・・・・テーマ以下記事まで表示位置がおかしくなりますので

.entry .theme{
clear: both;
}

と・・　テーマで回り込みを解除します

次に・・・記事タイトルの位置を決めます

単純に表示位置を下にするだけでしたら

padding-top:20px;　Ｇ　とトップにスキマを与えればその分下に下がります

.entry h3.title{
width:280px;/*横幅*/Ｆ
color:#333333;/*文字色*/
font-size:18px;/*文字サイズ*/
font-weight: bold;/*太字*/
line-height:1.5;/*行間*/
display:block;
padding-top:20px;　Ｇ
}

もし・・テーマもタイトルの下に表示させたい場合は・・

.entry .contents{
clear: both;

padding-top:30px;/*記事の上のスキマ*/
}

と・・回り込みの解除を記事で行います

完成です・・・・

ＣＳＳの最後に加えてください

.entry .entry_head{/*消印画像*/
width:110px;
height:101px;
background-image:url(画像のＵＲＬ);
background-repeat:no-repeat;
float:left;
}
.new .entry_head{/*ＮＥＷ記事の消印画像*/
width:110px;
height:101px;
background-image:url(画像のＵＲＬ);
background-repeat:no-repeat;
float:left;
}
.entry .date{/*記事の日付*/
background-color:transparent;/*背景色を消す*/
border:none;/*枠線を消す*/
white-space:normal;/*自動的に改行*/
width:83px;/*横幅*/
padding:38px 0 0 10px;/*上・右・下・左*/
color:#3333cc;/*文字色*/
font-size:16px;/*文字サイズ*/
font-family:Arial;/*書体*/
text-align:center;/*中央寄せ*/
line-height:1.0;/*行間*/
display:block;
}
.new .date{/*ＮＥＷ記事の日付の色*/
color:#ff0000;
}
.entry h3.title{/* 記事タイトル　*/
width:280px;/*横幅*/
color:#333333;/*文字色*/
font-size:18px;/*文字サイズ*/
font-weight: bold;/*太字*/
line-height:1.5;/*行間*/
padding-top:20px;/*上からの位置*/
display:block;
clear:none;
background-color: transparent;
}
.entry .theme{
clear: both;
}

ベーシックスキンを使われている場合などでタイトルが横に移動しない場合は

clear:none;

タイトルの背景色を消す場合は

background-color: transparent; 

が、必要になってきます


※ピンクのＣＳＳは新しい記事を書いて24時間だけ表示を変えることが出来ます

　やらない場合はピンク部分は削除しないと24時間は画像が表示されなくなります

記事タイトルに背景をつける場合は・・

こんな画像を作って・・

.entry h3.title{/* 記事タイトル背景　*/
background-image:url(画像のＵＲＬ);
background-repeat:no-repeat;/*繰り返さない*/
}