blogを建ててみた

blogを建ててみた

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

今回はサイトのホスティングとして、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によってブログを書き始めました。というお話でした。 まだまだ未熟者ですが今後とも宜しくお願いします。

Related Posts

Team TomoriNaoのサイトの秘密

Team TomoriNaoのサイトの秘密

こちらは 友利奈緒 Advent Calendar 2016 - Adventar 17日目の記事です。...

read more
はいふりWeb VRつくろうよ!

はいふりWeb VRつくろうよ!

これは はいふり Advent Calendar 2016 - Adventar の24日目の記事です。こんにちは、艦長の岬です。 締め切りを伸ばしに伸ばした冬コミの各種原稿に押されてしまい、アド...

read more

Streaming Conference #2 -TELETEXT-

こんにちは、Fennecエバンジェリストです。 最近暇で暇でしょうがないので何かアウトプットしようと、先日 Streaming Conference #2 にてLTをしてきました。 表題は**# TE...

read more
2016年のまんがタイムきららアニメを振り返る

2016年のまんがタイムきららアニメを振り返る

まんがタイムきらら Advent Calendar 2016 - Adventar 5日目の記事にようこそ! 今日は2016年のまんがタイムきらら作品を振り返ってみよう!...

read more