【はてなブログ】オリジナルテーマをゼロから作ろう - テーマ作成準備編

f:id:asssy:20200520171225p:plain

こんにちは、@thisisassyです。

みなさん、はてなブログ使ってますか？使ってますよね。テーマ作ってますか？作ってないですか。

ぜひ作りましょう。既存のテーマをカスタマイズするのも楽しいですが、せっかく覚えたCSSやらコーディングの知識を応用して自分で1からテーマを作成しましょう。

今回は、はてなブログが公式に配布しているサンプルテーマを使用せず、gitコマンド、npmやlessなどちょっとレベルアップした技術を使っていきます。git, npm, lessの知識が多少ある人やWEBデザインやコーディングを勉強している人向けです。

はじめにすること
開発環境の準備ファイル構成とgulp+lessの導入
- ファイルの説明
- gulp+lessで編集作業を楽にする
browser-syncとwatch機能を追加して、さらに便利に

はじめにすること

自分でテーマを作成したいと思ったら、まずは公式のテーマ制作の手引きをよく読みましょう。必要なことはこちらに書いてあります。

https://help.hatenablog.com/entry/theme/custom-theme

そして、手引きの通り、開発用のブログをつくり、サンプル記事を流し込みます。

また公式テーマの制作に適したサンプルテーマ「Boilerplate」があります。

https://github.com/hatena/Hatena-Blog-Theme-Boilerplate

こちらを使用するにも、npmやgitなどの使い方が必要になってきます。どうせやるなら1から作って全部覚えちゃいましょう。私もいまだにgitの操作はよくわかっていません。

テーマ作成の準備
- 開発用ブログの作成
- サンプル記事を流し込む

開発環境の準備ファイル構成とgulp+lessの導入

まず最初にこれからテーマを作っていくにあたって必要なファイルを準備します。記事ではhatenablog-themeというフォルダを作りこのフォルダを作業フォルダにします。gitコマンドは下記のとおり。themeの箇所はオリジナルテーマ名に変更してください。

mkdir hatenablog-theme(任意で名前をつけてください)
cd hatenablog-theme

そして今後作業するときは、gulpを使ってファイルの変更を監視・コンパイルしていくのでsrcにブログのエントリーページやらアーカイブページやらを分割したファイルを格納します。

フォルダの構成はこのような感じです。

hatenablog-theme/

 ┣ src/
 ┣ theme.less
 ┣ common/
 ┃ ┗ _box2.less
 ┃ ┗_common.less
 ┃ ┗_entry.less
 ┃ ┗_variables.less
 ┣ pages/
 ┃ ┗about.less
 ┃ ┗archive.less

このようにファイルを分割しておくと、後々編集する時に楽になります。そしてsrcフォルダのディレクトリに各ファイルを作ります。

//srcフォルダに移動し、touchコマンドでファイルを作ります
cd src
touch _box2.less　_common.less _entry.less _variables.less

ファイルの説明

分割されたファイルはtheme.lessでimportします。そのため個別にコンパイル処理されないようにファイル名の先頭にアンダーバーをつけています。

またvariables.lessにはテーマの配色やレスポンシブ用のブレイクポイントを記述します。変数を使うことで後々色を変えたいとなってもvariables.lessにある数値を変えるだけで他のファイルは触らなくて良いので編集作業が大変楽になります。これがSassやLessの良いところです。もう普通のCSSには戻れません。

ファイル名は分かりやすいように任意でつけてください。

gulp+lessで編集作業を楽にする

つづいて、自動で編集したコードの変更やコンパイル処理を行ってくれるgulpをインストールしていきます。

作成したプロジェクトファイルの階層で、npm init -yをしてpackage.jsonを作成します。

次にgulpを入れます。npm install -D gulp

これでGulpが使えるようになりました。

lessファイルをコンパイルするためのプラグインを入れます。npm i -D gulp gulp-less

そしてタスクを作成するためにgulpfile.jsを作ります。

このファイルにコンパイルの処理を記述していきましょう。

const gulp = require("gulp");
const less = require("gulp-less");

gulp.task("default",function(){
    return gulp
    .src('src/*.less')
    .pipe(less({
        outputStyle: 'expanded'
    }))
    .pipe(gulp.dest('dest'));
});

ここまで書いたら一度タスクを実行してみましょう。保存先に指定したフォルダにcssファイルが作られます。

この場合は、srcフォルダにあるlessファイルをdestフォルダに保存しています。

npx gulpでタスクを実行します。

browser-syncとwatch機能を追加して、さらに便利に

npx gulpでlessがコンパイルされますが、いちいち手動でコンパイルせずに変更があれば勝手にやってもらいたいですよね。せっかくgulp使ってるし。

browser-syncとwatch機能を追加しましょう。npm i -D browser-sync

const gulp = require('gulp');
const less = require('gulp-less');
const bs = require('browser-sync');

gulp.task('serve', function () {
bs.init({
server: './dest',
open: false,
port: 3030,
ui: {
port: 3031,
 },
 });
gulp.watch('src/**/*.less', gulp.parallel('less'));
});

gulp.task('less', function () {
return gulp
 .src(['src/*.less'], ['!src/_*.less'])
 .pipe(less({
outputStyle: 'expanded'
 }))
 .pipe(gulp.dest('dest'))
});

gulp.task('default', gulp.parallel('serve'));