読者です 読者をやめる 読者になる 読者になる

HYLOGICS

今後は各分室にコンテンツを移して、ここは雑記や暮らしを中心としたライフログ的な何かにしていく予定です。

ブログ開始から1年経過のご報告(とついでにデザインを変更した話)

ブログ

1年が経ちました。

実は去る12/04ではてなブログに移転してから1年が経過しておりました。なんだかんだで1年間無事に更新できたのはひとえに読者の皆様のおかげでございます。

ブログを再出発した当初はデザインや機能を拡張出来ないのがネックなのでWordpressに移行することも視野に入れていたのですが、とりあえず今後もはてなブログで続けていこうと思って2年分の契約延長をしておきました。何気にはてなProの更新タイミングがわからず朝起きたら停止したりとかのトラブルがあったのはここだけの話です。

そうだ、デザインを変更しよう。

さて、今までブログを更新していて気になっていたことの一つにデザインがあります。公式テーマのEpicに手を入れて使っていたのですが自分のデザインセンスが行方不明になってしまったのでこれを機に新しくテーマを導入しなおすことにしました。

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

今回注目したテーマはBlankです。このテーマもEpicやReport同様スッキリしていて見やすいのですが、日付欄や編集ボタンが画面を逼迫しないのでこちらに決定。ただ、画面内の情報量がイマイチ少ない気がするのでカスタマイズすることにします。

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

当サイトは読者の目に優しいサイトを目指しております(多分)。

画面解像度を決める。

デザイン変更してレイアウトが崩れるのも嫌なので読者の画面解像度に合わせよう、ということではてなカウンターの"画面"を参考にしました。スマホは専用のデザインがあるので考えなくて良いですね。

f:id:kirine:20151227165924p:plain

スマホタブレットを除外すると、

  • 1920x1080
  • 1366x768
  • 1280x1024

ということで概ね1280px以上あれば良いようです。

CSSの変更内容を検証する。

f:id:kirine:20151227171159p:plain

文書構造が良く判ってないのでどこを編集したらいいのかわかりません!ということでChromeの検証ツールを使って確認していきます。変更したい箇所を右クリックして「検証」を押すとその場所が表示されるので便利。

カスタムCSSの設定。

上記を踏まえて以下の二つの設定を追加。ちなみにサイドバーも弄ったりしてみたのですがイマイチしっくり来なかったので戻しました。

div #blog-title-inner,#content-inner {
    max-width:1280px;
}

div #main{
    padding-right:20px;
}

びふぉーあふたー。

Before: f:id:kirine:20151227165313p:plain

After: f:id:kirine:20151227165325p:plain

テーマ変更前の画像はちょっと見当たらなかったです。どうでしょうか。幅を広くしただけですが、情報量が増えたのがわかると思います。

今後はヘッダにバナー画像を差し込んだりしていきたいところです。やる気があれば……うん……。

読者様ご紹介。

最後となりますが、当ブログを購読していただいている方々のサイトをご紹介させて頂くことで謝辞にかえさせていただきます。

付き合いの悪い管理人ではありますが、いつもありがとうございます。

www.kiyoichi-t.com

www.sapporo-seo.info

www.hesocha.com

www.yukatoyama.com

yeoman.hatenablog.com

leberate0124.hatenablog.jp

lelift.hatenablog.com

www.siruhanote.jp

bihaku222.hatenablog.com

iphone-news.hatenablog.jp

www.sugatareiji.com

salty.hatenablog.com

neojin.hatenablog.com

shinobu.hatenablog.jp

the-rings-of-saturn.hatenablog.com

anachem.hateblo.jp

utakata.hatenablog.jp

kadath.hatenablog.com

jyajyayome.hatenablog.com

honeysuckle.hatenablog.jp

potatostudio.hatenablog.com

www.kamomer.com

yoshimamo.hatenablog.com

popoon.hatenablog.com

www.continue-is-power.com

hitode99.hatenablog.com

nawaharu.hatenablog.com

www.fair-skinned-monster.com