takeokunn.xyzのblog themeを作った

clean-themeがイマイチだなぁと常々思い続けてたのだが、2020年5月くらいにふとやってみるかということで3日くらいで自作したので書き残しておく。

書くのをサボって3ヶ月経ってしまったのでうろ覚え。


はじめに

OctoberCMSのthemeを弄るのは clean-themeを改造する でも仕事でもやったことがあったので慣れていた。

今回の要件は以下だ。

  • dirty hackをしなくても軽量で動くようにする
  • javascriptに殆ど頼らないでcssのみでやる
  • 無駄な画面を設けず最小限にする
  • 読み込むライブラリを最小限にする
  • htmlのみでrenderingしても読み易いようにする

「javascriptに殆ど頼らないでcssのみでやる」 について、syntax highlightはさすがに必要なのでそこだけ許容することにした。

「htmlのみでrenderingしても読み易いようにする」について、emacsのewwも時々使うので読めるようにするのは必須だよなぁと思い、DOMを綺麗に書くようにした。

デザインについて

参考にしたサイト

自分が読み易いなーと思うサイトを要素分解してcssに落とし込んでみた。

分解した要素は以下:

  • font(size|family)
  • color
  • grid-layout
  • icon/image size

自分みたいなセンスのない男は、既存の優秀なデザイナーが作った格好良いデザインのcssをdeveloper toolで死ぬ程読んでパクるのが正解だと思う。

airbnbとmediumのデザインが死ぬ程好きなのでデザインのベースにした。

あとは技術ブログなのでdev.toに載っている情報を参考にデザインを脳内で作成した。

自分はデザインツールは全く使えなく、脳内の情報をcssで一発で落とせるのでぱぱっとコードをかいた。

実装について

docker

OctoberCMSを使ってるので管理画面で編集しても良いのだが、流石にきついのでdocker化をした。

管理画面で使用するthemeを指定する必要はありつつ、docker-compose up で全てが整うようにした。

version: '2'
services:
  web:
    image: "dragontek/octobercms"
    ports:
      - "8080:80"
    volumes:
      - ./:/var/www/html/themes/take-theme
  mysql:
    image: "mariadb"
    environment:
     - MYSQL_ROOT_PASSWORD=example
  memcached:
    image: "memcached"

css

cssのlibraryはbulma.cssを選んだ。cssのみで書かれていて、簡潔に記述でき、bootstrapよりみ使い易い(個人の感想)。ブルマ...いいよね。

css4でcustom propertyが入ったのでcolorで使ってみた。

:root {
    --font-color: rgb(32, 32, 32);
    --twitter-color: rgb(29, 161, 242);
    --github-color: rgb(48, 48, 48);
    --rss-color: rgb(238, 128, 47);
    --green: rgb(0, 132, 137);
    --red: rgb(255, 90, 95);
}

font-sizerem を使うのが好きなので採用した。mobile viewの時は75%で表示するようにした。

@media screen and (max-width: 768px) {
    html {
        font-size: 75%;
    }
}

cssの命名について、bemやflocssは命名が汚く嫌いなので使わず、componentごとにidを振りselectorをうまく使いstyleを定義した。例は以下。

#post > a {
    font-size: 2rem;
    font-weight: bold;
    color: var(--font-color);
}

#post > ul {
    display: flex;
    margin-bottom: .5rem;
}

#post > ul > li:first-of-type {
    margin-right: 10px;
}

#post > ul > li svg {
    position: relative;
    top: 1px;
}

#post > ul > li span {
    font-size: 1rem;
}

#post > ul > li span a {
    color: var(--green);
    text-decoration: underline;
}

#post > ul > li.share .icon {
    font-size: 1.3rem;
}

#post > p {
    font-size: 1.4rem;
}

syntax highlight

syntax highlightがないとコードは読みにくいので技術ブログには必須だと思う。

一番人気のhighlight.js を使ってみたが、Lispをうまく解釈できないのか正しく描画してくれなかったので却下した。

その代わりに、prism.jsを使ったら記述量少なくサクっと導入できたのでよかった。

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/components/prism-core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/autoloader/prism-autoloader.min.js"></script>

おわりに

特に最適化せずに2020/9/9時点Google PageInsightではmobile/desktop共に95点以上とれているので割と満足している。

lighthouseのscoreが悪いので改善していきたい。

css4の機能をもっとうまく使えたらなぁとか、mediumみたいに読了予想時間も設定できたら良いなとか、検索機能実装したいとか改善すべきものは結構ある。

css書いてるときが一番幸せを感じる。