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

ファイヤードブログ

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

1.概要をつかむ〜はてなブログテーマ制作の方法〜

HTML&CSS WebDev

 f:id:sthmdnss:20150421210409j:plain
 はてなブログのテーマをリリースしたので、それを振り返りつつチュートリアルにもなればいいなと思って書いていきます。 第一回の目的は、はてなブログテーマ制作というものがどんなものなのか、ということをざっくりと把握することです。

主な情報源

 ネットに様々な情報が上がっていると思いますが、やっぱり公式ドキュメントがいちばん頼りになります(はてなブログテーマ制作の手引き - はてなブログ ヘルプ)。

制作環境

 ローカル制作発環境を持てないのが困るところです。 自分の場合は、このはてなブログフロントページのHTMLソースをコピペし、邪魔そうなスクリプトなどの部分を取り除いて、無理やり再現しました。7割くらい完成してからはローカルを離れ、非公開ブログを作成してそこの「デザインCSS」欄にコピペしていました。

本番環境での制作

 「デザインCSS」というのは、ブログの設定画面から、「デザイン」->「スパナのアイコン(カスタマイズ)」の中の一番下にあります。ふだん、他人が作ったテーマを少し改変したいときにもここに書き足します。
 選択したテーマはここからCSSのインポートで呼び出されています(例えば、「MJMJB」の生のCSSのURLは、http://hatenablog.com/theme/8454420450092214672.cssです)。
 つまり、この「デザインCSS」の欄を空にしてしまえば、元々どのようなテーマを選択していたにせよ、まっさらな状態から 自作CSSを書き始めることができるといわけです。

はじめに考慮(あるいは懸念)したところ

 さて、いよいよ始めるぞ、となった時に私が気になったことをリストします。順序リストで示すので、リストの後に作り終わった現時点の視点から、それぞれコメントを挟みたいと思います。

  1. CSSをゼロから自分で書くのか
  2. 日付はどうするのか
  3. パンくずはどうするのか
  4. paginationは
  5. サイドバーのtitle横のロゴ等いるか
  6. footerはどうするか
  7. 記事内のテーブルや引用
  8. ヘッダーや背景などのユーザーが改変できるスタイルとの兼ね合い
  9. ボタン類をどこまで共通化させるか ( 「編集」と「コメントを残す」)

 以下、それぞれへの回答です。

  1. はてなブログ公式のボイラープレートというのがあります。私が用意したSass版のボイラープレートもあるので、ゼロから書く心配はありません。
  2. 日付はちょっと厄介です。CSSでいじれるところいじれない日付があります。フロントページや記事詳細の日付は年月日毎にspanで囲んであるのですが、サイドバーなどでの日付表示は「2015-4-21」というような「-」つなぎがデフォルトでCSSではスタイルを変更することができません。
  3. パンくずは必要になる場面が少ないので、あまり気にしなくても良いと思います。「MJMJB」でもボイラープレートをほぼそのまま使いました。
  4. はてなブログのページネーションは少し奇妙です。というのも、記事一覧で「古い記事へ」にあたるリンク(はてなブログでは「次の記事へ」出力されます)はあるのですが、「新しい記事へ」にあたるリンクがありません。WordPressではこの辺が「previous」と「next」でつがいになっているので、少し変な感じがします。一方で、記事一覧では、片方がしかリンクがないものの、記事詳細では古い記事へのリンクと新しい記事のそれが共に出力されています。この違いを踏まえることが大事です。
  5. 画像をアップロードしてCSSからインポートする方法と、FontAwesomeなどのクラウドフォントサービスを使って実現する方法がありますが、「MJMJB」ではどちらも取り入れませんでした。画像は、画像を用意する手間がかかりますし、FontAwesomeはインストールしたあとにhead内にCDNを読み込む記述をユーザーに強いてしまうことになるからです。
  6. あまり悩む必要はないと思います(headerは結構気を使いますが)。「MJMJB」でもbackground colorを変えただけです。
  7. 記事内の諸々のスタイルは、基本的にボイラープレートを踏襲して問題ないと思います。引用(blockquote)に関しては、アレンジの幅があるところなので、ここは自作しました。テーブルは、あまり使っている人を見たことがないので、そのままにしてしまった、という事情もあります。
  8. 作成するテーマのコンセプト次第だと思います。「MJMJB」は明確に模倣を意図しているために、ユーザーの設定はあまり考慮していません。
  9. これもボイラープレート踏襲で基本的に問題はないと思います。ただ、編集ボタンの出現位置はユーザーにとってわかりやすい場所に置くように気をつけました。

第一回まとめ

  • 非公開ブログを作って制作環境を整える。
  • ボイラープレート便利。Sass版もあるよ。
  • ページネーションや日付など、はてなブログ独特の出力をおさておく。

blog.phiyard.net