.entry.log .entry-content img { width:25%; }

http://thewholeworldispeaceful.hatenablog.com/category/log

週報代りに写真を貼り付けているんだけど、スクリーンキャプチャ貼るようになったら枚数が増えてしまった。今までは横幅一杯に写真表示していたけども、一覧で表示したくなったのでちょっと弄った。

週報には "log" っていうカテゴリーを付けているので、それらのエントリーには "log" っていう className を付けて、このときだけ写真の横幅を25%にして4枚並ぶような css が適用されるようにした。

だいぶ良い見た目になって満足なんだけども AutoPagerize で繋いだページだと log っていう className が追加されない。残念。

footer の html が直書きできるとこに下のヤツを貼っている。

<script type="text/javascript">
var ns=document.querySelectorAll('.entry');
[].forEach.call(ns, function(n) {
    if (/log/.test(n.querySelector('.categories').textContent)) n.classList.add('log');
})
var css = commentToText(function () {/*
.entry.log .entry-content img {
    width:25%;
}
*/});

var style = document.createElement('style');
style.type = 'text/css';
style.appendChild(document.createTextNode(css));
document.querySelector('head').appendChild(style);

// commentToText via tombloo 
function commentToText(commentFunc) {
    return (commentFunc).toString().replace(/^.*?\r?\n/, '').replace(/\r?\n.*?$/, '');
}
</script>

カテゴリー名、自動的にエントリーの className にも反映されて、人間のためじゃなくて機械とかCSSのために使えるといいなあと思った。

あと Element.classList 便利だと思った。知らなかった。

2014

the whole world is peaceful.

.entry.log .entry-content img { width:25%; }