はてなブログのテーマの作成手順
こんにちはnasustです。
昨日公開したテーマ「 monolithic 」はハテブに載り、幾つかのブログで採用されたようです。ありがとうございます。
はてなブログのテーマ『 monolithic 』を公開しました。 - nasust life blog
今回は、 はてなブログのテーマ作成手順を公開したいと思います。
自分のブログのデザインをフルでカスタマイズしたい。そういう人はテーマ作成がオススメです。
はてなブログのテーマを投稿する時の設定で"非公開"を選ぶ事ができます。
そうすると自分のアカウントのブログしか使用できないテーマにすることができます。
はてなブログの設定画面で出来る「デザイン」で十分で思われるかもしれませんが、 フルスクラッチでオリジナルのデザインを作るのであれば、テーマ作成の方が楽です。
自分のブログのデザインのカスタマイズをテーマで行うことのメリット
メリット理由は以下の通りです。
- クソ重いデザインの画面をCSS設定の度に開かなくて良い
- テーマストアの個性的なテーマから上書きしてデザインを作成しないのでデザインしやすい
- 元となるCSSが手元にあるので、どのようにカスタマイズすれば良いか理解しやすい
ただし、一つだけデメリットがあります。
- テーマをインストールする時にデザインCSSと背景画像が破棄される
しかし、このデメリットがあってもテーマのCSSに含めれば良いだけなので問題は無いです。
テーマ作成の基本的な知識
さて、はてなブログのテーマ作成ですが前提条件として、CSSのみで行うことです。
他社のブログサービスの中にはwordpressのようにhtmlの構造からカスタマイズ出来ますが、
はてなブログでは出来ません。
はてなブログのテーマストアで様々なデザインのテーマが公開されていますが、全てCSSのみで実現されています。 ですのでオリジナルのテーマを作成する事はテーマ用のCSSを作成するという事です。
テーマの作成手順
テーマ用のCSSを作成する訳ですが、ゼロから作る訳ではありません。元となるデフォルトテーマのCSSがダウンロードできます。
https://github.com/hatena/Hatena-Blog-Themes/tree/master/boilerplate https://github.com/hatena/Hatena-Blog-Themes/tree/master/boilerplate
このページにある「 bolierplate.css 」をダウンロードしてください。 このCSSファイルを元にオリジナルのテーマを作成して行きます。
何故、ゼロからCSSを作成しないのか、それは、このCSSファイルを使用することで、はてなブログのデフォルトのデザインを得るためです。もしゼロから作成するとなると、はてなブログの全機能を把握してCSSを書かなければならないので、多大な負担が掛かります。
デフォルトのデザインのCSSをカスタマイズしてオリジナルのテーマした方が楽に作成できます。
ブログのHTMLを用意する
はてなブログのテーマの仕様で、ブログのhtmlの構造は全て同じです。 ですので、作業用新しいブログを作成してブラウザからhtmlを保存すれば良いです。
テーマを作成するに必要なhtmlは2種類です。
- 記事のページ。コメントや、次のページや前のページのリンクがあるもの
- カテゴリアーカイブのページ。
この2種類のページのCSSを作成すれば、完成できます。それと記事のページの内容ですが、 はてな記法で記述されているサンプルエントリーの内容を使用します。
ブログのHTMLを作成用に編集する
ブラウザから保存したhtmlは、そのままでは、はてなブログのサーバのCSSを読みに行ってしまいます。 ですので作成用のCSSを読むように編集します。
113行辺りの以下のCSSのリンクを
<link rel="stylesheet" type="text/css" href="//blog.hatena.ne.jp/-/blog_style/10328749687202724418/771a98e965ce2c9d4f9af71297f1944888a0c838"/>
から
<link rel="stylesheet" href="boilerplate.css" > <link rel="stylesheet" href="theme.css" >
に書き換えます。この書き換える事によって同じフォルダにある boilerplate.css と theme.css を読むようにします。
theme.css は、デフォルトテーマの boilerplate.css からカスタマイズするCSSを書きます。
この書き換えることによって、ダブルクリックなどでhtmlを開いたとき作業用のcssで表示されます。
CSSの編集
テーマ編集の為にCSSファイルをboilerplate.cssとtheme.cssの二つにしたのは、デフォルトのテーマあるboilerplate.cssを壊さないように編集する為です。
boilerplate.cssを編集してカスタマイズして行くと、間違ったCSSを書いてしまった場合、元に戻すのが面倒になります。
ですのでデフォルトのテーマのboilerplate.cssを極力編集しないようにして、theme.cssにオリジナルのテーマのCSSを書いていきます。
theme.cssを書いていて、boilerplate.cssのパラメータが邪魔になる場合のみ編集しましょう。
テーマストアへの投稿
テーマが出来上がりましたら、boilerplate.cssとtheme.cssの内容をテーマストアに投稿しましょう。 投稿するときにcssを入力できるテキストエリアがありますので、boilerplate.css、theme.cssの順にコピペします。
投稿する時に"非公開"のチェックをしましょう。これをしないとテーマストアで公開されてしまいます。 ライセンスはクリエイティブコモンズで問題無いです。gplの方は選ばないようしましょう。
そして投稿したら、作業用のブログにテーマの表示確認を行います。 もし表示で問題がありましたら、修正して同じ手順で再投稿します。
テーマ作成は難しく無い
手順が分ければテーマ作成は難しく無いです。 はてなのヘルプが分かりにくいのは、想定しているユーザーが「 ホームページを作成した事がある 」という経験を持っていると想定しているからじゃないかと思います。
ホームページを作成した事が無いが、ブログをカスタマイズしたい人は沢山いると思いますので、この辺の手順を分かりやすくした方が良いですね。
オススメの本
最後に真面目にブログのデザインしたいのであれば、以下の本がお勧めです。基礎的なデザインを勉強できます。 僕はデザインを勉強する時は本を購入して行っています。 基礎を学ぶだけで、デザイナーじゃなくても、それなりに綺麗でカッコ良いデザインが出来ます。
Design Rule Index 要点で学ぶ、デザインの法則150
- 作者:William Lidwell,Kritina Holden,Jill Butler
- 発売日: 2015/10/16
- メディア: 単行本
IA100 ユーザーエクスペリエンスデザインのための情報アーキテクチャ設計
- 作者:長谷川 敦士
- 発売日: 2009/10/28
- メディア: オンデマンド (ペーパーバック)
関連記事
