当ブログ、あちこちいろいろいじって先日リニューアルしました。
前の会社で働いてた頃からからそうなんですが、私は業務でほとんどコーディングをすることがありません。
なので勉強を兼ねて、「デザイン→コーディング&はてなブログ組み込み」一連の流れを自分でやってみることにしました。
各工程で、意識したこと、気づいたことなどを記事として残しておきます。
デザイン
何をリニューアルしたのか
もともと、自分で作った「Chirari」というはてなブログテーマを使ってました。
はてなさんが提供されてる「boilerplate」というテンプレートをベースにしてます。
最近はMediumやAmebaのOwndがオシャレっぽい気がしてて、見比べると情報が整理されておらず煩雑だなあと感じていました。
また、「この要素、コンテンツは本当に必要なのか？」を再考し、いらないところは削減するように心がけました。
不要なコンテンツをなくすなど情報を整理することが、サイト内を見るユーザーのストレスを軽減すること、構築やメンテナンスのコストを削減することにつながります。
今回はたとえば、「最新記事」と「アーカイブ」をなくしました。カテゴリもごっそり再整理して４つに絞りました。
参考にしたサイト
勝手ながらNxWorldさんを参考にしながらつくりました。
とにかくシンプルですっきりしていること、一覧ページが「ちゃんと一覧できる」ことがすばらしく、とても好きなデザインです。
はてなブログでは指定しなければ、トップページにおいても記事ページのコンテンツをそのまま羅列して表示します。ページが長くなり、トップページなのにあんまり一覧性がないことに違和感を持っていました。
多様なデバイスで見ることを前提に、特にこの一覧性を持たせることについてNxWorldさんを参考にしました。
コーディング
今回もはてなブログテーマを作る時同様に、公式テンプレート「boilerplate」をベースにしました。
「Chirari」の時に比べれば中身をいろいろといじりましたが、はてなで使う最低限の機能へのCSSが記述されてるので、0から調査してつくるよりもずいぶん楽でした。
レベルの低い話ですが、CSSの擬似要素（after）や、transition・transformを初めてちゃんと意識して使いました。
lessは、mozやらwebkitやらいちいち書かなくても良いのがクソ便利。そもそも、入れ子にして書けるのが鬼便利。
lessとかsassとか勉強してないの、結構いろんなロスをしてる気がしてヤバイ。
あと、jpg、gif、pngは使わずSVGやアイコンフォントのみ使いました。
SVGの圧倒的な軽さに改めて驚き。イラレ使えて良かった。
はてなブログでは、デフォルトで読み込んでいるCSSでアイコンフォントが使えるという記事を検索で見つけて、早速活用させていただきました。
はてなブログ実装時の工夫
- タイトルロゴ画像は管理画面から設定するんですが、現状SVG画像をアップロードできないので、CSSでむりやり上書きしました
- 記事を投稿する時、画像に「.mainimage」を指定したらトップページ一覧表示でサムネイル画像っぽく見えるようにしました
イマイチやりきれてないところ
主にスキル不足により、こんなことがうまくできませんでした。
- カテゴリー一覧ページとトップページとで見た目を揃えたかったけど違ってる（掲載内容がそもそも違うので、揃えるCSS指定するのが面倒）
- メインカラムが横幅可変時にカクカクする（自分のwidth、marginの指定がクソ）
- 大きいPC画面で表示させてる「LINK」の項目が、カテゴリ一覧ページで見ると位置がパンくずにかぶってる（管理画面でサイドバーモジュールの中にぶっ込んでるんだけどどうしたら良いかわからん）
- PCで見る時、サイドの一番下に隙間ができてる（ギブアップ）
あとは割と満足していますが、AndroidやWindows実機での確認があんまりできてないので、そのあたり不具合が無いか気になってます。
ブログ名を変更しました
すごくどうでもいい話ですが、はてなブログでブログを開設してから２回目の変更なんです。
1. 69log
「ろくろぐ」です。「ろくぜうどんのブログ」の略です。
しばらくこれにしてましたが、会社の先輩より「同じ名前のブログあるじゃん（汗」とご指摘いただき変更することにしました。
よりによって同業の方でした。アカンわ。
2. 60g
「ろくぜろぐ」です。「ろく」「ぜろ」「ぐ」です。
シンプルでわかりやすいぞと最初は思っていたものの、「読めねえし何なのかわからないしアカンやろこの名前」と最近思い始めました。
検索すると「ケチャップ60gは大さじ小さじ何杯分ですか」という知恵袋がトップに出ますね。アカンわ。
3. LOGzeudon
めでたくリニューアル。「ろぐぜうどん」です。
ろくぜうどんの記録…ログ、ということですね。とってもわかりやすいなあ。
別にブログタイトルで集客してないので、前回の変更でもトラフィックの変化は一切ありませんでした。今回も特に問題ないでしょう。
以上です。
LOGzeudonを、今後ともどうぞよろしくお願いいたします。
