ホーム
/
プラグイン
/
MT Zen-Coding に名前を変えてちょっとパワーアップさせました

プラグイン

MT Zen-Coding に名前を変えてちょっとパワーアップさせました

2010-02-23

1分で読了

更新: 2025-12-14

目次

先日公開した「Zen Coding for を Movable Type で簡単に使うプラグイン</a>」ですが、これと同様な<a href="http://rewish.org/">Rewish</a>さんのところで公開されている「<a href="http://rewish.org/wp/zen_coding">WordPressにZen Codingを導入するプラグイン「WP Zen-Coding」</a>」が名称変更されたようですので、こちらもなんとなく合わせて名前を変更しました。</p><p>また、MTタグもZen Coding風に入力できるようにしたり、テンプレート編集エディタを全画面表示できるようにしたりと、ちょっとだけパワーアップさせました。</p><p>このプラグインも、ひょっとしたら今後もアップデートするかもしれないので、ちゃんとページを作って置いておくことにしました。</p><p>プラグインの詳細とダウンロードは以下からお願いします。</p><ul><li><a href="/blog/download/mt-plugin/mt-zen-coding.html">MT Zen-Coding</a></li> </ul> </div>  <div class="ad-slot ad-slot-leaderboard my-10"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3900117988527916" data-ad-slot="5460677750" data-ad-format="auto" data-full-width-responsive="true"></ins> <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> </div>  <div class="border-y border-slate-200 dark:border-slate-700 py-6 my-8"> <p class="text-sm font-medium text-slate-700 dark:text-slate-300 mb-4">この記事をシェア</p> <div class="flex items-center space-x-3">  <a href="https://x.com/intent/post?url=https%3A%2F%2Ftinybeans.net%2Fblog%2F2010%2F02%2F23-053149.html&text=MT%20Zen-Coding%20%E3%81%AB%E5%90%8D%E5%89%8D%E3%82%92%E5%A4%89%E3%81%88%E3%81%A6%E3%81%A1%E3%82%87%E3%81%A3%E3%81%A8%E3%83%91%E3%83%AF%E3%83%BC%E3%82%A2%E3%83%83%E3%83%97%E3%81%95%E3%81%9B%E3%81%BE%E3%81%97%E3%81%9F" target="_blank" rel="noopener noreferrer" class="flex items-center justify-center w-10 h-10 bg-black text-white rounded-full hover:opacity-80 transition-opacity"> <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"/></svg> </a>  <a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Ftinybeans.net%2Fblog%2F2010%2F02%2F23-053149.html" target="_blank" rel="noopener noreferrer" class="flex items-center justify-center w-10 h-10 bg-[#1877F2] text-white rounded-full hover:opacity-80 transition-opacity"> <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"></path></svg> </a>  <a href="https://social-plugins.line.me/lineit/share?url=https%3A%2F%2Ftinybeans.net%2Fblog%2F2010%2F02%2F23-053149.html" target="_blank" rel="noopener noreferrer" class="flex items-center justify-center w-10 h-10 bg-[#06C755] text-white rounded-full hover:opacity-80 transition-opacity"> <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor"><path d="M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63h2.386c.346 0 .627.285.627.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63.346 0 .628.285.628.63v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314"></path></svg> </a>  <a href="https://b.hatena.ne.jp/add?mode=confirm&url=https%3A%2F%2Ftinybeans.net%2Fblog%2F2010%2F02%2F23-053149.html&title=MT%20Zen-Coding%20%E3%81%AB%E5%90%8D%E5%89%8D%E3%82%92%E5%A4%89%E3%81%88%E3%81%A6%E3%81%A1%E3%82%87%E3%81%A3%E3%81%A8%E3%83%91%E3%83%AF%E3%83%BC%E3%82%A2%E3%83%83%E3%83%97%E3%81%95%E3%81%9B%E3%81%BE%E3%81%97%E3%81%9F" target="_blank" rel="noopener noreferrer" class="flex items-center justify-center w-10 h-10 bg-[#00A4DE] text-white rounded-full hover:opacity-80 transition-opacity"> <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor"><path d="M20.47 0C22.42 0 24 1.58 24 3.53v16.94c0 1.95-1.58 3.53-3.53 3.53H3.53C1.58 24 0 22.42 0 20.47V3.53C0 1.58 1.58 0 3.53 0h16.94zm-3.705 14.47c-.78 0-1.41.63-1.41 1.41s.63 1.414 1.41 1.414 1.41-.634 1.41-1.414-.63-1.41-1.41-1.41zM8.61 17.247c1.2 0 2.056-.042 2.58-.166.523-.124.91-.298 1.16-.518.25-.22.44-.478.57-.774.13-.295.194-.663.194-1.103 0-.447-.08-.807-.242-1.082-.16-.276-.373-.47-.636-.583-.264-.113-.65-.2-1.16-.263.608-.14 1.018-.323 1.23-.55.21-.23.316-.565.316-1.005 0-.377-.067-.694-.2-.95-.136-.257-.326-.456-.57-.598-.244-.14-.593-.236-1.048-.286-.454-.05-1.063-.074-1.825-.074H5.146v7.952h3.463zM7.4 9.783h1.4c.63 0 1.06.03 1.288.09.228.06.4.163.51.31.11.145.166.35.166.612 0 .29-.06.506-.18.646-.12.14-.32.232-.6.275-.182.03-.614.043-1.297.043H7.4V9.783zm0 3.24h1.633c.594 0 1.01.023 1.246.066.236.044.43.14.58.293.15.15.226.385.226.703 0 .265-.053.47-.16.615-.107.147-.266.248-.476.304-.21.056-.725.084-1.548.084H7.4v-2.063zm9.186-3.24h1.136c.08 0 .18.006.3.018.12.012.212.03.276.05.06.018.126.044.19.076.063.03.11.072.14.124.03.05.05.11.06.18.01.068.016.157.016.265v4.064c0 .108-.006.197-.017.266-.01.068-.03.13-.06.18-.03.053-.076.095-.14.127-.065.03-.13.056-.19.075-.065.02-.156.037-.277.05-.12.01-.22.018-.3.018h-1.136V9.783z"/></svg> </a>  <div class="relative"> <button type="button" id="copy-url-btn" class="flex items-center justify-center w-10 h-10 bg-slate-600 text-white rounded-full hover:opacity-80 transition-opacity cursor-pointer" title="URLをコピー"> <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path> </svg> </button> <span id="copy-tooltip" class="absolute -top-10 left-1/2 -translate-x-1/2 px-2 py-1 bg-slate-800 text-white text-xs rounded whitespace-nowrap pointer-events-none z-10 invisible">コピーしました</span> </div> <script> document.getElementById('copy-url-btn').addEventListener('click', () => { navigator.clipboard.writeText('https://tinybeans.net/blog/2010/02/23-053149.html').then(() => { const tooltip = document.getElementById('copy-tooltip'); tooltip.classList.remove('invisible'); setTimeout(() => { tooltip.classList.add('invisible'); }, 2000); }); }); </script> </div> </div> </article>  <section class="mt-12"> <h2 class="text-2xl font-bold text-slate-800 dark:text-white mb-6">関連記事</h2> <div class="grid sm:grid-cols-2 gap-6"> <article class="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 overflow-hidden card-hover"> <a href="https://tinybeans.net/blog/2026/03/mt-plugin-aitranslator.html" class="block"> <img src="https://tinybeans.net/assets_c/2026/03/AITranslatorBanner-thumb-400xauto-61.png" alt="AITranslatorBanner.png" class="aspect-video object-cover w-full" loading="lazy" /> </a> <div class="p-4"> <a href="https://tinybeans.net/blog/movabletype/" class="px-2 py-1 bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 text-xs font-medium rounded hover:bg-blue-200 dark:hover:bg-blue-900/50 transition-colors"> Movable Type </a> <h3 class="font-bold text-slate-800 dark:text-white mt-2 line-clamp-2"> <a href="https://tinybeans.net/blog/2026/03/mt-plugin-aitranslator.html" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors"> 「翻訳のために管理画面と翻訳ツールを行ったり来たり」── その作業、AIで自動化しませんか？ </a> </h3> </div> </article> <article class="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 overflow-hidden card-hover"> <a href="https://tinybeans.net/blog/2026/03/movable-type-treeorder.html" class="block"> <img src="https://tinybeans.net/assets_c/2026/03/TreeOrderBanner-thumb-400xauto-50.webp" alt="TreeOrderBanner.webp" class="aspect-video object-cover w-full" loading="lazy" /> </a> <div class="p-4"> <a href="https://tinybeans.net/blog/movabletype/plugins/" class="px-2 py-1 bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 text-xs font-medium rounded hover:bg-blue-200 dark:hover:bg-blue-900/50 transition-colors"> プラグイン </a> <h3 class="font-bold text-slate-800 dark:text-white mt-2 line-clamp-2"> <a href="https://tinybeans.net/blog/2026/03/movable-type-treeorder.html" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors"> Movable Type の記事やページの並び順、もっと自由に管理しませんか？「 TreeOrder 」プラグインのご紹介 </a> </h3> </div> </article> <article class="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 overflow-hidden card-hover"> <a href="https://tinybeans.net/blog/2026/01/plugins-202601.html" class="block"> <img src="https://tinybeans.net/assets_c/2026/01/hf_20260119_065434_3d164de3-bede-455f-8f3a-070bef099f6e-thumb-400xauto-24.webp" alt="hf_20260119_065434_3d164de3-bede-455f-8f3a-070bef099f6e.webp" class="aspect-video object-cover w-full" loading="lazy" /> </a> <div class="p-4"> <a href="https://tinybeans.net/blog/movabletype/plugins/" class="px-2 py-1 bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 text-xs font-medium rounded hover:bg-blue-200 dark:hover:bg-blue-900/50 transition-colors"> プラグイン </a> <h3 class="font-bold text-slate-800 dark:text-white mt-2 line-clamp-2"> <a href="https://tinybeans.net/blog/2026/01/plugins-202601.html" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors"> Movable Type プラグイン3本をリリース予定 </a> </h3> </div> </article> <article class="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 overflow-hidden card-hover"> <a href="https://tinybeans.net/blog/2024/04/mt-plugin-cloudfrontclearcaches.html" class="block"> <div class="aspect-video bg-slate-200 dark:bg-slate-700 flex items-center justify-center"> <span class="text-slate-400 dark:text-slate-500">Thumbnail</span> </div> </a> <div class="p-4"> <a href="https://tinybeans.net/blog/movabletype/" class="px-2 py-1 bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 text-xs font-medium rounded hover:bg-blue-200 dark:hover:bg-blue-900/50 transition-colors"> Movable Type </a> <h3 class="font-bold text-slate-800 dark:text-white mt-2 line-clamp-2"> <a href="https://tinybeans.net/blog/2024/04/mt-plugin-cloudfrontclearcaches.html" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors"> Movable Type の管理画面から Amazon CloudFront のキャッシュを削除することができるプラグイン「CloudFrontClearCaches」リリース </a> </h3> </div> </article> </div> </section> </div>  <aside class="w-full lg:w-80 space-y-6">  <a href="https://tinypress.tinybeans.nz/ja.html" target="_blank" rel="noopener" class="block rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow"> <img src="/assets/img/tinypress-square-ja.webp" alt="TinyPress - 画像を圧縮、品質はそのまま" class="w-full aspect-square object-cover" loading="lazy" width="1000" height="1000" /> </a>    <div class="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 p-5"> <h3 class="font-bold text-slate-800 dark:text-white mb-4 flex items-center"> <svg class="w-5 h-5 mr-2 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path> </svg> 話題の一冊 </h3> <a href="https://amzn.to/4dJDpV2" target="_blank" rel="nofollow noopener sponsored" class="block group"> <div class="aspect-[3/4] bg-slate-100 dark:bg-slate-700 rounded-lg mb-3 flex items-center justify-center overflow-hidden"> <img src="https://m.media-amazon.com/images/I/81kh9LnNRIL._SY300_.jpg" alt="実践Claude Code入門" class="max-w-full max-h-full object-contain" loading="lazy" /> </div> <h4 class="font-medium text-slate-800 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors mb-1"> 実践Claude Code入門 </h4> <p class="text-sm text-slate-600 dark:text-slate-400 mb-2"> 現場で活用するためのAIコーディングの思考法 </p> <span class="text-xs text-blue-600 dark:text-blue-400">Amazonで見る →</span> </a> </div>  <div class="hidden lg:block bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 p-5"> <h3 class="font-bold text-slate-800 dark:text-white mb-4 flex items-center"> <svg class="w-5 h-5 mr-2 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"></path> </svg> 目次 </h3> <div id="sidebar-toc-content" class="max-h-[400px] overflow-y-auto">  </div> </div>  <div class="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 p-5"> <h3 class="font-bold text-slate-800 dark:text-white mb-4 flex items-center"> <svg class="w-5 h-5 mr-2 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path> </svg> 最新記事 </h3> <ul class="space-y-4"> <li> <a href="https://tinybeans.net/blog/2026/04/tinypress.html" class="flex items-start group"> <span class="flex-shrink-0 w-8 h-8 bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400 rounded-full flex items-center justify-center text-sm font-bold mr-3">1</span> <span class="text-sm text-slate-700 dark:text-slate-300 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors line-clamp-2">ウェブサイト・ブログ用画像を一発で圧縮・リネーム！Mac アプリ「TinyPress」をリリースしました</span> </a> </li> <li> <a href="https://tinybeans.net/blog/2026/04/claude-opus-47.html" class="flex items-start group"> <span class="flex-shrink-0 w-8 h-8 bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-400 rounded-full flex items-center justify-center text-sm font-bold mr-3">2</span> <span class="text-sm text-slate-700 dark:text-slate-300 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors line-clamp-2">Claude Opus 4.7 がリリース！Effort xhigh の登場と垣間見えた Mythos のすごさ</span> </a> </li> <li> <a href="https://tinybeans.net/blog/2026/04/claude-code-neovim.html" class="flex items-start group"> <span class="flex-shrink-0 w-8 h-8 bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-400 rounded-full flex items-center justify-center text-sm font-bold mr-3">3</span> <span class="text-sm text-slate-700 dark:text-slate-300 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors line-clamp-2">Claude Code 作業中に「ちょっとこのファイル見たい・直したい」となったらどうしてる？</span> </a> </li> <li> <a href="https://tinybeans.net/blog/2026/04/claude-md-management.html" class="flex items-start group"> <span class="flex-shrink-0 w-8 h-8 bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-400 rounded-full flex items-center justify-center text-sm font-bold mr-3">4</span> <span class="text-sm text-slate-700 dark:text-slate-300 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors line-clamp-2">Anthropic 公式の claude-md-management プラグインで CLAUDE.md を育てていこう</span> </a> </li> <li> <a href="https://tinybeans.net/blog/2026/04/claude-code-homebrew-to-native.html" class="flex items-start group"> <span class="flex-shrink-0 w-8 h-8 bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-400 rounded-full flex items-center justify-center text-sm font-bold mr-3">5</span> <span class="text-sm text-slate-700 dark:text-slate-300 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors line-clamp-2">Claude Code を Homebrew からネイティブインストールに切り替えたら快適になった話</span> </a> </li> </ul> </div>  <div class="sidebar-ads-sticky">  <div class="ad-slot ad-slot-sidebar bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 p-5"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3900117988527916" data-ad-slot="5254446589" data-ad-format="auto" data-full-width-responsive="true"></ins> <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> </div> </div> </aside> </div> </div> </main>  <footer class="bg-slate-800 dark:bg-slate-950 text-slate-300 py-12"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="grid md:grid-cols-4 gap-8"> <div> <h4 class="text-xl font-bold text-white mb-4">かたつむりくんのWWW</h4> <p class="text-sm text-slate-400"> Craft CMS、Movable Type、HTML、CSS、JavaScript、PHP など、Web制作に関する技術情報を取り扱うブログです。 </p> </div> <div> <h5 class="font-semibold text-white mb-4">カテゴリ</h5> <ul class="space-y-2 text-sm"> <li> <a href="https://tinybeans.net/blog/claude-code/" class="hover:text-blue-400 transition-colors"> Claude Code </a> </li> <li> <a href="https://tinybeans.net/blog/craftcms/" class="hover:text-blue-400 transition-colors"> Craft CMS </a> </li> <li> <a href="https://tinybeans.net/blog/movabletype/" class="hover:text-blue-400 transition-colors"> Movable Type </a> </li> <li> <a href="https://tinybeans.net/blog/drupal/" class="hover:text-blue-400 transition-colors"> Drupal </a> </li> <li> <a href="https://tinybeans.net/blog/wordpress/" class="hover:text-blue-400 transition-colors"> WordPress </a> </li> <li> <a href="https://tinybeans.net/blog/othercms/" class="hover:text-blue-400 transition-colors"> その他の CMS </a> </li> <li> <a href="https://tinybeans.net/blog/web-development/" class="hover:text-blue-400 transition-colors"> Web 開発 </a> </li> <li> <a href="https://tinybeans.net/blog/tools-services/" class="hover:text-blue-400 transition-colors"> ツール・サービス </a> </li> <li> <a href="https://tinybeans.net/blog/books/" class="hover:text-blue-400 transition-colors"> 本・雑誌 </a> </li> <li> <a href="https://tinybeans.net/blog/diary/" class="hover:text-blue-400 transition-colors"> 日記 </a> </li> </ul> </div> <div> <h5 class="font-semibold text-white mb-4">リンク</h5> <ul class="space-y-2 text-sm"> <li><a href="#" class="hover:text-blue-400 transition-colors">プライバシーポリシー</a></li> <li><a href="#" class="hover:text-blue-400 transition-colors">利用規約</a></li> <li><a href="/contact/" class="hover:text-blue-400 transition-colors">お問い合わせ</a></li> </ul> </div> <div> <h5 class="font-semibold text-white mb-4">フォロー</h5> <div class="flex space-x-4"> <a href="https://x.com/tinybeans" target="_blank" rel="noopener" class="text-slate-400 hover:text-blue-400 transition-colors" title="X"> <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"/></svg> </a> <a href="https://github.com/tinybeans/" target="_blank" rel="noopener" class="text-slate-400 hover:text-blue-400 transition-colors" title="GitHub"> <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path></svg> </a> <a href="https://tinybeans.net/feed.xml" class="text-slate-400 hover:text-orange-400 transition-colors" title="RSS"> <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M6.18 15.64a2.18 2.18 0 012.18 2.18C8.36 19 7.38 20 6.18 20A2.18 2.18 0 014 17.82a2.18 2.18 0 012.18-2.18M4 4.44A15.56 15.56 0 0119.56 20h-2.83A12.73 12.73 0 004 7.27V4.44m0 5.66a9.9 9.9 0 019.9 9.9h-2.83A7.07 7.07 0 004 12.93V10.1z"/></svg> </a> </div> </div> </div> <div class="border-t border-slate-700 mt-8 pt-8 text-center text-sm text-slate-400"> © 2026 かたつむりくんのWWW. All rights reserved. </div> </div> </footer>  <button id="back-to-top" type="button" class="fixed bottom-6 right-6 z-40 p-3 bg-blue-600 hover:bg-blue-700 text-white rounded-full shadow-lg transition-all duration-300 opacity-0 invisible translate-y-4" aria-label="ページトップへ戻る"> <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"></path> </svg> </button>  <script src="/dist/js/main.js" defer></script> </body> </html>