CSS タグの一覧です(4 件)

[CSS] Bootstrap Theme を Bootswatch Flatly から Umi に変えた

日本語表示が凄く綺麗なBootstrap Themeがあったので使ってみました。
Umi - 日本語も美しく表示できるBootstrapテーマ

元々はHonokaというThemeがあり、UmiはHonokaをフォークしてBootswatch Flatlyの配色を施したようです。このブログもBootswatch Flatlyをベースにカスタマイズしていたので、Umiを使っても配色に大きな変化は無いのですが、日本語の表示が綺麗になっています。

あとFont Awesomeのアイコン類も使いすぎな感もあったので、結構減らしました。
しばらくこれでやってみます。


[CSS][JavaScript]Google カスタム検索 の設置をしてみた

Frozen-Flaskを使って静的サイト運営をしてからというもの、いかにクライアントサイドで動きを付与させるかを考えていて、その一環でGoogle カスタム検索を設置してみました。

このブログのサイドバーにあります。表示結果がオーバーレイされるようにしています。カッコいいです。

静的サイトにおけるサイト内検索は、自前で実装するならば検索データをjsonなりxmlなりで出力するページを設けてそれをJavaScriptでパースすることが考えられて、静的サイトジェネレータにそういった機能があればそれを使えばよいのだけれど、ない場合はGoogleに乗っかるのが一番手っ取り早いですね。
ちなみに Bootstrap3 で使ってみるとボタンがつぶれたりしてそのままだと表示が残念なので、デベロッパーツール等で ちまちま とCSS打ち消したりしていくしかないです。

jquery - Google CSE with Twitter Bootstrap not displaying the search box correctly - Stack Overflow

[CSS]Google Code Prettify をカスタマイズする

このブログ内でのソースコード表示には google code prettify を使っていますが、そのカラーテーマを作っている方がいらっしゃったので使わせていただきました。

Color themes for Google Code Prettify

適用させると、このようになります。これは Tomorrow Night Blue というテーマです。

# -*- coding: utf-8 -*-

from datetime import datetime

def timesince(dt, default=u"記事が投稿されました"):
    """
    timesince filter
    http://flask.pocoo.org/snippets/33/
    を日本語ローカライズしflashに対応させたもの
    """

    now = datetime.now()
    diff = now - dt

    periods = (
        (diff.days // 365, u"年"),
        (diff.days // 30, u"ヶ月"),
        (diff.days // 7, u"週間"),
        (diff.days, u"日"),
        (diff.seconds // 3600, u"時間"),
        (diff.seconds // 60, u"分"),
        (diff.seconds, u"秒"),
    )

    for period, unit in periods:

        if period:
            return u"この記事は投稿から {0:d} {1:s} が経過しています".format(period, unit)

    return default

あと、Google Code Prettify に CDN があることをついでに発見したので併せて適用させました。下記コードを記述します。場所は</body>の直前がいいのかな。

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>

ちなみに私は CDN 積極的に使いましょう派ですw


[Vim]CSSファイルなどに記載されているカラーコードをその色でシンタックスハイライトする

タイトルそのままなのですが、CSSファイル等に記載されているカラーコード(16進数など)をその色でハイライトしてくれるプラグインを見つけました。

スクリーンショット 2013-09-09 21.45.17 

こちらに乗っているcolorizerというプラグインです。

多分、この系統のプラグインは他にもいくつかあって、私が知らなかっただけなのでしょうが、何で今まで使ってなかったんだろうってくらい超絶便利ですね

多分、これでコピペして色を調べるルーチンも無くなるでしょう(笑)


PAGE TOP