CODE-PLUS

CODE PLUS

CODE-PLUS CODE-PLUS

Claude Code・
WordPress・Web制作の実験ブログ CODE PLUS

AIに書かせて、人が削る。Web制作・WordPress・ツール開発の
現場で試した小道具と発見を、ひとつずつ記録しています。

PICKS — curated references

PICKS

RSS×AIで集めた技術記事をAIが採点、好みを学ぶ実験的キュレーション。

PICKS 一覧を見る
読み込み中...

    READ MORE⸻

    ABOUT — about this site

    CODE PLUS について

    運営者・コンセプト・このサイトで扱うこと。

    CODE PLUS は、福岡からひとりで運営している Web 制作 の実験ブログです。
    日々の制作で使った Claude Code・AI ツール、WordPress のテーマ／プラグイン開発、
    CSS と JavaScript の小さな発見、自作ツールの公開を、まとめて記録しています。

    「答え」ではなく「過程」を残すこと。検索で迷ったときに、もう一度自分が辿り直せるノートを作ること。
    AI を相棒にしながら、Web を組み続ける現場の声を、淡々と書き溜めています。

    • Claude Code
    • WordPress
    • Web制作
    • CSS · clamp()
    • JavaScript
    • AI 実験ログ
    running since
    2.42
    yrs
    entries
    300
    posts
    categories
    15
    cat
    tools published
    12
    utils
    node · location
    FUK
    jp

    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

    pptx・docx・pdfなどをMarkdownに変換。

    markitdown <file>

    RESPONSIVE CLAMP

    viewport 幅に応じたフォントサイズをclamp()値で出力。

    clamp(16,1.2vw,22)

    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 制作の手元の発見をひとつずつ。

    すべての記事を見る
    1. HTML/CSS CSS aspect-ratioが効かない原因とCLS対策｜画像の縦横比を自動計算・付与する実運用での使い方 aspect-ratioが効かない原因は押さえつつ、本記事の主眼は実運用。投稿保存時に実画像から縦横比を自動計算・自動付与し、SP/PCの出し分けまで手作業ゼロで維持する仕組みを解説します。CLS対策として無理なく常用するための実践ガイド。
    2. WORDPRESS MW WP Formで画像・PDFが添付されず送信完了する不具合の原因と対策｜0バイト/iCloud未取得ファイルを弾く MW WP Formのファイルアップロードで「必須なのに中身が空のまま送信完了する」不具合を調査。iPhoneのiCloud未取得画像が原因でした。$_FILES検証が効かない理由と、最小画像サイズで確実に弾く最終設定までを実例で解説します。
    3. 動画・画像編集 『AnimeEffects』で透過アニメーションWebPを作る｜GIFのギザギザ問題を解決 アニメーションGIFの輪郭がギザギザになるのは、GIFのアルファチャンネルが1bit（透明か不透明の2値）しかないためです。設定では直りません。8bitアルファを持つ可逆アニメーションWebPへ移行する手順を、2Dアニメーションツール AnimeEffects の導入からPNG連番の書き出し、img2webpでの変換、HTMLへの設置まで通しで解説します。
    4. AIでWEBｺｰﾃﾞｨﾝｸﾞ Claude for Chrome × Claude Code で、Webサイトを校正する方法｜プロンプトつき実践ガイド 誤字・リンク切れ・タグ確認まで。Claude for Chrome と Claude Code /chrome を使ったWebサイト校正の実践ガイド。すぐ使えるプロンプトつき。
    5. HTML/CSS HTMLメール制作時の落とし穴 — Gmail・Outlook・ダークモードすべてに対応するHTMLメールの作り方 HTMLメールはWebサイトとはまったく別のルールで動く。table必須・インラインスタイル必須・@mediaはGmailで無視される。実案件で得た「どのクライアントでも崩れない」HTMLメールの設計方針と、background-image/filter:brightnessを使ったダークモード対策を実装例付きで解説。
    6. PDF・文書編集 MarkItDownで崩れる2カラム表PDFを、pdfplumberで正しくMarkdownテーブル化する｜PDF表抽出の実装と精度改善 MarkItDownは便利ですが、罫線のある2カラム表PDF（求人票など）は左右のセルが交互に混ざって崩れます。この記事では pdfplumber の罫線ベース抽出でPDFの表を正しくMarkdownテーブルに変換する方法を、実装コードと3つの精度改善（改行判定・列数統一・メール改行）まで解説します。
    TOPに戻る 100vh戻る 1px戻る 1px進む 100vh進む 一番下まで進む