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
    320
    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. SEO・アナリティクス サイトのレンダリングブロック対策｜PageSpeed Insights改善 PageSpeed Insightsの「レンダリングをブロックしているリクエスト」への対応記録。JSのdefer化、CSSの非同期化を試し、TBTが悪化した失敗も紹介。
    2. SEO・アナリティクス SEOリライトの進め方｜タイトルとdescriptionの直し方 SEOリライトで直す記事と場所を、サーチコンソールの数字で決める手順を解説。タイトルの長さと語順、descriptionの書き方、本文・見出しの直し方、直した後のCTR・順位の確認方法まで、実践的にまとめました。
    3. SEO・アナリティクス GA4とサーチコンソールの使い方｜見る画面は5つだけ GA4とサーチコンソールで見る画面を5つに絞って解説。検索結果の表示回数・クリック数・順位、GA4の流入元と入口ページの読まれ方を確認し、リライトする記事を1本決めるまでの手順をまとめます。URL検査の使い方も紹介。
    4. SEO・アナリティクス SEO対策でできること・できないこと｜E-E-A-T・エンティティ・外部施策を解説 SEO対策で「できること」と「できないこと」を整理。Googleが重視するE-E-A-T、エンティティ、Googleビジネスプロフィール、プレスリリースの効果と限界を、公式ドキュメントをもとに企業サイト向けに解説します。
    5. SEO・アナリティクス SEO対策の基本を解説：初心者でも実践できる内部・外部・コンテンツ施策まとめ WordPressサイトの初心者向けに、SEO対策の基本を解説。Search Console登録、XMLサイトマップ、タイトル・メタディスクリプション、noindex、OGP、パンくず、GA4まで、最初に導入すべき7つの設定と手順を紹介。SEOプラグインを使う場合との違いも比較します。
    6. WEB制作・環境 Vaydeer プログラマブルキーボードの設定方法｜Macだと落ちる？設定はマクロをjsonで作る 左手デバイス「Vaydeer プログラマブルキーボード」をMacで設定する方法。録画が使えない理由と、マクロをjson・prfファイルで作って読み込む手順、keyCode一覧をスクリーンショット付きでまとめました。