【注意‼】WordPressに引っ越ししました、改正が間に合っていない記事があります。

カード型レスポンシブテーマ「Comfort(コンフォート)」を公開しました

f:id:oyomiyo:20180531150023j:plain

「Comfort(コンフォート)」に興味を持っていただきありがとうございます。

このページでは、当テーマの特徴を詳しく紹介していきます。

カード型デザイン

Comfort(コンフォート)の主な特徴は、カード型デザインだというところです。

私自身カード型デザインが好きでレスポンシブデザインのテンプレートを探していたのですが、はてなブログのテンプレートではあまりカード型デザインのものを見かけないため、どうせなら自分で作ろうと思い作成しました。

自分のブログをカードデザインにカスタマイズするならまだしも、はてなブログではデフォルトで準備されているカスタマイズ機能を考慮しながらテンプレートを作る必要がありますし、大まかなガイドラインにも従わないといけないためかなり苦労しました。

特にカード型となるとデザインが崩れた場合とてもかっこ悪いですし、使う側の設定に可能な限り順応しないといけないためいろいろと試行錯誤が必要です。はてなブログのテーマにカード型デザインが少ない理由が分かった気がします。

創造以上に時間がかかりましたが、結果的に自信を持ってお勧めできるテーマが完成したため、カード型デザインを検討している方には是非使ってもらえると嬉しいです。

豊富なカスタマイズ性

サイトカラーやヘッダー画像等、様々なカスタマイズが可能です。

カード型デザインの場合に必要となってくる最低限のカスタマイズだけはしっかりと行いつつ、使う人の好みに大きく左右される部分はなるべく手を加えずシンプルなまま残しています。

必要であれば後から追加する事も可能ですので、デフォルトのテンプレート内はなるべくシンプルにして表示速度に影響が出ないよう配慮しています。

サイトカラーの変更については以下の記事を参考にして下さい。

Comfortで、サイドバーやスライドメニュー、記事リンク、文字色等のカラーを変更する方法

ヘッダー画像の設置も、はてな側がデフォルトで用意してくださっている機能を活用しつつ、さらに少し手を加えて美しく表示できるように設定しています。

一例として、

f:id:oyomiyo:20180601181358p:plain

宇宙のヘッダに暗い背景色のパターン。落ち着いたイメージでしょうか?

f:id:oyomiyo:20180601181403p:plain

夕焼けに淡い背景色。記事一覧側の背景画像はデフォルトで用意してくださっているものを使用しています。

f:id:oyomiyo:20180601181408p:plain

ポリゴン風のヘッダー画像に爽やかな背景色を合わせたり、、、。

挙げればきりがありませんが、デフォルトの機能だけを活用したとしてもこれだけのカスタマイズができるため、いろいろ試してみたいという人にはピッタリだと思います。

デフォルトの機能を生かすことで、いちいちコードを書き換えたりする手間が大幅に減らせますから、より気軽にカスタマイズが行えるのではないかと考えています。

もちろんより高度なカスタマイズがしたければ、この機能を使わずにご自身で好きなようにカスタマイズできます。

ヘッダや背景画像だけでなく、カードの色やサイドバーのカラー等も変更することが出来ます。

Comfort(コンフォート)タイトル周りのカスタマイズと、ヘッダー画像を設置する方法

使いやすいスライドメニュー

Comfortでは、スライドメニューをデフォルトで追加しています。場所を取らずにワンクリックで目的のページに移動できるスライドメニューは、デザイン的にも機能的にも非常に使いやすいと感じるはずです。

もちろんメニューの内容や数は自由に変更することができます。

Comfort(コンフォート)にスライドメニューを設置して、自分好みにカスタマイズする方法

レスポンシブ対応

comfortはレスポンシブデザインテーマです。

ざっくりとPC表示、タブレット表示、SP表示と三段階に分けてありますが、デバイスの画面幅に応じて細かく切り替えているため、どの大きさのデバイスで見ても丁度良いサイズで表示されるはずです。

f:id:oyomiyo:20180607002943p:plain

まずは幅の広いデスクトップでの表示例です。ヘッダーは前面に表示しつつコンパクトに表示します。

f:id:oyomiyo:20180607003338j:plain

ノートPCや画面幅の広いタブレット等になると、カードの大きさは変えずに余白のみを狭くしていきます。

f:id:oyomiyo:20180607003434j:plain

iPad等の縦表示はこのような感じです。先程と変化がないように感じるかもしれませんが、2列で表示するためにサイドバーを右端にくっつけています。

そうすることで画面幅を最大限活用し精錬された印象をできる限り残しました。特にタイトルが長い場合などはカード自体が縦長になってしまい、カードを無理やり2列で表示した感が出てしまうためこのように設定しています。

f:id:oyomiyo:20180607010918p:plain

画面幅の狭いタブレットやスマホを横向きで使った場合の表示です。この場合は1列表示に変更してレイアウトが崩れないようにしています。

f:id:oyomiyo:20180607003504j:plain

最後にスマホ全般の表示です。

Comfortでは画面幅に応じて切り替えています。同じタブレットでも、縦に見た時と、倒して見た時とでは画面幅にかなりの違いが出てしまいますから、その場合もふさわしい表示に切り替えてあげるのは読み手にとっても親切です。

また、より少ないコードで最適な切り替えができるよう考えているので、細かく切り替えている割に読み込みスピードには影響しないでしょう。

徹底したデザイン

ブログのデザインに統一感を持たせることは重要です。細かい部分もカード型デザインにピッタリな表示にしてあげることで、読み手は精錬された印象を受けるでしょう。

もちろんすべての機能にカード型デザインの要素を取り入れればいいという訳ではなく、妥当な範囲で、狙いどころを定めてデザインしていく必要があります。

そのため、実用的でサイトの印象に大きくかかわる部分に限定してカスタマイズを行いました。

一例として、記事下の関連記事を表示した場合、Comfortではこのように表示されます。

f:id:oyomiyo:20180601144120j:plain

サイドバーの記事リンクと同じデザインを採用し、画面幅が広い場合にのみ2列にすることで、ブログの印象を損ねることなく表示することができます。

f:id:oyomiyo:20180601144147j:plain

はてなブログのこの機能は、デザインページにある「記事下に関連記事を表示する」の部分にチェックを入れるだけで、同カテゴリーの記事を自動的に表示してくれるため非常に便利です。

Comfortではこの関連記事を表示した場合、自動的にこのような表示になるよう設定しました。多くの人が関連記事を表示する機能を使っているはずですから、気に入ってもらえると嬉しいです。

フォントを統一

フォントはウェブフォントのgooglefontsを使用しています。そのためIOS端末でもandroid端末でも全く同じフォントを使用可能です。

これは、サイトイメージを統一するといった意味でもメリットなのではないでしょうか。

またフォント自体も可愛すぎず、かといって威張りすぎていないモダンな印象のある字体ですので、多くの方に気に入ってもらえると思います。

もちろんウェブフォントを使いたくないという場合も簡単に外すことができますので、もしそうであれば以下の記事を参考にして下さい。

Comfortを導入したらまずすべきことを順を追って説明する。

まとめ

使ってください(笑)