【これで出来た】はてなブログのオリジナルテーマのオススメ作成手順!

【これで出来た】はてなブログのオリジナルテーマのオススメ作成手順!

つい、勢い余ってと言いますか
他の方が作成したブログテーマよりも、自分で一から作った方が愛着も湧くし自由度もあるよね?っていうことで、
オリジナルテーマ“Sengyo”を作成しました。

【参考リンク】

はてなブログでシンプルだけどオシャレなレスポンシブテーマ”Sengyo”を公開しました

このテーマを作るまでの手順とか、作成する上で便利だったものとか後でこうやって記事にするために全てメモしていたので、この記事を見ればはてなブログのテーマ作成ができるよ!というところまで手順を紹介していこうと思います。

 

はてなブログのテーマを作成するために必要なものを確認する

基本的には、この公式の「はてなブログテーマ制作の手引」にそってテーマを作成していきます。

【参考リンク】

はてなブログテーマ制作の手引き

必要な物を確認します。

  1. テーマ確認用のブログ
  2. テーマのデザインアイデア
  3. テーマを作成するためのCSSの知識

テーマ制作の手引って少しだけ不親切で言葉足らずじゃないかな?と思う所があります。
まず、テーマ確認用のブログとはその名の通りで、はてなアカウント(無料)なら3つ。Proなら(10個)まで作成可能なブログのうち1つ新しく作成をしてそのテーマにCSSを適用していきながらテーマを作成するので新しくテーマ確認用のブログを作成します。

 

ブログ作成に必要なタスクを洗い出す

洗い出す!っていっても、テーマを初めて作ろうと思ってる人にはハードルが高いと思うので、下記にまとめました。

  1. テーマ確認用ブログの作成
  2. サンプルエントリーをコピーする
  3. サンプルテーマ「Boilerplate」をGitから取得する
  4. デザインイメージを描いておく(必要ならレスポンシブも)
  5. 「ブログタイトル」部分のCSSを修正する
  6. 「ブログの説明」部分のCSSを修正する
  7. 「日付」部分のCSSを修正する
  8. 「カテゴリー」部分のCSSを修正する
  9. 「サイドバー」部分のCSSを修正する
  10. 「ページャー」部分のCSSを修正する
  11. 「フッター」部分のCSSを修正する
  12. 「パンくずリスト」部分のCSSを修正する
  13. PC,スマホで画面確認を行う
  14. テーマ名を決定する
  15. テーマストアに登録する

とてつもなく長くなったし、これを覚えておくなんて到底難しいので無料ですごくおすすめのタスク管理サービスを紹介しておきます。

【参考リンク】

タスク・プロジェクト管理ツールJooto(ジョートー)

Jootoというサービスなんですが、ホワイトボードに貼り付けた付箋を「未着手」「着手中」「完了」の3つのステータスで管理できるシンプルなものです。

【これで出来た】はてなブログのオリジナルテーマのオススメ作成手順!

このシンプルさが逆に都合がよくで仕事だともっと案件が輻輳していたりタスクの期限がややこしかったりするのですが、個人で作成するブログテーマ程度の規模だとこのくらいシンプルな方が効率的に管理ができました。

さて、ここからが具体的に作成を行った際の注意点等となります。

 

サンプルエントリーをコピーする

サンプルエントリーってなんぞや?と思われると思います。
サンプルエントリーは、先ほど作成したテーマ確認用ブログに投稿する記事のことです。
このサンプルエントリーには、はてなブログに投稿できる基本的な見出しや画像やAmazonコード埋め込みなどが含まれていてテーマのデザイン確認にはもってこいのものです。
ここから、サンプルエントリーに必要な情報をコピペして作成したテーマ確認用ブログに投稿しましょう。
ちなみに後々にデザインの確認が必要になる「ページャ」のためにサンプルエントリーは2つ以上投稿しておくことをオススメします。

 

サンプルテーマ「Boilerplate」をGitから取得する

GitHubからはてなブログが作成した「Boilerplate」を取得します。
このテーマはカスタマイズに必要な項目を全て列挙して、それでいて基本的な設計はされているのでまるまる一から作成する手間が省けて非常に便利です。htmlタグを自由に変更することができる領域は非常に限られているので、特別な事情がない限りはこのサンプルテーマをテーマ確認用ブログのデザイン→CSSの部分に全て貼り付けましょう。

【参考リンク】

hatena/Hatena-Blog-Themes

 

デザインイメージを描いておく(必要ならレスポンシブも)

そこまでがっつりした本格的なものは作成しなくてもいいと思います。(どうせ制作してたら変わってくるので)
とりあえず、ワイヤフレームくらいは書こうかな?という気持ちくらいでいいと思います。

 

各CSSの該当箇所を作成していく

使っているブラウザによって様々なのですが、GoogleChromeを利用することをオススメします。
F12キーを押下することで、htmlとそのタグに紐づくCSSが何行目に書かれているかを把握することが出来るので、この機能を利用しながら制作を進めて行きます。
CSSの作成を行う際に気をつけて頂きたいのが、レスポンシブテーマを作成される場合はまずはスマートフォン画面サイズから作成することをオススメします。スマートフォン向けのCSSはメディアクエリで画面サイズの大きさによって分けるのですが、この際PCからデザインしてしまうと自由度に大きく幅のあるPCデザインの影響がスマートフォンに出てしまい修正を行うCSSの物量が大幅に増えてしまいます。こうなるとPC側のデザインを一部修正する必要が発生したりと手戻りが発生するリスクが高いため、あまりオススメはしません。まずは横幅320px(iphone5の大きさ)から初めてCSSの作成を行うことにしましょう。

 

