STANDALONE NETWORKS

ゲームプログラマーが独立起業してみるブログ

はてなブログのテーマ「Simple Gray」を少しだけカスタム

Web は本業じゃない、えのきです。


ブログを立ち上げてから暫く、ブログのデザインテーマをあーでもないこーでもないと色々試してたのですが、いま使わせてもらっているテーマ「Simple Gray」がとても気に入りました。作者さんに感謝!

Simple Gray - テーマ ストア - はてなブログ


テーマ選びの自分的要件は、以下のような感じでした。

  • 白背景のシンプルな見た目であること
  • スマホタブレットで見やすいこと
  • PC で見るときは横にサイドバーが出ること

いくつかのテーマが候補になったのですが、どのテーマも少ーしだけ、意図したのとは違う感じの挙動をします。

仕方がないので、最も好みだった「Simple Gray」を頑張ってカスタムする事にしました。

カスタムその 1 : 「レスポンシブデザイン」に対応する

スマホでイイ感じに表示するために、レスポンシブデザインへの対応が必要になります。

テーマ作者さんによるこちらの記事を参考にして対応しました。

hacolife.hatenablog.com

実は最初、テーマ側が対応してさえいれば「レスポンシブデザイン」にチェックを入れるだけでイイ感じになると思い込んでました。

f:id:oppyen:20160120031421p:plain

なので Simple Gray をスマホで表示して文字が小さーく表示された時、「お、惜しい! くそう、超好みなのに!」と諦めかけてたんです。

でもどうしても後ろ髪ひかれたんで調べ直してみたら、作者さんの解説を見つけた、と。いやー、悪あがきして良かった(笑)

カスタムその 2 : 「はてなキーワード」が目立たないようにする

デフォルトではキーワードがきちんとしたリンク的な表示になってるのを、平文と同じ表示にして目立たなくしました。

f:id:oppyen:20160120034423p:plain

上記レスポンシブデザインへの対応と同じ要領で、デザイン 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 タグの掃除とかに辟易してたので、今後使っていくかもしれません。


以上、無職のくせに本業じゃないとか(笑)と少し思った、えのきでした。