ブログの見た目をいじった

しばらくの間510というテーマを使っていて、これはこれでシンプルでよいテーマだったのですが、主にMacのChromeで見たときなのか、regularとboldの区別がわりとつかない感じで全体的に太めのウェイトだったのが気になったのもあって気分転換も兼ねてNakedにしてみました。テーマストアのリンクに飛ぶとわかると思いますが、導入するにあたって色味をだいぶ弄っています。

カスタマイズを検討する場合の注意点として、テーマストアではライセンスが設定してある*1のでまずそれをよく確認すること。改変禁止のライセンスになっているテーマでもカスタマイズガイドがあったりとかして、どこからを「改変」とするかで結構悩んでしまった*2ので今回はおとなしくCC-BYのライセンスになっているものをチョイス。憧れのようなものはありますが、1から組めと言われても大変ですしモノ作ってる人間の端くれとして作者さんの権利は尊重したいですもの。

テーマ選びの過程で見かけたアイボリー系統の配色の本っぽさが目に優しそうでよいなーと思ったので、配色を全体的にベージュというかアイボリーというかそっち方面に倒しました。意外とリンクカラーの水色がアクセントになっていて満更でもない様子。

追加しているデザインCSSはこんな感じ。自分でCSS書けるならだいぶ好きに弄れるのでよいです。

img.emoji {
  height: 1.2em !important;
  margin: 1px;
  vertical-align: text-bottom;
}

#globalheader-container {
  color:#666;
}

body {
  background-size: auto;
}

#title a, #blog-description {
  color: #222;
}

#content {
  background-color: #f5f1ec;
}

.entry-content h3 {
  background-color: #f6f4f2;
}

.entry-content h4 {
  border-bottom: 10px solid #f6f4f2;
}

article.entry, .page-archive .archive-entry, .urllist-item{
  background-color: #fffcf8;
}

a.keyword {
  border-bottom: dotted 1px #aaa;
}

img.emojiは絵文字の表示をカスタマイズしているのですが、その部分の詳細はこちらからどうぞ。この時以降のアップデートとしてvertical-alignの設定を追加しました。おすすめ。 blog.innotamago.com

*1:私が見た限りはクリエイティブコモンズで

*2:おそらくガイド記載箇所以外に手を入れると「改変」とみなすと判断しました