100万年ぶりに自分でブログテーマを作成したら、css girdのおかげで自由度が高まっていた。

収益化するなら一応WEBサイト屋さんとしてテーマをちゃんと作るか……となった。WPはもちろんだけど、tumblrのテーマなども自分で作ったことがある身としては、はてなのテーマ作成は、記事ひとつ分のcssをいじるだけなのでテーマ作成としては比較的楽だと思いました*1。
CSSの練習としては結構いいんじゃないでしょうか、知らんけど*2。

はてな公式のデザインテーマ作成の手引きを読む

help.hatenablog.com

公式がヘルプに制作の手引きを載せているので、ひと通り読んでおく。自分は確認用テーマを作ったけどほとんど使わなかった。これは自分専用テーマとして表示させるものが決まっていたからで、いろんな人に使ってもらうテーマを作るなら、確認用テーマでカテゴリ表示のオンオフや、サイドバーのオンオフを都度確かめたほうがいいと思います。
ブログで使う基本のスタイルがすべて記述されているサンプルエントリーは便利なので、確認用テーマを使わない人も作成しておくとよい。

自分はsass、それとローカルで作業するので以下の準備をした。

必須のページ5種類を保存する

公式手引きによると、最低限以下の種類のページが必要です。公式手引きに該当URLがありますが、この6種類のページをローカルに保存します。

トップページ
┣ パーマリンク（記事ページ）
┣ Aboutページ
┣ Archiveページ
┣ Archive/Categoryページ
┗ Searchページ

保存の仕方は、名前をつけて保存→HTMLのみ、とかでいいでしょう。
記事ページには公式手引きにある前述のサンプルエントリーを使うと、スタイルに漏れがなくて安心。

help.hatenablog.com

保存したページに適用されているcssをコメントアウト

WEBページを保存すると144行目あたりに、そのブログ用のスタイルが記述されていると思います。

<link rel="author" href="http://www.hatena.ne.jp/user_name/">
<link rel="stylesheet" type="text/css" href="https://cdn.blog.st-hatena.com/css/blog.css?version=XXXX" />
<!-- 以下をコメントアウトする -->  
<link rel="stylesheet" type="text/css" href="https://blog.hatena.ne.jp/-/blog_style/XXXX/XXXX" />

URLが/blog_style/数字がいっぱいのものはデザイン用のスタイルなので、これをコメントアウトします。これでCSSが一切あたってないブログになりました。
これで作業してもいいんですが、CSSが当ってなくてレイアウトが崩れるという凡ミスを防ぐために、基本的には手引きにあるとおり、BoilerplateのテーマCSSを流用しましょう。

DLしたBoilerplateのcssを当てる

公式手引きにもあるBoilerplateのCSSをDLしてきて、コメントアウトしたCSSの下くらいに書いておきます。

github.com

ちなみにgithubのDLはここからできます。

BoilerplateのCSSを直接編集してもいいし、別途テーマ用のCSSを用意してもいいです。自分は元テーマはなるべくそのままにしたかったので、不要な部分は適宜コメントアウトして、オリジナルテーマ用のCSSを別途作って対応することにしました。

<link rel="author" href="http://www.hatena.ne.jp/user_name/">
<link rel="stylesheet" type="text/css" href="https://cdn.blog.st-hatena.com/css/blog.css?version=XXXX" />
<!-- もともとあたってたCSS -->
<!-- <link rel="stylesheet" type="text/css" href="https://blog.hatena.ne.jp/-/blog_style/XXXX/XXXX" /> -->
<!-- 元テーマ boilerplateのCSS -->
<link rel="stylesheet" href="./css/boilerplate.css">
<!-- これから作るテーマ用のCSS -->
<link rel="stylesheet" href="./css/theme.css">

テーマストアに非公開で投稿する

テーマができたらテーマストアに非公開で投稿すると、自分以外は使えないオリジナルテーマになります。修正した場合はテーマを再度インストールする必要があります。

実際に作ってみて「んあ〜」となった部分

わりとありました。仕方ない部分とか、なるほどね、な部分とか。

アーカイブのサムネは大きくすると画質がおちる

proを使ってる場合、サムネイル＋抜粋のレイアウトが使えるんですが、このサムネイルをカラムいっぱいにしようとすると画質が荒くなります。なので小さめに修正しました。今のサイズで結構ギリギリかもしれない。

svgはタグ化して使う

これが楽でした。
現在はロゴのみsvgなんですが、backgroundに使う場合もコード化したものを使うと楽です。
SNSアイコンもデザインは存在するんですが、めんどうくさくなって、とりあえずデフォルトを使っています。

ちなみにロゴは以前作った元データをどっかやったので、画像を保存→トレースでパス化しました。こうしてどんどん劣化していく。これも味ということにしておきました。

gridレイアウト

TOPの画像とテキストの並び替えはdisplay:girdで行っていますが、縦位置のstart揃えがどうやるんだ……？となったりしました。max-contentとかいう便利な単位でできました。

.page-archive .archive-entry {
  /* よこ */
  grid-template-columns: 44.7% 1fr;
  /* たて */
  grid-template-rows: max-content max-content 1fr;
  /* 間隔 */
  gap: 0 1em;
  /* 寄せ方向 */
  align-items: start;
}

.page-archive .entry-thumb-link {
  /* サムネイル位置の調整 */
  grid-column: 1/2;
  grid-row: 1/4;
}

gridはマスの並び替えがかなり自由にできるところがflexとの違いですね。ほんとうにこれが使えてよかった。これ使えば、自動で出力される部分のレイアウトも好きに変更できます。

スマホの微妙なfont-weight

iOSは600から、Androidは700から太字になる。これまだ修正してないのでAndroidは多分全部細字です（自分の環境では細字）。とくにこだわりがないなら、太くしたい場合はboldもしくはbolderで指定したほうがいいでしょう。これも早めになおしたい

まとめ

自分、作るのはそんなに得意ではないんですが、ややエッジの効いたテイストが好きなので、そういうのテイストにしました。タイトルに黒背景敷いたり、角丸を使わないとか。
2カラムにしたのは自分がサブカラムの情報を結構見るからです（投稿数とか）。
メインカラムは広めにしました。このブログ、PCとスマホでユーザーが半々くらいなので、どうせなら写真をでかく見ろよな！と思っています。でかい画面で見れば見るほど写真が大きくなりますので！プラモも去年より作りたいな。

というわけで、自分の作ったものに執着が全然ないしめんどくさがりなんですが、なるべく長いあいだこれを使っていきたいと思っています。

*1:Tumblrは投稿タイプごとに出力されるタグがいっぱいあって作るのがめんどう。だから有料テーマが豊富です。

*2:知らんのかい。でも実際flexとかgridを使って順番の変更をやろうとするといいおさらいになります。なりました。

お読みあそばせ

もはやただの日記