このブログを始めてから一年近くたったので、ここらでリニューアルをと思い色々いじりました。
CONTENTS
変更したところ
Pjax（非同期画面遷移）対応に
jQueryとBarba.jsでpjax対応サイトを制作する【demo有り】でも使用したBarba.jsを使ってもよかったのですがせっかくなので他のを使おうと思い、今回はpjaxのfalsandtru版プラグインを使って実装してます。
基本的な部分はdefunkt版でも十分実装可能でしたが、アドセンスがうまく機能しなかったので結果的にfalsandtru版になりました。
シンタックスハイライターを変更
今までWordPressのプラグイン「Crayon Syntax Highlighter」を使っていたのですが今回のリニューアルで同じくプラグインの「Prism For WP」に変更しました。
「Crayon Syntax Highlighter」の見た目が好きではないという個人的な理由での変更です。
Prismはテンプレートファイルからjsやcssを読み込む方法もありますが、プラグインの方が使い勝手がいいですね。
ディレクトリの変更
重い腰をあげてポートフォリオを作ろうと考えています。
なので記事系は全て/blog/内に格納するなどディレクトリの変更を行いました。
タスクランナーの使用
少し前まではCSSのフレームワーク「Compass」を使用してたんですが、ここ最近ではGulp（ガルプ）を使って管理をしてます。
scssのコンパイルやベンダープレフィックスの付与などを自動化してます。
その他もろもろ
レイアウトやエフェクトの変更も行いました。
細かいところでいうとシェアボタンの内容を変更したりもしてます。
変更しようとしたけどうまくいかなかったところ
Lazy Loadの実装
せっかくなので読み込み速度を向上させようと思いLazy Loadを実装しようとしたんですが、エフェクトとの相性が悪く逆に体感速度が悪くなったので実装を見送りました。
スクロール エフェクトの実装
パララックス的なエフェクトを仕込んだのですがFirefoxで読み込み速度がと著しく遅くなる事象が発生し、解決に至らず今回は見送りました。
IEだけの不具合であれば切り捨てるつもりだったんですが、Firefoxでうまく動かないのは辛いです。。。
Grid Layoutの採用
レイアウトを組むために今更Floatは使いたく無かったのでGrid Layoutを試してみました。
確かに楽なんですがIE / Edgeの対応が面倒。。サクッとレイアウトを組むために、色々と手がかかっては本末転倒。
なので今回はFlexboxで基本レイアウトを組んでいます。
さいごに
このブログは実際の案件ではまだ使えないかもといった事柄を試す実験場でもありますので、粗いところもありますがご容赦くださいませ。
修正が必要な箇所もいくつかあるので徐々に対応していきます。
暖かく見守っていただけると幸いです。
