はてなブログでテーマを自作する流れ。オリジナルテーマではてなブログをカスタマイズする
こんにちは、てつです。
ずっと使ってきたはてなブログのテーマを乗り換えて、自作したテーマに変更しました。
Webデザイナーではないのでそっち方面に明るいわけではないのですが、HTML/CSSの知識が多少あれば自分でもはてなブログテーマを自作することができたので、はてなブログテーマを自作したい人向けにざっくりとした流れを紹介します。
自分でデザインするとHTML/CSSの勉強にもなりますし、オリジナルテーマは愛着が湧くのでおすすめですよ。
はてなブログでテーマを自作する流れ
ざっくり説明するとこんな感じの流れになります。
- はてなブログ公式からテンプレートをダウンロード
- CSSをゴリゴリ書く
- はてなブログのテーマストアに非公開でアップロード
以下で流れを一つずつ紹介していきますが、自作テーマをアップロードしても非公開設定をしておけば自分だけにしか公開されません。
というわけで、以下で一つずつ手順を紹介していきます。
はてなブログ公式からテンプレートをダウンロード
はてなブログのテーマ作成については、公式で詳しく説明がされています。
ゼロから作成しても良いですが、かなり面倒なのですでに土台として用意されているサンプルテーマ「Boilerplate」をベースに作成していきます。
GithubにBoilerplateのファイルが用意されているので、こちらをダウンロードします。
Releases · hatena/Hatena-Blog-Theme-Boilerplate · GitHub
はてなブログのテーマ開発環境を準備
次にコードを書いていくためのファイル(CSS)とデザインの反映を確認するファイル(HTML)を準備します。
エディター(ファイルを編集するツール)は自分が使いやすいと思うものでOKです。
とりあえず2個貼っておきますね。
Brackets - A modern, open source code editor that understands web design.
Visual Studio Code - Visual Studio
構成はこんな感じにしました。
今回、はてなからダウンロードしたboilerplate.cssを直接いじるのではなく、別にstyle.cssというファイルを作ってそちらに追加のデザインを書いてきました。
もちろん、boilerplate.cssを直接いじっても問題ないですが、ごちゃ混ぜになるのが嫌なので分けて書きます。ここら辺は好みで。
index.htmlはトップページ用、post.htmlは個別記事確認用です。他にもカテゴリーページやアーカイブページ、検索結果ページなどたくさんありますが、今回は最低限のトップページと個別記事のデザインだけにしました。
なお、index.htmlやpost.htmlのコードは、はてなブログから直接コピペしました。
デザイン反映確認用に非公開のサブブログを一つ作る→サンプル記事を投稿→HTMLをコピペという流れです。
はてなブログ側でも見出しや画像などが漏れなく確認できるようにサンプルエントリーが用意されています。
ダッシュボードから非公開でデザイン確認用のブログを一つ作ります。
そこから、サンプルエントリーを一つ投稿してトップページと投稿ページのHTMLコードを全てコピーして貼り付けます。
コピペしたままだとローカルのCSSファイルが反映されないので、スタイルシートの部分の記述を変更します。
あとは、ひたすらstyle.cssに記述をしていきます。
今回、一つのファイルにまとめて書きましたが後で手動で一つにまとめてアップロードするので、CSSファイルを分けて記述した方がスッキリすると思います。
今思えばSassで書いた方が楽だったなと思いました。ここら辺はお好みで。
はてなブログのテーマストアに非公開でアップロードする
CSSを書き終えたあとは、テーマストアに非公開でアップロードします。
はてなブログのテーマストアに移動し、「 新しいテーマを投稿」をクリック。
- テーマ名
- テーマの説明
- CSSのソースコード
- スクリーンショット
これらの情報を入力していきます。
ちょっと驚いたのがCSSファイルをアップロードするわけではなくて、ソースコードをコピペして貼り付けるんですよね笑
CSSのソースコードの箇所で、boilerplate.css→style.cssの順にコードをエディターからコピペすればOKです。
最後の所で「非公開で投稿する」の箇所にチェックを入れて投稿すればCSSファイルのアップロードが完了し、自作テーマを公開中のブログにインストールすることが出来るようになります。
おわりに
初めてはてなブログでテーマを自作しましたが、CSSの知識が少しあれば作業できると思います。
こうやったらもっと効率よく出来るよ！などありましたらぜひ教えてくださいmm
細かい部分のスタイルに手を付けれなかったり、スタイルが崩れているところがありますが何度もアップロードして修正できるので時間を見つけてコツコツやっていきたいと思います。それでは今日はこの辺で。
(最後に自作する時に参考にしたサイトをまとめました)
トップページの表示形式をカード型レイアウトに
配色お助けツール
[ HUE / 360 ] The Color Scheme Application
