フジブロっ!

HTML、CSSを独学で楽しく学ぶガテン系のブログ

\おすすめのカスタマイズ/

はてなブログの新しいテーマ【Cappuccino】を公開しました!

どうも!フジグチです!

当サイトでは、はてなブログのカスタマイズを主に行ってきました。

そんな私がこの度、オリジナルテーマ【Cappuccino】(カプチーノ)をテーマストアに公開したのでお知らせいたします。

テーマのコンセプトはラテアート(アイキャッチ)を映えさせる大人可愛い(かっこいい)テーマです。

このテーマは次のような方におすすめ出来るテーマになっています。

  • カスタマイズが苦手
  • アイキャッチが中央しか表示されず困っている
  • アイキャッチを映えさせたい
  • カラーを簡単に変更したい
  • 似たようなテイストがイヤだ
  • 大人可愛い(かっこいい)サイトにしたい

1つでも当てはまっている方は(そうでない方も)ぜひこの記事を読んで、インストールしてみてください。

はてなブログの新しいテーマ【Cappuccino】

デザイン

デザインはこのような感じになっています。

PC表示時

はてなブログテーマ【Cappuccino】PC表示時サンプル画像

スマホ表示時

はてなブログテーマ【Cappuccino】スマホ表示時サンプル画像

フォント

googlefontsの【Fredericka the Great】を使用。

スケッチ風のフォントで、柔らかいようでありながら飾りっ気もプラス。

【Cappuccino】ということで少しカフェっぽさを意識しています。

はてなブログテーマ【Cappuccino】フォントサンプル画像

日付

月を英語表示にしてサイズにアクセントを付け、フォントを生かして日付をデザインの一部に。

はてなブログテーマ【Cappuccino】日付デザイン画像

トップページ記事一覧表示※はてなブログPRO限定

記事一覧表示のデザインです。

記事一覧表示ではデザインの都合上、記事説明文、はてなスター、ブックマーク数、はてなブログタグ、2番目以降のカテゴリを非表示にしています。

スマホ表示時(767px未満)は1カラムで横長のカード型。

1記事毎にアイキャッチが左右に入れ替わります。

はてなブログテーマ【Cappuccino】スマホ表示時記事一覧サンプル画像

 

タブレット表示時(768px以上991px以下)は最初の2記事は縦のカード型、3記事目以降は横長のカード型。

はてなブログテーマ【Cappuccino】タブレット表示時記事一覧サンプル画像

こちらも横長のカード型は1記事毎にアイキャッチが左右に入れ替わります。

画面幅が大きくなり横長のカード型だとタイトル下の余白が気になるので、READ MORE(もっと読む)ボタンを付けています。

余白埋めのデザインですが、実際にクリックすることも出来ます。 

 

PC表示時(992px以上)はサイドバーも表示され2カラムに。

はてなブログテーマ【Cappuccino】PC表示時記事一覧サンプル画像

記事一覧部分のレイアウトはタブレット表示時と変わりません。

サイドバーは336pxのレクタングル広告のスペースを確保。広告のことはよく分かりませんが、対応しているテーマも多くあったので一応。

アイキャッチ

アイキャッチを設定することを前提としていますので、アイキャッチがない場合ははてなブログのデフォルトの画像をアイキャッチに指定して下さい。

サイズはどの画面サイズでも約16:9になるように調整しています。

アイキャッチを敢えて少しずらすことで印象的なデザインに。

横型(スマホ)

はてなブログテーマ【Cappuccino】アイキャッチ表示サンプル画像1

縦型(タブレット以上)

はてなブログテーマ【Cappuccino】アイキャッチサンプル画像2

プロフィール

プロフィール欄はアイコンを中央で表示するようにしています。

はてなブログテーマ【Cappuccino】プロフィールサンプル画像

目次

目次はテーマに合わせてカフェボード風に。

はてなブログテーマ【Cappuccino】目次サンプル画像

コメント欄

コメント欄は当サイトのステップバーのカスタマイズを参考に、Twitterのタイムラインっぽい感じで吹き出し調に。

はてなブログテーマ【Cappuccino】コメント欄サンプル画像

ページャー

矢印のアイコンや「次のページ」「前のページ」という文言ではどちらが新しい記事なのか分かりにくいので、分かりやすく表示。

こちらはトップに戻るボタンのカスタマイズの小洒落たデザインを参考にしています。

はてなブログテーマ【Cappuccino】ページャーサンプル画像

ユーザビリティ

