はてなブログのテーマ「Simple Gray」を少しだけカスタム
Web は本業じゃない、えのきです。
ブログを立ち上げてから暫く、ブログのデザインテーマをあーでもないこーでもないと色々試してたのですが、いま使わせてもらっているテーマ「Simple Gray」がとても気に入りました。作者さんに感謝!
Simple Gray - テーマ ストア - はてなブログ
テーマ選びの自分的要件は、以下のような感じでした。
いくつかのテーマが候補になったのですが、どのテーマも少ーしだけ、意図したのとは違う感じの挙動をします。
仕方がないので、最も好みだった「Simple Gray」を頑張ってカスタムする事にしました。
カスタムその 1 : 「レスポンシブデザイン」に対応する
スマホでイイ感じに表示するために、レスポンシブデザインへの対応が必要になります。
テーマ作者さんによるこちらの記事を参考にして対応しました。
実は最初、テーマ側が対応してさえいれば「レスポンシブデザイン」にチェックを入れるだけでイイ感じになると思い込んでました。
なので Simple Gray をスマホで表示して文字が小さーく表示された時、「お、惜しい! くそう、超好みなのに!」と諦めかけてたんです。
でもどうしても後ろ髪ひかれたんで調べ直してみたら、作者さんの解説を見つけた、と。いやー、悪あがきして良かった(笑)
カスタムその 2 : 「はてなキーワード」が目立たないようにする
デフォルトではキーワードがきちんとしたリンク的な表示になってるのを、平文と同じ表示にして目立たなくしました。
上記レスポンシブデザインへの対応と同じ要領で、デザイン CSS に以下の記述を追加。
.keyword { color: #333; text-decoration: none; }
はてなキーワードは嫌いじゃないんですけど‥ なんか変な区切りで反応しちゃったりするのが気になったので。
カスタムその 3 : 「関連記事」の表示を最新記事などと同じにする
サイドバーのモジュール「関連記事」の表示だけ「最新記事」「注目記事」と同じになってなかったので、同じになるようにしました。
デザイン CSS に以下の記述を追加。
.related-entries.hatena-urllist>li,.hatena-module-links .hatena-urllist>li,.hatena-urllist .archive-module-year .archive-module-month,.archive-module-year-title,.related-comments.hatena-urllist>li,.comment>li,.entries-access-ranking-item,.circle-urllist li{ border-bottom:1px dotted #ccc; } .related-entries.hatena-urllist>li:first-child,.hatena-module-links .hatena-urllist>li:first-child,.hatena-urllist .archive-module-year:first-child,.related-comments.hatena-urllist>li:first-child,.comment>li:first-child,.entries-access-ranking-item:first-child,.circle-urllist li:first-child{ border-top:1px dotted #ccc; } .related-entries-item-inner,.entries-access-ranking-item-inner,.related-comments.hatena-urllist>li{ padding:.7em; } [id="footer"] a,[id="site-title"] a,.entry-title a,.categories a,#recentEntry>li>a,.hatena-module-title a,.related-entries.hatena-urllist>li a,.circle-urllist>li>a,.hatena-module-links .hatena-urllist>li a,.hatena-urllist .archive-module-year a,.entries-access-ranking-item-inner a,.hatena-module-category .hatena-urllist li a{ color:#333; text-decoration:none; } .entry-title a:hover,.pager a:hover,.hatena-module-title a:hover,.archive-module-hide-button,.archive-module-show-button,.related-entries.hatena-urllist>li a:hover,.entries-access-ranking-item-inner a:hover{ color:#78b4d8; }
作者さんの CSS からコピペしてリネームしただけです。なので作者さんが元のデザインを変えたり、はてなブログの仕様が変わったりしたら、表示が変になるかもしれないのでご留意ください。
こんなもんだったかな? 他にもあれば追記するかも。
あとは 2 カラムと 1 カラムが切り替わる横幅をもう少しだけ狭くしてみたいけど、これはやり方が解りません。今のでも不満というわけではないので、これはもういいかな。やりだしたら細かいトコまで気になる性質なので、程々のところで撤退しないと泥沼です。その時間を本業(もしくは記事を充実させる時間)に割くべき。
今回 CSS コードを載せるにあたり初めて「はてな記法」を使いましたが、記事内容に集中するには良さそうですね。ちょっと慣れが要りそうですけど。「見たままモード」でいつの間にか追加されるわけの分からない HTML タグの掃除とかに辟易してたので、今後使っていくかもしれません。
以上、無職のくせに本業じゃないとか(笑)と少し思った、えのきでした。