-->

blogger template - parchment

PSで堪能したFinal-Fantasy-Tactics(FFT)。
羊皮紙を模した「噴出し」に憧れがあった。
そんな色のページにしようと。

FFTのBotmap-Fontのようなものを拾い、
そこから好みの記号(icon)を。色調を。4色選別。 

body{
background:#feb;
color:#754;
}
.post-body{
background:#ec9;
border-color:#a86;
}

以前書いたdataurischeme.pyをtarminalから。
base64化したdata-uri-schemeをクリップボード経由で。
javascript/FileReaderを使うのも楽。 

$ python
>>> import dataurischeme as p
>>> p.data('iconset.gif')
>>> p.data('w.gif')

iconset.gifは、icon用。
下のようなCSSの形でinline-block要素化したspanをiconとして得る。<style> 

.iconset span{
display:inline-block;width:auto;height:12px;
}
.iconset [class|='icon']{
width:10px;height:12px;
position:relative;top:1px;overflow:hidden;
background-repeat:no-repeat;
background-image:url(data:image/gif;base64,R0lGODlhXXXX....);
}
.iconset .icon-m{background-position:0px 0px;}
</style>
<div class='iconset'>
<a href='/'>
<span class='icon-m'></span>home
</a>
</div>

w.gifは、サムネイル画像がない際の代行画像(1x1,monochrome,transparent)。

この行をsrcで読むだけでいい。対応遅れているブラウザもあるらしいが。

何がミスか分からず詰まっていた点。
解決は単純すぎて情けないくらい。
比較などはスペース開けないとダメ。 

<b:if cond='data:blog.pageType=="item"'></b:if>
<b:if cond='data:blog.pageType == "item"'></b:if>
top