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

ファイヤードブログ

ディジタル・パブリッシングという観点から、Webサイト制作、電子書籍制作などを。※ブログリニューアル中

2. テーマにするということ 〜はてなブログテーマ制作の方法〜

どうしてテーマを作るのか

 第二回です。第一回目は1.概要をつかむ〜はてなブログテーマ制作の方法〜 - Phiyard Blogです。記事が珍しく好評だったので、調子に乗って早めに第二回を公開します。
 さて、ボイラープレートを土台に作っていくわけですが、一旦立ち止まって、どうしてテーマを作るのかということをちょっと考えて見たいと思います。はてなブログでもTumblrでもWordPressでも、もう既に多くの、様々なテーマが出回っています。その中で、なぜ敢えて自分のオリジナルテーマを作る必要があるのか、で、そのオリジナルさを支えるものとは何かということが明確でないと、完成までたどり着けません。文章じゃなくて写真が映えるテーマを作りたい、他のどのテーマよりも美しいテーマを作りたいなどといった、おぼろげであれまずコンセプトがあることが重要です。
 作り始めるに当たって、加工前のボイラープレートのCSSをそのまま適用してみてわかるのですが、これだけでもうシンプルなブログとして申し分ない水準です。そりゃ、はてなブログ側でHTMLがしっかりと組まれているのですから、当然といえば当然です。その上で、どういった独自性が可能なのか。

独自性が入り込む余地のあるところ

 具体的ない方法論の前に、全体像を示します。「独自性が可能」な部分はだいたい次にあげた部分です。なお、申し訳ないですが、これらからひとつひとつ丁寧にコードを載せつつ解説していくといったことはしませんし、おそらくこれを読んでいるくらいの人であれば不要なことだろうと考えています。

  • header
    • 固定ヘッダー
    • ブログタイトル
    • ブログの説明文
  • footer
  • 包含ブロックのタイトル部分
  • サイドバーとその中の一つ一つのブロック
  • 検索のサーチボックス
  • ボタン
    • 「コメントを書く」と「編集」
    • 「読者になる」
  • 投稿内のスタイル
  • 投稿のメタ情報にあたる要素
    • 投稿タイトル
    • 投稿日
    • 投稿のカテゴリ
    • x日前
    • 投稿者
  • aboutページ
  • アーカイブページ
    • パンくず
  • ページネーション
  • 記事詳細内の前後2つ分
  • 記事一覧の「次のページ」
  • マルチデバイス対応
  • aタグに関わるスタイル

カスタマイズのコツ

 第三回から、この上のうちの幾つかを取り上げますが、先にカスタマイズのポイントをひとつ言うと、それは「絶対配置をうまく使うこと」です。これはHTML構造が動かせないことからも、自然に思い当たることだろうと思います。テーマストアでいくつかテーマを見て、個性的だなと感じる装飾部分にはたいがい「position:absolute」が適用されています。
 MJMJBでも、日付の部分でabsoluteを使用しています。ですが、MJMJBは、レスポンシブで作ることにしていたので、手間を省くためにこの部分くらいでしか絶対配置は使用していません。
 おそらくはてなブログでもっとも高度にカスタマイズされたテーマであろう「村上さんのところ」は、いたるところに絶対配置が使われています。しかも、同時にレスポンシブ・ウェブ・デザインで作られているので、ちゃんと念入りに計画されて作られたサイトは凄いな、と感心してしまいます。