※当テーマの紹介する際は、テーマ配布ページではなくこの記事のURLを使用してください。
このブログも開設してから約３週間が経ちました。今までずっと、はてなブログのオリジナルテーマを作ろうと思っていたのですが、忙しくて中々作れず公式のテーマを使用していました。
さすがに公式のテーマのままでやっていくのも限界を感じてきたため、3日ほど掛けてオリジナルテーマ「Codomisu Flat（こどみすフラット）」を作りました。
最初はこのブログ専用の非公開テーマにする予定でしたが、少し考えてみたところ、せっかく作ったものを独り占めするのは勿体ないという結論にいたったため公開することにしました。
個人的に、はてなブログはPCデザインとスマホデザインは分けた方が美しく表示できると考えているのもあって、当テーマはレスポンシブ非対応ですので注意してください。
ちなみに、はてなブログのスマホデザインのカスタマイズについては後日ひとつの記事にまとめて投稿するので気になる方は読者登録をお願いします。
こどみすフラットの紹介
前置きはここまでにして、ちゃちゃっとこのテーマについて紹介していこうと思います。
このテーマの主な特徴
- 昨今流行中のフラットデザインっぽい見た目
- 今までのテーマにはなかったタイトル横に並んだメニュー
- おすすめ記事をスライダーで表示（bxSliderを使用）
見た目
デモサイト
レスポンシブ非対応ですのでPCで閲覧してください。
使い方
タイトル横にナビゲーションを設置
デザイン→カスタマイズ→ヘッダ→タイトル下 に下記のコードを設置します。もちろん、タイトルやURL等は自分のものに置き換えてください。
アイコンが上手く表示されない場合
設定→詳細設定→headに要素を追加 の欄に下記のコードを設置してください。
ヘッダー画像を設置
デザイン→カスタマイズ→ヘッダ→タイトル下 に下記のコードを設置します。タイトル、必要であればヘッダー画像のURLは自分のものに変えてください。
スライダーを設置
スライダーの設置にはbxSliderと呼ばれるライブラリを使用します。
まず、設定→詳細→headに要素を追加 の欄に下記のコードを追加します。
次に、デザイン→カスタマイズ→タイトル下 に下記のコードを追加します。
そして「ここに任意のコードを追加する」の欄に以下のフォーマットでリストを作り張り付けてください。
※張り付ける際は空白をすべて消した１行の状態にすること
その他のカスタマイズについて
当テーマの見出しデザイン・シェアボタンなどはデフォルトのデザインのままとなっています。もしカスタマイズした場合は、個人で自由に改変して使ってください。カスタマイズの紹介記事等を投稿することも許可します。いやどんどん投稿してください。ただし二次配布に関しては禁止とします。詳しくはテーマ配布ページに記載されているライセンス表記を参考にしてください。
テーマ配布ページ
追記
2017/05/01
ブログタイトルを日本語(全角)にしている場合、若干下にズレてしまうことがあります。その際は、デザイン→カスタマイズ(PC)→デザインCSSの欄に下記のコードを追加してください。
また、人によってはヘッダー画像上の大タイトル・小タイトルが少し大きすぎるなと感じるかもしれません。その場合は同じ場所に下記のコードを追加して調節してみてください。