メコログ

web関連の話や、日々の雑記を書こうと思っています。

はてなブログのオリジナルテーマ制作方法

 日曜日だけでテーマを制作してみようということで、本ブログのテーマを制作しました。その際の制作過程などを紹介したいと思います。

本ブログのテーマはこちらで昨日公開しました。

テーマのインストールページへ

1. 事前準備

  • cssの知識(擬似要素が使えるとさらに良し)
  • chrome
  • htmlエディタ

これらを用いて制作を進めていきます。

2. テーマストアを参照し、作りたいブログをイメージしよう

テーマストアへ
今回は、2カラムのサイトの制作について説明を行います。

3. テーマテスト用のブログの準備

3-1. 新しくブログを作るためのボタンの場所

3-2. 記事を『自分のみ公開』にする
3-3. 編集モードを『はてな記法モード』にする
3-4. サイドバーの項目を全て表示しておく
3-5. テーマ確認用のサンプル記事を投稿する

この、サンプル記事をそのままコピペして記事を投稿すると、1つの記事内にデザイン対象となる様々な要素が配置される。

4. はてなブログのテーマの土台

土台となるテーマが用意されているので、それをカスタマイズして制作を行います。
土台となるテーマ『Boilerplate』

全てコピペして、htmlエディタに保存しておく


5. cssをカスタマイズしてみよう

この時点で使用するブラウザはchromeにする
エディタ内にあるテキストを、デザインCSSの内容に上書き

自動更新されたページの要素とcssの関係をchromeで調査

chromeでF12キーまたは、右クリック→要素を検証と押すことで、各クラスに現在適応されているcssを調べることができます。

htmlテキスト内をマウスオーバーすることでページ内のテキストと各要素との関係を簡単に調べられます。

cssを編集

classと要素の関係が分かった所で、htmlエディタ内のcssを編集&要素がなければ追加→デザインcss内にコピペで上書き→… というトライアンドエラーの流れでテーマを作成していきます。

例:記事内のh3要素にボーダーを書き加える場合

htmlエディタ内に存在するentry-content h3クラスに以下の要素を書き加える。

.entry-content h3 {border-bottom:1px solid #000;}

このようにして、タイトルの文字や、背景、h要素のデザインを変更していきます。:beforeなどの擬似要素を使うことにより、要素頭にアイコンを付与するのもいいと思います。

イコン画像を用いる場合

Hatenafotolifeを用いることが推奨されています。画像をアップロードして、単発画像ページに→右クリック→新しいタブで画像を開く、とすることで画像urlを確認することができます。

chromeでリアルタイムに編集できたりもする

chromecssが記述されている場所に、直接cssを書き加えることができます。さらに、各要素の値をクリック後に、ホイールすることで増減できます。これは超便利です!paddingやfont-sizeの適切な値がかなり簡単に確認できます。

cssを書く上で気になった点

css3のrotateや:beforeが、なぜか適用されない要素が存在したりし、その辺りを裏技的に回避する or なかったことにするのが上手く制作するコツかもしれません。wordpressで制作するのと違い、用いられるclassがあらかじめ設定されている&広告が変な場所に表示されるので、カスタマイズ性はあまり高くないように思いました。

6. cssをカスタムするページの確認

単発記事のページないだけでなく、カテゴリーページやAboutページについても設定する必要があります。設定すべきページは以下のページを参照してください。
はてなブログテーマ制作の手引き
これについては、細かく拘らない限りはそのままでも良いように思いました。
(注:パンくずのclassの設定については確認しておくべき。

7. テーマを投稿

投稿ページへ行って、cssテキストをコピペし、テーマのタイトル、テーマの説明を記入したら終了です。


ここまでお疲れ様でした。
頑張って皆で素敵なテーマを作ってみましょー!