WordPressテーマのCSSをSassを使って作成しました。

テーマCSSを作成してから実際に運用していくとどうしても肥大化する部分をどのように抑えるか、運用・更新時のコストをいかに削減できるかを考えてみました。

@import廃止に伴い@useを使う

分割したScssを読み込むために利用されてきた@importですが、遅くとも2022年10月に廃止になることがすでに決定しています。

そのため今回は@importではなく@useを用いた設計を行いました。

@useは主に以下のような特長を持ちます。

• 変数やMixins、関数をメンバーとしてカプセル化し、読み込んだSassのみに適用させます。
• @useで読み込んだファイル名が名前空間になり、その名前空間から各メンバーを参照できます。

つまり@importでよく行っていた、
style.scssで読み込んだ変数ファイル（colorとか余白とか）を各Sassファイルで利用することができなくなります。

// setting
@import "setting/color";

// base
@import "base/base"; // @useの場合baseでcolorの変数にアクセスできなくなる

そのため@useに合わせて設計も考えなければいけません。

CSS設計の基本的な考え方はFLOCSS

以前の私の記事でも紹介しましたが、Hiroki tani氏によって考案された国産のCSS設計思想FLOCSSをベースに構築しました。

FLOCSSを選択した理由として、Foundation・Layout・Objectという3つのレイヤー（階層）と@useを用いたSassの相性が良いと感じたためです。

各レイヤーでは次のような定義しています。

Foundationはグローバルに使いたい変数やMixinsなど

Foundationレイヤーではサイト全体のリセットやデフォルト設定、グローバルで使いたい変数やMixinなどを定義しています。

@useで変数やMixinsをグローバルに使いたい場合、@forwardルールを用いて下記のような一工夫が必要になります。

// _color.scss

$colorPrimary: #f00;
$colorSecondary: #00f;

// _global.scss

@foward 'color';

// _component.scss

@use 'global'

a {
  color: global.colorPrimary; // #f00が適用される
}

color変数を使いたいファイル（上記では_component.scss）で_global.scssをハブとして@useで読み込むと、変数やmixinsを利用することができます。

Layoutは全体のレイアウト設定のみ行う

今回は基本的にシングルカラム、ブログ記事を含むメディアページはサイドバー付きの2カラムのレイアウトデザインのため、その設定をLayoutレイヤーで行いました。

ポイントは、最も外枠である全体レイアウトの記載のみ行いインナーラップの記載はObjectで設定することです。

Layoutレイヤーでインナーラップまで設定してしまうと、どこからがコンポーネントなのかわからなくなるためです。

Objectは再利用できるコンポーネントとページごとの設定を行う

ObjectはComponent・Project・Utilityの3つのレイヤーを持ちますが、ComponentとProjectの区分けが難しい
という話をFLOCSSの紹介記事でもしました。

今回は再利用できるコンポーネントをComponent、コンポーネントを利用した上で独自の設定が必要になるものをProjectという形で区別しました。

コンポーネントの例としてブログ記事カードを見てみます。

トップページとメディアページそれぞれブログ記事へのリンクをカードにしていますが、基本的に使うパーツは一緒です。
read moreや著者など、どちらかでしか使わないパーツもありますが、これらの記事カードのパーツすべてを設定する_columnCard.scssを作成し、スタイルを設定しました。
これがコンポーネントになります。

また、トップページ、メディアページどちらも記事カードコンポーネントを利用していますが、パーツの並び順が異なります。

これらはProjectでそれぞれ設定し調整しています。

FLOCSSにおけるProjectは「プロジェクト固有のパターンであり、いくつかのComponentと、それに該当しない要素によって構成されるものを定義します。」とされていますが、
今回はProjectを「固定ページもしくはテンプレートごとの固有のパターンといくつかのComponentによって構成されるものを定義する」と再定義して設計しました。

WordPressでコーポレートサイトを運用すると固定ページごとに細かく調整することが多々発生し、コンポーネント部分とページごとの設定を行うファイルを明示的に分けた方が運用コストが格段に良くなることが理由です。

そのため、Componentで設定したスタイルはstyle.cssではなく、コンポーネントを利用するProject側で@useルールを用いて呼び出すことを基本としています。

まとめ

このようにレイヤーごとにSassファイルを用意して最終的にstyle.cssに統合する設計にしたため、Sassファイルの数は非常に多く細かくなりました。
しかし、1つ1つのファイルの記述量は少なく、レイヤーとファイル名から記述内容をある程度想像できる形にしているため、更新したい箇所をを見つけるのが楽になり、運用更新のコストは格段に良くなったと思います。

また、この設計を行ったのは2021年2月頃でしたが、少なくともSassの2022年問題（と勝手に名付けてみます）はクリアできていることもポイントかと思います。

なにかの参考になれば幸いです。

最近あまりみかけなくなりましたね～。 凧あげ。
子供の頃に、数回どこか記憶にない大きな原っぱで凧あげした思い出はあります。
年末海に行きました。そこで娘と凧あげしてみました。

まず、めちゃくちゃ寒かったですね。

■ 凧あげ

元々中国で軍事目的や占いの道具として使われていたようです。
それが平安時代に日本に伝わり貴族の遊びとしてたのしまれて、
なんと、戦国時代には敵との距離を測ったりして利用されていたようです。

江戸時代になると一般庶民にも広がり、多くの人に楽しまれるようになりました。
しかし凧揚げをする人が増えるにつれ、事故や、大名行列の中に凧がおちたり、
けが人が出たりした結果、、

明暦元年（1655年）「町中で凧あげをしてはいけない」　

あまりに凧あげする人が増えたんですかね。　禁止令がでたようです。
そこで当時の幕府は「参勤交代の行列が無く、武士も家にいるお正月なら安全だろう」
とお正月の凧あげを許可をした。

