第1回:WordPress テーマ開発の始め方 - Local by Flywheel で環境構築からテーマフォルダ理解まで

はじめに

Miyagi です。WordPress 初学者の私が、テーマ開発にチャレンジすることになりました! 普段は Vue.js や Tailwind、TypeScript を使ったフロントエンド開発をしているのですが、PHP や WordPress についてはほぼ初心者レベル。WordPress のテーマ開発なんて難しそう…と思っていたのですが、Claude に相談しながら「1 日 2 時間 ×10 日間」の短期集中でマスターすることにしました。

【まとめ】Nuxt UI v3でTailwind CSS v4を使う際の移行ポイントと解決策

はじめに

Miyagi です。Nuxt UI v3 への移行プロジェクトで、Tailwind CSS v4 の統合環境に直面しました。v4 では根本的なアーキテクチャの変更があり、後述する「CSS-first アプローチ」という新しい設計思想が採用されています。 約 130 個の Vue コンポーネントを持つプロジェクトで、15 日間かけて移行を完了させました。その過程で遭遇した対応についてのまとめを共有します。

Tailwind CSS v4で動的クラス名が使えない?CSS変数とTypeScriptで解決する2つの方法

Tailwind CSS v4 Migration

はじめに

Miyagi です。Tailwind CSS v4 への移行を進めていたところ、ちょっと困った問題に遭遇しました。。 今までtailwind.config.tsで TypeScript を使って管理していた色定義が、v4 ではmain.cssに移行することになったんです。設定ファイルが CSS ベースになることで高速化の恩恵は受けられるものの、TypeScript で動的にクラス名を生成していた部分が動かなくなってしまいました。

CSS Grid Layoutを使ったレスポンシブ対応のタイルレイアウト

一定の幅と高さのボックスを繰り返し表示するタイルレイアウトをレスポンシブ対応にするため、CSS Grid Layout について調べてみました。


CSS Grid Layout(グリッドレイアウト) とは

CSS を用いて 2 次元のレイアウトを構築するための機能です。格子状のマス目(グリッド)に要素を配置したり、結合したりすることで、様々なレイアウトが可能になります。

LINE公式アカウント開設無料サポート開始のお知らせ

バッカム株式会社(本社:沖縄県浦添市)は、地元の店舗や飲食店向けに、集客を強化 を目的にLINE公式アカウント(https://www.linebiz.com/jp/service/line-official-account/)の無料開設サポートを開始いたします。

LINEは日本国内外で数多くのユーザーによって利用され、ビジネスにおいても顧客とのダイレクトなコミュニケーション手段として広く認知され*1、顧客との繋がりを築く大切なツールとなっています。LINEの公式アカウントを活用することで、集客効率や顧客満足度の向上をすることができます!

「LINE@活用入門ワークショップ」でビジネスでのLINE@活用をスムーズに始めませんか?

バッカム株式会社(本社:沖縄県浦添市)は、ビジネスでのLINE@(公式アカウント)活用における疑問や不安を解決する「LINE@活用入門ワークショップ」を開催いたします。当日は実践的なレクチャーを通じて、LINE@のアカウント登録から設定、運用までを習得し、効果的なLINE@運用を始める準備を整えることができます。また、ご要望に合わせて開催場所や参加人数、日時などの調整も可能です。貴社に合った最適なワークショップをご提供いたしますので、お気軽にお問い合わせください。  

[Keystone] 画像とファイル

画像とファイル

Keystone のフィールドには、画像やファイルなどの種類が含まれています。これらを使用して、Keystone から画像やファイルを参照および (必要に応じて) 提供することができます。このガイドでは、Keystone システムで画像とファイルを構成する方法を説明し、アセットをローカルに保存するか、Amazon S3 ストレージまたは DigitalOcean Spaces などの互換性のある S3 プロバイダを使用することができます。

[Keystone] 適切なデータベースを選択する

適切なデータベースを選択する

Keystone は、Postgres、MySQL、および SQLite データベースプロバイダをサポートしています。このガイドでは、これらのプロバイダの違いを強調し、プロジェクトに適したものを選択するのに役立ちます。