カテゴリー: WEB
Web制作、プログラミング備忘録、WordPress、Blender、React Three Fiber、p5.jsを使ったデジタルものづくりの記録。
-
【WordPress ブロックテーマ自作④】色は後から変えられる！カラーパレットのslug設計とおすすめ構成
カラーパレットの設定をします。この記事では、私がおすすめするslug構成と、実際の使い方を紹介します。 📌 このシリーズの目次・準備編はこちら本…
-
【WordPress ブロックテーマ自作③】theme.jsonの最初の一歩｜レイアウト幅とパーツ登録
先にやっておきたいtheme.jsonの設定があります。この設定は2回に分けて進めます。この記事ではレイアウト幅とパーツ登録、次の記事ではカラーパレットの設定を…
-
【WordPress ブロックテーマ自作②】作り始める前の「設計図」｜必要なファイルを決める
最初に「どんなサイトにするか」を決めておくと、必要なファイルが自然と決まります。3つの選択で、自分のサイトに必要なファイル一覧が見えてくる流れを解説します。 &…
-
【WordPress ブロックテーマ自作①】敷居は思ったより低い｜はじめての自作テーマ
WordPressのブロックテーマなら、PHPの知識がなくても、ローカル開発環境がなくても、「自作テーマ」を作り始めることができます。🎉 なによ…
-
【WordPress】theme.jsonの構成とキー一覧をひと目で確認｜ブロックテーマ開発リファレンス
この記事は、theme.jsonに「どんなキーがあって、何ができるのか」をひと目で確認できるリファレンスとして作りました。 はじめに 💡 このペ…
-
【WordPress】ブロックマークアップの読み方・書き方入門
ブロックマークアップはエディターからそのままコピーできます。 大事なのは書き方の暗記ではなく、「こういう仕組みで動いている」という理解です。 ブロックテーマはど…
-
【WordPress】ブロックテーマのレイアウトをシミュレーターで体感しよう！
ブロックテーマのレイアウト、なんとなく触っているけど「なぜこうなるの？」と思ったことはありませんか？ 実は、ブロックテーマのレイアウトは たった3つの「幅」 で…
-
【WordPress】CSSの書き方をtheme.jsonに「翻訳」する完全ガイド
「CSSで書いていたレイアウトの書き方」を「ブロックテーマでの対応する書き方」に「翻訳」する形で一つずつ解説します。 👇 動きを体感したい方へス…
-
【WordPress】register_block_styleで囲みボックスをワンクリックで切り替える！
register_block_styleを使えば、エディターのサイドパネルからワンクリックでスタイルを切り替えられるようになります。 コードはAIに丸投げでOK…
-
【WordPress】theme.jsonって何？設定ファイル1つでサイトの見た目を統一する仕組み
theme.jsonは、色・フォント・見出しスタイルを1つのファイルでまとめて管理できる「サイトの司令塔」。 この記事では、実際のサンプルコードを見ながら図解で…
-
【p5.js】SVGRepoの罠を回避！動くSVGパスの見分け方と『最強の描画関数』
p5.jsでアニメーションを作る時、『イラストをそのまま使いたい！』と思ったことはありませんか？ 複雑なSVGパスでもp5.jsで綺麗に描画できる『関数』と、失…
-
【WordPress】HTMLブロック1つで、LINE風の背景エフェクトを実装（季節の演出）
プラグインは不要。WordPressの『カスタムHTMLブロック』1つで完結。LINEのトーク画面の背景エフェクトのような、桜や紅葉が舞う演出を自分のブログで再…
-
【ブロックテーマ入門⑥】「スタイル」機能でサイトを自分色に染める！
「サイト全体の色をもっと優しくしたい」「文字の形を丸くしたい」 そんなこだわりを、ページ一枚ずつではなくサイト全体に反映させるのが、「スタイル（グローバルスタイ…
-
【ブロックテーマ入門⑤】サイトを支えるナビゲーションとクエリループ
今回は、サイトのあちこちで「勝手に動いてくれている仕組み」についてです。 ヘッダーのメニューや、トップページの新着記事一覧。これらはテーマをいれた時に、テーマが…
-
【ブロックテーマ入門④】パターンで時短！「同期・非同期」を使い分け
せっかく苦労して作ったお気に入りのデザイン。別のページを作るたびに、また一から作り直すのは大変ですよね？ 一度作った「箱」を名前をつけて保存しておけば、いつでも…
-
【ブロックテーマ入門③】デザインの救世主『グループ』と『カラム』の攻略
「どこで何を直すか」の全体像が見えたら、次はいよいよパーツを組み上げる「大工仕事」に挑戦してみましょう！ 🤔 こんな悩み、ありませんか？ 画像と…
-
【ブロックテーマ入門②】サイトエディターの歩き方
ブロックテーマの醍醐味は、「サイトエディター」。これを使えば、本文だけでなく、ヘッダーもサイドバーも、サイト全体のデザインを丸ごとあなたの手でプロデュースできる…
-
【ブロックテーマ入門①】WordPressの新常識「ブロックテーマ」の正体とは？
ブロックテーマは、決して難しい「専門家向けの道具」ではありません。 むしろ、「プログラミングやデザインの知識がなくても、パズルを組み立てるように自分好みのサイト…
-
WordPressのクラシックテーマ移行難民のための処方箋
WordPressのクラシックエディタを使用している皆さん。心のどこかで「いつかはブロックへ移行しなきゃ……」と、重い腰が上がらずにいませんか？ 「今のままでも…
-
【夏休みの自由研究】ついに完成！「万華鏡」（第5回）
第1回の「とりあえず遊んじゃおう！完成版コード」を覚えていますか？ これは、世界のクリエイターを熱狂させた Kishimisuさん の魔法です。 これまでの第1…
-
【夏休みの自由研究】増殖の魔法：forループ（第4回）
今回のテーマは、「反復（ループ）」。 たった1つのプログラムを、ロボットに「100回やって！」と命じるだけ。プログラムだからこそ描ける「圧倒的な数」。その扉を一…
-
【夏休みの自由研究】「動き」と「色」の魔法（第3回）
第2回では画面にポツンと浮かぶ「完璧（かんぺき）な丸」を描くことに成功したね。 でも、今の丸はじっと止まったまま、眠っているみたい……。 今回使う魔法は、とって…
-
【夏休みの自由研究】ロボットへの命令と座標のナゾ：丸を描く（第2回）
🌟 ここが一番の「がんばりどころ」だよ！ 第2回のテーマは、シェーダーの「ルール」と画面の住所を決める「座標（ざひょう）」のお話です。 正直に言…