しばたテックブログ

気分で書いている技術ブログです。

本ブログのカスタマイズメモ

以前から書こうと思いつつもなかなか手が動かなかったネタです。

本ブログのデザインははてなブログのテーマストアにあるテーマをベースに幾つかのカスタマイズを加えています。
自分が加えたカスタマイズの備忘録と参考にしたサイトの紹介を兼ねてこのエントリを残しておきます。

メインテーマ

f:id:stknohg:20181016193053p:plain

ブログのメインとなるテーマはCONTENTSを使用しています。

シンプルな2カラムでレスポンシブ対応していたのが採用した理由です。

このテーマをベースにしてアクセントカラーをWindows PowerShellで使われているNoble Blue(#012456)に変更しています。
また、タブレット(iPad)を横向きにしたときでも1カラムになる様にデザインが切り替わる横幅を変更しています。

コードブロック

f:id:stknohg:20181016193113p:plain

コードブロックの配色はQiitaを参考にしています。

純粋にこの配色が気に入ったのと、利用者の多いQiitaと近い色合いである方がユーザーフレンドリーかな?*1と思ったのが採用の理由です。
(余談ですがVisual Studio CodeにQiita theme for VSCodeを適用して普段使いするくらい気に入っています)

とはいえQiitaとはてなブログでは色指定可能な要素が異なるため、まったく同一というわけではなく、よく見ると結構違いがあります。

言語名の表示

susisu.hatenablog.com

上記ブログの内容を参考にしてコードブロックに言語名を出しています。
本ブログでは左上に出す様にしています。

「一年以上経過しています」のお知らせ

sprint-life.hatenablog.com

上記ブログの内容を参考にして1年以上前のエントリに警告が出る様にしています。

f:id:stknohg:20181016193129p:plain

タグクラウド

blog.shibayan.jp

しばやん先生のブログを参考にサイドバーのカテゴリをタグクラウドにしています。

f:id:stknohg:20181016193139p:plain

最後に

ざっとこんな感じです。
いずれブログのデザインを変えるかもしれませんが、いまのところはこんな感じでやっています。

正直HTML周りは全然ダメなのですが先人たちの知恵のおかげで気に入ったデザインを実現できており感謝の気持ちでいっぱいです。

*1:そうでもないか?