読者です 読者をやめる 読者になる 読者になる

はてなブログ制作の手順

はてなブログテーマ制作の手順については、はてなブログでその手引きが細かく掲載されています。そこで、そちらを参照しながら今回、はてなブログのテーマを制作していきたいと思います。

 

目次

 

実際の作業手順メモ

1. テーマ確認用ブログを開設する

制作作業ようにブログを一つ開設しました。作業用ブログであって公開は趣旨ではないので、非公開ブログとして開設。

 

2. はてなブログで用意されているサンプルエントリーを記事に投稿する

デザインの確認がしやすいように用意されています。

ありがたいですね。

 

3. Boilerplateを土台にする

はてなブログのデザインCSSをカスタマイズする土台に適したサンプルテーマ「Boilerplate」をコピペして、ダッシュボードの [デザイン] [カスタマイズ] [デザインCSS]に貼り付けます。

サンプルテーマには、CSSをプログラム的な書き方ができるLESSも用意されているのですが、わたしはこちらはまだ触ったことがないので、今回は大人しく「boilerplate.css」を利用することにしました。Boilerplateのテンプレート置き場には拡張子「.md」のファイルがあるのですが、これはreadmeファイルですね。

 

実際の作業ではローカル環境にフォルダを作り、そこにhtmlファイルとCSSファイルをつくって、「boilerplate.css」でコピペしたものを貼り付けて作業しました。

わたしはmacユーザーなのですが、テキストエディタにはBracketsを使っています。

 

4. はてなブログの構成を確認する

  • トップページ
  •  - パーマリンク(記事ページ)
  •  - Aboutページ
  •  - Archiveページ
  •  - Archive/Categoryページ
  •  - Searchページ

この辺りはFC2と変わらないようです。

 

5. テーマ制作に必要なタスク、チェックリスト

  • ブログタイトル
  • ブログの説明
  • 記事
  • 日付
  • カテゴリー
  • 「編集」リンク
  • キーワードリンク
  • 記事下の広告
  • コメント欄
  • サイドバーモジュール
  • プロフィール、最新記事などの各モジュール
  • ページャー
  • フッターリンク
  • Aboutページ
  • Archiveページ
  • カテゴリーのパンくずリスト

これらのCSSを修正する必要が有ります。

ここまでははてなブログの用意している「はてなブログテーマ制作の手引き」に書いてあるとおりです。「はてなブログテーマ制作の手引き」にはテーマを配布することを前提に注意点などの記載が続いています。

 

6. はてなブログのHTML構造を確認する

これも「はてなブログテーマ制作の手引き」に用意しておいて欲しかった… ググってみると、この構造を分かりやすく図解されている方がいらっしゃるものの、2013年4月のものなので参考にさせていただきつつ、自分でも実際に確認してみようと思います。