デジタル庁がデザインシステムβ版*1を公開したのを見つけ、デザインシステムとcssの学習がてらはてなブログのデザインテーマを作成してみました。

テーマ名は2column-simple-cyan
シアン■をテーマ色にした2カラムのシンプルなテーマです。

blog.hatena.ne.jp

デモサイト

stone-hiro-theme-dev.hatenablog.com

また、このブログのテーマとしても採用しています。

テーマのコンセプト

下記をコンセプトにしてテーマを作成しています。

• テキストを中心としたブログでの使用を想定
• 誰でも読みやすい
• レスポンシブ対応
• ダークテーマ対応

テーマの特徴

テーマの特徴は下記のとおりです。

• PCなどの横幅の広いデバイスは2カラム、スマホなど横幅の狭いデバイスは1カラム表示
• デジタル庁デザインシステム*2を参考にデザイン
  • 完全に準拠しているわけではありません
• 日本語フォントにユニバーサルデザインであるBIZ UDPGothicを採用
  • ブラウザで利用できる場合に限ります
• OSやブラウザのテーマに応じてライトテーマとダークテーマに切り替え

テーマに関する不具合、ご要望について

• テーマに不具合、もしくはご要望がある場合にはこの記事にコメント、もしくはGoogleフォームからご連絡をお願いします。
• ご要望については必ずしも対応できるわけではないことをご了承ください。

その他

• cssコードについてはgithubで後ほど公開予定です。（時期未定）

今回は以上になります。ここまで見ていただきありがとうございました。

更新履歴

• 2024/06/09：記事公開
• 2024/06/13 : ダークテーマに対応したので追記