ブログ

Shopifyスターターテーマの導入と各テンプレートの役割を理解する

この記事では自作テーマの方法について紹介していきます。自作のテーマを使う機会はShopidyだとあまりないかもしれませんが、例えば以下のようなケースで疲れることも考えられます。 他のネットショップから…

JavaScriptの非同期について理解する!【Promise、async / await】

JavaScriptを勉強していくと突き当たる壁として非同期処理の理解があるかと思います。わたしもぶち当たり → 分からかないから放置していると、またぶち当たり、を繰り返していくうちに覚えていきました…

Shopifyのテンプレートをローカル環境でカスタマイズする方法

Shopifyのテンプレートをローカル環境でカスタマイズする方法です。テンプレートのカスタマイズはShopiyの管理画面のオンライン上で編集も可能ですが、慣れたエディタで編集した方がはかどる場合もある…

webpackでEJSをコンパイルする方法

webpackでEJSをコンパイルする方法です!「Sassの出力をファイルを分離してCSSファイルを作成する」のように、webpackはHTMLファイルを生成することも可能となっています。 webpa…

webpackで画像を圧縮する方法

webpackで画像を圧縮する方法です。流れとしては、公開用フォルダに移動させてそちらのファイルを圧縮するといった形となります。 拡張させるだけの簡単作業なのでぜひ取り入れて見てください! なお、we…

【コーダー向け】webpackでSassをコンパイルする方法

webpackでSassをコンパイルする方法です。webpackはHTMLコーダーにあまり優しくない印象(偏見)がありましたが、結論から言うとやりたいことは十分にやらせてくれます。 具体的に実際にやっ…

GutenbergのブロックをAdvanced Custom Fields的に使ってみる

Gutenbergにはテンプレート機能があり、利用するブロックを制限することが可能です。このテンプレート機能を使うことで、「Advanced Custom FieldsAdvanced Custom …

webpackの基本的な使い方!最小構成で動作を試してみよう

webpackの基本的な使い方です。似たようなものにgulpがありますが、違いとしては以下のような認識です。 gulp・・・タスクランナー webpack・・・ビルドツール 利用者の属性で分けるなら、…

Gutenbergにオリジナルなブロックを作成する方法(動的編)

テキスト等を入力、編集できるブロックを作成する方法です。ブロックの基本的な使い方については以下の記事で紹介しているので、まずはこちらを参考にしてください。 Gutenbergにオリジナルなブロックを作…

Gutenbergにオリジナルなブロックを作成する方法(静的編)

Gutenbergにオリジナルなブロックを作成する方法です。公式のチュートリアルを参考にしながら、以下のようなpタグで囲まれた固定値のブロックを作っていきます。 汎用性は無いかもしれませんが、作り方の…