思考が漏れてます

仕方ないんです。漏れてしまうんです。

( ゜∀ 。) <やるじゃない plamolog

Hatena BlogでTwitter Bootstrap適用した

f:id:ujiujise:20121027200738p:plain

専門な話だから

いろいろ略!

HTMLに仕込みましょう

ヘッダとか、サイドバーとか、フッターとかにHTML書くところあるのでそこに書きましょう。

<!-- 
HatenaBlogは解析したら既にjQueryを使える状態なので、BootstrapのJsをCDNからドーン!
-->
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>
<script>
jQuery.noConflict();
(function($) {

    $().ready(function() {
        build_bootstrap();
        put_bootstrap_class();
    });
// jQueryでheadタグに無理やりCDNのBootstrapをロードさせる
    function build_bootstrap() {
        $("head").append("<link>");
        css = $("head").children(":last");
        css.attr({
                rel:  "stylesheet",
                type: "text/css",
                href: "http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css"
        });    
    }

// jQueryのaddClassで、BootstrapのCSSのクラスを無理やりくわえさせる
    function put_bootstrap_class() {
    //↓は例:HatenaBlogで予めマークアップしているのをヤル。決めてホァックしましょう
        $("#blog-title-inner").addClass("hero-unit btn-custom");
        $(".hatena-module-title").addClass("btn-custom");
        $("div .categories").addClass("alert alert-info");
        $("time").addClass("label label-success");
        $("div .breadcrumb").addClass("alert alert-success");
    }

})(jQuery);
</script>

ヤルカラニハ

説明が不親切なので、ブートブートしたい人は以下のような感じだと多分わかる。

  • HTMLだいたい知ってる
  • CSSだいたい知ってる
  • jQueryの読める

Web系業務エンジニア10年くらいでcssの実力は1年生レベルより…