おきがるみがる

お気軽&身軽にスナップ写真を楽しむ雑記ブログです。はてなブログテーマ Sentenceの配布も行っております。

シンプルで文章が読みやすいレスポンシブ対応のはてなブログテーマ【Sentence】

はてなブログテーマ Sentence

はてなブログでこんなデザインのテーマを探していませんか?

  • 飽きがこないシンプルなデザイン
  • 文章が読みやすい
  • レスポンシブWebデザイン対応
  • 336x280pxの広告を横に並べるダブルレクタングルが可能な横幅
  • CSSのサイズが小さくページの読み込みが速い

これらを全部叶えるためにテーマを作ってみました。その名もSentenceです。

Sentence - テーマ ストア

Sentenceとは「文章」です。かなり生意気なテーマ名ですが、その名が表すように「文章が読みやすいデザイン」をコンセプトにして作りました。

この記事ではSentenceの特徴とこだわりを紹介したいと思います。

Sentenceの特徴

サンプルテーマ「Bolierplate」がベース

help.hatenablog.com

Sentenceは公式の「はてなブログテーマ制作の手引き」で配布されているサンプルテーマ「Bolierplate」をベースに作っています。

Bolierplateのシンプルなデザインを継承しつつ、より文章が読みやすくなるようにアレンジを加えました。

文章を読みやすくする工夫

文章が横に長くなりすぎないように、文字サイズは少し大きめ17pxにしました。1行あたり全角40文字前後が収まるようになっています。

そして文章に集中しやすくなるように、メインカラムの両サイドに60pxの余白を設けました。

文字色は真っ黒よりもほぼ黒の方が、目がチカチカしなくて読みやすいです。本文は#333に設定しています。

一方で見出し は、文字色は真っ黒の#000、背景色や罫線、Webアイコンを使って目に留まりやすく、且つ浮きすぎないデザインを意識しました。

また、見出しとセットで使いたい目次についても見やすくデザインしております。

大見出しはH2タグを使用

はてなブログでは記事タイトルがH1タグで、大見出しにH3タグ、中見出しにH4タグ、小見出しにH5タグを使うことを推奨しています。

でも本来はH1タグの次にH3タグがくるような記述は許されておらず、H1タグの次はH2タグを使うべしというお決まり事があるそうです。

ただルールとしてはあるものの、SEO的にはそれほど重要視しなくてもいいとのことなのでお好みですね。編集モードでMarkdown派はH2から、はてな記法派はH3から始める方が記述が容易なのでそれで選んでいいと思います。

モバイルファーストのレスポンシブWebデザイン

モバイルフレンドリーテスト

モバイル フレンドリー テストツール - Search Console ヘルプ

モバイル画面にも対応したレスポンシブWebデザインを採用しています。モバイルフレンドリーテストも合格のお墨付きです。

CSSはモバイル画面での表示を基準にしたモバイルファーストです。ブラウザの横幅が768〜1023pxでタブレット用に、1024px以上からPC用の表示に切り替わります。

フルードデザイン(リキッドデザイン)を採用しているので、ウィンドウサイズに比例してリアルタイムで横幅が変化します。

いたずらに横長になっては記事の本文が読みにくいので680pxよりも大きくならないように最大値を設定しています。

ダブルレクタングル対応の横幅

SentenceはGoogle AdSenseをはじめとする広告を設置することを前提にしたテーマです。

広告の収益アップと見栄えのバランスを考慮すると、

  • 記事下に
  • 336x280pxのレクタングル(大)広告を
  • 横に2個並べる

というダブルレクタングルが1番だと思っています。

ちょうど広告がジャストで収まるようにメインカラムの横幅は680pxまで広がるように設定しています。

一方でサイドバーはアンバランスにならないように横幅300pxに設定しています。

スマホではダブルレクタングルを解除するCSSも用意

www.okigaru-migaru.net

Google Adsenseでは、画面いっぱいに広告が表示される状態にすることを禁止しています。

スマホ画面でのダブルレクタングルはこの現象を引き起こしてしまいますのでアウトです。

そこでスマホ表示の時は、ダブルレクタングルのうち広告1つを非表示にするCSSも用意しております。

Sentenceをお使いの方はもちろん、そうでない方もご自由に使ってください。

圧縮済みのCSSで読み込みを高速化

速度テスト

PageSpeed Insights

SentenceのCSSはなるべく短いコードで記述し、さらにCSSの圧縮を行っております。

読み込み速度を上げることはアクセスアップの上でも非常に重要です。速度テストでもCSSの圧縮はクリアしております。

ナビゲーションメニューとSNSシェア&フォローボタン

www.okigaru-migaru.net

ナビゲーションメニューとSNSシェアボタン、フォローボタンはSentenceのデザインに最適化されたものを用意しております。

これらの機能は使う人とそうでない人もいらっしゃるでしょうから、テーマにパッケージせずオプションという形で用意しております。

ちなみにこれらのオプションは僕の完全オリジナルではなく、先人の方たちが作ったコードをSentenceに合うようにアレンジしたものになります。

Sentenceはテーマストアで無料配布中

Sentenceはテーマストアにて配布しております。当然無料です。

このブログ自体がデモサイトですので、他のページも見ながらどんなデザインなのかを確認してみてください。

もし気に入られたならばテーマをインストールして使ってみてください。そしてよければ宣伝してやってくださいw

Sentence - テーマ ストア

デザインの改変や流用やご自由に

Creative Commons — 表示 2.1 日本 — CC BY 2.1 JP

Sentenceはクリエイティブ・コモンズです。つまりデザイン改変などの二次利用を許可しております。

どんどん自分色にアレンジして使いやすいようにしていってください。

www.okigaru-migaru.net

さらにBolierplateからSentenceを作成する時のCSS差分を公開しております。

盗作されて上等ぐらいのスタンスです。僕がこのテーマを作ったことによって、新たな価値が生まれるのであればどんな形でも貢献したいと思っております。

ではでは、Sentenceおよび当ブログ『おきがるみがる』を今後ともよろしくお願いします^^