先日はてなブログにもようやく固定ページを作る機能が実装され、WordPressのような自由度へと一歩近づきました。前々からWordPressあたりでポートフォリオをWEB上にもまとめておくか、と思っていたのですがちょうどいい機会なので今回はてなブログの固定ページでポートフォリオを作ってみました。
先に感想を言っておくとCSS設定が煩わしく、見せ方にこだわりがある人はWordPressで作った方がトータルでの作業量は少ないかと思います。とりあえず、どう作ったかについて備忘録がてら残しておきます。
どう作ったか
サイドバーにもバナー置いてますが今回完成したページがこちらになります。
画像を一覧表示しているのですが、こちらはただ配置するのではなくjQueryプラグインのflexImagesとLazy Loadを使用しています。flexImagesを利用することでレスポンシブ対応しつつきれいに一覧表示ができ、またそのままでは画像表示時にレイアウトが一瞬崩れるのでLazy Loadで滑らかに画像表示するようにしています。
もちろん、はてなブログでjQueryプラグインを使うには自分でサーバーを用意してそこに.jsファイルを置いて読み込む必要がありますので自前でサーバーを用意できる人ができることですね。
(私は以前WordPressでポートフォリオを作ろうと思ってサーバーを借りたのですがそのまま放置してあり、今回はそれを使いました。)
個別ページはそれぞれペラの画像を配置しているだけなので記事を書くのと同じで、そこまで難しくはありません。
苦労したことと注意点
固定ページを利用してポートフォリオを作る上で一番苦労したこと及び注意点として、各ページごとにCSSを設定しなければいけないことでした。
固定ページに特有のデザインを施したい場合は、デザイン設定の「デザインCSS」で、ページごとのbodyに付与される次のクラスを使ってスタイルを記述できます。XXXX部分は、ページのURLになります。
static-page-XXXX
固定ページ作成時の注意点に記載されているように各ページのbodyにはstatic-page-XXXXクラスが付与され(例えばhttp://www.life-is-bitter.com/portfolioならstatic-page-portfolio)、これを使ってスタイルを書いていきますが、.entry-titleとかをいちいちこれで指定して書き直さなければいけなかった(計10ページ分...!!)ので、それにかなり時間を取られました。
固定ページだけ外部CSSを呼び出すとかできるのかな...? できそうな気もするのだけれど...!!
最後に
ポートフォリオに載せている作品はほんの一部となっています。
クライアントワークでConfidencialなものはWEB上に載せられなかったりするので、もし制作を私に依頼したい！でももっと実績を見たい！という方はこちらから問い合わせていただけると幸いです。
もっとクライアントワークをガンガン載せていきたいな〜。