2016/01/21(木)adiary v3のデザイン設定

adiaryをv3.01に更新してみました。adiaryタグを見ると7年も前から使わせていただいていました。もうそんなに経ってしまったのか...

adiary v2のテーマ、Satsukiで、ユーザ任意入力ができていた部分が、v3からデザイン編集の中で、プラグイン毎にカスタムができ、その中のサイドバーなり、フッターなりを編集して、html挿入してやるのが解でした。

あと, 表のボーダがdashになっているのが見づらいので、これも直そうと思います。


ユーザCSS

公式サイトここに記載があります。[管理]→[デザイン設定]→[ユーザCSS]をクリックします。

CSSに明るくなかったので、chromeのメニューから、"その他のツール"→"デベロッパーツール"を選択し、出てきた画面左上にあるカーソルアイコンをクリックします。その後、装飾を変えたい部分をクリックすると、HTMLでエレメントの部分をハイライトしてくれます。同時に、Stylesタブのところに、CSSの定義された場所と、現在上書きされている設定を表示してくれます。それっぽい属性?を編集してみて、気に入った状態にしてから、ユーザCSSテキストを編集するとよいでしょう。

tableボーダーラインを境界線が1px.一本になるように変えるには以下を追加すれば実現できました。

div.body table, td, th {
  border-collapse: collapse;
  border: 1px solid #000 ;
}

シンタックスハイライト

ユーザCSSのサンプル部分、最初はコメントアウトされていますが、シンタックスハイライトのテーマ選択、というのがあります。

/*** シンタックスハイライトのテーマ選択 ********************/
/* highlight.js demo https://highlightjs.org/static/demo/ */

#syntax-highlight-theme {
	font-size:	1px;
	font-family:	"tomorrow-night-blue";
}

今頃なんぞや?、と思いましたが、示されているポインタに従って、highlight.pack.jsの公式サイトを訪れました。

ダウンロードを開くと、カスタムパッケージが得られるとか、感動ものですね..今後使いそうなものを見繕って、ダウンロード実行。

zipファイルを得られるので、これを展開して、highlight.pack.jsを上書きすると良いです。

git cloneしたところで作業しているなら、オリジナルを書き換えることになりますので、適当にブランチを切って作業すると良いでしょう。highlight.jsのver.9.1.0でしたが、adiary v3.01で取り込まれているものより新しそうです。スタイルも増えていましたが、adiary収録のものは少しカスタムされているようなので、 *1今回は見送ります。単にARM assemnblerのハイライトがほしかっただけ...

entry:
    ldr sp, #0x8000
    mov fp, #0
    ldm r0, {r1, r2, r3}
    mov pc, lr

※デタラメ書いてます。念のため..


追記(2016/01/21 23:52)

初期値の値が誤っていました。v2から移行したせい?

誤:
	font-size:	1px;
正:
	min-width:	1px;

確認: adiary.cgiより:

function get_value_from_css(id, attr) {
        var span = $('<span>').attr('id', id).css('display', 'none');
        $('#body').append(span);
        if (attr) {
                attr = span.css(attr);
                span.remove();
                return attr;
        }
        var size = span.css('min-width');       // 1pxの時のみ有効
        var str  = span.css('font-family');
        span.remove();
        if (str == null || size != '1px') return '';
        str = str.replace(/["']/g, '');
        return str || size;
}

追記(2016/01/22 0:15)

grepしてみたら、仕様変更があった模様。view testでは、font-sizeでチェックしている。どちらでも優位にするには、両方とも定義しておくのがよさそう。patch作ってpull requestをサクッと出せるほど良い環境ではないので記憶を残してターン終了(意訳:寝る)

FILE: skel/design/viewtest/search.html

<section>
<h3><a href="#" id="k441p4">シンタックハイライト</a></h3>
<pre class="syntax-highlight js">//////////////////////////////////////////////////////////////////////////////
// ●CSSから値を取得する
//////////////////////////////////////////////////////////////////////////////
function get_value_from_css(id, attr) {
        var span = $('&lt;span&gt;').attr('id', id).css('display', 'none');
        $('#body').append(span);
        if (attr) {
                attr = span.css(attr);
                span.remove();
                return attr;
        }
        var size = span.css('font-size');       // 1pxの時のみ有効
        var str  = span.css('font-family');
        span.remove();
        if (str == null || size != '1px') return '';
        str = str.replace(/["']/g, '');
        return str;
}
</pre>
</section>

*1 : adiary.cssが追加されているだけっぽいので、上書きしちゃってもよさそう。でもちょっと保留...