はてなブログテーマ Sentence

【レスポンシブWebデザイン対応】文章の読みやすさを重視したシンプルなはてなブログテーマです

レスポンシブ対応のシンプルなはてなブログテーマ Sentence

はてなブログテーマ Sentence

Sentenceのページをご覧いただきありがとうございます! 制作者のしめひつです。

Sentenceは文章の読みやすさを重視したはてなブログテーマです。文字や余白、見出しの表現方法にこだわりました。

全体的なデザインは公式で配布しているテーマ Boilerplateをベースにしてシンプルにまとめました。そのまま使っていただくのはもちろん、自由にカスタマイズして使ってみてください。

横幅336pxの広告を横に2つ並べられる

メインカラムの横幅は680pxに設定しています。

これは横幅336pxのレクタングル広告を横に2つ並べられる、いわゆるダブルレクタングルが可能な仕様です。

広告を設置してブログアフィリエイトをする人も少なくありませんし、アフィリエイト目的でブログを始めるという人もいるでしょう。

そんな中で広告もデザインの一要素になりつつあると考えます。いかに綺麗に広告を表示するかというのは、ブログ運営の課題ではないでしょうか。

sentence.hatenablog.jp

広告の設置について、このようなカスタマイズを提案します。

このカスタマイズはSentenceを使っていない人でも役立つのではないかと思います。

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

パソコンの大きい画面からスマホの小さい画面まで、綺麗に見やすく表示するレスポンシブWebデザインです。パソコンでもウィンドウの横幅に合わせてリアルタイムに表示が変化します。

ベースにしたテーマ Boilerplateはパソコン表示でのデザインから記述され、それからタブレットとスマホ表示のデザインが記述されていました。

パソコンよりもスマホでインターネットをする人の方が多い時代です。Sentenceではスマホ表示のデザインを最初に、その後にタブレット、最後にパソコン表示という順番でCSSを記述しました。

いわゆるモバイルファーストの考え方です。記述の順番をスマホを最初にしたからと言って大きな影響はありませんが、そうした理念がこのSentenceにはあるというわけです。

ダッシュボードのデザイン→スマートフォン→詳細設定からレスポンシブデザインにチェックを入れて使用してください。

読みやすい文字と余白

メインカラムは余白を大きめにとっており、文字サイズは17pxを基準にしています。

またタイトルや見出しの文字サイズについては、スマホでは改行しないように小さめに、パソコンでは目立つように大きく表示するようにレスポンシブ対応しています。

本文は真っ黒よりも少しグレーに近い#333を指定して可読性を高めています。

大見出し(H2)

はてなブログでは大見出しをH3で記述する慣例がありますが、Sentenceを使う場合はH2で記述することを推奨しています。

記事の編集では、はてな記法だと大見出しはH3タグからになってしまいますのでMarkdown記法がおすすめです。

大見出し(H2タグ)は左に縦のボーダー、グレーの網掛けを施し、高速にスクロールしても位置がわかるようにしています。

中見出し(H3)

中見出し(H3)は下にグレーの太ボーダーを施しています。

大見出しほど目立ち過ぎず、且つ存在感が残るようにしています。

小見出し(H4)

小見出し(H4タグ)では緑のチェックマークを施しています。

小見出し(H5)

H5タグ(H5タグ)は装飾無しです。

H3タグから始まっていても見出しのレベルに違和感がないように作っていますが、H2始まりのデザインを適用させたい場合は記事をひとつずつ修正するしかありません。

sentence.hatenablog.jp

そこでデザインCSSにコピペするだけでH2→H3、H3→H4、H4→H5にできるようにカスタマイズを用意しました。ある程度記事数があって修正が追いつかないという方はこれを使ってください。

ナビゲーションメニュー

ナビゲーションメニューはユーザビリティのみならずSEO的にも重要です。

sentence.hatenablog.jp

多くの人がナビゲーションメニューのコードを配布されていますが、Sentence向けにも用意しました。

パソコンではすべてのメニューが表示され、タブレットやスマホではスクリプトで展開するタイプのメニューです。

SNS関連のボタン

sentence.hatenablog.jp

sentence.hatenablog.jp

はてなブログでもSNSのシェアボタンとフォローボタンが各種用意されていますが、読み込みに時間がかかりますので独自で用意するのもおすすめです。参考にしてみてください。

モバイルフレンドリー&読み込み速度も速い

モバイルフレンドリーテストとモバイルでの読み込み速度評価も良い結果が出ています。

テーマの本体となるCSSも圧縮したコードを使っており、それが良い影響を与えているのだと思います。

ここまで紹介したカスタマイズについても圧縮すると読み込み速度の向上に貢献するかと思います。以下のリンクからどうぞ。

Refresh-SF - Online JavaScript and CSS Compressor

サンプルエントリー

より詳しいデザインについてはサンプルエントリーを参考にしてみてください。

sentence.hatenablog.jp