個人的なプチストレスに対してカスタマイズしてあります。

クリックをしやすく

記事一覧から記事に飛ぶためには、アイキャッチかタイトルをクリック(タッチ)しなければならないのですが、このテーマではカード全体をクリック出来るようにカスタマイズしています。

もしタイトルが短くカードに余白が多い場合でも、余白部分をクリックして目的の記事に飛ぶことが出来ます。

コメントボタンのカスタマイズを参考に疑似要素を重ねるということをしています。

日付はクリック不可に

反対に日付を大きく表示したことにより、誤ってクリックしやすくなってしまうので、日付はクリック出来ないようにしています。

(そもそも日付から記事を探すことがほとんどないと思うのですが…。)

カスタマイズ

当サイトで紹介したスムーズスクロールは導入済み、サイドバーの追従は不具合が出る人がまれにいるので導入はしていませんが、正常に動くことは確認済みです。

グローバルナビゲーション

グローバルナビゲーションはCSSを予め組み込んであるので、デモサイトにある「グローバルヘッダの設置方法」のHTMLを入れればすぐにお使いになれます。

HTMLとCSSのみでハンバーガーメニューにしているので、軽いです。

テーマカラーの変更

ある程度カスタマイズしているので、そのままお使いいただくのもいいと思いますが、カラーの変更の仕方を簡単に出来るようにCSSを組んでいます。

例としてこのような配色に変えたとします。

はてなブログテーマ【Cappuccino】配色サンプル画像

この場合にデザインCSSに入れるコードはコチラです。

:root {
    --theme-color: #8ec4d0;/*ヘッダー、フッター*/
    --navigation-color: #d9bac0;/*グローバルナビゲーション*/
    --navigation-hover-color: #c7a2a9;/*グローバルナビゲーションマウスオーバー時*/
    --main-color: #8ec4d0;/*メインカラー*/
    --accent-color: #c7b592;/*アクセントカラー*/
}

どうでしょうか?ちょっとスッキリしていると思いませんか?

#に続く6桁の数字を変えると、コメントアウトに書いてある部分の色が変わります。

予め各部にこちらでカラー指定してあるので、上記の /*メインカラー*/ と書いてあるコードひとつで以下の部分が変わります。

もっと見るボタン、カテゴリのボーダー色、マウスオーバー時の色

はてなブログテーマ【Cappuccino】配色説明画像1

記事内見出しボーダー色(h2、h4)

はてなブログテーマ【Cappuccino】配色説明画像2

コメントを書くボタン

はてなブログテーマ【Cappuccino】配色説明画像3

個別にカラー指定しなくても、1つのコードでこれら全ての色が一括で変わります。

サイト全体のトーンを揃えながらカラーを変えられるので、カラーを変えるハードルが下がると思います。

詳しいカスタマイズ方法や配色サンプルは、近日中に別記事にて紹介します。

着せ替えコード用意しました。こちらの記事をご覧下さい。

ぜひお使いのブログに合わせてカラーを変更してみてください。

シェアボタン※追記

テーマで使えるシェアボタンを用意しました。

こちらもCSSは組み込んであるので、HTMLをコピペするだけでお使いいただけます。

最後に

今回このテーマを作るきっかけとなったのが、こちらのベクターシェルフさんのイラストに感銘を受けたからです。

vectorshelf.com

簡単に紹介させて頂きますと、全て無料で私用商用どちらもOK。クレジット表記不要。PNG、Ai、SVG形式があり加工・編集も自由という太っ腹!

詳しくはご利用についてをご覧下さい。

タッチと色合いが自分好みでビビビッ!(古い)ときました!

カスタマイズ専門の自分のサイトで、ベクターシェルフさんのイラストを自然な形で使いたいがために、テーマを作ったと言っても過言ではありません。

この記事のアイキャッチや、デモサイトの一部アイコンに使わせて頂きました。

この場を借りてお礼申し上げます。

テーマのインストール

こちらのデモサイトで雰囲気を確認して、興味が沸いた方はぜひ一度インストールして、プレビューしてみてください。

また、乗り換えたという方は教えて頂けると喜びます^^

不具合の報告もコメント欄やTwitterで教えて頂けるとありがたいです。

テーマのインストールはコチラです。

blog.hatena.ne.jp


乗り換える際の注意点

テーマを乗り換える場合は、今お使いのデザインCSSの中身が破棄されます。

必ずバックアップを取り、自己責任で行ってください。

トップへ戻る