こんにちは、@thisisassyです。
みなさん、はてなブログ使ってますか?使ってますよね。テーマ作ってますか?作ってないですか。
ぜひ作りましょう。既存のテーマをカスタマイズするのも楽しいですが、せっかく覚えたCSSやらコーディングの知識を応用して自分で1からテーマを作成しましょう。
今回は、はてなブログが公式に配布しているサンプルテーマを使用せず、gitコマンド、npmやlessなどちょっとレベルアップした技術を使っていきます。git, npm, lessの知識が多少ある人やWEBデザインやコーディングを勉強している人向けです。
はじめにすること
自分でテーマを作成したいと思ったら、まずは公式のテーマ制作の手引きをよく読みましょう。必要なことはこちらに書いてあります。
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
どうでしょう?これでnpx gulp
とコマンドを叩けば、変更があれば自動的にコンパイルされてデザインの作業が楽になります。もしgulpが難しそうであればKoalaやpreprosなどのGUIで操作できるアプリもあるのでぜひそちらを活用してください。
あとは自分好みのテーマを作成してテーマストアにあげればOKです。他の人にも使ってもらいたければテーマを公開してみましょう。