読者です 読者をやめる 読者になる 読者になる

のんびりSEの議事録

プログラミング系のポストからアプリに関してのポストなどをしていきます。まれにアニメ・マンガなど

【bootstrap】ブログテーマをtwitter bootstrapに適用させた話

その他 UI

はてなブログのテーマってまだあまりレスポンシブデザインで作成している所は少ないのか、探し切れていないのか分からないが(検索しづらい...)、今時レスポンシブデザインに対応してないとかないよなぁと思い、かといって一から作るのはさすがにナンセンスですねと。。。

ということで、twitter bootstrap風のテーマを作ることにしました。

調査

はてなブログの独自CSSは64KBまでしかアップできない

全ての要素を適用させるのは困難
minify,不必要な属性を削除する必要がある

準備

  • gem
    • sassをインストール
  • npm
    • gruntをインストール
    • grunt-contrib-cssminをインストール
    • grunt-contrib-sassをインストール
    • grunt-uncssをインストール

Gruntfile.js

'use strict';

var gruntConfig = {
  sass: {
    dist:{
      options:{
        style:'compressed'
      },
      files:{
        'blog.css':'mixin.scss'
      }
    }
  },
  uncss: {
    dist: {
      options: {
        ignore: [/entry-content/, /page-archive/, /page-about/, /#zenback/,
          /blog-description/, /entry-see-more/, /hatena-bookmark-count/, /search-module-input/, 
          /search-module-button/, /comment-user-id/, /hatena-id-link/],
        stylesheets: ['blog.css']
      },
      files: {
        'blog.css' : ['hatena.html']
      }
    }
  },
  cssmin: {
    options: {
      shorthandCompacting: true,
      roundingPrecision: -1
    },
    target: {
      files: {
        'blog.min.css' : ['blog.css', 'header.css']
      }
    }
  }
};


module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig(gruntConfig);

  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-uncss');
  grunt.registerTask('default', ['sass', 'uncss', 'cssmin']);
};

実行

  • bootstrapをextendする用のscssを作成。
  • 必要なパーツをimport
  • 適用させたい属性に必要なパーツをextend
  • gruntコマンド実行
$ grunt

久々にgruntとsass触ったなぁw
センスはあんま自信ないす。。。
今回作成したテーマ一式をGitで公開してます。

github.com

テーマ本体

http://blog.hatena.ne.jp/-/store/theme/8454420450097939070

参考

bootstrap-sass でレスポンシブなはてなブログのテーマを作る - MANA-DOT