振袖女子
Pocket

ちょうどブログを始めて1年ほど。

改修改修でコード継ぎ足してきたブログを心機一転し、

デザインリニューアルしました。

作り直した理由

作り直した理由はいろいろ

  • Web制作はじめたての頃に作ったブログで、コード継ぎ足しで更新してきてなかなかカオスな状況
  • 飽き性
  • 入れたいUIとかデザインが複数あって、リニューアルした方が早そう
  • 使ってみたいCSSフレームワークがある
  • ブログの更新をちょっと楽にしたい(テキストエディタで書いてた)
  • サムネの画像サイズは決まったサイズじゃないとだめだった

などなど。

とにかくイケてなかった。

具体的にやったこと

上記の理由からやったことを紹介

Bourbon / Neatでコーディング

これは使ってみたいCSSフレームワークについてです。

CSSフレームワークというと、「Bootstrap」や「Foundation」が有名だと思います。

 

今回は「Bourbon / Neat」を使ってみました。

 

Bourbon / NeatはフレームワークというかSassのMixin集です。

が、そのMixinを使ってグリッドレイアウトとかが簡単にできます。

 

BootstrapやFoundationでいやだったとこ

BootstrapやFoundationはタグやclass名がフレームワークに縛られてしまいます。

Foundationだったら「large-3」とか「small-9」とか。

その結果タグにclassがずらーっと並んだり。

 

フレームワーク使うと、CSSのこと考えたマークアップしないとダメなんですよね。

何かそれって違くない??

 

あと、読み込むコード量が多い。

必要分だけ読み込めばいいですが、何もしないとかなりのコード量になってしまう。。。

 

そこでBourbon / Neat

Bourbon / Neatは先ほども説明したとおりSassのMixin集。

Bourbon

Neat

 

Bourbonは軽量Mixin集。いろいろ用意されてます。

NeatはレイアウトのMixin集。

 

Sassのincludeでレイアウトするので、既存のタグやclassに記述することができます。

フレームワークが指定するclass名使う必要なし!

 

Bourbonが元となるMixin集は他にもBittersやRefillsがあります。

詳しくは以下の記事が参考になりそう。

 

CSSフレームワークBourbon超速入門

 

もっと勉強して、このブログでも記事にできるようにします。

更新を楽にしたい

一年間ブログ続けてきて思ったんですが、記事書くのってけっこうめんどいんですよね。

で、何でめんどいんだろうと考えた結果、自分の場合

  • 決まったサイズのサムネイルを用意しないとダメ。比率が合わないとトリミングしたり。。
  • テキストエディタでいちいちタグ囲むのが超ダルい

って感じかなと思いました。

 

前のブログを無計画に作ったばかりにこうなってしまった。。。

どんなサイズのサムネイルでもOKなように

サムネイル画像を用意すること自体は苦じゃないです。

自分で撮った写真はたくさんあるし、素材サイトもたくさんある。

 

でも画像サイズ(比率)がちゃんとしてないとズレちゃうので、比率をいちいち確認して必要あればリサイズやトリミングするのがめんどうだった。。。

 

そこでどんな画像がきても、画像の中央を軸に上下左右がトリミングされるようにCSSを書きました。

参考にした記事はこれ

【CSS】画像の上下中央配置とか画像配置に関するいろいろ

って自分で書いたやつやん…(茶番)

 

ビジュアルエディタを使う

先ほども書いたようにタグで囲むの超めんどい。

それもあってマークダウンでかける静的サイトジェネレーターも検討しました。

(それは別でやる予定)

 

ですが、WordBenchでビジュアルエディタ進化してるよって話を聞いたのを思い出して、ビジュアルエディタで書けるようにしました。

 

前のブログがホントイケてなくて、タグにclassをつけないとデザインが反映されないようにしてました。

なので、いちいちタグで囲まないといけない仕様に。。。

 

今回の変更でそれをやめて、タグに直接スタイルをあてて、ビジュアルエディタでサクサク書けるように変更しました。

技術系の記事に関してはやっぱりテキストエディタで書く必要もある気がしますが、雑記やカメラ記事はビジュアルエディタで書けるかな。

 

文字入力だけだから楽!ビジュアルエディタ最高!

 

流行りや入れたい動きを取り入れる

ミーハーなので、流行りのものが好きです。

フラットデザインに飛びつき、マテリアルデザインに飛びつき。

ふらふらしてます。

 

カードレイアウト

記事一覧はカードレイアウトにしました。

よく見かけるデザインですね。

 

見やすいしいいじゃん

 

メインビジュアルのパララックス

これちょっとハマってるやつ

記事のサムネイルを横100%でどんと表示して、スクロールするとスクロール量とはちょっとズレてスクロールする。

 

見てて何か気持ちいい。

 

基本的にJSやCSSでグリグリ動かすの好きですが、Webサイトでうっとおしいほど動かすのは嫌いです。

これぐらいのさりげない動きは好きです。

 

Headroom.js

これけっこう好きなUIを実装してくれるプラグインです。

ヘッダーを上下のスクロール方向に合わせて出し入れしてくれます。

 

試しにこのブログをスクロールで上下してみてください。

 

そういうことです。

 

要は下にスクロールしてる時はコンテンツを見てると判断し不要なものは隠す、

上にスクロールした時は戻って何かを探そうとしてるから出すみたいなこと。

 

ってよく考えたら、ヘッダーに何も情報がない(笑)

 

まあ入れたいから入れた、ということです。

 

Headroomの使い方はこちら

【jQuery】ヘッダーを上下のスクロールに合わせて表示・非表示させるプラグイン-Headroom.jsの使い方-

 

さいごに

正直、まだまだ直したいとこはあります。

 

来年はこのブログを題材に、もっとWordPressやアクセシビリティとかJavaScriptの勉強できたらいいなと思って最低限やった感じです。

勉強したことをどんどんブログに取り入れられるように、あまりごちゃごちゃ作り込みませんでした、あえてね。

 

ってことで、来年もいろいろ勉強させてもらいます。

教えてね!

 

静的サイトジェネレーターを使いたいってのも言ってたけど、これはこれで運用して別で「Hugo」というものを使ってみたいと考えております。

Pocket