Magentoテーマ開発チュートリアル：初心者向けガイド

Author

TECHVIFYチームは、技術とイノベーションに情熱を持つ経験豊富なプロフェッショナルの集団です。

Magento開発は、Eコマースサイトの構築において間違いなく重要な役割を果たします。

オンラインストアを本当にアップグレードするためには、企業はMagentoテーマ開発に十分な投資をすべきです。これは、ウェブサイト全体の外観、雰囲気、美学を設計する上で決定的な要素です。

TECHVIFYがMagentoテーマ開発のステップバイステップガイドラインをご紹介します。これらのステップを十分に理解することで、このプロセス全体をよりよく把握できます。

詳しくはこちら：Magento開発のベストプラクティストップ7

ステップ＃1：テーマを含むディレクトリを作成する

/app/design/frontendに移動し、テーマパッケージ用のベンダー名で新しいディレクトリを作成します：/app/design/frontend/.
ベンダーディレクトリの下に、テーマ名に応じたディレクトリを作成します。

app/design/frontend/

├── /

│ │ ├──…/

│ │ │ ├── …

この構造を作成した後、Magentoにテーマの存在を認識させるためにテーマを宣言する必要があります。Magentoのバックエンドでテーマを現在のテーマとして設定できます。

ステップ＃2：テーマを宣言する

テーマを宣言するには、テーマ名を含むtheme.xmlファイルを作成する必要があります。テーマが親テーマから継承する場合、.xmlファイルには親テーマ名も含める必要があります。必要に応じてテーマのプレビュー画像も必要です。

既存のtheme.xmlファイルから追加またはコピーして、テーマディレクトリapp/design/frontend//.に配置します。
以下の例を使って設定します：

m2-theme
    Magento/
    
    media/m2-theme-image.jpg

