現在、3つのサイトを運用しているのですが、やっと最後のサイトを完全オリジナルテーマに変更しました。
01サイト「＠半径とことこ60分」公開
はてなブログから WordPress に移行したのがちょうど2年前です。実は WordPress は Ver.1.5 時代にしばらく使っていたことがあるのですが、さすがに20年近く前の話ですので、いきなりオリジナルテーマというのも無謀と思い、当初は、ちょうど Genesis Framework がオープンソース化したときでしたので、その子テーマで3つのサイトを移行しました。
で、1年ほどあれこれやっているうち WordPress の基本構造もおおよそわかってきましたので、そろそろオリジナルテーマにかかるとかいうことで昨年の6月頃にひとつ目のサイトをオリジナルテーマに変更、その後10月頃に当サイトも変更し、そしてやっと昨日最後のサイトもオリジナルテーマに変更完了となりました。
02FLOCSSとは…
その際、CSS に FLOCSS というものを導入しました。
私もつい最近知ったのですが、CSS の設計思想に FLOCSS というものがあります。何でもそうですが、ものごとに行き当りばったりでかかりますと必ず行き詰まります。たとえば、CSS の class や ID なんて、どうネーミングしていいのか、その都度思いつきでやっていますとバッティングしたり、過去のネーミングを忘れてしまったりと結構悩ましい問題です。
そこで CSS の保守性を高めて再利用を可能にするためのプロジェクトがいくつかあり、そのひとつが FLOCSS というもので、
FLOCSS（フロックス） は、OOCSSやSMACSS、BEM、SuitCSSのコンセプトを取り入れた、モジュラーなアプローチのためのCSS構成案です。MCSSのレイヤー構成にも大きな影響を受けています。
（FLOCSS）
という CSS の設計思想です。詳しくはググればたくさんヒットしますが、当サイト内の記事は次にあります。
で、取り掛かったものの、便利なものにはそれなりに大変なこともあります。
03WordPress と FLOCSS
FLOCSS の基本は、パーシャルファイルを次の3つのレイヤーと Objectレイヤーの子レイヤーに構成して管理することです。
- Foundation
- Layout
- Object
- Component
- Project
- Utility
ただ、これを実際にやってみますと何をどこに入れるかは結構難しく、とにかく試行錯誤でやっていくしかありません。
そしてもうひとつ、この FLOCSS には各要素にどんなクラス名をつけるかの命名規則というものがあります。Block、Element、Modifier の頭文字をとって BEM と言います。
このネーミングも結構迷います。でもまあ、結局のところ個人サイトであれば自分が理解できれば、また再利用を意識してやっていけばいいことですので、臆せず突き進めばいいかと思います（笑）。
WordPress の場合は、というよりも自作以外のテーマを使う場合ということですが、その場合は、class 名を自由に変えられません（多分…）ので、自作テーマ以外では無理かとは思います。
また、自作テーマであっても、ブロックエディタで記事を書いていれば（クラシックエディタについてはわからない…）本文内の各ブロックにいちいち FLOCSS にもとづいた class を指定していくのは非現実的ですので、本文全体を class="l-main__articleBody" などでくくり、内部のタグはネストで指定することになります。
それ以外についてはメニューやカテゴリー一覧なども自作できますので80％から90％程度は FLOCSS で CSS を書くことができます。
ということで、今回構築した FLOCSS を他の2つのサイト、当サイトと「そんなには褒めないよ。映画評」にも再利用することになります。やってもやってもやることは増えるという、これが人生というものでしょう（笑）。