そこから　多くの人がお正月に凧をあげるようになったともいわれています。（いろいろな諸説あり）
縁起物ではありそうということで、、みなさんも　何年かぶりに凧あげしましょう！笑

■凧あげ感想

高く上がっていくのは、、きもちぃ~~ですね。

・・・・・ただどんどん高くまであがるにつれて、、、お尻の辺が　ゾワーッとしますね。"(-""-)"

あるあるですかね。自分だけですかね。

なんなんですかね。

高いところから下を覗いたときのゾワーッとｽﾙあの時の感じ☹

同じ感覚です。あれです。　高所恐怖症の人あるあるですかね。　ﾀﾀﾞ自分は高所恐怖症ではｱﾘﾏｾﾝ。(◎_◎;)

なんでですかね、その結果、強気に凧の糸全部使うくらい高くあげることができませんでした。。

いつかは全部糸使ってトライしてみたいと思っています。娘たちは楽しんでいたので良かったです。

みなさんこんにちは。毎回ブログになにを綴ろうか悩むのですが、今回は先日行ってきたディズニーの思い出でも綴ろうかなーと思います。

弊社では、毎日、朝礼を行っています。
その中でテーマトークという1つのテーマについて、みんなで話をするのですが、
ある日のテーマが「好きな鍋」というものがありました。

話をしている中で、「蟻月」を思い出しました。
昔は年に1回は食べていたのですが、もう何年も食べていなかったので、食べようと、決意しました！

「蟻月」とは

都内、札幌、バンコクに店を構える とても人気のある もつ鍋の有名なお店です。
もつ鍋の他にもいろいろな九州料理を堪能できます。

より詳しく知りたい方は、公式ホームページをどうぞ。

お取り寄せでも美味しい

なかなか店舗に行く時間もなく、予約も困難らしいので、うちでは毎回、お取り寄せです。
お取り寄せだと、実際の店舗に比べて味が落ちると思う方もいると思いますが、

両方とも食した知人曰く、全く変わりません！

本当に変わらないかどうかは分からないですが、美味しいのは確かです！

いろいろな種類のもつ鍋があるのですが、
うちではいつも蟻月の看板鍋の「白のもつ鍋」です。

ニンニクの効いた白みそ仕立ての鍋。
数種類ブレンドした白みそにだしを加え、コクがあり味わい深い印象のスープに仕上げました。
ニンニクとごま油の香りが食欲をそそります。新鮮なもつ（小腸）の甘みと九州の白みそのまろやかな甘みが女性にも人気です。
締めのおススメはちゃんぽん麺、麺に濃厚なスープが絡みつき、もちもちした食感が味わえます。

蟻月 公式ホームページ

文字だけでも美味しそうです！

その他にも、赤のもつ鍋、銀のもつ鍋、金のもつ鍋、炎のもつ鍋があるようです。
こちらもいつか食べてみたいです。

お取り寄せは、

• 公式ホームページ
• 楽天市場
• amazonn

からできます。

作ってみた

こちらがお取り寄せした「白のもつ鍋です」
何となく高級感があるように見えます。

中身は、こちらです。

スープ、もつ、おろしにんにく、ごま油、いりごま、たかのつめ、締めのちゃんぽん麺が入っています。
このちゃんぽん麺もとても美味しいです！

これらと一緒に以下の具材を入れて、煮込んで完成です！

• 200mlのお湯
• キャベツ
• ごぼう
• ニラ
• 絹ごし豆腐

ニンニクがとても効いていて、もつもプルプリで美味しかったです！

美味しい もつをおうちで味わいたい方は、ぜひ、お取り寄せしてみてください！

こんにちは、窪田です。

最近、「良い文章ってどのようなものだろう」と考えることがありました。

なんとなく文字の色や大きさを変えるとか、改行を入れるとか、見せ方をわかりやすくしたほうが良いことは理解できますが、言葉の使い方だったり、言い回しについてはどうするべきなのだろうと思っていました。

個人的に、言葉のプロといえば糸井重里さんが真っ先に思い浮かぶので、糸井重里さんが運営している「ほぼ日刊イトイ新聞」というサイトのエッセイのような文章を少し読んでみました。

読んでみて、まず感じたことは、ひらがなが非常に多いということです。

「本当」が「ほんと」になっていたり、「僕」が「ぼく」になっていたり、「普通」が「ふつう」になっていたり。

漢字で書かれていてもおかしくない言葉を、ひらがな表記にすることで文章全体の雰囲気が優しくなっていると感じました。

ちなみに、コピーライティングの分野では、漢字をひらがなにすることを専門用語で"ひらく"なんて言ったりするそうです。

次に感じたことは、優しい言い回しを頻繁に使っているということです。

「～だが、～けど」という書き方ではなく「～けれど」と書かれていたり、「おもしろかったな、おもしろかった」という表現を「おもしろかったなぁ、おもしろかったぁ」と書いている部分がありました。

このような書き方をすることで、硬い印象ではなく柔らかい印象を感じますし、「～なぁ」という表現で余韻が残るというか、しみじみとした趣のある文章になっていると感じました。

糸井重里さんの文章を読んでみて、言葉の使い方だけでも文章から与える印象をコントロールできることを再認識しました。

今回読んだのはエッセイのような文章だったので、このブログで糸井重里っぽさを意識しすぎるのは少し違う気もしますが、参考になる部分もあるのかなと思いました。

今後は読み手にどのような印象を与えたいか、というところまで意識してブログを書いていきたいです。

糸井重里さんといえば、ガキ使のバス釣りを思い出してしまうのは僕だけじゃないはず。