タグにはテーマ名を挿入します。<parent>タグではフォールバック用の親テーマを指定できます。</p><p><preview_image>タグのテーマ画像はサムネイル画像で、テーマページのプレビュー用に表示されます。サムネイル画像は<em>app/design/frontend/<theme>/m2-theme/media/m2-theme-image.jpg</em>にあります。</p><p>theme.xmlでテーマタイトルや親テーマ情報を変更した場合、テーマが既に登録されている場合は、Magento管理画面を開くかリロードしてデータベースに変更を保存する必要があります。</p><h2>ステップ＃3：Composerパッケージを作成する</h2><p>Magento 2のテーマはComposerパッケージとして配布され、サーバー上でパッケージとして登録されます。composer.jsonファイルを追加しますが、これは任意です。</p><p>composer.jsonファイルはテーマの依存関係情報を提供します。正しい依存関係とそのバージョンについては、現在のtheme.xmlファイルを参照してください。</p><p>テーマのcomposer.jsonファイルの例：</p><pre><code>{ "name": "<vendor>/m2-theme", "description": "Magento 2 Theme Customization", "require": { "php": "~5.6|~7.0|~7.1|~7.2|~7.3|~7.4", "<vendor>/m2-theme": "100.0.*", "magento/framework": "100.0.*" }, "type": "magento2-theme", "version": "100.0.1", "license": [ "OSL-3.0", "AFL-3.0" ], "autoload": { "files": [ "Registration.php" ] } }</code></pre><h2>ステップ＃4：registration.phpを追加する</h2><p>テーマをシステムに登録するには、テーマディレクトリに以下の内容のregistration.phpファイルを追加します：</p><pre><code><?php /** Copyright © Magento, Inc. All rights reserved. See COPYING.txt for license details. */ \Magento\Framework\Component\ComponentRegistrar:: register; \Magento\Framework\Component\ComponentRegistrar::THEME, 'frontend/<Vendor>/<theme>', __DIR__ );</code></pre><p><Vendor>はベンダー名、<theme>はテーマコードです。</p><h2>ステップ＃5：静的ファイル用のディレクトリ構造を作成する</h2><p>テーマパッケージはスタイル、フォント、JavaScript、画像など多くの種類のファイルで構成されます。各タイプはテーマディレクトリ内のwebのサブディレクトリに保存する必要があります：</p><p><em>app/design/<area>/<Vendor>/<theme>/</em></p><p><em>├</em><em>──</em><em> web/</em></p><p><em>│ </em><em>├</em><em>──</em><em> css/</em></p><p><em>│ │ </em><em>├</em><em>──</em><em> source/</em><em></em></p><p><em>│ </em><em>├</em><em>──</em><em> fonts/</em></p><p><em>│ </em><em>├</em><em>──</em><em> images/</em></p><p><em>│ </em><em>├</em><em>──</em><em> js/</em></p><p>…/<theme>/web/imagesディレクトリには、一般的なテーマ関連の静的ファイルを保存します。</p><h2>ステップ＃6：画像を設定する</h2><p>テーマで使用される商品画像サイズやその他のプロパティはview.xml設定ファイルで構成されます。テーマには必須ですが、親テーマに存在する場合は任意です。</p><p>テーマの商品画像サイズが親テーマと異なる場合、またはテーマがどのテーマも継承していない場合はview.xmlを追加する必要があります。</p><p>親テーマのetc.ディレクトリからview.xmlファイルをコピーするか、Blankテーマからコピーします。view.xmlファイルで全てのストアフロントの商品画像サイズを設定します。</p><pre><code><image id="category_page_grid" type="small_image"> <width>250</width> <height>250</height> </image></code></pre><h2>ステップ＃7：テーマロゴを宣言する</h2><p>Magentoアプリケーションでは、ロゴ画像のデフォルトの形式と名前はlogo.svgです。異なる名前や形式のロゴファイルを使用できますが、宣言が必要な場合があります。</p><p>テーマロゴを宣言するには、Magento_Theme/layoutディレクトリを作成し、default.xmlファイルに以下のコードを追加します。default.xmlファイルのパスは<em>/app/design/frontend/<theme>/m2-theme/Magento_Theme/layout/default.xml</em>です。</p><pre><code><page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <referenceBlock name="logo"> <arguments> <argument name="logo_file" xsi:type="string">images/m2-logo.png</argument> <argument name="logo_img_width" xsi:type="number">350</argument> <argument name="logo_img_height" xsi:type="number">350</argument> </arguments> </referenceBlock> </body> </page></code></pre><h2>ステップ＃8：テーマレイアウトをカスタマイズする</h2><p>基本的なテーマ構造が作成されたら、任意のレイアウトをカスタマイズまたは上書きし、新しいテーマのための新しいデザインレイアウトを設定できます。</p><p>テーマレイアウトを上書きするには、同じ名前のレイアウトファイルを以下の場所に配置します：<em>/app/design/frontend/Magento/<theme>/Magento_Theme/layout/default.xml</em></p><p>これらのファイルは以下のレイアウトを上書きします：<em>/<vendor>/m2-theme/Magento_Theme/layout/default.xml</em></p><h2>ステップ＃9：Magento管理パネルでテーマを設定する</h2><p>次のステップは、Magento管理画面から作成したカスタムテーマをウェブサイトに適用することです：管理画面->コンテンツ->デザイン->設定へ移動します。</p><p>ストアビューの編集をクリックすると、デザイン設定のページが表示されます。デフォルトテーマタブで、適用テーマのドロップダウンから新しく作成したテーマを選択し、設定を保存してテーマを適用します。</p><h2>ステップ＃10：最終デプロイ</h2><p>テーマをMagentoストアフロントで表示可能にするために、ファイルをデプロイするコマンドを1つ実行します：</p><ol><li>MagentoストアのSSHアカウントにログインします。</li><li>Magentoルートディレクトリに移動し、以下のコマンドを実行します：</li></ol><pre><code><em>php bin/magento setup:upgrade</em></code></pre><ol start="3"><li>テーマファイルをデプロイするために別のコマンドを実行します：</li></ol><pre><code><em>php bin/magento setup:static-content:deploy</em></code></pre><p>これでテーマの使用準備が整いました。</p><p>以上が<strong>Magentoテーマ開発</strong>プロセスについて知っておくべきすべてです。Magento開発のすべての詳細手順を理解して、最高の機能を活用してください。</p><figure><img decoding="async" class="aligncenter" src="https://static-cdn.techvify.com/strapi-uploads/uploads/0505_magentotheme_2_927bfdbaeb.jpg" alt="Magento Development vietnam" /></figure><p>もしこのプロセスが複雑すぎると感じたら、信頼できるウェブ開発チームを選ぶべきです。TECHVIFY Softwareは<a title="Magento development services" href="https://techvify-software.com/all-you-need-to-know-about-magento-development/" rel="nofollow noopener" target="_blank">Magento開発</a>の専門家であり、クライアントのすべての要件を満たす最高のEコマースサイトを作ることを最終目標としています。TECHVIFYと共に、あなたのオンラインストアは安心して任せられます。</p><div class="tvf-box-cta"><p id="title">TECHVIFY – グローバルAI＆ソフトウェアソリューションカンパニー</p><p>スタートアップから業界リーダーまで：TECHVIFYは成果を優先し、単なる納品物ではありません。高性能チーム、AI（GenAIを含む）ソフトウェアソリューション、ODC（オフショア開発センター）サービスで市場投入までの時間を加速し、早期にROIを実現します。</p><ul><li><strong>メール：</strong><a href="mailto:contact@techvify.com.vn">contact@techvify.com.vn</a></li><li><strong>電話：</strong><a href="tel:+842477762666">(+84)24.77762.666</a></li></ul><div><a href="#tvf-contact"><button class="tvf-cta-btn" type="button">お問い合わせ</button></a></div></div></div><div class="mb-16 pt-8 border-t border-white/10"><h3 class="text-white font-medium text-lg mb-4">Categories & Tags</h3><div class="flex flex-wrap gap-3"><template id="P:a"></template><template id="P:b"></template></div></div></div></article></div><div class="min-h-screen"><div class="max-w-[866px] mx-auto px-4 sm:px-6 lg:px-8 py-24"><div class="space-y-8"><div class="h-6 bg-white/10 rounded w-48 animate-pulse"></div><div class="h-16 bg-white/10 rounded animate-pulse"></div><div class="h-80 bg-white/10 rounded animate-pulse"></div><div class="space-y-4"><div class="h-4 bg-white/10 rounded animate-pulse"></div><div class="h-4 bg-white/10 rounded animate-pulse"></div><div class="h-4 bg-white/10 rounded animate-pulse"></div><div class="h-4 bg-white/10 rounded animate-pulse"></div><div class="h-4 bg-white/10 rounded animate-pulse"></div><div class="h-4 bg-white/10 rounded animate-pulse"></div><div class="h-4 bg-white/10 rounded animate-pulse"></div><div class="h-4 bg-white/10 rounded animate-pulse"></div></div></div></div></div></main><footer class="border-t border-[var(--color-p200)] relative overflow-hidden" style="background:radial-gradient(100% 100% at 50% 0%, #01010F 50%, #001372 100%), #050B1E"><div class="content-container pt-14 lg:pt-16 min-[1441px]:pt-[72px]"><div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-[1.25fr_1fr_1fr_1.45fr] gap-9 min-[1441px]:gap-12"><div class="col-span-1 sm:col-span-2 lg:col-span-1"><div class="flex items-center "><img alt="Techvify" width="271" height="38" decoding="async" data-nimg="1" class="h-full w-auto object-contain" style="color:transparent;width:auto;height:auto" src="/images/logo/techvify_logo_white.svg"/></div><p class="mt-[26px] text-[#c4cadb] text-base leading-6 whitespace-pre-line max-w-[220px]">AIを活用したエンジニアリングパートナー</p><div class="mt-7 text-base leading-[1.7]"><a href="/cdn-cgi/l/email-protection#64070b0a10050710241001070c120d021d4a070b09" class="block text-[#c4cadb] hover:text-[var(--color-p200)] transition-colors duration-200"><span class="__cf_email__" data-cfemail="accfc3c2d8cdcfd8ecd8c9cfc4dac5cad582cfc3c1">[email protected]</span></a><a href="tel:+842477760688" class="block text-[#c4cadb] hover:text-[var(--color-p200)] transition-colors duration-200">(+84) 24 7776 0688</a></div><div class="mt-[30px] flex items-center gap-[22px]"><a href="https://www.linkedin.com/company/techvify/posts/?feedView=all" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn" class="transition-transform duration-[250ms] hover:-translate-y-0.5"><img alt="LinkedIn" loading="lazy" width="22" height="22" decoding="async" data-nimg="1" class="cursor-pointer transition-opacity duration-[250ms] hover:opacity-80" style="color:transparent" src="/images/footer/social-linkedin.svg"/></a><a href="https://www.facebook.com/profile.php?id=61583081237369" target="_blank" rel="noopener noreferrer" aria-label="Facebook" class="transition-transform duration-[250ms] hover:-translate-y-0.5"><img alt="Facebook" loading="lazy" width="22" height="22" decoding="async" data-nimg="1" class="cursor-pointer transition-opacity duration-[250ms] hover:opacity-80" style="color:transparent" src="/images/footer/social-facebook.svg"/></a><a href="https://x.com/Techvify" target="_blank" rel="noopener noreferrer" aria-label="Twitter" class="transition-transform duration-[250ms] hover:-translate-y-0.5"><img alt="Twitter" loading="lazy" width="22" height="22" decoding="async" data-nimg="1" class="cursor-pointer transition-opacity duration-[250ms] hover:opacity-80" style="color:transparent" src="/images/footer/social-twitter.svg"/></a><a href="https://www.youtube.com/@techvifyglobal" target="_blank" rel="noopener noreferrer" aria-label="YouTube" class="transition-transform duration-[250ms] hover:-translate-y-0.5"><img alt="YouTube" loading="lazy" width="22" height="22" decoding="async" data-nimg="1" class="cursor-pointer transition-opacity duration-[250ms] hover:opacity-80" style="color:transparent" src="/images/footer/social-youtube.svg"/></a><a href="https://www.behance.net/techvifysoftware" target="_blank" rel="noopener noreferrer" aria-label="Behance" class="transition-transform duration-[250ms] hover:-translate-y-0.5"><img alt="Behance" loading="lazy" width="22" height="22" decoding="async" data-nimg="1" class="cursor-pointer transition-opacity duration-[250ms] hover:opacity-80" style="color:transparent" src="/images/footer/social-medium.svg"/></a></div></div><div><h3 class="text-white font-semibold text-2xl mb-6">会社情報</h3><ul class="space-y-4"><li><a class="text-[#c4cadb] text-base hover:text-[var(--color-p200)] hover:pl-1 transition-all duration-200" href="/jp/about-us">私たちについて</a></li><li><a class="text-[#c4cadb] text-base hover:text-[var(--color-p200)] hover:pl-1 transition-all duration-200" href="/jp/leadership">リーダーシップ</a></li><li><a class="text-[#c4cadb] text-base hover:text-[var(--color-p200)] hover:pl-1 transition-all duration-200" href="https://careers.techvify.com/">採用情報</a></li><li><a class="text-[#c4cadb] text-base hover:text-[var(--color-p200)] hover:pl-1 transition-all duration-200" href="/jp/become-a-partner">パートナーになる</a></li><li><a class="text-[#c4cadb] text-base hover:text-[var(--color-p200)] hover:pl-1 transition-all duration-200" href="/jp/portfolio">ポートフォリオ</a></li><li><a class="text-[#c4cadb] text-base hover:text-[var(--color-p200)] hover:pl-1 transition-all duration-200" href="https://3dtour.techvify.com/">本社バーチャルツアー</a></li></ul></div><div><h3 class="text-white font-semibold text-2xl mb-6">サービス</h3><ul class="space-y-4"><li><a class="text-[#c4cadb] text-base hover:text-[var(--color-p200)] hover:pl-1 transition-all duration-200" href="/jp/services/software-development-services">AI搭載型ソフトウェア開発</a></li><li><a class="text-[#c4cadb] text-base hover:text-[var(--color-p200)] hover:pl-1 transition-all duration-200" href="/jp/services/ai-ml-services">AIデータプラットフォーム・エンジニアリング</a></li><li><a class="text-[#c4cadb] text-base hover:text-[var(--color-p200)] hover:pl-1 transition-all duration-200" href="/jp/services/iot-software-development-services">AIソリューションの運用</a></li><li><a class="text-[#c4cadb] text-base hover:text-[var(--color-p200)] hover:pl-1 transition-all duration-200" href="/jp/services/cloud-devops-development-services">クラウド・DevOps</a></li><li><a class="text-[#c4cadb] text-base hover:text-[var(--color-p200)] hover:pl-1 transition-all duration-200" href="/jp/services/application-managed-services">アプリケーションマネージドサービス</a></li><li><a class="text-[#c4cadb] text-base hover:text-[var(--color-p200)] hover:pl-1 transition-all duration-200" href="/jp/services/software-testing-qa-services">AIトランスフォーメーション（AX）アドバイザリー</a></li></ul></div><div><h3 class="text-white font-semibold text-2xl mb-6">所在地</h3><div class="space-y-[18px]"><p class="text-base leading-[1.55]"><span class="text-white font-semibold">本社</span><span class="text-[#4a5170] px-1">|</span><span class="text-[#c4cadb]">F9 Tower A, HUDTOWER Building, 37 Le Van Luong Str, Thanh Xuan Ward, Hanoi, Vietnam</span></p><p class="text-base leading-[1.55]"><span class="text-white font-semibold">ホーチミンオフィス</span><span class="text-[#4a5170] px-1">|</span><span class="text-[#c4cadb]">Dong Nhan Building, 90 Nguyen Dinh Chieu, Tan Dinh Ward, Ho Chi Minh City, Vietnam</span></p><p class="text-base leading-[1.55]"><span class="text-white font-semibold">ダナンデリバリーセンター</span><span class="text-[#4a5170] px-1">|</span><span class="text-[#c4cadb]">7th Floor, Block D, ICT1 Building, Software Park No.2, Nhu Nguyet Street, Hai Chau Ward, Da Nang City, Vietnam</span></p><p class="text-base leading-[1.55]"><span class="text-white font-semibold">シンガポールオフィス</span><span class="text-[#4a5170] px-1">|</span><span class="text-[#c4cadb]">18 Cross Street, #02-101, 18 Cross, Singapore 048423</span></p><p class="text-base leading-[1.55]"><span class="text-white font-semibold">Fukuoka (本社）</span><span class="text-[#4a5170] px-1">|</span><span class="text-[#c4cadb]">博多駅前シティビル, 1-9-3 博多駅前, 福岡市, 福岡県, 日本</span></p><p class="text-base leading-[1.55]"><span class="text-white font-semibold">Tokyo (支店）</span><span class="text-[#4a5170] px-1">|</span><span class="text-[#c4cadb]">天祥ビル809, 3-9-10 新橋, 港区, 東京 105-0004 日本</span></p></div></div></div><hr class="border-0 h-px bg-white/10 mt-11 mb-9"/><div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-[repeat(3,minmax(0,320px))] gap-6 mb-11"><a href="https://clutch.co/profile/techvify" target="_blank" rel="noopener noreferrer"><div class="h-[34px] flex items-center justify-start"><img alt="Clutch" loading="lazy" width="113" height="34" decoding="async" data-nimg="1" class="h-full w-auto object-contain hover:opacity-80" style="color:transparent" src="/images/footer/rating-clutch.svg"/></div><p class="mt-3 text-[#c4cadb] text-base">評価 4.9/5</p></a><a href="https://www.goodfirms.co/company/techvify" target="_blank" rel="noopener noreferrer"><div class="h-[34px] flex items-center justify-start"><img alt="GoodFirms" loading="lazy" width="215" height="34" decoding="async" data-nimg="1" class="h-full w-auto object-contain hover:opacity-80" style="color:transparent" src="/images/footer/rating-goodfirms.svg"/></div><p class="mt-3 text-[#c4cadb] text-base">評価 4.9/5</p></a><a href="https://techreviewer.co/companies/techvify-vietnam" target="_blank" rel="noopener noreferrer"><div class="h-[34px] flex items-center justify-start"><img alt="TechReviewer" loading="lazy" width="220" height="34" decoding="async" data-nimg="1" class="h-full w-auto object-contain hover:opacity-80" style="color:transparent" src="/images/footer/rating-techreviewer.svg"/></div><p class="mt-3 text-[#c4cadb] text-base">評価 4.9/5</p></a></div></div><div class="border-t border-white/10"><div class="content-container pt-[26px] pb-[30px] flex flex-col sm:flex-row justify-center items-center gap-2 sm:gap-4"><p class="text-[#9aa2bd] text-base">2026 © Techvify. All Rights Reserved</p><span class="hidden sm:inline text-[#9aa2bd] text-base">|</span><button type="button" class="text-[#9aa2bd] text-base hover:text-white transition-colors cursor-pointer">Cookie設定</button></div></div></footer></div><script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script type="a757660f17bfb965dd406799-text/javascript">$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:2","P:2")</script><script type="a757660f17bfb965dd406799-text/javascript">$RB=[];$RV=function(a){$RT=performance.now();for(var b=0;b<a.length;b+=2){var c=a[b],e=a[b+1];null!==e.parentNode&&e.parentNode.removeChild(e);var f=c.parentNode;if(f){var g=c.previousSibling,h=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d||"/&"===d)if(0===h)break;else h--;else"$"!==d&&"$?"!==d&&"$~"!==d&&"$!"!==d&&"&"!==d||h++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;e.firstChild;)f.insertBefore(e.firstChild,c);g.data="$";g._reactRetry&&requestAnimationFrame(g._reactRetry)}}a.length=0}; $RC=function(a,b){if(b=document.getElementById(b))(a=document.getElementById(a))?(a.previousSibling.data="$~",$RB.push(a,b),2===$RB.length&&("number"!==typeof $RT?requestAnimationFrame($RV.bind(null,$RB)):(a=performance.now(),setTimeout($RV.bind(null,$RB),2300>a&&2E3<a?2300-a:$RT+300-a)))):b.parentNode.removeChild(b)};$RC("B:1","S:1")</script><script type="a757660f17bfb965dd406799-text/javascript">self.__next_f.push([1,"28:I[80622,[],\"IconMark\"]\n"])</script><script type="a757660f17bfb965dd406799-text/javascript">self.__next_f.push([1,"c:{\"metadata\":[[\"$\",\"title\",\"0\",{\"children\":\"Magentoテーマ開発チュートリアル：初心者向けガイド - Techvify\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"オンラインストアを本格的にアップグレードするには、Magentoテーマ開発にしっかり投資しましょう。初心者向け10ステップガイド。\"}],[\"$\",\"meta\",\"2\",{\"name\":\"robots\",\"content\":\"index, follow, max-snippet:-1, max-video-preview:-1, max-image-preview:large\"}],[\"$\",\"link\",\"3\",{\"rel\":\"canonical\",\"href\":\"https://techvify.com/jp/magento-theme-development-tutorial\"}],[\"$\",\"link\",\"4\",{\"rel\":\"alternate\",\"hrefLang\":\"en\",\"href\":\"https://techvify.com/magento-theme-development-tutorial\"}],[\"$\",\"link\",\"5\",{\"rel\":\"alternate\",\"hrefLang\":\"ja-JP\",\"href\":\"https://techvify.com/jp/magento-theme-development-tutorial\"}],[\"$\",\"link\",\"6\",{\"rel\":\"alternate\",\"hrefLang\":\"de-DE\",\"href\":\"https://techvify.com/de/magento-theme-development-tutorial\"}],[\"$\",\"link\",\"7\",{\"rel\":\"alternate\",\"hrefLang\":\"ko-KR\",\"href\":\"https://techvify.com/kr/magento-theme-development-tutorial\"}],[\"$\",\"link\",\"8\",{\"rel\":\"alternate\",\"hrefLang\":\"x-default\",\"href\":\"https://techvify.com/magento-theme-development-tutorial\"}],[\"$\",\"meta\",\"9\",{\"name\":\"google-site-verification\",\"content\":\"DT3kCEBCV2m8KTwNxOjSbyI7VbnI-aXw0JFqo2ubDZo\"}],[\"$\",\"meta\",\"10\",{\"property\":\"og:title\",\"content\":\"Magentoテーマ開発チュートリアル：初心者向けガイド - Techvify\"}],[\"$\",\"meta\",\"11\",{\"property\":\"og:description\",\"content\":\"オンラインストアを本格的にアップグレードするには、Magentoテーマ開発にしっかり投資しましょう。初心者向け10ステップガイド。\"}],[\"$\",\"meta\",\"12\",{\"property\":\"og:url\",\"content\":\"https://techvify.com/jp/magento-theme-development-tutorial\"}],[\"$\",\"meta\",\"13\",{\"property\":\"og:site_name\",\"content\":\"Techvify\"}],[\"$\",\"meta\",\"14\",{\"property\":\"og:locale\",\"content\":\"ja_JP\"}],[\"$\",\"meta\",\"15\",{\"property\":\"og:image\",\"content\":\"https://static-cdn.techvify.com/strapi-uploads/uploads/0505_magentotheme_5bb45f00a5.jpg\"}],[\"$\",\"meta\",\"16\",{\"property\":\"og:image:secure_url\",\"content\":\"https://static-cdn.techvify.com/strapi-uploads/uploads/0505_magentotheme_5bb45f00a5.jpg\"}],[\"$\",\"meta\",\"17\",{\"property\":\"og:image:alt\",\"content\":\"Magentoテーマ開発チュートリアル：初心者向けガイド\"}],[\"$\",\"meta\",\"18\",{\"property\":\"og:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"19\",{\"property\":\"og:image:height\",\"content\":\"630\"}],[\"$\",\"meta\",\"20\",{\"property\":\"og:image:type\",\"content\":\"image/jpeg\"}],[\"$\",\"meta\",\"21\",{\"property\":\"og:locale:alternate\",\"content\":\"en_US\"}],[\"$\",\"meta\",\"22\",{\"property\":\"og:locale:alternate\",\"content\":\"de_DE\"}],[\"$\",\"meta\",\"23\",{\"property\":\"og:locale:alternate\",\"content\":\"ko_KR\"}],[\"$\",\"meta\",\"24\",{\"property\":\"og:type\",\"content\":\"article\"}],[\"$\",\"meta\",\"25\",{\"property\":\"article:published_time\",\"content\":\"2021-07-25T09:53:05.000Z\"}],[\"$\",\"meta\",\"26\",{\"property\":\"article:author\",\"content\":\"TECHVIFY Team\"}],[\"$\",\"meta\",\"27\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"28\",{\"name\":\"twitter:site\",\"content\":\"@Techvify\"}],[\"$\",\"meta\",\"29\",{\"name\":\"twitter:title\",\"content\":\"Magentoテーマ開発チュートリアル：初心者向けガイド - Techvify\"}],[\"$\",\"meta\",\"30\",{\"name\":\"twitter:description\",\"content\":\"オンラインストアを本格的にアップグレードするには、Magentoテーマ開発にしっかり投資しましょう。初心者向け10ステップガイド。\"}],[\"$\",\"meta\",\"31\",{\"name\":\"twitter:image\",\"content\":\"https://static-cdn.techvify.com/strapi-uploads/uploads/0505_magentotheme_5bb45f00a5.jpg\"}],[\"$\",\"link\",\"32\",{\"rel\":\"icon\",\"href\":\"/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"512x512\"}],[\"$\",\"$L28\",\"33\",{}]],\"error\":null,\"digest\":\"$undefined\"}\n"])</script><script type="a757660f17bfb965dd406799-text/javascript">self.__next_f.push([1,"12:\"$c:metadata\"\n"])</script><title>Magentoテーマ開発チュートリアル：初心者向けガイド - Techvify