MUTANT

SEOやブログマネタイズの手法を紹介しています。ブログを運営する上での役立つtipsを紹介していきます。

はてなブログでテーマを自作する流れ。オリジナルテーマではてなブログをカスタマイズする

f:id:mutant-tetsu:20180608101119j:plain

こんにちは、てつです。

2週間くらい前から、ずっと使ってきたはてなブログのテーマを乗り換えて、自作したテーマに変更しました。

 

Webデザイナーではないのでそっち方面に明るいわけではないのですが、HTML/CSSの知識が多少あれば自分でもはてなブログテーマを自作することができた(成果物の良し悪しは別として)ので、はてなブログテーマを自作したい人向けにざっくりとした流れを紹介します。

 

自分でデザインするとHTML/CSSの勉強にもなりますし、オリジナルテーマは愛着が湧くのでおすすめですよ。

 

はてなブログでテーマを自作する流れ

ざっくり説明するとこんな感じの流れになります。

  1. はてなブログ公式からテンプレートをダウンロード
  2. 別にCSSファイルを用意してオリジナルテーマを書く
  3. はてなブログのテーマストアにアップロード(非公開)

 

以下で流れを一つずつ紹介していきますが、自作テーマをアップロードしても非公開設定をしておけば自分だけにしか公開されません。

というわけで、以下で一つずつ手順を紹介していきます。

 

はてなブログ公式からテンプレートをダウンロード

はてなブログのテーマ作成については、公式で詳しく説明がされています。

help.hatenablog.com

 

ゼロから作成しても良いですが、かなり面倒なのですでに土台として用意されているサンプルテーマ「Boilerplate」をベースに作成していきます。

GithubにBoilerplateのファイルが用意されているので、こちらをダウンロードします。

Releases · hatena/Hatena-Blog-Theme-Boilerplate · GitHub

f:id:mutant-tetsu:20180608084905p:plain

 

はてなブログのテーマ開発環境を準備

ここまで、はてなブログのテンプレートをダウンロードしました。

次に、ゴリゴリデザインを書いていくためのファイル(CSS)とデザインの反映を確認するファイル(HTML)を準備します。

エディター(ファイルを編集するツール)は自分が使いやすいと思うものでOKです。

とりあえず2個貼っておきますね。

Brackets - A modern, open source code editor that understands web design.

Visual Studio Code - Visual Studio

 

構成はこんな感じにしました。

f:id:mutant-tetsu:20180608085923p:plain

boilerplate.cssを直接いじるのではなく、別にstyle.cssというファイルを作ってそちらに追加のデザインを書いてきます。もちろん、boilerplate.cssを直接いじっても問題ないですが、ごちゃ混ぜになるのが嫌なので分けて書きます。

 

index.htmlはトップページ用、post.htmlは個別記事確認用です。他にもカテゴリーページやアーカイブページ、検索結果ページなどたくさんありますが、今回は最低限のトップページと個別記事のデザインだけにしました。

 

なお、index.htmlやpost.htmlのコードは、はてなブログから直接コピペしました。

デザイン反映確認用に非公開のサブブログを一つ作る→サンプル記事を投稿→HTMLをコピペという流れです。

はてなブログ側でも見出しや画像などが漏れなく確認できるようにサンプルエントリーが用意されています。

サンプルエントリー - はてなブログ ヘルプ

 

f:id:mutant-tetsu:20180608090855p:plain

ダッシュボードから非公開でデザイン確認用のブログを一つ作ります。

そこから、サンプルエントリーを一つ投稿してトップページと投稿ページのHTMLコードを全てコピーして貼り付けます。

 

コピペしたままだとローカルのCSSファイルが反映されないので、スタイルシートの部分の記述を変更します。

f:id:mutant-tetsu:20180608091239p:plain

 

あとは、ひたすらstyle.cssに記述をしていきます。

今回、一つのファイルにまとめて書きましたが後で手動で一つにまとめてアップロードするので、CSSファイルを分けて記述した方がスッキリすると思います。

今思えばSassで書いた方が楽だったなと思いました。ここら辺はお好みで。

 

はてなブログのテーマストアに非公開でアップロードする

CSSを書き終えたあとは、テーマストアに非公開でアップロードします。

テーマ ストア - はてなブログ

はてなブログのテーマストアに移動し、「 新しいテーマを投稿」をクリック。

f:id:mutant-tetsu:20180608093112p:plain

 

  • テーマ名
  • テーマの説明
  • CSSのソースコード
  • スクリーンショット

これらの情報を入力していきます。CSSのソースコードの箇所で、boilerplate.css→style.cssの順にコードをエディターからコピペすればOKです。

 

最後の所で「非公開で投稿する」の箇所にチェックを入れて投稿すればCSSファイルのアップロードが完了し、自作テーマを公開中のブログにインストールすることが出来るようになります。

f:id:mutant-tetsu:20180608093451p:plain

おわりに

初めてはてなブログでテーマを自作しましたが、CSSの知識が少しあれば作業できると思います。

 

こうやったらもっと効率よく出来るよ!などありましたらぜひ教えてくださいmm

 

細かい部分のスタイルに手を付けれなかったり、スタイルが崩れているところがありますが何度もアップロードして修正できるので時間を見つけてコツコツやっていきたいと思います。それでは今日はこの辺で。

 

 

(最後に自作する時に参考にしたサイトをまとめました)

 

トップページの表示形式をカード型レイアウトに

blog.minimal-green.com

 

配色お助けツール

[ HUE / 360 ] The Color Scheme Application

 

デザインのヒントに

www.awwwards.com