Subscribed unsubscribe Subscribe Subscribe

F# Monkey

about

CSS for hatena blog

CSS

Summary

はてなブログ用のcssをつくる

less code

今回作成したコードです

github.com

CSSコードの作成手順

はてなブログ用のテンプレートをgit cloneする

$ git clone https://github.com/hatena/hatena-blog-themes/tree/master/boilerplate

boilierplate.lessをカスタマイズ

Hatena-Blog-Themes/
├── boilerplate
│   ├── LICENSE.md
│   ├── boilerplate.less  <----- this!!
│   ├── less
│   │   ├── _media-queries.less
│   │   ├── _mixin.less
│   │   ├── _normalize.less
│   │   └── _variable.less
│   └── readme.md
└── readme.md

less, less-plugin-clean-cssをインストール

$ npm install -g less
$ npm install -g less-plugin-clean-css

cssファイルをつくる

$ lessc --clean-css boilerplate.less abc.min.css

CSS custumize

01. web font    を指定
    
    font(global)  : Noto Sans Japanese 
    font(code tag): Source Code Pro

02. entry title のデザインを変更

03. head tag    のデザインを変更

04. code tag    で文字が折り返ししないように変更

05. img  tag    で写真をリサイズするように変更

07. blog title  をクリックしたら archive に行くように変更

08. blog titel下の@callmekoheiをクリックしたら about に行くように変更

common

// for hatena-blog responsive design
/* Responsive: yes */

// web font
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css) ;
@import url(http://fonts.googleapis.com/css?family=Source+Code+Pro)       ;

html,
body {
    font-family      : 'Noto Sans Japanese', sans-serif ;
    color            : @text       ;
    background-color : @background ;
}

entry-title

.entry-title {
    font-weight      : bold           ;
    font-size        : 20px           ;
    padding          : 15px 10px      ;
    background-color : #eee           ;
    border-bottom    : 4px solid #ccc ;
}

head tag

.entry-content {

    .verticalBar {
        position         : absolute ;
        left             : 0        ;
        content          : ''       ;
        width            : 3px      ;
        height           : 90%      ;
        border-radius    : 1.5px    ;
        background-color : #3498db  ;
    }

    h1,h2,h3,h4,h5,h6 {
        margin           : 1.3em 0 0.8em 0 ;
        line-height      : 1.5             ;
        margin-top       : 50px            ;
        padding          : 4px 10px        ;
        position         : relative        ;
        &::before {
            .verticalBar ;
        }
    }

    h1 { font-size : 150% ; }
    h2 { font-size : 140% ; }
    h3 { font-size : 130% ; }
    h4 { font-size : 120% ; }
    h5 { font-size : 110% ; }
    h6 { font-size : 100% ; }
}

pre tag, code tag

pre {
    border           : 1px solid @border ;
    margin           : 0 0 10px          ;
    padding          : 20px              ;
    white-space      : pre               ;
    word-wrap        : normal            ;
    background-color : @bg-light         ;
    font-size        : 80%               ;
    font-family      : 'Source Code Pro', sans-serif ;
}

pre > code {}

img tag

// import media queries
@import "less/_media-queries.less";

@media (min-width: 480px)  {
    .entry-content {
        img {
            display    : block ;
            max-width  : 480px ;
            max-height : 350px ;
            width      : auto  ;
            height     : auto  ;
        } 
    }
}

@media (max-width: 480px) {
    .entry-content {
        img {
            display    : block ;
            max-height : 50%   ;
        } 
    }
}

Head Element

設定/詳細設定/検索エンジン最適化/headに要素を追加に下記のコードを入力

<meta name="viewport" content="width=device-width">

<script
    src         = "https://code.jquery.com/jquery-3.1.1.slim.min.js"
    integrity   = "sha256-/SIrNqv8h6QGKDuNoLGA4iret+kyesCkHGzVUUV0shc="
    crossorigin = "anonymous">
</script>

<script type="text/javascript">
$(document).ready(function(){
    $("#blog-description").append("<a href='http://callmekohei00.hatenablog.com/about'>@callmekohei</a>");
    $('#title a').attr("href","http://callmekohei00.hatenablog.com/archive")
});
</script>

Reference

はてなブログカスタマイズ手引き

less

Source Code Pro

Nota sans Japanese

jQuery CDN






h1 tag

いろはにほへと ちりぬるを わかよたれそ つねならむ うゐのおくやま けふこえて あさきゆめみし ゑひもせす 色はにほへど 散りぬるを 我が世たれぞ 常ならむ 有為の奥山 今日越えて 浅き夢見じ 酔ひもせず

h2 tag

いろはにほへと ちりぬるを わかよたれそ つねならむ うゐのおくやま けふこえて あさきゆめみし ゑひもせす 色はにほへど 散りぬるを 我が世たれぞ 常ならむ 有為の奥山 今日越えて 浅き夢見じ 酔ひもせず

h3 tag

いろはにほへと ちりぬるを わかよたれそ つねならむ うゐのおくやま けふこえて あさきゆめみし ゑひもせす 色はにほへど 散りぬるを 我が世たれぞ 常ならむ 有為の奥山 今日越えて 浅き夢見じ 酔ひもせず

h4 tag

いろはにほへと ちりぬるを わかよたれそ つねならむ うゐのおくやま けふこえて あさきゆめみし ゑひもせす 色はにほへど 散りぬるを 我が世たれぞ 常ならむ 有為の奥山 今日越えて 浅き夢見じ 酔ひもせず

h5 tag

いろはにほへと ちりぬるを わかよたれそ つねならむ うゐのおくやま けふこえて あさきゆめみし ゑひもせす 色はにほへど 散りぬるを 我が世たれぞ 常ならむ 有為の奥山 今日越えて 浅き夢見じ 酔ひもせず

h6 tag

いろはにほへと ちりぬるを わかよたれそ つねならむ うゐのおくやま けふこえて あさきゆめみし ゑひもせす 色はにほへど 散りぬるを 我が世たれぞ 常ならむ 有為の奥山 今日越えて 浅き夢見じ 酔ひもせず

pre > code tag

いろはにほへと ちりぬるを わかよたれそ つねならむ うゐのおくやま けふこえて あさきゆめみし ゑひもせす 色はにほへど 散りぬるを 我が世たれぞ 常ならむ 有為の奥山 今日越えて 浅き夢見じ 酔ひもせず

img tag

demensions: 932px × 614px (scaled to 480px × 316px)

f:id:callmekohei00:20161231123215p:plain






Remove all ads