blogを建ててみた

blogを建ててみた html5 css3 gh-pages

いままで情報を発信する場として、確かなものが周りになかったので新年に向けて新しくブログを作成しました。 よろしくお願いします。

今回はサイトのホスティングとして、Github pagesを用いることにしました。Github pagesでブログを制作する方法に関しては、 こちらとかで確認して下さい。

ブログのスタイリングのために、今回はBootstrapをベースに構成しました。BootstrapはOOCSSを謳っているものの、 オブジェクト指向特有のごちゃごちゃしたプロパティ名が好みではなかったので利用を控えていました。 ではなぜBootstrapを選んだかというと、単純にスタイルテンプレートがBootstrap向けだったためです。

サイトデザインを模索しているときに出会ったとても気に入ったテーマがありました。PixelKitで公開されているModern Touchというものです。 最近の流行であるフラットデザインをシンプルな配色で実装し、中途半端さが無く、とても清潔感あふれている点に惹かれました。 しかしここで気になったのがデザインの配布形式です。

過去から現在にかけてWeb UIデザインは各所で提案され公開されてきていますが、公開形式として大半を占めているのがPSD形式のものです。 HTML5やCSS3が主要となりつつある現代WebデザインにおいてはUIに多くの画像を用いることはあまり好まれません。 汎用性が高いという理由でしょうが、Web UIやUIデザインが提供されている形式はPSD形式ばかりです。 そんなサイトがたくさんある中、少数派であるHTML5とCSS3を用いてサイトデザインを提供公開しているサイトにもれず、PixelkitもHTML5/CSS3でデザインを提供していたのです。

このサイトにあるデザインはすべてが無料で提供されているわけではありません。公開されているデザインをすべて利用するには年間Subscriptionが必要です。 しかし、今回使用したテーマのModern touchを始め、いくつかのデザインはGitHubにて公開されています。ライセンスはCC BY 3.0MITです。

「せっかくよいデザインを見つけたのだから使いたい」と思ったので使うことにしました。 サイトデザインのために、好みでなかったTwitter Bootstrapを利用しはじめ、Octopressのテーマをいじっていきました。 時々出力されたサイトのソースをみるとこんなかんじになっていました。

blog html sourcecode
blogのソースコード

OOCSSの影響でclassが溢れて可読性が下がると思っていましたが、この程度の組み方であればあまり影響はないようです。

GitHub pagesとOctopressによってブログを書き始めました。というお話でした。 まだまだ未熟者ですが今後とも宜しくお願いします。

このエントリーをはてなブックマークに追加
mzyy94
mzyy94
Sun
Mon
Tue
Wed
Thu
Fri
Sat