どうも！フジグチです！
当サイトでは、はてなブログのカスタマイズを主に行ってきました。
そんな私がこの度、オリジナルテーマ【Cappuccino】（カプチーノ）をテーマストアに公開したのでお知らせいたします。
テーマのコンセプトはラテアート（アイキャッチ）を映えさせる大人可愛い（かっこいい）テーマです。
このテーマは次のような方におすすめ出来るテーマになっています。
- カスタマイズが苦手
- アイキャッチが中央しか表示されず困っている
- アイキャッチを映えさせたい
- カラーを簡単に変更したい
- 似たようなテイストがイヤだ
- 大人可愛い（かっこいい）サイトにしたい
１つでも当てはまっている方は（そうでない方も）ぜひこの記事を読んで、インストールしてみてください。
デザイン
デザインはこのような感じになっています。
PC表示時
スマホ表示時
フォント
Google Fontsの【Fredericka the Great】を使用。
スケッチ風のフォントで、柔らかいようでありながら飾りっ気もプラス。
【Cappuccino】ということで少しカフェっぽさを意識しています。
日付
月を英語表示にしてサイズにアクセントを付け、フォントを生かして日付をデザインの一部に。
トップページ記事一覧表示※はてなブログPRO限定
記事一覧表示のデザインです。
記事一覧表示ではデザインの都合上、記事説明文、はてなスター、ブックマーク数、はてなブログタグ、２番目以降のカテゴリを非表示にしています。
スマホ表示時（767px未満）は１カラムで横長のカード型。
１記事毎にアイキャッチが左右に入れ替わります。
タブレット表示時（768px以上991px以下）は最初の２記事は縦のカード型、３記事目以降は横長のカード型。
こちらも横長のカード型は１記事毎にアイキャッチが左右に入れ替わります。
画面幅が大きくなり横長のカード型だとタイトル下の余白が気になるので、READ MORE（もっと読む）ボタンを付けています。
余白埋めのデザインですが、実際にクリックすることも出来ます。
PC表示時（992px以上）はサイドバーも表示され２カラムに。
記事一覧部分のレイアウトはタブレット表示時と変わりません。
サイドバーは336pxのレクタングル広告のスペースを確保。広告のことはよく分かりませんが、対応しているテーマも多くあったので一応。
アイキャッチ
アイキャッチを設定することを前提としていますので、アイキャッチがない場合ははてなブログのデフォルトの画像をアイキャッチに指定して下さい。
サイズはどの画面サイズでも約１６：９になるように調整しています。
アイキャッチを敢えて少しずらすことで印象的なデザインに。
横型（スマホ）
縦型（タブレット以上）
プロフィール
プロフィール欄はアイコンを中央で表示するようにしています。
目次
目次はテーマに合わせてカフェボード風に。
コメント欄
コメント欄は当サイトのステップバーのカスタマイズを参考に、Twitterのタイムラインっぽい感じで吹き出し調に。
ページャー
矢印のアイコンや「次のページ」「前のページ」という文言ではどちらが新しい記事なのか分かりにくいので、分かりやすく表示。
こちらはトップに戻るボタンのカスタマイズの小洒落たデザインを参考にしています。
ユーザビリティ
個人的なプチストレスに対してカスタマイズしてあります。
クリックをしやすく
記事一覧から記事に飛ぶためには、アイキャッチかタイトルをクリック（タッチ）しなければならないのですが、このテーマではカード全体をクリック出来るようにカスタマイズしています。
もしタイトルが短くカードに余白が多い場合でも、余白部分をクリックして目的の記事に飛ぶことが出来ます。
コメントボタンのカスタマイズを参考に疑似要素を重ねるということをしています。
日付はクリック不可に
反対に日付を大きく表示したことにより、誤ってクリックしやすくなってしまうので、日付はクリック出来ないようにしています。
（そもそも日付から記事を探すことがほとんどないと思うのですが…。）
カスタマイズ
当サイトで紹介したスムーズスクロールは導入済み、サイドバーの追従は不具合が出る人がまれにいるので導入はしていませんが、正常に動くことは確認済みです。
グローバルナビゲーション
グローバルナビゲーションはCSSを予め組み込んであるので、デモサイトにある「グローバルヘッダの設置方法」のHTMLを入れればすぐにお使いになれます。
HTMLとCSSのみでハンバーガーメニューにしているので、軽いです。
テーマカラーの変更
ある程度カスタマイズしているので、そのままお使いいただくのもいいと思いますが、カラーの変更の仕方を簡単に出来るようにCSSを組んでいます。
例としてこのような配色に変えたとします。
この場合にデザインCSSに入れるコードはコチラです。
:root { --theme-color: #8ec4d0;/*ヘッダー、フッター*/ --navigation-color: #d9bac0;/*グローバルナビゲーション*/ --navigation-hover-color: #c7a2a9;/*グローバルナビゲーションマウスオーバー時*/ --main-color: #8ec4d0;/*メインカラー*/ --accent-color: #c7b592;/*アクセントカラー*/ }
どうでしょうか？ちょっとスッキリしていると思いませんか？
#に続く６桁の数字を変えると、コメントアウトに書いてある部分の色が変わります。
予め各部にこちらでカラー指定してあるので、上記の /*メインカラー*/ と書いてあるコードひとつで以下の部分が変わります。
もっと見るボタン、カテゴリのボーダー色、マウスオーバー時の色
記事内見出しボーダー色（h2、h4）
コメントを書くボタン
個別にカラー指定しなくても、１つのコードでこれら全ての色が一括で変わります。
サイト全体のトーンを揃えながらカラーを変えられるので、カラーを変えるハードルが下がると思います。
詳しいカスタマイズ方法や配色サンプルは、近日中に別記事にて紹介します。
着せ替えコード用意しました。こちらの記事をご覧下さい。
ぜひお使いのブログに合わせてカラーを変更してみてください。
シェアボタン※追記
テーマで使えるシェアボタンを用意しました。
こちらもCSSは組み込んであるので、HTMLをコピペするだけでお使いいただけます。
おすすめ記事の設置※追記
おすすめ記事を設置できるようにしました。
ヘッダー（タイトル下）や記事下、サイドバーに設置することが出来ます。
詳しくはこちらの記事で解説しています。
最後に
今回このテーマを作るきっかけとなったのが、こちらのベクターシェルフさんのイラストに感銘を受けたからです。
簡単に紹介させて頂きますと、全て無料で私用商用どちらもOK。クレジット表記不要。PNG、Ai、SVG形式があり加工・編集も自由という太っ腹！
詳しくはご利用についてをご覧下さい。
タッチと色合いが自分好みでビビビッ！（古い）ときました！
カスタマイズ専門の自分のサイトで、ベクターシェルフさんのイラストを自然な形で使いたいがために、テーマを作ったと言っても過言ではありません。
この記事のアイキャッチや、デモサイトの一部アイコンに使わせて頂きました。
この場を借りてお礼申し上げます。
テーマのインストール
こちらのデモサイトで雰囲気を確認して、興味が沸いた方はぜひ一度インストールして、プレビューしてみてください。
また、乗り換えたという方は教えて頂けると喜びます^^
不具合の報告もコメント欄やTwitterで教えて頂けるとありがたいです。
テーマのインストールはコチラです。
テーマを乗り換える場合は、今お使いのデザインCSSの中身が破棄されます。
必ずバックアップを取り、自己責任で行ってください。
