Skip to content

Commit 16ac298

Browse files
fumikitoclaude
fumikito
and
claude
committed
Add unified white WP.org banner and icon
Replace the banner with the Tarosky standard white-background design (soft brand-blue glow on the key word, seamless white edges), matching the rich-taxonomy reference. Update the plugin icon to the split-circle brand badge and keep the editable source under .claude/wp-org-assets/. Co-authored-by: Claude <noreply@anthropic.com>
1 parent 0d4cf19 commit 16ac298

5 files changed

Lines changed: 107 additions & 0 deletions

File tree

‎.claude/wp-org-assets/README.md‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# WP.org アセットのソース
2+
3+
このディレクトリは WordPress.org 用バナーの **編集可能なソース** を保管する。
4+
配布物（`.wordpress-org/*.jpg`）はここから生成する。`.claude` は `.distignore` で
5+
WP.org 配布物から除外されるため、ここにソースを置いても配布 zip には含まれない。
6+
7+
> Tarosky プラグインバナーの標準。リファレンス（理想形）は `rich-taxonomy`。
8+
> スキル: `~/.claude/skills/wp-org-assets`（SKILL.md / references/rendering.md）。
9+
10+
## デザイン原則
11+
12+
- 背景は白ベース + ブランドブルー `#00A9D9` の柔らかいラジアルグロー。
13+
- **四辺はすべて純白 `#FFFFFF` にフェードさせる**（WP.org は白背景。端が純白でないと
14+
バナーが「箱」に見えて浮く）。グローは端の手前で必ず透明（=白）に収束させ、生成後に
15+
ピクセルで四辺=255 を検算する。
16+
- メインのグローは価値を象徴する語（`.hl` を付けた語）の中心へ自動追従する。
17+
- ロゴ・タイトル・タグラインのレイアウトは維持。TAROSKY 公式ワードマークは無改変で埋め込む。
18+
19+
## 再現手順（macOS / ヘッドレス Chrome / ImageMagick）
20+
21+
`banner.html` は自己完結（ロゴ SVG をインライン埋め込み、グロー位置とタイトル自動縮小を
22+
JS で自己補正）。編集したら以下で再生成する:
23+
24+
```bash
25+
CHROME="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
26+
"$CHROME" --headless --disable-gpu --hide-scrollbars --force-device-scale-factor=1 \
27+
--window-size=1544,500 --screenshot=banner-1544x500.png "file://$PWD/banner.html"
28+
29+
# 四辺が純白（min=65535）か検算
30+
for g in North South West East; do
31+
dim=1544x1; case $g in West|East) dim=1x500;; esac
32+
echo "$g min=$(magick banner-1544x500.png -gravity $g -crop $dim+0+0 +repage -format '%[min]' info:)"
33+
done
34+
35+
magick banner-1544x500.png -background white -flatten -quality 92 banner-1544x500.jpg
36+
magick banner-1544x500.jpg -resize 772x250 -quality 92 banner-772x250.jpg
37+
cp banner-1544x500.jpg banner-772x250.jpg ../../.wordpress-org/
38+
```
39+
40+
タイトルの強調語は HTML の `<span class="hl">…</span>` で指定する。グロー位置・大きさは
41+
JS が自動計算し、端の手前で必ず白へ収束する（端を割らない）。

