ブログデザインをカスタマイズしました

数年ぶりにブログのデザインを変えてみました。といっても大したことはしていなくて、配布されているテンプレートに少し手を加えた程度です。

ずっとレスポンシブではなかったのですが、こちらもこの度対応してみました。

元にさせていただいたテンプレートはこちらです。

Written - テーマ ストア

そもそも、なぜブログのデザインを変えたか

• そろそろレスポンシブ対応をさせたかった
• 前のデザイン（公式テーマ：レトロポップ）はアイコンなどは可愛らしかったが横幅が狭く、デザイン的にも少々古さがあった
• テーマストアで見つけたテンプレートのデザインがすっきりしていてカスタマイズしやすそうだったので、少し手をかけてもいいかなという気になった

デザインの要件

• シンプルであること
• 多少は他と違いのあるデザインであること
• レスポンシブであること
• ブログなので文章の読みやすさを損なわないこと

カスタマイズしたこと

背景画像（PCだけ）

www.pakutaso.com

こちらの画像を、最近ときどき綺麗めなサイトで見かけるような感じでガウスぼかしなどの加工をした後、背景画像へ全面配置しました。

Webフォント導入

Google Fonts + 日本語 早期アクセス • Google Fonts + Japanese Early Access

こちらを利用してさわらびゴシックを設定してみました。これで雰囲気が結構変わった気がします。

見出しやリンク色の変更

元々がシンプルなテーマなので、これだけでもかなり変わります。

タイトル領域の縮小（スマホのみ）

ファーストビューでちょっと幅を取り過ぎかなと思ったのでブログタイトルなどの領域を小さくしました。

ブログのデザイン変更のまとめ

はてなブログのデザイン変更は設定方法にも結構癖があってあまりいじりやすいとは言えないですが、それでもシンプルなテーマを元にすれば比較的やりやすいです。

当面はこのデザインで行くと思います。

掃除で運が良くなる訳ではないけど、気分は変わるよ

年末に向けて掃除と片付けをしました。といっても本の整理までは手が回らなかったので、これは年明けに着手しようかなあという感じです。

一昨日くらいにぶらぶらと本屋を眺めていたら、掃除や断捨離をすると運が良くなるという感じの本を見かけました。シンプルライフで安定した頃から逆にそういった書籍は見なくなってきたため、目に入ること自体久しぶりです。

ぱらぱらっと中を見てみると掃除や断捨離をしたら色々良いことが起こったとかそういう感じの本でして、しかし残念ながら私はいくら掃除しても、物を捨てても、とんと良いことが起こった試しがないのでした。

しかし掃除や断捨離をすると確実に気分は『アガる』ことは否定しません。周りの環境を変えたいと考えたとき、たぶん一番すぐにできて変化がわかることだからだと思います。

それに、物がとっちらかっていて締め切りっぱなしの収拾がつかない部屋で身を縮めるようにして食事をするより、きちんと空気を入れ替えて整えた部屋で食事をする方が、精神衛生上もよろしいでしょう。

ホコリや汚れが溜まれば体調もイマイチになるし、物を探して歩くのは単純にストレスです。

掃除・断捨離は結局『身の回りを整えて秩序を取り戻そう』というだけのことで、まあ、言ってしまえば当たり前のことを述べているに過ぎません。運が良くなるは誇大広告にしても気分が切り替わる効果は確実にあると思います。

……ということをクリスマスの本日せっせと掃除をしつつ考えていたのですが、年末の大掃除というのは結構理にかなってるんだなあと。

あれこれ頭にある勘案事項についてもいくらか気持ちがすっきりしたし、年末と言わず月ごとのルーチンに入れてもいいかも知れません、大掃除。

Adobe Blank（Webフォント）を使った画像置換 New Kellum method

初めてレスポンシブ案件のコーディングをすることになりました。

メディアクエリで背景画像を入れ替えたりする都合上、避けて通れないのが画像置換。なにかいいやり方がないかなと、調べていたらおそらく日本語ではまだ紹介されていないNew Kellum methodという方法を発見したのでご紹介します。

画像置換とは

サンプル

画像ですよ！

このように、タグの中に入っているテキストを隠しつつ、背景画像を表示させる方法です。

コードはこんな風になっています。

■html
<p>画像ですよ！</p>

■CSS
p {
width: 113px;
height: 38px;
background: url('置き換えたい画像のURL') no-repeat;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}

Scott Kellum Methodという方法で、-9999などで画面の外にテキストを飛ばしてしまうより軽いとのことです*1。

今のところこれがメジャーなのかな、と思いきや、New Kellum methodというものがありました。

New Kellum method

サンプル

画像ですよ！

■html
<p>画像ですよ！</p>

■CSS
@font-face {
font-family: "AdobeBlank";
font-weight: 100;
font-style: normal;
src: local('AdobeBlank.otf'),
url("AdobeBlank.eot") format('eot'),
url("AdobeBlank.ttf.woff") format('woff');
}

p {
background: url('置き換えたい画像のURL') no-repeat;
font-family: AdobeBlank;
}

※サンプルはgoogleドライブにfontファイルを入れてWebフォントとしています。

乏しい英語力を総動員した結果わかったのですが、Adobeがオープンソースで出している目に見えず、空白にもならないフォントを利用して画像置換を行う方法のようです。

米Adobe、見えないフォント「Adobe Blank」をオープンソースで公開 | OSDN Magazine

本来の想定としては、重たいWebフォントを読み込むまでの間、標準のフォントが表示されないようにしたりするものだそうです。サンプル通り日本語でも使える様子。特に高さや幅を指定しなくてもぺちゃんこになって置換している背景画像が見えなくなるということはないのかも。サンプルは画像が小さいだけかも知れないですが……。

ざっと調べてみましたが、この方法、日本語で紹介しているところは見当たりませんでした。日本語のWebフォントは重たくて難しいですから、発案当初（2013年くらい？）はみんなピンとこなかったのかも知れないですね。

こんな方法があるんだ、と感心しました。

Webフォントとしてはアイコンフォントなどはかなり使われるようになってきたし、画像置換の方法としてはそろそろ実用を考えてもいいものなのかも知れません。

参照：The new Kellum method

*1:ただ、現在では通信速度や端末性能の向上により、それ程差はない場合も。また、改行するテキストには使えなかった。2行目のテキストが消えない。