Wiki用

残り700近い記事を完全手入力でやるには効率が悪くなり
簡単なものは分岐関数
複雑なものはVBAにてマクロ化

00_20140626204112550.jpg
これからはとても楽しい作業

編集方法。

参考サイト:ハカセの研究室

実際の記述は以下。

00_201406221250158cf.jpg
<div>~</div>で全体の範囲
1_20140622125016883.jpg
<p>~</p>で吹出し
2_20140622125018a70.jpg

CSS(※原文ママ)

.gin {
  padding-left:100px;
  background:url(http://blog-imgs-66-origin.fc2.com/x/w/a/xwancox/1.png) no-repeat left top; /*銀行アイコン位置*/
}

.van {
  background:url(http://blog-imgs-66-origin.fc2.com/x/w/a/xwancox/0.png) no-repeat right top; /*ヴァンアイコン位置*/
}
.gin , .van { width:auto; margin-bottom:5px;}

.gin p , .van p {
  position: relative;
  background: #fff;
  display: table-cell;
  vertical-align: middle;
  height: 50px; /*吹出し高さ*/
  /****文字を上下中心に置きたかったため"min"設定無し****/
  border: 1px solid #404040;
  padding:10px;
  width:285px; /*吹出し幅、auto不明*/
  border-radius: 5px; /*吹出し丸み*/
}
.gin p:after, .gin p:before {
  right: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.van p:after, .van p:before {
  left: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.gin p:after {
  border-color: rgba(255, 255, 255, 0); /*吹出□*/
  border-right-color: #fff;
  border-width: 10px;
  top: 20px;
  margin-top: -10px;
}
.gin p:before {
  border-color: rgba(64, 64, 64, 0); /*吹出▽*/
  border-right-color: #404040;
  border-width: 11px; /*太さ*/
  top: 20px;
  margin-top: -11px; /*太さ*/
}
.van p:after {
  border-color: rgba(255, 255, 255, 0); /*吹出□*/
  border-left-color: #fff;
  border-width: 10px;
  top: 20px;
  margin-top: -10px;
}
.van p:before {
  border-color: rgba(64, 64, 64, 0); /*吹出▽*/
  border-left-color: #404040;
  border-width: 11px;
  top: 20px;
  margin-top: -11px;
}


実際いじるとしたら赤文字部分くらい。
もし全てのアイコンを右・吹出しを左にしたい場合は以下。

00_20140622214212817.jpg


.gin {
padding-left:100px;
background:url(http://blog-imgs-66.fc2.com/x/w/a/xwancox/1.png) no-repeat left top;
}
.van {
padding-left:100px;
background:url(http://blog-imgs-66.fc2.com/x/w/a/xwancox/0.png) no-repeat left top;
}
.gin , .van { width:auto; margin-bottom:5px;}
.gin p , .van p {
position: relative;
  background: #fff;
display: table-cell;
vertical-align: middle;
height: 50px;
border: 1px solid #404040;
padding:10px;
width:285px;
border-radius: 5px;
}

.gin p:after, .gin p:before, .van p:after, .van p:before{
right: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}

.gin p:after, .van p:after {
border-color: rgba(255, 255, 255, 0);
border-right-color: #fff;
border-width: 10px;
top: 20px;
margin-top: -10px;
}
.gin p:before , .van p:before{
border-color: rgba(64, 64, 64, 0);
border-right-color: #404040;
border-width: 11px;
top: 20px;
margin-top: -11px;
}

アイコン以外は全て共用で使えるためこれで。
pで割り振らずとも"a"でも"b"でも被らないものであればお好きなもので。

対話式CSS

ブログの更新


http://xwancox.blog.fc2.com/

若干いじりテンプレートに組み込み。

00_20140615181647782.jpg

整理。

先日より。
アカデミッククラスのアバターの処分を開始。

01_201406112146066c7.jpg
チャンネルで知り合ったほとんどは。
この「三菱東京UFJ銀行」で。

02_20140611230847629.jpg
思えば周囲は馬鹿ばかり。

勘違い。

0_201406032349088a2.jpg
ニラとペアで。

1_20140603234910b43.jpg
怨嗟の「クローンリタマラ」

途中マルがログイン。
誘うもやはり。

2_20140603234911238.jpg
すでに時間はぎりぎり。

ではペア続行。と。
リーダーはリタイアするため、キャンプで待機。
しかし、飛び込まないニラ。

3_201406032349139df.jpg

少し前のログを読み返す。

4_2014060323491429f.jpg
何度見ても。
マルがログインすると同時に受けている。

5_201406032349235cd.jpg
メセタのために。

ファング夫妻。

ニラ、うさ、銀行で雨風2。

111_201406010258158e5.jpg
ファングの夫や妻片割れずつはよく見れど。
夫婦一緒のところをほぼ見ていない。

2_20140601025704900.jpg
0_20140601025701658.jpg
なるほど。

1_201406010257031aa.jpg
エネミーにも事情があるのだと。
この時初めて知る。



最新記事