ブログ開始から1年経過のご報告(とついでにデザインを変更した話)
1年が経ちました。
実は去る12/04ではてなブログに移転してから1年が経過しておりました。なんだかんだで1年間無事に更新できたのはひとえに読者の皆様のおかげでございます。
ブログを再出発した当初はデザインや機能を拡張出来ないのがネックなのでWordpressに移行することも視野に入れていたのですが、とりあえず今後もはてなブログで続けていこうと思って2年分の契約延長をしておきました。何気にはてなProの更新タイミングがわからず朝起きたら停止したりとかのトラブルがあったのはここだけの話です。
そうだ、デザインを変更しよう。
さて、今までブログを更新していて気になっていたことの一つにデザインがあります。公式テーマのEpicに手を入れて使っていたのですが自分のデザインセンスが行方不明になってしまったのでこれを機に新しくテーマを導入しなおすことにしました。
今回注目したテーマはBlankです。このテーマもEpicやReport同様スッキリしていて見やすいのですが、日付欄や編集ボタンが画面を逼迫しないのでこちらに決定。ただ、画面内の情報量がイマイチ少ない気がするのでカスタマイズすることにします。
当サイトは読者の目に優しいサイトを目指しております(多分)。
画面解像度を決める。
デザイン変更してレイアウトが崩れるのも嫌なので読者の画面解像度に合わせよう、ということではてなカウンターの"画面"を参考にしました。スマホは専用のデザインがあるので考えなくて良いですね。
- 1920x1080
- 1366x768
- 1280x1024
ということで概ね1280px以上あれば良いようです。
CSSの変更内容を検証する。
文書構造が良く判ってないのでどこを編集したらいいのかわかりません!ということでChromeの検証ツールを使って確認していきます。変更したい箇所を右クリックして「検証」を押すとその場所が表示されるので便利。
カスタムCSSの設定。
上記を踏まえて以下の二つの設定を追加。ちなみにサイドバーも弄ったりしてみたのですがイマイチしっくり来なかったので戻しました。
div #blog-title-inner,#content-inner { max-width:1280px; } div #main{ padding-right:20px; }
びふぉーあふたー。
Before:
After:
テーマ変更前の画像はちょっと見当たらなかったです。どうでしょうか。幅を広くしただけですが、情報量が増えたのがわかると思います。
今後はヘッダにバナー画像を差し込んだりしていきたいところです。やる気があれば……うん……。
読者様ご紹介。
最後となりますが、当ブログを購読していただいている方々のサイトをご紹介させて頂くことで謝辞にかえさせていただきます。
付き合いの悪い管理人ではありますが、いつもありがとうございます。