カラーコードに迷ったらAdobe Kuler

【参考リンク】

Adobe Color CC

Adobeが公開している、類似色や補色やアクセントカラー等を教えてくれるカラーコード参照サービス。
ベースカラーを決めれば、そのベースカラーと相性のいいアクセントカラーを調べて利用します。

 

文字ばかりで寂しくなってくるのでフォントアイコンを利用する

アイコンなのに、CSS上ではフォントの様に利用できるフォントアイコンがブログデザインでは最近は必須になりつつあります。
画像とは違い、読み込みにかかる時間も短く色や大きさを自由に変えることができるので非常に優れています。はてなブログでも特別なフォントアイコン用のインポートファイルを読み込まなくてもそこそこの種類を利用することが出来るので、最低限の利用だけであれば十分です。
詳細な導入方法等については、下記ページで詳しくまとめてくださっているのでそちらを参照願います。

【参考リンク】

はてなブログで使えるアイコンWebフォントの一覧と使い方まとめ

 

FontAwesomeをインポート

【これで出来た】はてなブログのオリジナルテーマのオススメ作成手順!

FontAwesomeはアイコンフォントのインポートファイルを提供している世界で最も有名なサイトの一つです。

【参考リンク】

Font Awesome Icons

こちらのサービスが提供しているアイコンフォントを利用して、作成するテーマのデザイン性を追究します。導入の方法は上記ページで解説してくださっているはてなブログでの導入方法とほとんど同じで

font-family:'FontAwesome';

この1行が違う程度です。
FontAwesomeを導入することで、数百ものアイコンフォントを利用することが出来るようになります。

 

基本的におしゃれな装飾はコピペで十分

おしゃれなCSSの装飾はオリジナリティを出すために1から考えたい!と思いがちになると思いますが、これをやっていると相当時間を食ってしまうし、CSSのデザインをしっかりと学んでいなければどうしても、全体を俯瞰的に見た時にバランスが取れていなかったりしてしまいます。
なので、先人が作成してくれたCSSの中で自分が作成を行うテーマにあったものを探しだしてコピペして利用するのが一番の近道ですし、そのコピペして取得したCSSを見て「ここはもう少しmarginを足そう」とかカスタマイズすることができればCSSの作成の第一歩を踏み出せるんじゃないでしょうか。

 

PC,スマホ画面で確認を行う

特にスマホ画面では確認を行ったほうがいいと思います。
レスポンシブテーマを作成するのであれば、非常に重要な行程でここでデザインが崩れてしまったり想定と異なる動きをしてしまっているとせっかく作成したデザインを変更する必要が発生してしまいます。そうならないために確認しながらCSSの作成を行うとは思うのですが、PCとスマホは常にCSSを修正した際は確認するようにします。

 

テーマ名の決定

テーマ名はそこまで重要なものではないと思っています。わかりやすい名前にすることでインストール数が増えるとかはあるかもしれませんが、そもそもテーマではブログのタイトルの様に一瞬で目を引く効果も薄いと思います。要は思い入れのある名前を設定することができるか?という点に尽きるでしょう。わたしが作成したSengyoも完全にテーマのデザイン性などは無視していて思い入れだけです。

 

テーマストアに登録する

注意すべき点は1点のみで、作成したテーマのデフォルトデザインのみのテーマストアに登録することです。

【これで出来た】はてなブログのオリジナルテーマのオススメ作成手順!

上記が作成したテーマ全体のCSSをパーツ毎に分解したとすると、この中でどのブログでも必要とされるのは緑色で表現している箇所です。

  1. 記事部分に該当するContents
  2. サイドバー(SideBar)
  3. ページ下部フッター(footer)

これら以外については、テーマを適用する人の好みによって必要か不要かが変わってきます。
このようなパーツをオプションとすることで利用者の自由度を増す事が出来ます。これがテーマのカスタマイズの自由度の高さです。
自由度の高いテーマはCSSを詳しい人にとってはありがたく、テーマの作成時点でオプション部分まで想定した作りこみを行えば”テーマカスタマイズ例”としてCSSに詳しくないユーザーでも利用することが可能となります。
オレンジ色で表現しているオプション要素についてのCSSは別に保存しておき、テーマストアに登録するCSSはそのテーマのオプションを含まないベースとなる部分のみとしましょう。

 

さいごに

テーマの作成は凄く楽しかったです。今回作成したSengyoも合計で作成時間が20時間超のわたしの中では大作のテーマで、これからも新しいテーマづくりやテーマのカスタマイズCSSの作成等に取り組めればなと思っています。

 

らいか
テーマを作ってみることで、自分のブログの新しいデザインの可能性に気づけたり、CSSの技術向上につながります。ぜひとも自分のオリジナルテーマ作ってみた方がいいです。
【これで出来た】はてなブログのオリジナルテーマのオススメ作成手順!

ABOUTこの記事をかいた人

工業高等専門学校を卒業後、NTTグループのSI企業に就職。数々の炎上案件を鎮火するために日本各地を5年間転々とする。2015年に一般ユーザ向けのWebシステム開発案件のチームリーダとして業務に従事し、改めて"Webのものづくりの楽しさ"に気付きWeb制作会社に転職。Web制作やアクセス解析を使ったオウンドメディアの運用改善などを行っていく中で、もっとユーザー目線でWebをただ制作するだけではなく企画や運用まで幅広い領域で仕事がしたいと感じるようになり、Webディレクターのキャリアを目指す。日本中のビジネスホテルに詳しく、犬や猫よりも鳥派。