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
    307
    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. PDF・文書編集 主要な Markdown 方言・拡張のまとめ｜CommonMark / GFM 以外の記法と対応状況 Markdownには CommonMark / GFM 以外にも多くの方言・拡張記法があります。Pandoc・Markdown Extra・kramdown などの方言と、脚注・定義リスト・上付き下付き・ハイライト・ウィキリンク・目次・セル結合といった拡張記法を、書き方と対応状況の早見表で整理。Markdown Preview Enhanced の独自記法も解説します。
    2. PDF・文書編集 Markdownの標準規格を整理｜オリジナル・CommonMark・GFM・GLFMの違いをわかりやすく解説 Markdownは環境によって表示が変わることがあります。その原因である"方言"を、元祖のオリジナルMarkdownから、事実上の標準CommonMark、GitHubのGFM、GitLabのGLFMまで、それぞれの関係と違いを図と比較表で整理。どの規格を基準に書けば崩れにくいか、実用的な選び方まで解説します。
    3. バックエンド 外形監視とは？ おすすめツール｜無料で使える『Appmillの始め方』【画像付き】 外形監視とは何かを、初めての人向けにシンプルに解説。死活監視との違い、なぜ必要かから、無料ツール「Appmill」で今日から監視を始める手順までを実際の画面つきで紹介します。通知が届かない・迷惑メール入りといった、つまずきポイントの対策も。
    4. バックエンド FTPアップロードでファイルサイズが0バイトになる原因と対策｜同時接続数を制限して解決する FTPで転送したファイルがサーバー上で0バイトになる現象の原因と対策。同時接続数の上限超過が主な原因で、FileZillaの設定変更で再発を防げます。
    5. PDF・文書編集 textlintでAIっぽい文章をチェックする — CLI導入から運用まで textlintと@textlint-ja/textlint-rule-preset-ai-writingを使い、ブログ原稿のAI文体を投稿前にコマンド一発でチェックする方法。ホーム直下にnpm installしない設置場所の注意点、rcファイルのキー名の落とし穴、--fixが効かない実測結果、コード内絵文字の誤検知除外設定まで解説します。
    6. HTML/CSS 数字だけ別フォントにする：Roboto Numeric フォントを自作してnpm配信するまで デザイナー指定の数字・記号だけを本文フォントに混植したいときの解決策。FontToolsでRoboto数字専用サブセットを作成し、size-adjustでベースラインを整え、npm経由でjsDelivr配信するまでの手順を実例付きで解説します。
    TOPに戻る 100vh戻る 1px戻る 1px進む 100vh進む 一番下まで進む