このテーマの特徴
技術記事の執筆しやすさを追求したシングルカラムのテーマです。
本テーマ導入時は、必ずこちらの記事を読んでください。導入方法、JavaScriptのカスタマイズが書かれています。
https://codefocus.hatenablog.jp/entry/2025/05/17/015533
特徴
記事の読みやすさを最優先に、余計な装飾を省いたデザインで文章に集中できます。
レスポンシブデザインで、モバイル・タブレット・PCすべての画面サイズで最適表示されます。
コードブロックは見やすい配色で、コピー・折り返し機能も提供しておりプログラミングコードを扱う技術ブログに最適です。
JavaScriptカスタマイズで、目次機能（ページ内目次・固定目次ボタン）、コードブロック機能（コピー・折り返し機能を含む）、ダークテーマ機能を追加して長文記事も快適に読めます。
カスタマイズ
デザインCSSを用いたカスタマイズ方法
https://codefocus.hatenablog.jp/entry/2025/05/20/221750
ソースコード
GitHubで公開しています。(MITライセンス)
https://github.com/guitarrapc/hatenablog-theme-codefocus
変更履歴:
- 2025/06/10: v1.5.3 ページャー(次の記事/前の記事)の矢印アイコンが改行されるケースを防止。最初の記事で次の記事が左寄せになるのを修正。
- 2025/06/10: v1.5.2 ページャー(次の記事/前の記事)の矢印アイコンが表示できていなかったのを修正。
- 2025/06/09: v1.5.1 目次の縦青線の軸がズレていたのを修正、フロート目次の表示/非表示のトランジションが機能していないのを修正。
- 2025/05/30: v1.5.0 テーマ導入だけではダークテーマは有効にならないように変更。ダークテーマ向けJavaScriptを追加すると有効になります。
- 2025/05/30: v1.4.2 ul,ol,ddの左パディングをわずかに広げる調整。
- 2025/05/27: v1.4.1 スマホ表示におけるフッターの最新記事のサムネイルとタイトルの配置、コメントのアイコン/名前の配置を調整。
- 2025/05/27: v1.4.0 タグクラウドをJSベースに変更、ダークモードボタン機能を追加、コードブロックの折り返し機能を追加。
- 2025/05/25: v1.3.0 横1200px以上の解像度モニターでは850px表示まで拡大します。
- 2025/05/25: v1.2.0 アーカイブページのサムネイルサイズと配置の調整。
- 2025/05/24: v1.1.0 コンテンツの幅を広げる調整。
- 2025/05/23: v1.0.0 イニシャルリリース。