‎.claude/wp-org-assets/banner.html‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<!doctype html>
2+
<html><head><meta charset="utf-8"><style>
3+
* { margin:0; padding:0; box-sizing:border-box; }
4+
html, body { width:1544px; height:500px; }
5+
.banner { position:relative; width:1544px; height:500px; overflow:hidden; background:#fff; font-family:'Avenir Next',-apple-system,sans-serif; }
6+
.left { position:absolute; left:96px; top:50%; transform:translateY(-50%); }
7+
.title { font-weight:800; font-size:118px; line-height:1.0; letter-spacing:-2px; color:#10222d; white-space:nowrap; }
8+
.rule { width:108px; height:9px; border-radius:4px; background:#00a9d9; margin:34px 0 30px; }
9+
.tagline { font-weight:600; font-size:38px; letter-spacing:-0.5px; color:#45555f; }
10+
.mark { position:absolute; right:210px; top:92px; width:262px; height:262px; }
11+
.wordmark { position:absolute; right:96px; bottom:74px; width:232px; }
12+
.wordmark svg, .mark svg { display:block; width:100%; height:100%; }
13+
</style></head>
14+
<body>
15+
<div class="banner" id="banner">
16+
<div class="left">
17+
<div class="title" id="title">Taro <span class="hl">Open</span> Hour</div>
18+
<div class="rule"></div>
19+
<div class="tagline">Add business hours and location to any post type</div>
20+
</div>
21+
<div class="mark" id="mark">
22+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
23+
<circle cx="128" cy="128" r="120" fill="#00a9d9"/><path d="M43.43,43.43 A120,120 0 0 1 212.57,212.57 Z" fill="#000000"/>
24+
<g fill="none" stroke="#fff" stroke-width="12" stroke-linejoin="round" stroke-linecap="round">
25+
<path d="M128,58 C97,58 72,83 72,114 C72,156 128,202 128,202 C128,202 184,156 184,114 C184,83 159,58 128,58 Z"/>
26+
<circle cx="128" cy="112" r="27"/>
27+
<path d="M128,112 L128,95"/>
28+
<path d="M128,112 L143,120"/>
29+
</g>
30+
</svg>
31+
</div>
32+
<div class="wordmark"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 158"><defs><style>.a{fill:#00a9d9;}</style></defs><path class="a" d="M21.78,24.23l2.26,1a45.28,45.28,0,0,1,22.83,22h0C40.78,54.1,35.46,64.88,35.46,79.11c0,17.28,7.18,27.83,13,33.44,7.18,7.18,18,12.85,33.21,12.8,18-.07,28.88-8.34,35.15-15.62.08-.09,13.63,18.79,24.28,23.42l.43.18s-17.9,23.88-60.31,23.88c-25.13,0-44-8.53-57.9-22C7.18,119.51,0,99.09,0,79.11,0,56.89,8.56,37.83,21.78,24.23Z"/><path d="M81.24.79c29.85,0,48.34,12,58.58,22,14.87,14.46,23.11,33.65,23.11,56.78,0,21-8.13,40.34-21.38,53.77l-.43-.18a48.21,48.21,0,0,1-24.28-23.42c7.13-8.35,10.64-18.32,10.64-30.39,0-10.94-2.94-19.39-6.79-25.72L100.62,73.2h0a30.31,30.31,0,0,1-18.2-18.65h0l18.45-18a49.36,49.36,0,0,0-19.4-3.89c-13.69,0-25.59,5.61-33,12.79-.55.54-1.61,1.77-1.61,1.77A47.28,47.28,0,0,0,24,25.21l-2.26-1S41.08.79,81.24.79Z"/><path d="M285.89,48.55V128.9H262.84V48.55H241.15V29.1h66.43V48.55Z"/><path d="M433.93,110.05h-37.7l-7.64,18.85H364.65L404.9,29.1H426l39.35,99.8H441.41Zm-6.28-17.66L415.38,58.88,403,92.39Z"/><path d="M561.59,29.1c12.72,0,20.65,4.19,25.44,8.68,4.18,4,8.67,11.22,8.67,22.29,0,6.29-1.35,14.07-7.77,20.35A31.4,31.4,0,0,1,574,88.05l30.67,40.85H576.55L549.62,89.55V128.9h-23V29.1Zm-12,45.33h5.23c4.2,0,9.88-.44,13.77-4.33a13.43,13.43,0,0,0,3.74-9.73c0-5.68-2.69-8.67-4.64-10.17C564,47.35,558,47.06,555,47.06h-5.39Z"/><path d="M751.93,41.37a52,52,0,0,1,15.56,37.71,51.6,51.6,0,0,1-15.56,37.4c-9.28,9-21.85,14.66-38.61,14.66-18.7,0-31.42-7.48-38.9-14.66-9.57-9-15.56-22.44-15.56-37.11,0-14.36,6.44-28.88,15.41-37.85,6.73-6.73,19.15-14.66,39.05-14.66C728.88,26.86,741.9,31.65,751.93,41.37Zm-60.6,15.26c-4.34,4.19-8.83,11.52-8.83,22.59,0,9.13,3,16.46,9.13,22.45,6.43,6.13,13.62,8.23,21.39,8.23,10.18,0,17.36-3.74,22.15-8.53,3.89-3.74,8.68-10.77,8.68-22.29,0-10.33-4.19-18-8.68-22.45a32,32,0,0,0-22-8.53A30.67,30.67,0,0,0,691.33,56.63Z"/><path d="M892.67,77.73c-3.9-3.74-9.28-6-13.62-7.63l-7.48-2.85c-6.74-2.54-10.18-3.44-12.57-5.68A7,7,0,0,1,856.76,56a8.92,8.92,0,0,1,2.54-6.29c2.69-3,6.58-3.44,9.73-3.44,2.84,0,9.27.45,16.75,7.18l10.33-16.76a48.31,48.31,0,0,0-29.63-9.87c-9.28,0-17.66,1.94-24.69,9.12-6,6.14-8.67,13.62-8.67,22.45,0,4.79.74,11.82,6,17.35C843,80,848.38,82.07,853,83.71l8.22,2.85c1.79.66,4.87,1.79,7.59,3.09q14.52-1.53,29.66-2.72A22.4,22.4,0,0,0,892.67,77.73Z"/><path d="M1018.72,83.15l-.54-.65-5.08-6.12,40.4-47.28h-28.13L991.26,70.7V29.1h-23V83.4Q983.89,83,999.93,83,1009.38,83,1018.72,83.15Z"/><path d="M1164.24,82.37,1200,29.1h-27.23l-20,31-20-31h-27.23l35.76,53.27v8.41q11.74,1.35,23,2.91Z"/><path class="a" d="M873.87,93a8.49,8.49,0,0,1,2.48,6.23,10.69,10.69,0,0,1-1.32,5.24,9.84,9.84,0,0,1-2.27,2.84c-3.28,2.85-7.48,3.44-10.47,3.44a23.13,23.13,0,0,1-12.57-3.59,41.24,41.24,0,0,1-3.7-2.69,73.24,73.24,0,0,1-5.58-4.93l-3.58,4.93L828.47,116A63.89,63.89,0,0,0,843.14,127c6.28,3.14,12.57,4.18,19.75,4.18,6.59,0,19.45-.89,28.28-10.17,3.78-3.89,6.68-9.67,8-16.46a42.06,42.06,0,0,0,.82-8.23,30.14,30.14,0,0,0-.81-7.06c-.18-.76-.44-1.53-.7-2.29q-15.12,1.2-29.66,2.72a20.9,20.9,0,0,1,4.08,2.44A12.32,12.32,0,0,1,873.87,93Z"/><path class="a" d="M968.21,104.51V128.9h23V84.61l16.06,19.9L1027,128.9h29.62l-20.22-24.39-17.7-21.36q-9.35-.12-18.79-.13-16,0-31.72.38v21.11Z"/><path class="a" d="M1141.2,104.51V128.9h23V93.69q-11.29-1.56-23-2.91v13.73Z"/></svg></div>
33+
</div>
34+
<script>
35+
(function(){
36+
var W=1544,H=500,m=8;
37+
var title=document.getElementById('title');
38+
var mark=document.getElementById('mark').getBoundingClientRect();
39+
// measure the actual rendered TEXT width (not the block/container width)
40+
function textW(el){ var r=document.createRange(); r.selectNodeContents(el); return r.getBoundingClientRect().width; }
41+
// 1) auto-fit title so it never collides with the mark
42+
var maxW = mark.left - 96 - 44; // gap before the mark
43+
var fs=118; title.style.fontSize=fs+'px';
44+
while(textW(title)>maxW && fs>58){ fs-=2; title.style.fontSize=fs+'px'; }
45+
// 2) glow centered on the emphasised word (.hl), clamped to stay white at edges
46+
var hl=(document.querySelector('.hl')||title).getBoundingClientRect();
47+
var cx=(hl.left+hl.right)/2, cy=(hl.top+hl.bottom)/2;
48+
var rx=Math.min(235, cx-m, W-cx-m), ry=Math.min(178, cy-m, H-cy-m);
49+
var g1='radial-gradient('+rx+'px '+ry+'px at '+cx+'px '+cy+'px, rgba(0,169,217,0.42) 0%, rgba(0,169,217,0.16) 55%, rgba(0,169,217,0) 100%)';
50+
// 3) secondary glow behind the mark
51+
var mcx=(mark.left+mark.right)/2, mcy=(mark.top+mark.bottom)/2;
52+
var mrx=Math.min(305, mcx-m, W-mcx-m), mry=Math.min(200, mcy-m, H-mcy-m);
53+
var g2='radial-gradient('+mrx+'px '+mry+'px at '+mcx+'px '+mcy+'px, rgba(0,169,217,0.34) 0%, rgba(0,169,217,0) 100%)';
54+
document.getElementById('banner').style.background=g1+', '+g2+', #ffffff';
55+
})();
56+
</script>
57+
</body></html>

‎.wordpress-org/banner-1544x500.jpg‎

81.4 KB
Loading

‎.wordpress-org/banner-772x250.jpg‎

34.4 KB
Loading

‎.wordpress-org/icon.svg‎

Lines changed: 9 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)