テーマのIngressiveへの刷新とカスタムで追加したCSSについて(＠はてなブログ)

　これまで開設から公式テーマである「Solid」を使用してきましたが、最近、写真中心のブログなのにデフォルトのサイズ(横600px)が小さく、迫力ある写真もトーンダウンしている感じが気になることと、常用しているブラウザ(FireFox PC64bit版)でのサイドバーの挙動が不安定+CSSでの拡張性に乏しいということで、思い切ってテーマを変えてみました。

　せっかくなので写真は大きくということと、タイトル下にメニューバー代わりでデフォルトでカテゴリーのモジュールがつけられるということで、テーマストアからFlexPhotoGraphというテーマに入れ替えてみました。

　が、慣れ親しんできた黒バックに対しては違和感ということと思っていた以上に写真が巨大になって1枚ものだったら良いのですが、10枚位掲載する記事だと逆に煩わしい・・・ということで同じくテーマストアから黒バックのIngressiveというテーマをインストールして、CSS等で以下の追加処置を行ってみました。

①ブラウザ幅1110px以上でメイン画面の横幅が860pxに固定。

従来比で横幅約1.4倍。1110px以下はテーマデフォルトの設定でブラウザ幅によって画像サイズが変わり、また、1カラム化しますので、スマホであれば横長の方が見やすくなるかと思います。

以下のタグをCSS領域に追加。

@media (min-width: 1110px){
#content-inner {
width: 1090px;
margin: 0 auto;
}
#main {
width: 860px;
float: none;
}
#box2 {
width: 230px;
}
}

②写真が大きくなると相対的に文字の大きさがマイクロ文字に見えるのでフォントサイズをアップ。

以下のタグをCSS領域に追加。

.entry-content {
font-size:18px;
}

これで、写真サイズに対して文字が小さくて読みにくくなることはないかと思います。

ただ、スマホからのアクセスの場合は逆に大きく感じるかもしれません。

③今度はサイドバーの文字も相対的に小さくなるのでサイズもアップ

以下のタグをCSS領域に追加

.hatena-module-title {
font-size: 14pt;
}

④行間調整。

文字が大きくなると行間もその分大きくなり、変な隙間が出てきてかえって読みにくくなる可能性があるので、以下のタグをCSS領域に追加。

.entry-content p { margin:0.3em}

margin:0の数字部分が行間を指定する数字になりますが、この数字は様子を見ながら調整するかもしれません。

⑤写真を中央寄せ。

縦長写真だと左寄りになって何だか見栄えがしませんが、いちいちHTMLタグに"center"を入れるのがめんどくさかったのですが、以下のタグをCSS領域に入れて一括中央寄せとしました。

.hatena-fotolife, .http-image {
display: block;
margin: 0px auto;
}

⑥画像の角取り。

写真の角を取って柔らかい印象にするため、こちらから以下をCSS領域に追加。

.entry-content img {
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}

⑦トップページ下のカテゴリー表示

こちらの方の記事からプログラムコードを引用しました。

ただ、現時点は文字の大きさは記事数に関係なく一定+記事数の表示をしておきたかったので、一部改変しています。

(1)カテゴリー毎の記事数に対するサイズ定義(Script内)

var xxxl = 120, xxl = 80, xl = 50, l =30, m = 20, s = 10, xs = 7, xxs = 3;
↓
var xxxl = 1

(2)記事数を表示(Script内)

categories[i].textContent = categories[i].textContent.replace(/\s\(([0-9]{1,})\)/, '');

↓

// categories[i].textContent = categories[i].textContent.replace(/\s\(([0-9]{1,})\)/, '');

(3)各サイズにおけるページの表示定義(CSS内)