サイトのデザイン変えました

Posted on Jan 19, 2019

このサイト、ブログを始めてからずっとデザインを変えたかったので、この度変えてみました。

このサイトは当初、iTunes ストア用にプライバシーポリシーを公開する為に作ったのです。が、昨年末から思いつきでこのブログを始めてから、色々しっくりこなかったため、ずっと変えたいと思っていました。

脱 Bootstrap

別の Hugo のテーマに切り替えても良かったのですが、今回は「Bootstrap を使わずにウェブサイト作れるか」っていうテーマで作ることに。Bootstrap 代替としては、Semantic UI ってのが有名っぽいんですが、使うの大変そうだったので、今回は簡単に導入できる Bulma という CSS フレームワークを採用してみました。

Bulma

Bulma はオープンソースの CSS フレームワークです。CSS のお化けです。なおかつ Javascript フリーです。

学習コストはかなり低いです。導入も Font Awesome みたいに一行 HTML に追加するだけで OK。あとは、用意された class を指定してするだけ。

例えば、トップページのカードの表示。画面のサイズに応じてサイズが変わるようにする場合、下記のように記述します。Bootstrap よりも直感的です。

<div class="column is-full-mobile is-half-tablet is-one-third-desktop">
   some code
</div>

そのほかにも、Tag のフォーマットが用意されていたり、Progress Bar が用意されていたり、色々楽です。

次は英語対応

ということで、Bulma を使ってスクラッチからウェブサイトを作り直してみました。かかった時間は、学習時間も含めて半日といったところかな。今後は、Hugo の設定いじって英語対応やろうと思います。

では。