たきぶろぐ

「大人」になりたくない人の雑記

はてなブログテーマ「ひので」をリリースしました。

前回のはてなブログテーマ「こもれび差し込む森の木の葉」リリースから早1年。2つ目のテーマ「ひので」を作成、リリースしました。

はてなブログテーマ「ひので」

はてなブログテーマ「ひので」

今回作成したはてなブログテーマ「ひので」はタイトルの通り、日の出の時刻に深い青色の空が地平線から昇る太陽によって赤みがかっていく、朝焼けをイメージしたグラデーションを背景に纏ったデザインになっています。

「日本」という名のもととなった日の出。日本らしく上品で美しいデザインを目指しました。

特長

1.実際の日の出の写真から抽出したグラデーション

背景のグラデーションは今年の元日に天覧山で見た、初日の出を撮影した写真から抽出したものをCSSのグラデーションに落とし込んだものです。背景を画像ではなくCSSとすることによって、サイトの読み込み速度の向上などが期待できます。

グラデーションのもととなった写真

グラデーションのもととなった写真

2.記事に集中できる1カラムレイアウト

前回のはてなブログテーマ「こもれび差し込む森の木の葉」同様、サイドバーなどを記事下に配置することによって、読者が記事に集中することができます。そのため、1つ1つの記事を集中して読んでほしい、という方にオススメのテーマです。

尚、僕は有料会員ではないのでアドセンス広告などを置いていませんが、もしかしたらアドセンス広告を設置している人はサイドバーが記事下にある分、収益に影響が出るかもです。あらかじめご承知おきを。

3.上品でやわらかいフォント「しっぽり明朝」を使用

上品でやわらかいフォント「しっぽり明朝」

上品でやわらかいフォント「しっぽり明朝」

フォントは全てGoogle Fontsより、商用利用可のしっぽり明朝フォントを使用しています。冷たい夜空にあたたかい太陽が昇ってくる様、日本の上品で美しい様をイメージして、明朝体を採用しています。そのなかでも丸みがあって、あたたかみ・やわらかみのあるしっぽり明朝を採用しています。

行間や文字間を広めにとることで一文字一文字はっきりと見やすく、読みやすくなる工夫をしています。

4.レスポンシブ対応

スマートフォンでみる「ひので」

スマートフォンでみる「ひので」

この時代ですから、当たり前のようにレスポンシブ対応です。今の時代PCで見る人の方が少数派ですからね。スマホ、タブレット、PCどの端末から見ても普通に見れるはずです。

なお、Galaxy Foldとかの折り畳みスマホに関しては、どう表示されるかは知ったこっちゃない。あれってタブレットサイズで表示されるのか、スマホサイズとして表示されるのか全く以て分からないので対応できません。

5.Minify CSSでサイトの高速化にも対応

サイトの読み込み速度もまあまあ早い

サイトの読み込み速度もまあまあ早い

CSSに知識のある方は分かると思いますが、CSSを圧縮して軽量化しています。なので、サイトの読み込み速度などもまあまあ早くなっています。他のテーマはどうなのかについてはこちらの記事を見てみてください。

サイトの読み込み速度は、道路と同じで混雑していたり、使ってるデバイスの性能によっても変わってくるので、あくまでも参考程度にしておくとよいかも。ただ、CSSファイル自体は14KBとかなり軽くなっています。この「たきぶろぐ」のテーマは19KBなので。

6.アクセントとして地平線から昇る太陽をイメージした円弧

地平線から昇る太陽をイメージした円弧

地平線から昇る太陽をイメージした円弧

記事タイトル下や、サイドバーのタイトル下にはオレンジ色の円弧を描いています。地平線から昇る日をイメージした円弧になっていて、この円弧のオレンジ色も初日の出の写真から抽出した色を使用しています。

7.隠し要素もあるよ

実はこのテーマ、隠し要素的なものもあります。と言ってもすぐに見つかるとは思いますが。ぜひ探してみてください。見つけた時「え、これが隠し要素?」ってなると思います。ヒントは「日は地平線から昇る」

8.対応環境について

対応環境ですが、Windows Chrome、Android Chrome、Windows Edge、Windows Edge IEモード(後述)、Android Brave、Android Yahooにて動作確認を行いましたが、いずれも支障なく閲覧ができます。

ただ、Windows EdgeのIEモードでは背景のグラデーションがスクロール時にガタつきます。が、IEは切り捨てます。あと半年もしないうちにサポートも終了しますので、わざわざ対応させる必要がない。

あと、僕は生粋のAndroidユーザーなので、Safariでの動作確認はしたくてもできません。ご承知おきを。


以上、はてなブログテーマ「ひので」の紹介でした。勿論無料で使えるので、気になった方はぜひプレビューしてインストールしてみてください。

「ひので」サンプルサイトはこちら

「ひので」インストールはこちら