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

LOGzeudon

名古屋で働いているWebデザイナーのブログです

このブログ(はてなブログ)をリニューアルするときに意識したこと

f:id:rokuzeudon:20151211041508j:plain

当ブログ、あちこちいろいろいじって先日リニューアルしました。

前の会社で働いてた頃からからそうなんですが、私は業務でほとんどコーディングをすることがありません。
なので勉強を兼ねて、「デザイン→コーディング&はてなブログ組み込み」一連の流れを自分でやってみることにしました。
各工程で、意識したこと、気づいたことなどを記事として残しておきます。

デザイン

何をリニューアルしたのか

もともと、自分で作った「Chirari」というはてなブログテーマを使ってました。
はてなさんが提供されてる「boilerplate」というテンプレートをベースにしてます。

最近はMediumAmebaのOwndがオシャレっぽい気がしてて、見比べると情報が整理されておらず煩雑だなあと感じていました。

また、「この要素、コンテンツは本当に必要なのか?」を再考し、いらないところは削減するように心がけました。
不要なコンテンツをなくすなど情報を整理することが、サイト内を見るユーザーのストレスを軽減すること、構築やメンテナンスのコストを削減することにつながります。

今回はたとえば、「最新記事」と「アーカイブ」をなくしました。カテゴリもごっそり再整理して4つに絞りました。

参考にしたサイト

勝手ながらNxWorldさんを参考にしながらつくりました。

www.nxworld.net

とにかくシンプルですっきりしていること、一覧ページが「ちゃんと一覧できる」ことがすばらしく、とても好きなデザインです。

はてなブログでは指定しなければ、トップページにおいても記事ページのコンテンツをそのまま羅列して表示します。ページが長くなり、トップページなのにあんまり一覧性がないことに違和感を持っていました。

多様なデバイスで見ることを前提に、特にこの一覧性を持たせることについてNxWorldさんを参考にしました。

コーディング

今回もはてなブログテーマを作る時同様に、公式テンプレート「boilerplate」をベースにしました。
「Chirari」の時に比べれば中身をいろいろといじりましたが、はてなで使う最低限の機能へのCSSが記述されてるので、0から調査してつくるよりもずいぶん楽でした。

レベルの低い話ですが、CSSの擬似要素(after)や、transition・transformを初めてちゃんと意識して使いました。
lessは、mozやらwebkitやらいちいち書かなくても良いのがクソ便利。そもそも、入れ子にして書けるのが鬼便利。
lessとかsassとか勉強してないの、結構いろんなロスをしてる気がしてヤバイ。

outofmem.hatenablog.com

あと、jpg、gif、pngは使わずSVGアイコンフォントのみ使いました。
SVGの圧倒的な軽さに改めて驚き。イラレ使えて良かった。

はてなブログでは、デフォルトで読み込んでいるCSSでアイコンフォントが使えるという記事を検索で見つけて、早速活用させていただきました。

wedges.hatenablog.com

はてなブログ実装時の工夫

  • タイトルロゴ画像は管理画面から設定するんですが、現状SVG画像をアップロードできないので、CSSでむりやり上書きしました
  • 記事を投稿する時、画像に「.mainimage」を指定したらトップページ一覧表示でサムネイル画像っぽく見えるようにしました

イマイチやりきれてないところ

主にスキル不足により、こんなことがうまくできませんでした。

  • カテゴリー一覧ページとトップページとで見た目を揃えたかったけど違ってる(掲載内容がそもそも違うので、揃えるCSS指定するのが面倒)
  • メインカラムが横幅可変時にカクカクする(自分のwidth、marginの指定がクソ)
  • 大きいPC画面で表示させてる「LINK」の項目が、カテゴリ一覧ページで見ると位置がパンくずにかぶってる(管理画面でサイドバーモジュールの中にぶっ込んでるんだけどどうしたら良いかわからん)
  • PCで見る時、サイドの一番下に隙間ができてる(ギブアップ)

あとは割と満足していますが、AndroidやWindows実機での確認があんまりできてないので、そのあたり不具合が無いか気になってます。

ブログ名を変更しました

すごくどうでもいい話ですが、はてなブログでブログを開設してから2回目の変更なんです。

1. 69log

f:id:rokuzeudon:20151211042602j:plain

「ろくろぐ」です。「ろくぜうどんのブログ」の略です。
しばらくこれにしてましたが、会社の先輩より「同じ名前のブログあるじゃん(汗」とご指摘いただき変更することにしました。

よりによって同業の方でした。アカンわ。

2. 60g

f:id:rokuzeudon:20151211042615j:plain

「ろくぜろぐ」です。「ろく」「ぜろ」「ぐ」です。
シンプルでわかりやすいぞと最初は思っていたものの、「読めねえし何なのかわからないしアカンやろこの名前」と最近思い始めました。

検索すると「ケチャップ60gは大さじ小さじ何杯分ですか」という知恵袋がトップに出ますね。アカンわ。

3. LOGzeudon

f:id:rokuzeudon:20151211042701j:plain

めでたくリニューアル。「ろぜうどん」です。
ろくぜうどんの記録…ログ、ということですね。とってもわかりやすいなあ。

別にブログタイトルで集客してないので、前回の変更でもトラフィックの変化は一切ありませんでした。今回も特に問題ないでしょう。

以上です。
LOGzeudonを、今後ともどうぞよろしくお願いいたします。

関連記事

blog.rokuzeudon.com

blog.rokuzeudon.com