IMUZA.com

Xserver<<WordPress(ConoHa)<<はてなブログ

ホーム / CSS / Hatena-Blog-Theme-Boilerplateを使ってテーマ開発(1)

Hatena-Blog-Theme-Boilerplateを使ってテーマ開発(1)

2018/07/30 CSS, SASS, はてなテーマ, はてなブログ

Hatena-Blog-Theme-Boilerplateを使ってテーマ開発(1)

別ブログ「@半径とことこ60分」のテーマを変更しようと思うのですが、この機会に、はてなブログのテーマをどうやって作っているかを書いていこうと思います。

もちろん、どんな方法であれ、HTMLの構造に基づいてCSSを書けばテーマはできますので、作成方法は人それぞれです。

  • Hatena-Blog-Theme-Boilerplateを使う
  • Sass で開発すると超便利
  • Hatena-Blog-Theme-Boilerplateをセットアップする
    • node.js のインストール(win)
    • セットアップ
    • 開発

Hatena-Blog-Theme-Boilerplateを使う

どのブログシステムを使うにしても、まずHTMLの構造を理解しなければCSSは書けません。

たとえば、はてなブログの個別記事のHTMLは、「はてなブログをWordpress風に! cms-style(1)-はてなブログの HTML 構造-」のようになっていますが、これらに一から style を指定していくのは大変です。

そのため、はてなブログではサンプルテーマ「Boilerplate」が用意されています。しばらく前まではメタ言語に Less が使われていましたが、現在は Sass に移行しています。どちらも Github にあります。

github.com

メタ言語を使わずに直接 CSSファイルを編集していくのであれば、Releases · hatena/Hatena-Blog-Theme-Boilerplate · GitHubから boilerplate.css をダウンロードして、ファイルの内容をデザインCSSにコピペするだけです。

これにカスタマイズからヘッダに画像でも貼れば、もうそこそこできてしまいます。

Sass で開発すると超便利

さらにいろいろ手を加えようとするなら、Boilerplate に用意されている Sassを使って開発します。Sass で開発すると便利なことは、

  • セレクタを入れ子にできる
    • 視認性が高く早く書ける
    • 親要素を & で参照できる
  • 変数が使える
    • 一括変更できる
  • 演算が使える
    • 電卓いらず
    • 色指定に darken, lighten が使える
  • スタイルの再利用ができる
    • @mixin
    • @extend
    • @import

など、とにかくCSSを書くのが超絶楽になります。

Hatena-Blog-Theme-Boilerplateをセットアップする

この Boilerplate を Sass で開発するには、node.js をインストールする必要があります。この Boilerplate はコンパイルに node-sass を使っていますので ruby は必要ありません。また、SCSS記法を使っていますので、ほぼCSSと同じように書けます。

node.js のインストール(win)

www.imuza.com

node.js のインストールは別記事をご覧ください。

セットアップ

GitHub – hatena/Hatena-Blog-Theme-Boilerplate

こちらの readme に従ってやっていけばいいのですが、git を使っていないのであれば、右上の緑色のボタン「clone or download」をクリックしてzipファイルをダウンロードし、展開しても同じことです。

展開後、そのフォルダに入り、コマンドプロンプトを立ち上げ、そのフォルダで npm install と打てばモジュールがインストールされます。

開発

問題なくモジュールをインストールできれば、テーマを作成するブログの デザイン設定 > カスタマイズ > デザインCSS に

@import url("http://localhost:3000/boilerplate.css");

と入れて保存します。

次に、立ち上がっているコマンドプロンプトから npm start と打ちます。

これで、該当フォルダ内に build/boilerplate.css が作られ、上の @import で読み込まれてブログにCSSが反映されます。さらに、この npm start は scssフォルダ内を常時監視して変更があれば即座に build/boilerplate.css をビルドしますので、ブログをリロードすれば変更を確認できます。以前は、ブラウザ自動リロードが機能していたのですが、現在は対応していませんので手動でリロードするしかありません。

npm のコマンドは package.json をみればわかります。scripts とある部分です。単にビルドしたければ npm run build と打てばOKです。

{
  "name": "hatena-blog-theme-boilerplate",
  "version": "2.0.0",
  "description": "Boilerplate for Hatena Blog theme",
  "author": "Hatena Blog",
  "license": "MIT",
  "scripts": {
    "prestart": "npm run build",
    "start": "npm-run-all -p watch server",
    "build": "npm-run-all scss autoprefixer",
    "scss": "node-sass scss/boilerplate.scss build/boilerplate.css --output-style expanded --indent-width 4 --source-map build/",
    "autoprefixer": "postcss --use autoprefixer -r build/boilerplate.css",
    "server": "browser-sync start -c bs-config.js",
    "watch": "chokidar \"scss/\" -c \"npm run build\""
  },
  "devDependencies": {
    "autoprefixer": "^7.1.4",
    "browser-sync": "^2.18.13",
    "chokidar-cli": "^1.2.0",
    "node-sass": "^4.5.3",
    "normalize.css": "^7.0.0",
    "npm-run-all": "^4.1.1",
    "postcss-cli": "^4.1.1"
  }
}

まずは環境構築でした。

XREA の転送設定 302を .htaccess で 301にする
Joomla! 3.8.11 バグフィックスがリリースされています
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2023/09/26

IntersectionObserverで要素の位置を知る

2023/09/14

GDPRを設定する

2023/08/30

scroll-behavior:smoothは履歴に残る

2023/08/22

要素がトップにきたことを感知する-IntersectionObserver

2023/08/8

ホームページとは別に投稿一覧ページをつくる方法-WordPress

最新記事を一覧で見る

よく読まれている記事

よく読まれている記事を一覧で見る

カテゴリー

  • はてなブログ215
  • WebTips110
  • javascript101
  • Joomla!88
  • Wordpress79
  • Windows68
  • CSS64
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Google36
  • Plamo33
  • はてなプラグイン25
  • php23
  • Node.js18
  • Ubuntu16
  • SASS16
  • laravel415
  • Chrome11
  • cms-style10
  • iPhone9
  • Git入門6
  • ConoHa WING6
  • genesis6
  • Python5
  • Android5
  • PC全般4
  • Facebook4
  • スマートフォン4
  • Xserver3
  • Firefox3
  • 静的サイトジェネレーター3
  • SSD3
  • Docker3
  • Blankslate3
  • Twitter2
  • Mactype2
  • GitHub2
  • youtube1
  • はてなブクマ1
  • rails入門1
  • 映画1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Related Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2023 · IMUZA.com