はてなブログの自作テーマを作る手順を振り返る

今ご覧いただいているテーマは自分で作ったテーマです。HTMLもCSSもわからない普通の主婦が、本を片手に作ったものなのでまだまだ手直しが必要かもしれませんが、一応形になってきました。

自作のテーマを作るメリットとしては

自分の好きなデザインにできる
はてなブログの構造を知れる
HTMLやCSSの実践ができる

ということではないでしょうか。

私の場合は、HTMLもCSSも今まで勉強したことがなかったので、本当に1つ1つがとても時間がかかりますが、できた時の嬉しさはとても楽しいものがあります。

ということで、今回ははてなブログの自作テーマを作る手順を振り返ってみることにしました。

自作テーマに必要なもの
テキストエディタの用意
テーマを作成する
自作テーマが出来上がったらテーマストアにアップロードする
テーマストアへの投稿は非公開にもできる

自作テーマに必要なもの

はてなブログは WordPressなどのCMSとは違い、HTMLはすでにはてな運営側が用意したものを利用しますので、CSSのみの制作となります。

CSSを編集するために必要な環境は

テキストエディタ
デベロッパーツールが使えるブラウザ
デモサイト

はてなブログでは、有料版に加入するとブログが10個まで作成できますので、デモサイト用に1つ用意します。

help.hatenablog.com

テーマを自作するにあたっては、公式サイトの「デザイン制作の手引き」を読みました。

はてなブログでは、「Boilerplateテーマ」というのがあって、それをベースにCSSを変更していくと自作テーマが出来上がります。

私のような素人だと１から製作するのはかなりのスキルが必要とされて無理ですよね。

BoilerplateテーマのCSSをダウンロードして、デモサイトのデザインCSSにコピペしておきます。

HTMLとCSSをローカルで編集して確認しながら作業ができるマイクロソフトから出ているVisual Studio Codeなどのソフトもあるのですが、素人すぎて使い方がわからず、ダウンロードしただけで結局使いませんでした。

CSSも先ほどダウンロードしたBoilerplateテーマと自分で編集するtheme.cssを用意される方もいらっしゃるみたいなのですが、私の場合はBoilerplateテーマを直に編集する方法にしました。

テキストエディタの用意

CSSを編集するためにはテキストエディタが必要になります。

私は普段からテキストエディタはTeraPadを利用しているので、ほとんど機能のという機能がついていないシンプル設計のTeraPadを利用しました。

保存形式は、TeraPadの場合は、文字コードを「UTF-8N」、改行コードを「LF」にしておきます。こうすると文字化けの原因をなくすことができます。

はてなの公式ページでは、テーマのCSSはブログのデザイン編集画面「デザインCSS」欄に記述していくように書いてあります。

私の場合は、ブラウザのデベロッパーツールで変更しながら、それをTeraPadに保存していき、ある程度作業が進んだらTeraPadの内容をデザインCSS欄にコピペして確認していくという方法です。

普段から、デザインCSSにカスタマイズを書いている方は普段通りの作業なので特に難しいことはないと思います。

はてなブログを作成している方はHTMLエディタはbrackets(Adobe社)を利用されている方が多いようですが、2021年9月1日にサポートが終了していて、パートナー関係にあるマイクロソフト社のVisual Studio Codeへの移行が推奨されています。

今からHTMLエディタをインストールされる方は、マイクロソフト社のVisual Studio Codeがいいかもしれないですね。

テーマを作成する

テーマを作成するのは初めてなのでこれが正解かどうかはわかりませんが、1つ1つ進めていけば素人の私でも作ることができました。

自作テーマが出来上がったらテーマストアにアップロードする

自作テーマが出来上がったら、テーマストアにアップロードします。

最初、CSSのサイズを小さくしたかったので、「minify」で圧縮してテーマストアにアップロードしたんです。

その後に、検証しようとレスポンシブデザインの設定をした後にスマートフォンで確認したのですが、レスポンシブデザインになってないんですよね。

minifyせずに、そのままCSSをアップロードしてレスポンシブデザインのチェックを入れると、スマートフォン用に表示されました。

はてなブログの公式サイトでは、レスポンシブデザインについてこう書かれています。

テーマのCSSの先頭にResponsive: yesという行を含んだコメントを挿入する

公式テーマ EvergreenのCSS

/*
  Theme: evergreen
  Author: Hatena Blog Team
  Description:
  1カラムで文章を書くことに集中できるテーマです
  Responsive: yes
 */

CSSを圧縮するとレスポンシブのコメントが読み込めないんですかね？

ちょっとよくわからなかったので、とりあえずminifyで圧縮はせずにそのままCSSをアップロードしました。

テーマストアへの投稿は非公開にもできる

私の場合はまだまだ検証が足りないので、テーマストアへはアップロードしましたが、非公開にして自分用のブログだけテーマを自作のものにしました。

後々、公開できるのが目標ですが、もうちょっと時間がかかりそうです。

monoのメモ帳

HTMLとCSSを勉強しながらはてなブログをカスタマイズ中です。