[{"data":1,"prerenderedAt":2996},["ShallowReactive",2],{"blog-20260903":3,"blog":2978,"blog-20260903_surround":2989},{"id":4,"title":5,"author":6,"body":7,"created":2970,"description":2971,"extension":1255,"meta":2972,"navigation":1565,"ogImage":6,"path":2973,"robots":6,"schemaOrg":6,"seo":2974,"sitemap":2975,"stem":2976,"updated":2970,"__hash__":2977},"blog\u002Fblog\u002F2026\u002F09\u002F03.md","ウェブサイトの中身を Nuxt UI に置き換える",null,{"type":8,"value":9,"toc":2963},"minimark",[10,25,28,31,65,76,79,86,89,92,96,111,163,175,178,182,215,223,249,280,383,417,444,475,479,482,501,510,561,587,603,684,699,722,739,756,856,876,984,990,1002,1005,1008,1012,1023,1209,1224,1250,1277,1280,1284,1314,1320,1450,1453,1481,1484,2359,2372,2384,2411,2898,2901,2921,2930,2947,2949,2956,2959],[11,12,13,14,19,20,24],"p",{},"本ウェブサイト「",[15,16,18],"a",{"href":17},"\u002F","Hiratake Web","」の中身を ",[21,22,23],"strong",{},"Nuxt UI で書き直しました🚧"," 表面的にはデザインも何も変わっていないので、作り直したといってもただの自己満足でしかないところではありますが、変化の激しいウェブの世界では放って置くとすぐコードが古くなってしまうので、定期的なメンテナンスが欠かせません。",[11,26,27],{},"そんな Nuxt UI での再構築についての話を中心に、ウェブサイトのコードを書き直しているときのこだわりポイントだとか苦労したところなんかを色々書いていこうと思います。",[29,30],"hr",{},[11,32,33,34,40,41,46,47,52,53,58,59,64],{},"今回の再構築についての Pull Request は以下。これまでは大半の Vue コンポーネントを自前で用意して、一部に ",[15,35,39],{"href":36,"rel":37},"https:\u002F\u002Fheadlessui.com\u002F",[38],"nofollow","Headless UI"," という ",[15,42,45],{"href":43,"rel":44},"https:\u002F\u002Ftailwindcss.com\u002F",[38],"Tailwind CSS"," と同じ ",[15,48,51],{"href":49,"rel":50},"https:\u002F\u002Fgithub.com\u002Ftailwindlabs",[38],"Tailwind Labs"," が提供しているコンポーネントを使用してウェブサイトを構築していました。それを ",[15,54,57],{"href":55,"rel":56},"https:\u002F\u002Fui.nuxt.com\u002F",[38],"Nuxt UI"," という、この「Hiratake Web」でも使用しているフレームワークである ",[15,60,63],{"href":61,"rel":62},"https:\u002F\u002Fnuxt.com\u002F",[38],"Nuxt"," のオフィシャルなコンポーネントライブラリに置き換えています。",[66,67,68],"ul",{},[69,70,71],"li",{},[15,72,75],{"href":73,"rel":74},"https:\u002F\u002Fgithub.com\u002FHiratake\u002Fhiratake-web\u002Fpull\u002F2368",[38],"feat: nuxt ui での再構築 by Hiratake · Pull Request #2368 · Hiratake\u002Fhiratake-web",[11,77,78],{},"当然、独自のデザインがあるウェブサイトなので全て Nuxt UI のコンポーネントで実装するというのは不可能ではありますが（無理に全てを置き換える必要もない）、それでも Nuxt UI で実装できる部分はほぼほぼ置き換えができたのではないかと思います。",[11,80,81],{},[82,83],"img",{"alt":84,"src":85},"Nuxt UI での再構築を行ったPRの画像","354051c7-62c3-484e-79ec-d299f426df00",[11,87,88],{},"以前のコードでもウェブサイトのコンテンツの更新自体はできていたのですが、使用していた Headless UI は更新が止まっている（React 向けはメンテナンスされてるようだけれど Vue のほうは 2 年近く止まっている）ので変えたほうがいいだろうな…と思っていたのと、Tailwind CSS のバージョンが v3 から上げられない状態が続いていたのとで、「いつかどうにかしよう」と再構築の検討はずっと前からしていました。",[11,90,91],{},"そんな中、最近になって基盤となっているフレームワークの Nuxt のバージョンを上げると正しく表示できなくなるページが現れてしまい、さすがにマズいか…と重い腰を上げました。",[93,94,95],"h2",{"id":95},"環境",[11,97,98,99,104,105,110],{},"再構築にあたって使用した主なライブラリのバージョンは以下の通り。ウェブサイトのデプロイ先は ",[15,100,103],{"href":101,"rel":102},"https:\u002F\u002Fwww.cloudflare.com\u002Fja-jp\u002Fdeveloper-platform\u002Fproducts\u002Fpages\u002F",[38],"Cloudflare Pages"," です（",[15,106,109],{"href":107,"rel":108},"https:\u002F\u002Fwww.cloudflare.com\u002Fja-jp\u002Fdeveloper-platform\u002Fproducts\u002Fworkers\u002F",[38],"Cloudflare Workers"," ではない）。",[66,112,113,123,133,143,153],{},[69,114,115,122],{},[15,116,119],{"href":117,"rel":118},"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@nuxt\u002Fcontent",[38],[21,120,121],{},"@nuxt\u002Fcontent"," - 3.15.0",[69,124,125,132],{},[15,126,129],{"href":127,"rel":128},"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@nuxt\u002Fui",[38],[21,130,131],{},"@nuxt\u002Fui"," - 4.10.0",[69,134,135,142],{},[15,136,139],{"href":137,"rel":138},"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@nuxtjs\u002Fseo",[38],[21,140,141],{},"@nuxtjs\u002Fseo"," - 5.3.2",[69,144,145,152],{},[15,146,149],{"href":147,"rel":148},"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fnuxt",[38],[21,150,151],{},"nuxt"," - 4.4.8",[69,154,155,162],{},[15,156,159],{"href":157,"rel":158},"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Ftailwindcss",[38],[21,160,161],{},"tailwindcss"," - 4.3.3",[11,164,165,168,169,171,172,174],{},[166,167,131],"code",{}," は新規追加、あとは以前から使っていたパッケージとなります。",[166,170,141],{}," については v3 から v5 へ、",[166,173,161],{}," は v3 から v4 へとメジャーバージョンを更新しています。",[11,176,177],{},"Cloudflare Pages から Cloudflare Workers への切り替えも検討しましたが、サーバルートをほぼ使わないので機能的にオーバースペックだし、静的なブログサイトであれば事前に全コンテンツを生成しておく SSG の方が表示速度的に良いだろうということで実施しませんでした。お金もかかりそうだし。",[93,179,181],{"id":180},"nuxt-ui-への置き換え","Nuxt UI への置き換え",[11,183,184,185,190,191,196,197,202,203,208,209,214],{},"Nuxt UI は、",[15,186,189],{"href":187,"rel":188},"https:\u002F\u002Fja.vuejs.org\u002F",[38],"Vue.js"," のフレームワークである Nuxt が公式に出しているコンポーネントライブラリ。以前は無料版のものと、有償の Nuxt UI Pro に分かれていましたが、Nuxt を開発している ",[15,192,195],{"href":193,"rel":194},"https:\u002F\u002Fnuxtlabs.com\u002F",[38],"NuxtLabs"," が ",[15,198,201],{"href":199,"rel":200},"https:\u002F\u002Fnextjs.org\u002F",[38],"Next.js"," などを開発する ",[15,204,207],{"href":205,"rel":206},"https:\u002F\u002Fvercel.com\u002F",[38],"Vercel"," への合流を発表したことで、",[15,210,213],{"href":211,"rel":212},"https:\u002F\u002Fnuxt.com\u002Fblog\u002Fnuxt-ui-v4",[38],"Nuxt UI v4 以降では誰でも無料で全てのコンポーネントが利用できる状態"," になっています。",[66,216,217],{},[69,218,219],{},[15,220,222],{"href":55,"rel":221},[38],"The Intuitive Vue UI Library - Nuxt UI",[11,224,225,226,231,232,234,235,238,239,242,243,245,246,248],{},"インストール方法としては他の Nuxt のモジュールと同様で、",[15,227,230],{"href":228,"rel":229},"https:\u002F\u002Fpnpm.io\u002Fja\u002F",[38],"pnpm"," などのパッケージマネージャーを使用して ",[166,233,131],{}," をインストールし、",[166,236,237],{},"nuxt.config.ts"," の ",[166,240,241],{},"modules"," 内に ",[166,244,131],{}," を追加。あとは、Nuxt UI では Tailwind CSS を使用するため、",[166,247,161],{}," のインストールおよびインポートした CSS ファイルの読み込みが必要です。",[250,251,256],"pre",{"className":252,"code":253,"filename":230,"language":254,"meta":255,"style":255},"language-bash shiki shiki-themes material-theme-lighter github-light github-dark","pnpm add -D @nuxt\u002Fui tailwindcss\n","bash","",[166,257,258],{"__ignoreMap":255},[259,260,263,266,270,274,277],"span",{"class":261,"line":262},"line",1,[259,264,230],{"class":265},"sbgvK",[259,267,269],{"class":268},"s_sjI"," add",[259,271,273],{"class":272},"stzsN"," -D",[259,275,276],{"class":268}," @nuxt\u002Fui",[259,278,279],{"class":268}," tailwindcss\n",[250,281,285],{"className":282,"code":283,"filename":237,"language":284,"meta":255,"style":255},"language-typescript shiki shiki-themes material-theme-lighter github-light github-dark","export default defineNuxtConfig({\n  modules: ['@nuxt\u002Fui', '@nuxtjs\u002Fseo', '@nuxt\u002Fcontent'],\n  css: ['~\u002Fassets\u002Fcss\u002Fmain.css'],\n})\n","typescript",[166,286,287,308,353,374],{"__ignoreMap":255},[259,288,289,293,296,300,304],{"class":261,"line":262},[259,290,292],{"class":291},"sVHd0","export",[259,294,295],{"class":291}," default",[259,297,299],{"class":298},"sGLFI"," defineNuxtConfig",[259,301,303],{"class":302},"su5hD","(",[259,305,307],{"class":306},"sP7_E","{\n",[259,309,311,315,318,321,325,327,329,332,335,337,339,341,343,345,347,350],{"class":261,"line":310},2,[259,312,314],{"class":313},"skxfh","  modules",[259,316,317],{"class":306},":",[259,319,320],{"class":302}," [",[259,322,324],{"class":323},"sjJ54","'",[259,326,131],{"class":268},[259,328,324],{"class":323},[259,330,331],{"class":306},",",[259,333,334],{"class":323}," '",[259,336,141],{"class":268},[259,338,324],{"class":323},[259,340,331],{"class":306},[259,342,334],{"class":323},[259,344,121],{"class":268},[259,346,324],{"class":323},[259,348,349],{"class":302},"]",[259,351,352],{"class":306},",\n",[259,354,356,359,361,363,365,368,370,372],{"class":261,"line":355},3,[259,357,358],{"class":313},"  css",[259,360,317],{"class":306},[259,362,320],{"class":302},[259,364,324],{"class":323},[259,366,367],{"class":268},"~\u002Fassets\u002Fcss\u002Fmain.css",[259,369,324],{"class":323},[259,371,349],{"class":302},[259,373,352],{"class":306},[259,375,377,380],{"class":261,"line":376},4,[259,378,379],{"class":306},"}",[259,381,382],{"class":302},")\n",[250,384,389],{"className":385,"code":386,"filename":387,"language":388,"meta":255,"style":255},"language-css shiki shiki-themes material-theme-lighter github-light github-dark","@import 'tailwindcss';\n@import '@nuxt\u002Fui';\n","app\u002Fassets\u002Fcss\u002Fmain.css","css",[166,390,391,405],{"__ignoreMap":255},[259,392,393,396,398,400,402],{"class":261,"line":262},[259,394,395],{"class":291},"@import",[259,397,334],{"class":323},[259,399,161],{"class":268},[259,401,324],{"class":323},[259,403,404],{"class":306},";\n",[259,406,407,409,411,413,415],{"class":261,"line":310},[259,408,395],{"class":291},[259,410,334],{"class":323},[259,412,131],{"class":268},[259,414,324],{"class":323},[259,416,404],{"class":306},[11,418,419,420,443],{},"新規 Nuxt アプリケーションを作成する ",[166,421,422,424,427,430,434,437,440],{"className":252,"language":254,"style":255},[259,423,230],{"class":265},[259,425,426],{"class":268}," create",[259,428,429],{"class":268}," nuxt@latest",[259,431,433],{"class":432},"smGrS"," \u003C",[259,435,436],{"class":268},"project-nam",[259,438,439],{"class":302},"e",[259,441,442],{"class":432},">"," コマンドを実行すると、Nuxt UI の初期設定が済んでいる状態で開発を始めることができるので、こちらで作成するのが分かりやすくて安心でしょう。",[11,445,446,447,450,451,454,455,462,463,470,471,474],{},"モジュールのインストールが終われば、",[166,448,449],{},"app\u002F"," ディレクトリ内の ",[166,452,453],{},".vue"," ファイル内で Nuxt UI のコンポーネントを利用することができます。Nuxt UI のコンポーネントは、",[15,456,459],{"href":457,"rel":458},"https:\u002F\u002Fui.nuxt.com\u002Fdocs\u002Fcomponents\u002Fbutton",[38],[166,460,461],{},"\u003CUButton \u002F>"," や ",[15,464,467],{"href":465,"rel":466},"https:\u002F\u002Fui.nuxt.com\u002Fdocs\u002Fcomponents\u002Finput",[38],[166,468,469],{},"\u003CUInput \u002F>"," のように ",[166,472,473],{},"U"," から始まる名前のもの。100 個以上もある様々なコンポーネントを駆使して、ウェブアプリケーションを構築することができます。",[476,477,478],"h3",{"id":478},"コンポーネントのカスタマイズ",[11,480,481],{},"数々のコンポーネントを備えた Nuxt UI ですが、そのままの状態で使うと「これ Nuxt の公式サイトか…？」って感じの、あまりにも「Nuxt 感」溢れる見た目の画面になってしまうので、カスタマイズは必須です。",[11,483,484,485,488,489,496,497,500],{},"Nuxt UI の見た目をカスタマイズする方法は大きく 2 種類。コンポーネントを使用する際に ",[166,486,487],{},":ui"," Props を渡す方法と、",[15,490,493],{"href":491,"rel":492},"https:\u002F\u002Fnuxt.com\u002Fdocs\u002Fdirectory-structure\u002Fapp\u002Fapp-config",[38],[166,494,495],{},"app.config.ts"," ファイルの ",[166,498,499],{},"ui"," プロパティ内に設定を記述する方法です。どちらも Tailwind CSS のクラスを記述することで見た目をカスタマイズする仕組みになっていて、前者は個別に調整したい場合に、後者はまとめて調整したい場合に利用します。",[11,502,503,504,509],{},"たとえば、ボタンのコンポーネント ",[15,505,507],{"href":457,"rel":506},[38],[166,508,461],{}," のカスタマイズをしたい、とします。コンポーネントを使うときに「ここのボタンだけ文字を太字にしたいな」というときには、以下のようにクラスを渡します。",[250,511,515],{"className":512,"code":513,"language":514,"meta":255,"style":255},"language-vue shiki shiki-themes material-theme-lighter github-light github-dark","\u003CUButton :ui=\"{ base: 'font-bold' }\" \u002F>\n","vue",[166,516,517],{"__ignoreMap":255},[259,518,519,522,526,529,532,535,538,541,544,546,548,551,553,556,558],{"class":261,"line":262},[259,520,521],{"class":306},"\u003C",[259,523,525],{"class":524},"sQzsp","UButton",[259,527,528],{"class":306}," :",[259,530,499],{"class":531},"s9AJx",[259,533,534],{"class":306},"=",[259,536,537],{"class":323},"\"",[259,539,540],{"class":306},"{",[259,542,543],{"class":313}," base",[259,545,317],{"class":306},[259,547,334],{"class":323},[259,549,550],{"class":268},"font-bold",[259,552,324],{"class":323},[259,554,555],{"class":306}," }",[259,557,537],{"class":323},[259,559,560],{"class":306}," \u002F>\n",[11,562,563,566,567,570,571,573,574,576,577,579,580,462,583,586],{},[166,564,565],{},"base"," というのはクラスを付与する要素のことで、ブラウザのデベロッパーツールで DOM の様子を覗いてみると、",[166,568,569],{},"data-slot=\"base\""," という属性が付いている要素に ",[166,572,550],{}," クラスが付与されていることが確認できます。",[166,575,461],{}," では ",[166,578,565],{}," の他にも、",[166,581,582],{},"label",[166,584,585],{},"leadingIcon"," といった要素にクラスを付与することができるようになっています。",[11,588,589,590,592,593,595,596,599,600,602],{},"このように、",[166,591,487],{}," Props に Tailwind CSS のクラスを渡して個別に見た目をカスタマイズすることが可能となっていますが、たとえば「",[166,594,461],{}," を使うときには必ず ",[166,597,598],{},"cursor-pointer"," を付けたい」みたいに、共通化したいということが多々あります。そのようなときには ",[166,601,495],{}," に設定を記述して対応します。",[250,604,608],{"className":605,"code":606,"filename":495,"language":607,"meta":255,"style":255},"language-ts shiki shiki-themes material-theme-lighter github-light github-dark","export default defineAppConfig({\n  ui: {\n    button: {\n      slots: { base: 'cursor-pointer' },\n    },\n  }\n})\n","ts",[166,609,610,623,633,642,665,671,677],{"__ignoreMap":255},[259,611,612,614,616,619,621],{"class":261,"line":262},[259,613,292],{"class":291},[259,615,295],{"class":291},[259,617,618],{"class":298}," defineAppConfig",[259,620,303],{"class":302},[259,622,307],{"class":306},[259,624,625,628,630],{"class":261,"line":310},[259,626,627],{"class":313},"  ui",[259,629,317],{"class":306},[259,631,632],{"class":306}," {\n",[259,634,635,638,640],{"class":261,"line":355},[259,636,637],{"class":313},"    button",[259,639,317],{"class":306},[259,641,632],{"class":306},[259,643,644,647,649,652,654,656,658,660,662],{"class":261,"line":376},[259,645,646],{"class":313},"      slots",[259,648,317],{"class":306},[259,650,651],{"class":306}," {",[259,653,543],{"class":313},[259,655,317],{"class":306},[259,657,334],{"class":323},[259,659,598],{"class":268},[259,661,324],{"class":323},[259,663,664],{"class":306}," },\n",[259,666,668],{"class":261,"line":667},5,[259,669,670],{"class":306},"    },\n",[259,672,674],{"class":261,"line":673},6,[259,675,676],{"class":306},"  }\n",[259,678,680,682],{"class":261,"line":679},7,[259,681,379],{"class":306},[259,683,382],{"class":302},[11,685,686,687,689,690,692,693,695,696,698],{},"上記のコードを追加すると、",[166,688,461],{}," を使ったときに ",[166,691,565],{}," の要素に ",[166,694,598],{}," が付与されるようになります。ボタンコンポーネントに最初から ",[166,697,598],{}," が設定されてないのは謎ですが…。ボタンにカーソルを合わせたときに見た目を変化させたくない人が多数派なのか…？",[11,700,701,702,704,705,707,708,710,711,714,715,717,718,721],{},"適用されるクラスの優先順位は、「",[166,703,487],{}," Props で渡したクラス」が最も優先され、次に「",[166,706,495],{}," で設定したクラス」、最後が「デフォルトのクラス」です。",[166,709,495],{}," 側で ",[166,712,713],{},"bg-white"," を指定していても、",[166,716,487],{}," Props で ",[166,719,720],{},"bg-black"," を渡していたら黒色になります。",[11,723,724,725,727,728,730,731,734,735,738],{},"また、コンポーネントには ",[166,726,487],{}," Props の他にも、動作を制御するための様々な Props が用意されています。先ほどの例で挙げた ",[166,729,461],{}," だと、ボタンのサイズを指定する ",[166,732,733],{},"size"," Props や、ボタン内にアイコンを表示するための ",[166,736,737],{},"icon"," Props などです。",[11,740,741,743,744,196,746,749,750,752,753,755],{},[166,742,495],{}," で見た目をカスタマイズする場合には、特定の状態のときにのみ適用するクラスを設定することもできます。たとえば、",[166,745,733],{},[166,747,748],{},"xs"," の場合にのみ ",[166,751,565],{}," 要素に ",[166,754,550],{}," を付与したい、という場合には、以下のように記述できます。",[250,757,759],{"className":605,"code":758,"filename":495,"language":607,"meta":255,"style":255},"export default defineAppConfig({\n  ui: {\n    button: {\n      variants: {\n        size: {\n          xs: { base: 'font-bold' },\n        }\n      },\n    },\n  }\n})\n",[166,760,761,773,781,789,798,807,828,833,839,844,849],{"__ignoreMap":255},[259,762,763,765,767,769,771],{"class":261,"line":262},[259,764,292],{"class":291},[259,766,295],{"class":291},[259,768,618],{"class":298},[259,770,303],{"class":302},[259,772,307],{"class":306},[259,774,775,777,779],{"class":261,"line":310},[259,776,627],{"class":313},[259,778,317],{"class":306},[259,780,632],{"class":306},[259,782,783,785,787],{"class":261,"line":355},[259,784,637],{"class":313},[259,786,317],{"class":306},[259,788,632],{"class":306},[259,790,791,794,796],{"class":261,"line":376},[259,792,793],{"class":313},"      variants",[259,795,317],{"class":306},[259,797,632],{"class":306},[259,799,800,803,805],{"class":261,"line":667},[259,801,802],{"class":313},"        size",[259,804,317],{"class":306},[259,806,632],{"class":306},[259,808,809,812,814,816,818,820,822,824,826],{"class":261,"line":673},[259,810,811],{"class":313},"          xs",[259,813,317],{"class":306},[259,815,651],{"class":306},[259,817,543],{"class":313},[259,819,317],{"class":306},[259,821,334],{"class":323},[259,823,550],{"class":268},[259,825,324],{"class":323},[259,827,664],{"class":306},[259,829,830],{"class":261,"line":679},[259,831,832],{"class":306},"        }\n",[259,834,836],{"class":261,"line":835},8,[259,837,838],{"class":306},"      },\n",[259,840,842],{"class":261,"line":841},9,[259,843,670],{"class":306},[259,845,847],{"class":261,"line":846},10,[259,848,676],{"class":306},[259,850,852,854],{"class":261,"line":851},11,[259,853,379],{"class":306},[259,855,382],{"class":302},[11,857,858,859,196,862,865,866,196,869,872,873,875],{},"複雑な条件の場合も設定が可能で、たとえば「",[166,860,861],{},"color",[166,863,864],{},"primary","」かつ「",[166,867,868],{},"variant",[166,870,871],{},"outline","」の場合にのみ ",[166,874,550],{}," を付与したい、という場合には、以下のようになります。",[250,877,879],{"className":605,"code":878,"filename":495,"language":607,"meta":255,"style":255},"export default defineAppConfig({\n  ui: {\n    button: {\n      compoundVariants: [\n        { color: 'primary', variant: 'outline', class: 'font-bold' },\n      ],\n    },\n  }\n})\n",[166,880,881,893,901,909,919,963,970,974,978],{"__ignoreMap":255},[259,882,883,885,887,889,891],{"class":261,"line":262},[259,884,292],{"class":291},[259,886,295],{"class":291},[259,888,618],{"class":298},[259,890,303],{"class":302},[259,892,307],{"class":306},[259,894,895,897,899],{"class":261,"line":310},[259,896,627],{"class":313},[259,898,317],{"class":306},[259,900,632],{"class":306},[259,902,903,905,907],{"class":261,"line":355},[259,904,637],{"class":313},[259,906,317],{"class":306},[259,908,632],{"class":306},[259,910,911,914,916],{"class":261,"line":376},[259,912,913],{"class":313},"      compoundVariants",[259,915,317],{"class":306},[259,917,918],{"class":302}," [\n",[259,920,921,924,927,929,931,933,935,937,940,942,944,946,948,950,953,955,957,959,961],{"class":261,"line":667},[259,922,923],{"class":306},"        {",[259,925,926],{"class":313}," color",[259,928,317],{"class":306},[259,930,334],{"class":323},[259,932,864],{"class":268},[259,934,324],{"class":323},[259,936,331],{"class":306},[259,938,939],{"class":313}," variant",[259,941,317],{"class":306},[259,943,334],{"class":323},[259,945,871],{"class":268},[259,947,324],{"class":323},[259,949,331],{"class":306},[259,951,952],{"class":313}," class",[259,954,317],{"class":306},[259,956,334],{"class":323},[259,958,550],{"class":268},[259,960,324],{"class":323},[259,962,664],{"class":306},[259,964,965,968],{"class":261,"line":673},[259,966,967],{"class":302},"      ]",[259,969,352],{"class":306},[259,971,972],{"class":261,"line":679},[259,973,670],{"class":306},[259,975,976],{"class":261,"line":835},[259,977,676],{"class":306},[259,979,980,982],{"class":261,"line":841},[259,981,379],{"class":306},[259,983,382],{"class":302},[11,985,986,987,989],{},"これらの ",[166,988,495],{}," で設定できる項目は、Nuxt UI のドキュメント内の各コンポーネントのページの下の方に「Theme」として載っている（デフォルトの値も書いてある）ので、この部分をひたすらに読みながらカスタマイズをしていくことになります。",[11,991,992,993,995,996,998,999,1001],{},"が、個人的には、いきなり ",[166,994,495],{}," に設定を書かなくても、とりあえず ",[166,997,487],{}," Props に渡せば見た目を変更することはできるので、まずは個別に調整していって、2 回以上同じコンポーネントを使うようであればそのタイミングで「",[166,1000,495],{}," に設定を移して共通化できないかな？」と考えるのが良いのではないかな？と思いました。",[476,1003,1004],{"id":1004},"苦労したところ",[11,1006,1007],{},"とりあえずざっくりと Nuxt UI の使い方について書きましたが、ここからは実際に Nuxt UI を使って「Hiratake Web」の中身を書き直したときに苦労した点について書き殴っていこうと思います。",[1009,1010,1011],"h4",{"id":1011},"デフォルトで付与されているクラスの癖が強すぎる",[11,1013,1014,1015,1022],{},"なんといってもコレ。Nuxt の公式サイトや、関連モジュールのドキュメントサイトなどを構築することに最適化されすぎている感がすごい。個人的に一番「それはあまりにもあんたらの都合すぎるだろ！」なスタイリングすぎて発狂したのは ",[15,1016,1019],{"href":1017,"rel":1018},"https:\u002F\u002Fui.nuxt.com\u002Fdocs\u002Fcomponents\u002Ffooter",[38],[166,1020,1021],{},"\u003CUFooter \u002F>"," で、ドキュメントに掲載されているデフォルトのテーマは以下の通り。",[250,1024,1026],{"className":605,"code":1025,"filename":495,"language":607,"meta":255,"style":255},"export default defineAppConfig({\n  ui: {\n    footer: {\n      slots: {\n        root: '',\n        top: 'py-8 lg:py-12',\n        bottom: 'py-8 lg:py-12',\n        container:\n          'py-8 lg:py-4 lg:flex lg:items-center lg:justify-between lg:gap-x-3',\n        left:\n          'flex items-center justify-center lg:justify-start lg:flex-1 gap-x-1.5 mt-3 lg:mt-0 lg:order-1',\n        center:\n          'mt-3 lg:mt-0 lg:order-2 flex items-center justify-center',\n        right:\n          'lg:flex-1 flex items-center justify-center lg:justify-end gap-x-1.5 lg:order-3'\n      }\n    }\n  }\n})\n",[166,1027,1028,1040,1048,1057,1065,1077,1093,1108,1116,1128,1135,1146,1154,1166,1174,1185,1191,1197,1202],{"__ignoreMap":255},[259,1029,1030,1032,1034,1036,1038],{"class":261,"line":262},[259,1031,292],{"class":291},[259,1033,295],{"class":291},[259,1035,618],{"class":298},[259,1037,303],{"class":302},[259,1039,307],{"class":306},[259,1041,1042,1044,1046],{"class":261,"line":310},[259,1043,627],{"class":313},[259,1045,317],{"class":306},[259,1047,632],{"class":306},[259,1049,1050,1053,1055],{"class":261,"line":355},[259,1051,1052],{"class":313},"    footer",[259,1054,317],{"class":306},[259,1056,632],{"class":306},[259,1058,1059,1061,1063],{"class":261,"line":376},[259,1060,646],{"class":313},[259,1062,317],{"class":306},[259,1064,632],{"class":306},[259,1066,1067,1070,1072,1075],{"class":261,"line":667},[259,1068,1069],{"class":313},"        root",[259,1071,317],{"class":306},[259,1073,1074],{"class":323}," ''",[259,1076,352],{"class":306},[259,1078,1079,1082,1084,1086,1089,1091],{"class":261,"line":673},[259,1080,1081],{"class":313},"        top",[259,1083,317],{"class":306},[259,1085,334],{"class":323},[259,1087,1088],{"class":268},"py-8 lg:py-12",[259,1090,324],{"class":323},[259,1092,352],{"class":306},[259,1094,1095,1098,1100,1102,1104,1106],{"class":261,"line":679},[259,1096,1097],{"class":313},"        bottom",[259,1099,317],{"class":306},[259,1101,334],{"class":323},[259,1103,1088],{"class":268},[259,1105,324],{"class":323},[259,1107,352],{"class":306},[259,1109,1110,1113],{"class":261,"line":835},[259,1111,1112],{"class":313},"        container",[259,1114,1115],{"class":306},":\n",[259,1117,1118,1121,1124,1126],{"class":261,"line":841},[259,1119,1120],{"class":323},"          '",[259,1122,1123],{"class":268},"py-8 lg:py-4 lg:flex lg:items-center lg:justify-between lg:gap-x-3",[259,1125,324],{"class":323},[259,1127,352],{"class":306},[259,1129,1130,1133],{"class":261,"line":846},[259,1131,1132],{"class":313},"        left",[259,1134,1115],{"class":306},[259,1136,1137,1139,1142,1144],{"class":261,"line":851},[259,1138,1120],{"class":323},[259,1140,1141],{"class":268},"flex items-center justify-center lg:justify-start lg:flex-1 gap-x-1.5 mt-3 lg:mt-0 lg:order-1",[259,1143,324],{"class":323},[259,1145,352],{"class":306},[259,1147,1149,1152],{"class":261,"line":1148},12,[259,1150,1151],{"class":313},"        center",[259,1153,1115],{"class":306},[259,1155,1157,1159,1162,1164],{"class":261,"line":1156},13,[259,1158,1120],{"class":323},[259,1160,1161],{"class":268},"mt-3 lg:mt-0 lg:order-2 flex items-center justify-center",[259,1163,324],{"class":323},[259,1165,352],{"class":306},[259,1167,1169,1172],{"class":261,"line":1168},14,[259,1170,1171],{"class":313},"        right",[259,1173,1115],{"class":306},[259,1175,1177,1179,1182],{"class":261,"line":1176},15,[259,1178,1120],{"class":323},[259,1180,1181],{"class":268},"lg:flex-1 flex items-center justify-center lg:justify-end gap-x-1.5 lg:order-3",[259,1183,1184],{"class":323},"'\n",[259,1186,1188],{"class":261,"line":1187},16,[259,1189,1190],{"class":306},"      }\n",[259,1192,1194],{"class":261,"line":1193},17,[259,1195,1196],{"class":306},"    }\n",[259,1198,1200],{"class":261,"line":1199},18,[259,1201,676],{"class":306},[259,1203,1205,1207],{"class":261,"line":1204},19,[259,1206,379],{"class":306},[259,1208,382],{"class":302},[11,1210,1211,1212,1215,1216,1219,1220,1223],{},"どうしてデフォルトで ",[166,1213,1214],{},"lg:order-1"," とか ",[166,1217,1218],{},"lg:order-2"," とかが付いているんでしょう…？なんか並び順がうまいこといかないな…と思ってよく見たら ",[166,1221,1222],{},"order-*"," で指定されてました。",[11,1225,1226,1227,1230,1231,1234,1235,1237,1238,1240,1241,1243,1244,1246,1247,1249],{},"要素も ",[166,1228,1229],{},"right"," → ",[166,1232,1233],{},"left"," の順に格納されていて、画面の幅が狭いときは ",[166,1236,1229],{}," の要素が上、",[166,1239,1233],{}," の要素が下に表示されます。幅が広いときには ",[166,1242,1222],{}," の指定が効いて、",[166,1245,1229],{}," が右へ、",[166,1248,1233],{}," が左へ、と正しい位置に配置されるようになっていました。",[11,1251,1252,1253,1256,1257,1260,1261,1264,1265,1267,1268,1271,1272,1246,1274,1276],{},"「Hiratake Web」では、",[166,1254,1255],{},"md"," の幅で縦積みと横並びを切り替えたかったので、",[166,1258,1259],{},"lg:flex"," を ",[166,1262,1263],{},"md:flex"," へ上書きしたのですが、すると ",[166,1266,1255],{}," と ",[166,1269,1270],{},"lg"," の間でだけ ",[166,1273,1233],{},[166,1275,1229],{}," が左へ行ってしまい、意味不明すぎて時間を溶かしました。",[11,1278,1279],{},"カスタマイズをするときは、もう「デフォルトのクラスを全部上書きしてやるぜ！」くらいの勢いでやったほうがうまくいくかもしれません。",[1009,1281,1283],{"id":1282},"nuxt-content-との統合","Nuxt Content との統合",[11,1285,1286,1287,1292,1293,1298,1299,462,1306,1313],{},"Nuxt 公式のモジュールである Nuxt UI には、同じく公式から提供されている Git ベースのコンテンツ管理システム ",[15,1288,1291],{"href":1289,"rel":1290},"https:\u002F\u002Fcontent.nuxt.com\u002F",[38],"Nuxt Content"," 用のコンポーネントも内蔵。Nuxt Content にも存在している ",[15,1294,1297],{"href":1295,"rel":1296},"https:\u002F\u002Fcontent.nuxt.com\u002Fdocs\u002Fcomponents\u002Fprose",[38],"Prose コンポーネント","（見出しや段落、引用やコードブロックなど、Markdown 形式に含まれる要素のコンポーネント）にそれぞれ Nuxt UI 独自のデフォルトスタイルが適用されているほか、",[15,1300,1303],{"href":1301,"rel":1302},"https:\u002F\u002Fui.nuxt.com\u002Fdocs\u002Ftypography\u002Faccordion",[38],[166,1304,1305],{},"Accordion",[15,1307,1310],{"href":1308,"rel":1309},"https:\u002F\u002Fui.nuxt.com\u002Fdocs\u002Ftypography\u002Fbadge",[38],[166,1311,1312],{},"Badge"," など独自のコンポーネントも追加されています。",[11,1315,1316,1317,1319],{},"これらは他の Nuxt UI のコンポーネントと同様に ",[166,1318,495],{}," にてスタイルを変更することが可能です。",[250,1321,1323],{"className":605,"code":1322,"filename":495,"language":607,"meta":255,"style":255},"export default defineAppConfig({\n  ui: {\n    prose: {\n      h2: {\n        slots: { base: '', leading: '' },\n      },\n      h3: {\n        slots: { base: '', leading: '' },\n      },\n      \u002F\u002F ...\n    },\n  }\n})\n",[166,1324,1325,1337,1345,1354,1363,1389,1393,1402,1426,1430,1436,1440,1444],{"__ignoreMap":255},[259,1326,1327,1329,1331,1333,1335],{"class":261,"line":262},[259,1328,292],{"class":291},[259,1330,295],{"class":291},[259,1332,618],{"class":298},[259,1334,303],{"class":302},[259,1336,307],{"class":306},[259,1338,1339,1341,1343],{"class":261,"line":310},[259,1340,627],{"class":313},[259,1342,317],{"class":306},[259,1344,632],{"class":306},[259,1346,1347,1350,1352],{"class":261,"line":355},[259,1348,1349],{"class":313},"    prose",[259,1351,317],{"class":306},[259,1353,632],{"class":306},[259,1355,1356,1359,1361],{"class":261,"line":376},[259,1357,1358],{"class":313},"      h2",[259,1360,317],{"class":306},[259,1362,632],{"class":306},[259,1364,1365,1368,1370,1372,1374,1376,1378,1380,1383,1385,1387],{"class":261,"line":667},[259,1366,1367],{"class":313},"        slots",[259,1369,317],{"class":306},[259,1371,651],{"class":306},[259,1373,543],{"class":313},[259,1375,317],{"class":306},[259,1377,1074],{"class":323},[259,1379,331],{"class":306},[259,1381,1382],{"class":313}," leading",[259,1384,317],{"class":306},[259,1386,1074],{"class":323},[259,1388,664],{"class":306},[259,1390,1391],{"class":261,"line":673},[259,1392,838],{"class":306},[259,1394,1395,1398,1400],{"class":261,"line":679},[259,1396,1397],{"class":313},"      h3",[259,1399,317],{"class":306},[259,1401,632],{"class":306},[259,1403,1404,1406,1408,1410,1412,1414,1416,1418,1420,1422,1424],{"class":261,"line":835},[259,1405,1367],{"class":313},[259,1407,317],{"class":306},[259,1409,651],{"class":306},[259,1411,543],{"class":313},[259,1413,317],{"class":306},[259,1415,1074],{"class":323},[259,1417,331],{"class":306},[259,1419,1382],{"class":313},[259,1421,317],{"class":306},[259,1423,1074],{"class":323},[259,1425,664],{"class":306},[259,1427,1428],{"class":261,"line":841},[259,1429,838],{"class":306},[259,1431,1432],{"class":261,"line":846},[259,1433,1435],{"class":1434},"sutJx","      \u002F\u002F ...\n",[259,1437,1438],{"class":261,"line":851},[259,1439,670],{"class":306},[259,1441,1442],{"class":261,"line":1148},[259,1443,676],{"class":306},[259,1445,1446,1448],{"class":261,"line":1156},[259,1447,379],{"class":306},[259,1449,382],{"class":302},[11,1451,1452],{},"私は Nuxt Content 自体はずっと使ってきていたので、当然 Prose コンポーネントも触ったことがあるし、スタイルを変更して使うということもやってきていたのですが、Nuxt UI での Prose コンポーネントのカスタマイズに少し苦戦しました。",[11,1454,1455,1456,1459,1460,462,1463,1466,1467,1474,1475,1480],{},"標準の Nuxt Content では、",[166,1457,1458],{},"app\u002Fcomponents\u002Fcontent\u002F"," に ",[166,1461,1462],{},"ProseH2.vue",[166,1464,1465],{},"ProseA.vue"," のようなコンポーネントのファイルを作成するとデフォルトのコンポーネントが上書きされます。そしてそれは Nuxt UI と統合した場合でも同じなのですが、Nuxt UI の Prose コンポーネントは高機能で、たとえば ",[15,1468,1471],{"href":1469,"rel":1470},"https:\u002F\u002Fui.nuxt.com\u002Fdocs\u002Ftypography\u002Fimages-and-embeds",[38],[166,1472,1473],{},"\u003CProseImg \u002F>"," という画像を表示するコンポーネントでは公式モジュールである ",[15,1476,1479],{"href":1477,"rel":1478},"https:\u002F\u002Fimage.nuxt.com\u002F",[38],"Nuxt Image"," による最適化が行われます。",[11,1482,1483],{},"これまでであれば、ほとんどスタイルの当たっていないシンプルな Prose コンポーネントのソースコードをそのまま持ってきて必要な部分だけ書き換えて使っていたのですが、Nuxt UI の Prose コンポーネントの場合はそうもいきません。",[250,1485,1488],{"className":512,"code":1486,"filename":1487,"language":514,"meta":255,"style":255},"\u003Cscript lang=\"ts\" setup>\nimport type { ProseImgProps as UProseImgProps } from '#ui\u002Fcomponents\u002Fprose\u002FImg.vue'\nimport UProseImg from '#ui\u002Fcomponents\u002Fprose\u002FImg.vue'\n\ntype ProseImgProps = UProseImgProps\n\nconst props = withDefaults(defineProps\u003CProseImgProps>(), {\n  width: 1536,\n  height: 864,\n  zoom: true,\n})\n\nconst config = useRuntimeConfig()\nconst site = useSiteConfig()\n\n\u002F** 画像のURL *\u002F\nconst imgUrl = computed(() => {\n  const baseUrl = `${site.url}\u002Fcdn-cgi\u002Fimagedelivery\u002F${config.public.cloudflareImageHash}\u002F${props.src}`\n  const generatedSrcset = {\n    320: `${baseUrl}\u002Fw=320`,\n    640: `${baseUrl}\u002Fw=640`,\n    768: `${baseUrl}\u002Fw=768`,\n    1024: `${baseUrl}\u002Fw=1024`,\n    1280: `${baseUrl}\u002Fw=1280`,\n    1536: `${baseUrl}\u002Fw=1536`,\n  }\n  return {\n    src: generatedSrcset[1536],\n    srcset: `\n      ${generatedSrcset[320]} 320w,\n      ${generatedSrcset[640]} 640w,\n      ${generatedSrcset[768]} 768w,\n      ${generatedSrcset[1024]} 1024w,\n      ${generatedSrcset[1280]} 1280w,\n      ${generatedSrcset[1536]} 1536w,\n    `,\n  }\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CUProseImg\n    :alt=\"props.alt\"\n    :class=\"props.class\"\n    :height=\"props.height\"\n    :src=\"imgUrl.src\"\n    :srcset=\"imgUrl.srcset\"\n    :ui=\"props.ui\"\n    :width=\"props.width\"\n    :zoom=\"props.zoom\"\n    decoding=\"async\"\n    loading=\"lazy\"\n    sizes=\"(max-width: 768px) calc(100vw - 48px), 768px\"\n  \u002F>\n\u003C\u002Ftemplate>\n","app\u002Fcomponents\u002Fcontent\u002FProseImg.vue",[166,1489,1490,1514,1545,1561,1567,1581,1585,1618,1631,1643,1656,1662,1666,1681,1695,1699,1704,1725,1785,1796,1819,1840,1861,1882,1903,1924,1929,1937,1957,1968,1990,2009,2028,2047,2066,2084,2092,2097,2104,2114,2119,2129,2138,2160,2180,2200,2220,2240,2259,2279,2299,2314,2329,2344,2350],{"__ignoreMap":255},[259,1491,1492,1494,1497,1500,1502,1504,1506,1508,1511],{"class":261,"line":262},[259,1493,521],{"class":306},[259,1495,1496],{"class":524},"script",[259,1498,1499],{"class":531}," lang",[259,1501,534],{"class":306},[259,1503,537],{"class":323},[259,1505,607],{"class":268},[259,1507,537],{"class":323},[259,1509,1510],{"class":531}," setup",[259,1512,1513],{"class":306},">\n",[259,1515,1516,1519,1522,1524,1527,1530,1533,1535,1538,1540,1543],{"class":261,"line":310},[259,1517,1518],{"class":291},"import",[259,1520,1521],{"class":291}," type",[259,1523,651],{"class":306},[259,1525,1526],{"class":302}," ProseImgProps",[259,1528,1529],{"class":291}," as",[259,1531,1532],{"class":302}," UProseImgProps",[259,1534,555],{"class":306},[259,1536,1537],{"class":291}," from",[259,1539,334],{"class":323},[259,1541,1542],{"class":268},"#ui\u002Fcomponents\u002Fprose\u002FImg.vue",[259,1544,1184],{"class":323},[259,1546,1547,1549,1552,1555,1557,1559],{"class":261,"line":355},[259,1548,1518],{"class":291},[259,1550,1551],{"class":302}," UProseImg ",[259,1553,1554],{"class":291},"from",[259,1556,334],{"class":323},[259,1558,1542],{"class":268},[259,1560,1184],{"class":323},[259,1562,1563],{"class":261,"line":376},[259,1564,1566],{"emptyLinePlaceholder":1565},true,"\n",[259,1568,1569,1573,1575,1578],{"class":261,"line":667},[259,1570,1572],{"class":1571},"sbsja","type",[259,1574,1526],{"class":265},[259,1576,1577],{"class":432}," =",[259,1579,1580],{"class":265}," UProseImgProps\n",[259,1582,1583],{"class":261,"line":673},[259,1584,1566],{"emptyLinePlaceholder":1565},[259,1586,1587,1590,1594,1596,1599,1601,1604,1606,1609,1611,1614,1616],{"class":261,"line":679},[259,1588,1589],{"class":1571},"const",[259,1591,1593],{"class":1592},"s_hVV"," props",[259,1595,1577],{"class":432},[259,1597,1598],{"class":298}," withDefaults",[259,1600,303],{"class":302},[259,1602,1603],{"class":298},"defineProps",[259,1605,521],{"class":306},[259,1607,1608],{"class":265},"ProseImgProps",[259,1610,442],{"class":306},[259,1612,1613],{"class":302},"()",[259,1615,331],{"class":306},[259,1617,632],{"class":306},[259,1619,1620,1623,1625,1629],{"class":261,"line":835},[259,1621,1622],{"class":313},"  width",[259,1624,317],{"class":306},[259,1626,1628],{"class":1627},"srdBf"," 1536",[259,1630,352],{"class":306},[259,1632,1633,1636,1638,1641],{"class":261,"line":841},[259,1634,1635],{"class":313},"  height",[259,1637,317],{"class":306},[259,1639,1640],{"class":1627}," 864",[259,1642,352],{"class":306},[259,1644,1645,1648,1650,1654],{"class":261,"line":846},[259,1646,1647],{"class":313},"  zoom",[259,1649,317],{"class":306},[259,1651,1653],{"class":1652},"syTEX"," true",[259,1655,352],{"class":306},[259,1657,1658,1660],{"class":261,"line":851},[259,1659,379],{"class":306},[259,1661,382],{"class":302},[259,1663,1664],{"class":261,"line":1148},[259,1665,1566],{"emptyLinePlaceholder":1565},[259,1667,1668,1670,1673,1675,1678],{"class":261,"line":1156},[259,1669,1589],{"class":1571},[259,1671,1672],{"class":1592}," config",[259,1674,1577],{"class":432},[259,1676,1677],{"class":298}," useRuntimeConfig",[259,1679,1680],{"class":302},"()\n",[259,1682,1683,1685,1688,1690,1693],{"class":261,"line":1168},[259,1684,1589],{"class":1571},[259,1686,1687],{"class":1592}," site",[259,1689,1577],{"class":432},[259,1691,1692],{"class":298}," useSiteConfig",[259,1694,1680],{"class":302},[259,1696,1697],{"class":261,"line":1176},[259,1698,1566],{"emptyLinePlaceholder":1565},[259,1700,1701],{"class":261,"line":1187},[259,1702,1703],{"class":1434},"\u002F** 画像のURL *\u002F\n",[259,1705,1706,1708,1711,1713,1716,1718,1720,1723],{"class":261,"line":1193},[259,1707,1589],{"class":1571},[259,1709,1710],{"class":1592}," imgUrl",[259,1712,1577],{"class":432},[259,1714,1715],{"class":298}," computed",[259,1717,303],{"class":302},[259,1719,1613],{"class":306},[259,1721,1722],{"class":1571}," =>",[259,1724,632],{"class":306},[259,1726,1727,1730,1733,1735,1738,1741,1744,1747,1749,1752,1755,1758,1760,1763,1765,1768,1770,1772,1774,1777,1779,1782],{"class":261,"line":1199},[259,1728,1729],{"class":1571},"  const",[259,1731,1732],{"class":1592}," baseUrl",[259,1734,1577],{"class":432},[259,1736,1737],{"class":323}," `${",[259,1739,1740],{"class":302},"site",[259,1742,1743],{"class":323},".",[259,1745,1746],{"class":302},"url",[259,1748,379],{"class":323},[259,1750,1751],{"class":268},"\u002Fcdn-cgi\u002Fimagedelivery\u002F",[259,1753,1754],{"class":323},"${",[259,1756,1757],{"class":302},"config",[259,1759,1743],{"class":323},[259,1761,1762],{"class":302},"public",[259,1764,1743],{"class":323},[259,1766,1767],{"class":302},"cloudflareImageHash",[259,1769,379],{"class":323},[259,1771,17],{"class":268},[259,1773,1754],{"class":323},[259,1775,1776],{"class":302},"props",[259,1778,1743],{"class":323},[259,1780,1781],{"class":302},"src",[259,1783,1784],{"class":323},"}`\n",[259,1786,1787,1789,1792,1794],{"class":261,"line":1204},[259,1788,1729],{"class":1571},[259,1790,1791],{"class":1592}," generatedSrcset",[259,1793,1577],{"class":432},[259,1795,632],{"class":306},[259,1797,1799,1802,1804,1806,1809,1811,1814,1817],{"class":261,"line":1798},20,[259,1800,1801],{"class":1627},"    320",[259,1803,317],{"class":306},[259,1805,1737],{"class":323},[259,1807,1808],{"class":302},"baseUrl",[259,1810,379],{"class":323},[259,1812,1813],{"class":268},"\u002Fw=320",[259,1815,1816],{"class":323},"`",[259,1818,352],{"class":306},[259,1820,1822,1825,1827,1829,1831,1833,1836,1838],{"class":261,"line":1821},21,[259,1823,1824],{"class":1627},"    640",[259,1826,317],{"class":306},[259,1828,1737],{"class":323},[259,1830,1808],{"class":302},[259,1832,379],{"class":323},[259,1834,1835],{"class":268},"\u002Fw=640",[259,1837,1816],{"class":323},[259,1839,352],{"class":306},[259,1841,1843,1846,1848,1850,1852,1854,1857,1859],{"class":261,"line":1842},22,[259,1844,1845],{"class":1627},"    768",[259,1847,317],{"class":306},[259,1849,1737],{"class":323},[259,1851,1808],{"class":302},[259,1853,379],{"class":323},[259,1855,1856],{"class":268},"\u002Fw=768",[259,1858,1816],{"class":323},[259,1860,352],{"class":306},[259,1862,1864,1867,1869,1871,1873,1875,1878,1880],{"class":261,"line":1863},23,[259,1865,1866],{"class":1627},"    1024",[259,1868,317],{"class":306},[259,1870,1737],{"class":323},[259,1872,1808],{"class":302},[259,1874,379],{"class":323},[259,1876,1877],{"class":268},"\u002Fw=1024",[259,1879,1816],{"class":323},[259,1881,352],{"class":306},[259,1883,1885,1888,1890,1892,1894,1896,1899,1901],{"class":261,"line":1884},24,[259,1886,1887],{"class":1627},"    1280",[259,1889,317],{"class":306},[259,1891,1737],{"class":323},[259,1893,1808],{"class":302},[259,1895,379],{"class":323},[259,1897,1898],{"class":268},"\u002Fw=1280",[259,1900,1816],{"class":323},[259,1902,352],{"class":306},[259,1904,1906,1909,1911,1913,1915,1917,1920,1922],{"class":261,"line":1905},25,[259,1907,1908],{"class":1627},"    1536",[259,1910,317],{"class":306},[259,1912,1737],{"class":323},[259,1914,1808],{"class":302},[259,1916,379],{"class":323},[259,1918,1919],{"class":268},"\u002Fw=1536",[259,1921,1816],{"class":323},[259,1923,352],{"class":306},[259,1925,1927],{"class":261,"line":1926},26,[259,1928,676],{"class":306},[259,1930,1932,1935],{"class":261,"line":1931},27,[259,1933,1934],{"class":291},"  return",[259,1936,632],{"class":306},[259,1938,1940,1943,1945,1947,1950,1953,1955],{"class":261,"line":1939},28,[259,1941,1942],{"class":313},"    src",[259,1944,317],{"class":306},[259,1946,1791],{"class":302},[259,1948,1949],{"class":313},"[",[259,1951,1952],{"class":1627},"1536",[259,1954,349],{"class":313},[259,1956,352],{"class":306},[259,1958,1960,1963,1965],{"class":261,"line":1959},29,[259,1961,1962],{"class":313},"    srcset",[259,1964,317],{"class":306},[259,1966,1967],{"class":323}," `\n",[259,1969,1971,1974,1977,1980,1983,1985,1987],{"class":261,"line":1970},30,[259,1972,1973],{"class":323},"      ${",[259,1975,1976],{"class":302},"generatedSrcset",[259,1978,1949],{"class":1979},"sfo-9",[259,1981,1982],{"class":1627},"320",[259,1984,349],{"class":1979},[259,1986,379],{"class":323},[259,1988,1989],{"class":268}," 320w,\n",[259,1991,1993,1995,1997,1999,2002,2004,2006],{"class":261,"line":1992},31,[259,1994,1973],{"class":323},[259,1996,1976],{"class":302},[259,1998,1949],{"class":1979},[259,2000,2001],{"class":1627},"640",[259,2003,349],{"class":1979},[259,2005,379],{"class":323},[259,2007,2008],{"class":268}," 640w,\n",[259,2010,2012,2014,2016,2018,2021,2023,2025],{"class":261,"line":2011},32,[259,2013,1973],{"class":323},[259,2015,1976],{"class":302},[259,2017,1949],{"class":1979},[259,2019,2020],{"class":1627},"768",[259,2022,349],{"class":1979},[259,2024,379],{"class":323},[259,2026,2027],{"class":268}," 768w,\n",[259,2029,2031,2033,2035,2037,2040,2042,2044],{"class":261,"line":2030},33,[259,2032,1973],{"class":323},[259,2034,1976],{"class":302},[259,2036,1949],{"class":1979},[259,2038,2039],{"class":1627},"1024",[259,2041,349],{"class":1979},[259,2043,379],{"class":323},[259,2045,2046],{"class":268}," 1024w,\n",[259,2048,2050,2052,2054,2056,2059,2061,2063],{"class":261,"line":2049},34,[259,2051,1973],{"class":323},[259,2053,1976],{"class":302},[259,2055,1949],{"class":1979},[259,2057,2058],{"class":1627},"1280",[259,2060,349],{"class":1979},[259,2062,379],{"class":323},[259,2064,2065],{"class":268}," 1280w,\n",[259,2067,2069,2071,2073,2075,2077,2079,2081],{"class":261,"line":2068},35,[259,2070,1973],{"class":323},[259,2072,1976],{"class":302},[259,2074,1949],{"class":1979},[259,2076,1952],{"class":1627},[259,2078,349],{"class":1979},[259,2080,379],{"class":323},[259,2082,2083],{"class":268}," 1536w,\n",[259,2085,2087,2090],{"class":261,"line":2086},36,[259,2088,2089],{"class":323},"    `",[259,2091,352],{"class":306},[259,2093,2095],{"class":261,"line":2094},37,[259,2096,676],{"class":306},[259,2098,2100,2102],{"class":261,"line":2099},38,[259,2101,379],{"class":306},[259,2103,382],{"class":302},[259,2105,2107,2110,2112],{"class":261,"line":2106},39,[259,2108,2109],{"class":306},"\u003C\u002F",[259,2111,1496],{"class":524},[259,2113,1513],{"class":306},[259,2115,2117],{"class":261,"line":2116},40,[259,2118,1566],{"emptyLinePlaceholder":1565},[259,2120,2122,2124,2127],{"class":261,"line":2121},41,[259,2123,521],{"class":306},[259,2125,2126],{"class":524},"template",[259,2128,1513],{"class":306},[259,2130,2132,2135],{"class":261,"line":2131},42,[259,2133,2134],{"class":306},"  \u003C",[259,2136,2137],{"class":524},"UProseImg\n",[259,2139,2141,2144,2147,2149,2151,2153,2155,2157],{"class":261,"line":2140},43,[259,2142,2143],{"class":306},"    :",[259,2145,2146],{"class":531},"alt",[259,2148,534],{"class":306},[259,2150,537],{"class":323},[259,2152,1776],{"class":302},[259,2154,1743],{"class":306},[259,2156,2146],{"class":302},[259,2158,2159],{"class":323},"\"\n",[259,2161,2163,2165,2168,2170,2172,2174,2176,2178],{"class":261,"line":2162},44,[259,2164,2143],{"class":306},[259,2166,2167],{"class":531},"class",[259,2169,534],{"class":306},[259,2171,537],{"class":323},[259,2173,1776],{"class":302},[259,2175,1743],{"class":306},[259,2177,2167],{"class":302},[259,2179,2159],{"class":323},[259,2181,2183,2185,2188,2190,2192,2194,2196,2198],{"class":261,"line":2182},45,[259,2184,2143],{"class":306},[259,2186,2187],{"class":531},"height",[259,2189,534],{"class":306},[259,2191,537],{"class":323},[259,2193,1776],{"class":302},[259,2195,1743],{"class":306},[259,2197,2187],{"class":302},[259,2199,2159],{"class":323},[259,2201,2203,2205,2207,2209,2211,2214,2216,2218],{"class":261,"line":2202},46,[259,2204,2143],{"class":306},[259,2206,1781],{"class":531},[259,2208,534],{"class":306},[259,2210,537],{"class":323},[259,2212,2213],{"class":302},"imgUrl",[259,2215,1743],{"class":306},[259,2217,1781],{"class":302},[259,2219,2159],{"class":323},[259,2221,2223,2225,2228,2230,2232,2234,2236,2238],{"class":261,"line":2222},47,[259,2224,2143],{"class":306},[259,2226,2227],{"class":531},"srcset",[259,2229,534],{"class":306},[259,2231,537],{"class":323},[259,2233,2213],{"class":302},[259,2235,1743],{"class":306},[259,2237,2227],{"class":302},[259,2239,2159],{"class":323},[259,2241,2243,2245,2247,2249,2251,2253,2255,2257],{"class":261,"line":2242},48,[259,2244,2143],{"class":306},[259,2246,499],{"class":531},[259,2248,534],{"class":306},[259,2250,537],{"class":323},[259,2252,1776],{"class":302},[259,2254,1743],{"class":306},[259,2256,499],{"class":302},[259,2258,2159],{"class":323},[259,2260,2262,2264,2267,2269,2271,2273,2275,2277],{"class":261,"line":2261},49,[259,2263,2143],{"class":306},[259,2265,2266],{"class":531},"width",[259,2268,534],{"class":306},[259,2270,537],{"class":323},[259,2272,1776],{"class":302},[259,2274,1743],{"class":306},[259,2276,2266],{"class":302},[259,2278,2159],{"class":323},[259,2280,2282,2284,2287,2289,2291,2293,2295,2297],{"class":261,"line":2281},50,[259,2283,2143],{"class":306},[259,2285,2286],{"class":531},"zoom",[259,2288,534],{"class":306},[259,2290,537],{"class":323},[259,2292,1776],{"class":302},[259,2294,1743],{"class":306},[259,2296,2286],{"class":302},[259,2298,2159],{"class":323},[259,2300,2302,2305,2307,2309,2312],{"class":261,"line":2301},51,[259,2303,2304],{"class":531},"    decoding",[259,2306,534],{"class":306},[259,2308,537],{"class":323},[259,2310,2311],{"class":268},"async",[259,2313,2159],{"class":323},[259,2315,2317,2320,2322,2324,2327],{"class":261,"line":2316},52,[259,2318,2319],{"class":531},"    loading",[259,2321,534],{"class":306},[259,2323,537],{"class":323},[259,2325,2326],{"class":268},"lazy",[259,2328,2159],{"class":323},[259,2330,2332,2335,2337,2339,2342],{"class":261,"line":2331},53,[259,2333,2334],{"class":531},"    sizes",[259,2336,534],{"class":306},[259,2338,537],{"class":323},[259,2340,2341],{"class":268},"(max-width: 768px) calc(100vw - 48px), 768px",[259,2343,2159],{"class":323},[259,2345,2347],{"class":261,"line":2346},54,[259,2348,2349],{"class":306},"  \u002F>\n",[259,2351,2353,2355,2357],{"class":261,"line":2352},55,[259,2354,2109],{"class":306},[259,2356,2126],{"class":524},[259,2358,1513],{"class":306},[11,2360,2361,2362,2365,2366,2368,2369,2371],{},"色々調べた結果、Nuxt UI の Prose コンポーネントは ",[166,2363,2364],{},"#ui\u002Fcomponents\u002Fprose\u002F"," からそれぞれインポートすることができるようだったので、それを利用することで動作を変更することができました。上のコードは画像を表示する ",[166,2367,1473],{}," コンポーネントで、",[166,2370,1542],{}," から Nuxt UI のコンポーネントと Props の型情報をインポートして使用しています。",[11,2373,2374,2375,2380,2381,2383],{},"「Hiratake Web」では画像の配信に ",[15,2376,2379],{"href":2377,"rel":2378},"https:\u002F\u002Fwww.cloudflare.com\u002Fja-jp\u002Fdeveloper-platform\u002Fproducts\u002Fcloudflare-images\u002F",[38],"Cloudflare Images"," というサービスを利用していて、Markdown ファイル側には画像の ID のみを記述するという使い方をしています。上書きした ",[166,2382,1473],{}," コンポーネントで正しい画像の URL に変換する処理を挟むなどの変更を加えています。",[11,2385,2386,2387,2394,2395,2397,2398,2403,2404,2406,2407,2410],{},"また、コードブロックを表示する ",[15,2388,2391],{"href":2389,"rel":2390},"https:\u002F\u002Fui.nuxt.com\u002Fdocs\u002Ftypography\u002Fcode",[38],[166,2392,2393],{},"\u003CProsePre \u002F>"," ではコードをコピーするためのボタンが表示されているのですが、",[166,2396,495],{}," からではボタンのカスタマイズが難しい（コピーボタンには ",[15,2399,2401],{"href":457,"rel":2400},[38],[166,2402,461],{}," が使われているが、",[166,2405,495],{}," からではボタンコンポーネントの Props を設定できない）ので、こちらも上書き用のファイルを作成し、",[166,2408,2409],{},"#ui\u002Fcomponents\u002Fprose\u002FPre.vue"," からベースとなる Nuxt UI 側のコンポーネントをインポートして使用しました。",[250,2412,2415],{"className":512,"code":2413,"filename":2414,"language":514,"meta":255,"style":255},"\u003Cscript lang=\"ts\" setup>\nimport type {\n  ProsePreProps as UProsePreProps,\n  ProsePreSlots as UProsePreSlots,\n} from '#ui\u002Fcomponents\u002Fprose\u002FPre.vue'\nimport UProsePre from '#ui\u002Fcomponents\u002Fprose\u002FPre.vue'\n\ntype ProsePreProps = UProsePreProps\ntype ProsePreSlots = UProsePreSlots\n\nconst props = defineProps\u003CProsePreProps>()\ndefineSlots\u003CProsePreSlots>()\n\n\u002F** コピーボタンをカスタマイズするための設定 *\u002F\nconst customizedCopy = computed\u003CProsePreProps['copy']>(\n  () => props.copy || { color: 'neutral', variant: 'soft' },\n)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CUProsePre\n    :icon=\"props.icon\"\n    :code=\"props.code\"\n    :language=\"props.language\"\n    :filename=\"props.filename\"\n    :highlights=\"props.highlights\"\n    :hide-header=\"props.hideHeader\"\n    :meta=\"props.meta\"\n    :copy=\"customizedCopy\"\n    :class=\"props.class\"\n    :ui=\"props.ui\"\n  >\n    \u003Cslot \u002F>\n  \u003C\u002FUProsePre>\n\u003C\u002Ftemplate>\n","app\u002Fcomponents\u002Fcontent\u002FProsePre.vue",[166,2416,2417,2437,2445,2457,2469,2481,2496,2500,2512,2524,2528,2548,2562,2566,2571,2602,2647,2651,2659,2663,2671,2678,2696,2714,2733,2752,2771,2791,2810,2825,2843,2861,2866,2880,2890],{"__ignoreMap":255},[259,2418,2419,2421,2423,2425,2427,2429,2431,2433,2435],{"class":261,"line":262},[259,2420,521],{"class":306},[259,2422,1496],{"class":524},[259,2424,1499],{"class":531},[259,2426,534],{"class":306},[259,2428,537],{"class":323},[259,2430,607],{"class":268},[259,2432,537],{"class":323},[259,2434,1510],{"class":531},[259,2436,1513],{"class":306},[259,2438,2439,2441,2443],{"class":261,"line":310},[259,2440,1518],{"class":291},[259,2442,1521],{"class":291},[259,2444,632],{"class":306},[259,2446,2447,2450,2452,2455],{"class":261,"line":355},[259,2448,2449],{"class":302},"  ProsePreProps",[259,2451,1529],{"class":291},[259,2453,2454],{"class":302}," UProsePreProps",[259,2456,352],{"class":306},[259,2458,2459,2462,2464,2467],{"class":261,"line":376},[259,2460,2461],{"class":302},"  ProsePreSlots",[259,2463,1529],{"class":291},[259,2465,2466],{"class":302}," UProsePreSlots",[259,2468,352],{"class":306},[259,2470,2471,2473,2475,2477,2479],{"class":261,"line":667},[259,2472,379],{"class":306},[259,2474,1537],{"class":291},[259,2476,334],{"class":323},[259,2478,2409],{"class":268},[259,2480,1184],{"class":323},[259,2482,2483,2485,2488,2490,2492,2494],{"class":261,"line":673},[259,2484,1518],{"class":291},[259,2486,2487],{"class":302}," UProsePre ",[259,2489,1554],{"class":291},[259,2491,334],{"class":323},[259,2493,2409],{"class":268},[259,2495,1184],{"class":323},[259,2497,2498],{"class":261,"line":679},[259,2499,1566],{"emptyLinePlaceholder":1565},[259,2501,2502,2504,2507,2509],{"class":261,"line":835},[259,2503,1572],{"class":1571},[259,2505,2506],{"class":265}," ProsePreProps",[259,2508,1577],{"class":432},[259,2510,2511],{"class":265}," UProsePreProps\n",[259,2513,2514,2516,2519,2521],{"class":261,"line":841},[259,2515,1572],{"class":1571},[259,2517,2518],{"class":265}," ProsePreSlots",[259,2520,1577],{"class":432},[259,2522,2523],{"class":265}," UProsePreSlots\n",[259,2525,2526],{"class":261,"line":846},[259,2527,1566],{"emptyLinePlaceholder":1565},[259,2529,2530,2532,2534,2536,2539,2541,2544,2546],{"class":261,"line":851},[259,2531,1589],{"class":1571},[259,2533,1593],{"class":1592},[259,2535,1577],{"class":432},[259,2537,2538],{"class":298}," defineProps",[259,2540,521],{"class":306},[259,2542,2543],{"class":265},"ProsePreProps",[259,2545,442],{"class":306},[259,2547,1680],{"class":302},[259,2549,2550,2553,2555,2558,2560],{"class":261,"line":1148},[259,2551,2552],{"class":298},"defineSlots",[259,2554,521],{"class":306},[259,2556,2557],{"class":265},"ProsePreSlots",[259,2559,442],{"class":306},[259,2561,1680],{"class":302},[259,2563,2564],{"class":261,"line":1156},[259,2565,1566],{"emptyLinePlaceholder":1565},[259,2567,2568],{"class":261,"line":1168},[259,2569,2570],{"class":1434},"\u002F** コピーボタンをカスタマイズするための設定 *\u002F\n",[259,2572,2573,2575,2578,2580,2582,2584,2586,2588,2590,2593,2595,2597,2599],{"class":261,"line":1176},[259,2574,1589],{"class":1571},[259,2576,2577],{"class":1592}," customizedCopy",[259,2579,1577],{"class":432},[259,2581,1715],{"class":298},[259,2583,521],{"class":306},[259,2585,2543],{"class":265},[259,2587,1949],{"class":302},[259,2589,324],{"class":323},[259,2591,2592],{"class":268},"copy",[259,2594,324],{"class":323},[259,2596,349],{"class":302},[259,2598,442],{"class":306},[259,2600,2601],{"class":302},"(\n",[259,2603,2604,2607,2609,2611,2613,2616,2619,2621,2623,2625,2627,2630,2632,2634,2636,2638,2640,2643,2645],{"class":261,"line":1187},[259,2605,2606],{"class":306},"  ()",[259,2608,1722],{"class":1571},[259,2610,1593],{"class":302},[259,2612,1743],{"class":306},[259,2614,2615],{"class":302},"copy ",[259,2617,2618],{"class":432},"||",[259,2620,651],{"class":306},[259,2622,926],{"class":313},[259,2624,317],{"class":306},[259,2626,334],{"class":323},[259,2628,2629],{"class":268},"neutral",[259,2631,324],{"class":323},[259,2633,331],{"class":306},[259,2635,939],{"class":313},[259,2637,317],{"class":306},[259,2639,334],{"class":323},[259,2641,2642],{"class":268},"soft",[259,2644,324],{"class":323},[259,2646,664],{"class":306},[259,2648,2649],{"class":261,"line":1193},[259,2650,382],{"class":302},[259,2652,2653,2655,2657],{"class":261,"line":1199},[259,2654,2109],{"class":306},[259,2656,1496],{"class":524},[259,2658,1513],{"class":306},[259,2660,2661],{"class":261,"line":1204},[259,2662,1566],{"emptyLinePlaceholder":1565},[259,2664,2665,2667,2669],{"class":261,"line":1798},[259,2666,521],{"class":306},[259,2668,2126],{"class":524},[259,2670,1513],{"class":306},[259,2672,2673,2675],{"class":261,"line":1821},[259,2674,2134],{"class":306},[259,2676,2677],{"class":524},"UProsePre\n",[259,2679,2680,2682,2684,2686,2688,2690,2692,2694],{"class":261,"line":1842},[259,2681,2143],{"class":306},[259,2683,737],{"class":531},[259,2685,534],{"class":306},[259,2687,537],{"class":323},[259,2689,1776],{"class":302},[259,2691,1743],{"class":306},[259,2693,737],{"class":302},[259,2695,2159],{"class":323},[259,2697,2698,2700,2702,2704,2706,2708,2710,2712],{"class":261,"line":1863},[259,2699,2143],{"class":306},[259,2701,166],{"class":531},[259,2703,534],{"class":306},[259,2705,537],{"class":323},[259,2707,1776],{"class":302},[259,2709,1743],{"class":306},[259,2711,166],{"class":302},[259,2713,2159],{"class":323},[259,2715,2716,2718,2721,2723,2725,2727,2729,2731],{"class":261,"line":1884},[259,2717,2143],{"class":306},[259,2719,2720],{"class":531},"language",[259,2722,534],{"class":306},[259,2724,537],{"class":323},[259,2726,1776],{"class":302},[259,2728,1743],{"class":306},[259,2730,2720],{"class":302},[259,2732,2159],{"class":323},[259,2734,2735,2737,2740,2742,2744,2746,2748,2750],{"class":261,"line":1905},[259,2736,2143],{"class":306},[259,2738,2739],{"class":531},"filename",[259,2741,534],{"class":306},[259,2743,537],{"class":323},[259,2745,1776],{"class":302},[259,2747,1743],{"class":306},[259,2749,2739],{"class":302},[259,2751,2159],{"class":323},[259,2753,2754,2756,2759,2761,2763,2765,2767,2769],{"class":261,"line":1926},[259,2755,2143],{"class":306},[259,2757,2758],{"class":531},"highlights",[259,2760,534],{"class":306},[259,2762,537],{"class":323},[259,2764,1776],{"class":302},[259,2766,1743],{"class":306},[259,2768,2758],{"class":302},[259,2770,2159],{"class":323},[259,2772,2773,2775,2778,2780,2782,2784,2786,2789],{"class":261,"line":1931},[259,2774,2143],{"class":306},[259,2776,2777],{"class":531},"hide-header",[259,2779,534],{"class":306},[259,2781,537],{"class":323},[259,2783,1776],{"class":302},[259,2785,1743],{"class":306},[259,2787,2788],{"class":302},"hideHeader",[259,2790,2159],{"class":323},[259,2792,2793,2795,2798,2800,2802,2804,2806,2808],{"class":261,"line":1939},[259,2794,2143],{"class":306},[259,2796,2797],{"class":531},"meta",[259,2799,534],{"class":306},[259,2801,537],{"class":323},[259,2803,1776],{"class":302},[259,2805,1743],{"class":306},[259,2807,2797],{"class":302},[259,2809,2159],{"class":323},[259,2811,2812,2814,2816,2818,2820,2823],{"class":261,"line":1959},[259,2813,2143],{"class":306},[259,2815,2592],{"class":531},[259,2817,534],{"class":306},[259,2819,537],{"class":323},[259,2821,2822],{"class":302},"customizedCopy",[259,2824,2159],{"class":323},[259,2826,2827,2829,2831,2833,2835,2837,2839,2841],{"class":261,"line":1970},[259,2828,2143],{"class":306},[259,2830,2167],{"class":531},[259,2832,534],{"class":306},[259,2834,537],{"class":323},[259,2836,1776],{"class":302},[259,2838,1743],{"class":306},[259,2840,2167],{"class":302},[259,2842,2159],{"class":323},[259,2844,2845,2847,2849,2851,2853,2855,2857,2859],{"class":261,"line":1992},[259,2846,2143],{"class":306},[259,2848,499],{"class":531},[259,2850,534],{"class":306},[259,2852,537],{"class":323},[259,2854,1776],{"class":302},[259,2856,1743],{"class":306},[259,2858,499],{"class":302},[259,2860,2159],{"class":323},[259,2862,2863],{"class":261,"line":2011},[259,2864,2865],{"class":306},"  >\n",[259,2867,2868,2871,2874,2878],{"class":261,"line":2030},[259,2869,2870],{"class":306},"    \u003C",[259,2872,2873],{"class":524},"slot",[259,2875,2877],{"class":2876},"svtyB"," \u002F",[259,2879,1513],{"class":306},[259,2881,2882,2885,2888],{"class":261,"line":2049},[259,2883,2884],{"class":306},"  \u003C\u002F",[259,2886,2887],{"class":524},"UProsePre",[259,2889,1513],{"class":306},[259,2891,2892,2894,2896],{"class":261,"line":2068},[259,2893,2109],{"class":306},[259,2895,2126],{"class":524},[259,2897,1513],{"class":306},[1009,2899,2900],{"id":2900},"アイコンの設定",[11,2902,2903,2904,2911,2912,2917,2918,2920],{},"Nuxt UI では、ダークモードの切り替えボタン（",[15,2905,2908],{"href":2906,"rel":2907},"https:\u002F\u002Fui.nuxt.com\u002Fdocs\u002Fcomponents\u002Fcolor-mode-button",[38],[166,2909,2910],{},"\u003CUColorModeButton \u002F>","）など、いくつかのコンポーネントでデフォルトのアイコンが設定されているものがあります。デフォルトでは ",[15,2913,2916],{"href":2914,"rel":2915},"https:\u002F\u002Flucide.dev\u002F",[38],"Lucide"," のアイコンが使用されていますが、これらのアイコンの上書きも ",[166,2919,495],{}," で行うことができます。",[66,2922,2923],{},[69,2924,2925],{},[15,2926,2929],{"href":2927,"rel":2928},"https:\u002F\u002Fui.nuxt.com\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Ficons\u002Fnuxt",[38],"Icons - Nuxt UI",[11,2931,2932,2933,1267,2936,2939,2940,2943,2944,2946],{},"ダークモードの切り替えボタンの ",[737,2934],{"name":2935},"i-ph-sun-bold",[737,2937],{"name":2938},"i-ph-moon-bold"," のアイコンだけでなく、見出しの横の ",[737,2941],{"name":2942},"i-ph-hash"," マークやコードブロックのコピーボタンのアイコンなども全て ",[166,2945,495],{}," から指定できます。このことに全然気付いていなくて「どうやってアイコンを別のものに変えるんだ…？」と結構悩んでました（これは私がアホなだけ）。",[29,2948],{},[11,2950,2951,2952,2955],{},"頻繁にコンテンツを更新しているウェブサイトなので、裏で新しいリポジトリを作ってちょっとずつ進めていた再構築プロジェクトですが、このウェブサイトで使用している ",[15,2953,63],{"href":61,"rel":2954},[38]," というフレームワークのスタンダードな構成に近づけられたり、非推奨なコードを一掃できたりしたのはとても良かったです。",[11,2957,2958],{},"そのまま使うと「Nuxt 感」がめちゃくちゃ出てしまう UI ライブラリをいじくり回して、なんだかんだで愛着がある既存のデザインをほぼ変えずに移行できたのも、ひと仕事やり遂げたという達成感があって大満足。今後とも「Hiratake Web」を何卒どうぞよろしくおねがいいたします🙇",[2960,2961,2962],"style",{},"html pre.shiki code .sbgvK, html code.shiki .sbgvK{--shiki-light:#E2931D;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s_sjI, html code.shiki .s_sjI{--shiki-light:#91B859;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .stzsN, html code.shiki .stzsN{--shiki-light:#91B859;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sVHd0, html code.shiki .sVHd0{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#D73A49;--shiki-default-font-style:inherit;--shiki-dark:#F97583;--shiki-dark-font-style:inherit}html pre.shiki code .sGLFI, html code.shiki .sGLFI{--shiki-light:#6182B8;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .su5hD, html code.shiki .su5hD{--shiki-light:#90A4AE;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sP7_E, html code.shiki .sP7_E{--shiki-light:#39ADB5;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .skxfh, html code.shiki .skxfh{--shiki-light:#E53935;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sjJ54, html code.shiki .sjJ54{--shiki-light:#39ADB5;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .smGrS, html code.shiki .smGrS{--shiki-light:#39ADB5;--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sQzsp, html code.shiki .sQzsp{--shiki-light:#E53935;--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .s9AJx, html code.shiki .s9AJx{--shiki-light:#9C3EDA;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sutJx, html code.shiki .sutJx{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#6A737D;--shiki-default-font-style:inherit;--shiki-dark:#6A737D;--shiki-dark-font-style:inherit}html pre.shiki code .sbsja, html code.shiki .sbsja{--shiki-light:#9C3EDA;--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s_hVV, html code.shiki .s_hVV{--shiki-light:#90A4AE;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .srdBf, html code.shiki .srdBf{--shiki-light:#F76D47;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .syTEX, html code.shiki .syTEX{--shiki-light:#FF5370;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sfo-9, html code.shiki .sfo-9{--shiki-light:#90A4AE;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .svtyB, html code.shiki .svtyB{--shiki-light:#39ADB5;--shiki-light-font-style:inherit;--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}",{"title":255,"searchDepth":310,"depth":310,"links":2964},[2965,2966],{"id":95,"depth":310,"text":95},{"id":180,"depth":310,"text":181,"children":2967},[2968,2969],{"id":478,"depth":355,"text":478},{"id":1004,"depth":355,"text":1004},"2026-09-03","本ウェブサイト「Hiratake Web」の中身を Nuxt UI で書き直しました🚧 表面的にはデザインも何も変わっていないので、作り直したといってもただの自己満足でしかないところではありますが、変化の激しいウェブの世界では放って置くとすぐコードが古くなってしまうので、定期的なメンテナンスが欠かせません。",{},"\u002Fblog\u002F2026\u002F09\u002F03",{"title":5,"description":2971},{"loc":2973},"blog\u002F2026\u002F09\u002F03","MLzt-IBVDmAiJ0PuR6bVuzUmMiQc8q2-q1x40KVdwf4",{"id":2979,"title":2980,"body":6,"description":2981,"extension":2982,"meta":2983,"navigation":1565,"ogImage":6,"path":2984,"robots":6,"schemaOrg":6,"seo":2985,"sitemap":2986,"stem":2987,"__hash__":2988},"diary\u002Fblog\u002Findex.yaml","日記","趣味のことから技術系の真面目なことまで、書きたいことをなんとなく書いてみたり感じたことを後で振り返ることができるように書いたりしている日記です。","yaml",{},"\u002Fblog",{"title":2980,"description":2981},{"loc":2984},"blog\u002Findex","fLzOkO5-d59TdETL5apa-dSFTXget3ICl402VZ0kPs4",[2990,6],{"title":2991,"path":2992,"stem":2993,"description":2994,"created":2995,"children":-1},"千鳥屋宗家の夏季限定「白くまみるく饅頭」を食べる","\u002Fblog\u002F2026\u002F08\u002F31","blog\u002F2026\u002F08\u002F31","大阪・本町に本店がある和菓子屋 千鳥屋宗家の夏季限定のお菓子「白くまみるく饅頭」を買ってきました🐻 千鳥屋宗家の店舗にはよく行くのですが、毎回買うのは決まって本千鳥饅頭で、他の商品を手に取ることはあまりありませんでした。というわけで、たまには違うものを…と夏限定の「白くまみるく饅頭」を食べてみました。","2026-08-31",1788397253191]