Claude Code・
WordPress・Web制作の実験ブログ
CODE PLUS
AIに書かせて、人が削る。Web制作・WordPress・ツール開発の
現場で試した小道具と発見を、ひとつずつ記録しています。
PICKS — curated references
PICKS
RSS×AIで集めた技術記事をAIが採点、好みを学ぶ実験的キュレーション。
読み込み中...
ABOUT — about this site
CODE PLUS について
運営者・コンセプト・このサイトで扱うこと。
CODE PLUS は、福岡からひとりで運営している Web 制作 の実験ブログです。
日々の制作で使った Claude Code・AI ツール、WordPress のテーマ／プラグイン開発、
CSS と JavaScript の小さな発見、自作ツールの公開を、まとめて記録しています。
「答え」ではなく「過程」を残すこと。検索で迷ったときに、もう一度自分が辿り直せるノートを作ること。
AI を相棒にしながら、Web を組み続ける現場の声を、淡々と書き溜めています。
TOOLS — self-made instruments
TOOLS
Web 制作で使う実用ツール／自作。Claude Code と一緒に組み上げた小道具を、ひとつずつ公開しています。
マークダウン変換
MARKDOWN CONVERTER
Markdown ⇄ HTML の相互変換。エンティティ／URL／Base64 エンコードに対応。
md2html --escape
表組み変換
TABLE CONVERTER
パイプ区切りのテキストをHTMLのtableタグに自動変換。
csv2md --align
アイキャッチ生成
EYECATCH GENERATOR
テキストを画像に変換する画像生成ツール。
eyecatch --bg=nixie
ディレクトリ図
DIRTREE GENERATOR
フォルダ構造を視覚的なツリー形式で自動生成。
dirtree -L 3
Markitdown
MARKITDOWN
pptx・docx・pdfなどをMarkdownに変換。
markitdown <file>
clamp() 計算機
RESPONSIVE CLAMP
viewport 幅に応じたフォントサイズをclamp()値で出力。
clamp(16,1.2vw,22)
px ↔ rem
PX ↔ REM
テキスト内の px と rem を一括で置換。
px2rem 16=>1.0
カラーコード
COLORCODE
RGB / RGBAをWEBカラーコード（HEX）に一括変換
color #ffa500
改行可視化
BREAKS
テキスト内の改行やタブを様々な形式に一括変換。
breaks --crlf
- total
- 09
- on this grid
- 09
- latest
- T-09
- runtime
- browser
APPS — self-made applications
APPS
手元の不便を埋めるために作ったアプリと WordPress プラグイン。Claude Code と一緒に形にして、OSS で公開しています。
スニペット管理
ESPANSO MANAGER
Espanso の base.yml をGUIで管理するWebアプリ。React + TypeScript + Vite 製。
espanso-mgr --gui
一括grep置換
MULTI GREP REPLACER
複数ルールを一括実行する高速grep置換ツール。1000ファイルを1秒以内で処理。
mgrep --rules
画像トリミング
1PX TRIMMER
画像を上下左右1pxトリミングしてダウンロード。Claude Code 製の軽量Webアプリ。
trim --1px
複数ペア一括置換
BSR PLURAL
Better Search Replace に複数ペア一括置換と Import/Export を追加するパッチ。
bsr --plural
メニュー複製
MENUITEM COPY+PASTE
WordPress のメニュー項目をコピー＆ペーストで複製。編集作業を時短。
menuitem --copy
カテゴリ配色
CATEGORY COLOR PICKER
カテゴリに配色を設定し、文字色を自動調整。WordPress.org 公式公開プラグイン。
catcolor --pick
- total
- 06
- apps
- 03
- plugins
- 03
- license
- OSS
BLOG — latest entries
BLOG
最新記事・カテゴリから探す。Claude Code、WordPress、Web 制作の手元の発見をひとつずつ。
- PDF・文書編集 フルーロンとは？活字装飾の歴史とCSSでの使い方｜コピペで使える区切り線つき フルーロン（fleuron）は花や葉をかたどった装飾活字です。語源と歴史、Unicodeの❦❧☙、CSSの擬似要素やfont-variant-alternatesでの実装方法までを、コピペで使えるセクション区切りのサンプル付きで解説します。
- JAVASCRIPT Chart.jsでドーナツグラフ・円グラフを作るかんたんな使い方【コピペOK】 Chart.jsを使ってドーナツグラフ・円グラフをすぐ作れるようにコードを解説。CDN読み込みからサイズ・色・凡例・ツールチップのカスタマイズまで、手っ取り早く実装したい人向けにまとめています。
- アナリティクス GA4でクロスドメイントラッキングを設定する方法【外部予約システム対応】 GA4のクロスドメイントラッキングを設定すると、外部予約システムや決済ページへ遷移後もGoogle広告・Instagram広告などの流入元を引き継げます。設定手順と注意点をスクリーンショット付きで解説。
- JAVASCRIPT unpkg.com の使い方 / npm にパッケージを公開してCDN配信する方法【初心者向け】 unpkg.comのURL構造と読み方・書き方（固定・範囲・最新）、注意点、フォールバック設定等の使い方、自作ライブラリをnpmに公開し、unpkg.comのURLで配信できるようにする手順をpackage.jsonの設定、npm publish、バージョンアップの方法まで、初めて公開する方向けにまとめています。
- JAVASCRIPT Chart.jsで棒グラフを作るかんたんな使い方【コピペOK】 Chart.jsを使ってシンプルな棒グラフをすぐ作れるようにコードを解説。CDN読み込みから棒の色・幅・軸ラベル・ツールチップのカスタマイズまで、手っ取り早く実装したい人向けにまとめています。Chart.js, 棒グラフ, JavaScript, グラフ作成, CDN, chart.umd.js, barPercentage, categoryPercentage, ticks, callback
- AIでWEBコーディング Claude Codeにレイアウトを正確に再現させる「中間設計書」記法 デザインカンプとAIだけでコーディングさせると、横並びや表示順がうまく再現できない。そこで「カンプ→中間設計書→コーディング」の3段階に分け、人間もAIも読める独自のレイアウト記法を作りました。記号設計の試行錯誤と、設計書ルールの全体像を解説します。