
この記事にはプロモーションが含まれています
技術系の記事ですが、せっかくなので記録として残しておきます
こんにちは 😀
いつも「OhYeah to こ」をご覧いただき、ありがとうございます!
今回は、ブログデザインリニューアルのお知らせです 🎉
技術的な内容なので、あまり多くの方が興味を持つ話ではないかもしれませんが以前、Understrapを使ったリニューアルも記事にしていたので、今回もちょこっとまとめてみました。
(Understrapの公式サイトはこちら )
Understrap テーマを、カスタマイズしました(防備録・リンク集)
今回使ったのは「Beer CSS」
リニューアルにあたって、今回は「Beer CSS 」という軽量なCSSフレームワークを使ってみました。
Beer CSSとは?
Beer CSSは、シンプルなデザインと軽快な動作が魅力のCSSフレームワークです。
Beer CSSの特徴&使用感
Beer CSSには、次のような特徴があります:

- 軽量フレームワーク:CSSとHTMLの基本的な構造で簡単にデザインを整えられる
- 軽量とはいえ、いろんな設定・機能が含まれているので(自分の力量以上に)簡単に作れました👍
- モダンなデザイン:シンプルかつ洗練されたデザイン
- カードやボタンの雰囲気が個人的に好みです。
- Beerも好きです😉
- カードやボタンの雰囲気が個人的に好みです。
- カスタマイズ性:設定次第で自由なデザインが可能
- この点は苦心しました
- 動作が軽快
- 体感的にもとてもサクサク・ページの読み込みが速いです。
とはいえ、本来の使い方とはちょっとズレた使い方をしているかもしれません。
なので、Beer CSSの推奨構造とは少し違った形になってると思います…。
The principles(公式GitHubより)
This project was guided by the "Germany Beer Purity Law" or "Reinheitsgebot" created in 1516. This law states that beer should only be brewed with the following ingredients: water, barley malt and hops. Only 3 ingredients. Exciting, right? So we thinking about It and our 3 ingredients are: settings, elements and helpers. This sounds weird at first time, because It's not BEM, OOCSS, SMACSS, ITCSS, "Utility first" or any other approach. Our approach doesn't avoid some bad practices, but is lightweight, tasty and pure like a beer. Just try it and feel it! 😁
(ChatGPT訳:このプロジェクトは、1516年に制定された「ドイツのビール純粋令(Reinheitsgebot)」にインスパイアされています。この法律では、ビールは水・大麦麦芽・ホップの3つの原料のみで作るべきだとされています。これを受けて、Beer CSSでも「settings」「elements」「helpers」の3つを原料に見立てています。他のCSS設計手法(BEM、OOCSS、SMACSS、ITCSS、Utility Firstなど)とは違うアプローチを取っていますが、軽くて、味わい深く、そして純粋なビールのような仕上がりを目指しているそうです。まずは試してみて、その使い心地を感じてみてください!)
とはいえ、自分で楽しくカスタマイズできた・勉強になったので良しとしています!
もし興味があれば「Beer CSS」もぜひ、調べてみてくださいね🍺
Beer CSSの備忘録
今回は構成変更もそこまで大がかりではなく、「これがすごく大変だった!」みたいな話もあまりなかったので、詳細な設定記録はありません😅
その代わり、Beer CSSを紹介してくださっていたコリスさんの記事がとても参考になりました。
それと、Beer CSS公式サイトさんをじっくり検証するのもとても参考になりました
まとめ
というわけで、今回はブログデザインを変えました!・Beer CSS使ってみました! というお知らせでした。
今後も「OhYeah to こ」は、インターネットの便利ツールやテンプレート、ちょっとした雑記などを、のんびり更新していきたいと思っています。
新しいデザインの「OhYeah to こ」も、引き続きよろしくお願いいたします 😊