CSS 【開発環境】Tailwindで爆速コーディング環境を作る！
ShopifyにしろWordpressにしろ、liquidやphpを組み込む前に、ローカルで静的にHTMLを作成しておくと無駄のないきれいなコードでページを設計しておける。
その際に静的コーディングが爆速でできるとありがたい。という...
CSS Shopify 【Shopify】アプリなしでSALE時の割引率を表示する！
割引率の表示はこのコードで完了！
{% if current_variant.compare_at_price > 0 %}
{% comment %}割引前価格が設定されていればOFF率表記自体する{% endcomme...
未分類 【Shopify】アプリなしで商品のステータスラベルを表示！
例えば、新商品には"NEW"というラベルを表示したい、再入荷した商品には"REARRIVAL"ラベルを表示したい、という要件。
以下のコードで完了！
{% if product.tags contains 'newarriva...
Shopfy2.0 【Shopify】2021.8.13からGithub接続方法が変更になった！
ある日の事件
ある日、さーて今日もShopify制作するかーとGithubに接続しようとしたら、
remote: Password authentication is temporarily disabled as part ...
Shopify 【Shopify】アプリなしでカート内の合計金額で送料無料まであと〇〇円！の表示をする！
ECサイトでよくある「注文金額〇〇円で送料無料！」の表示。
以下のコードで完了！
アプリでこれを実装することも可能だが、以下のコードで実装できます！
{%- endif -%}
<p class="an...
Shopify 【Shopify】ログイン/ログアウト/新規会員登録/マイページのボタン設置なんかもう悩まない！
ECサイトでよく見かける、ドロワーメニューの横または中に必ずといっていいほど存在する、アカウント操作系のボタン。
なぜかShopifyのテーマによっては、ログインできてもログアウトする導線がなかったり、新規会員登録するボタンがなく、...
CSS 【ローカル環境開発高速化】reloadコマンドを使って、テキストエディタ更新時にブラウザプレビューを自動同期
reloadコマンドとは？
ECのCMS上で商品ページのが LPのように一枚一枚が作り込まれているとき、大量の画像をアップロードしたり、このページのみに使われるようなスタイルをあてた、読み物コンテンツのページを効率的に作る手順では、...
Shopify 【Shopify】ストアの送信元のメールアドレスの「ドメイン認証」を忘れずに！
Shopifyのストアはメールアドレスをどこかのメールサーバーで運用しているメールアドレスで登録する必要がありますが、Shopifyのメール送信元の「認証」を以下の画面で行う必要があります！
しないと届くメールアドレスがshopif...
未分類 【最終手段】小さい画像、解像度粗い写真を大きなサイズにする（解像度を上げる）方法
Githubでの配布 waifu2x-caffe (for windows)
窓の杜での配布 waifu2x-caffe(for windows)
このツールの解説
CPUとGPUをフル稼働し、画像生成の...
Shopify 【Shopify】アプリを使わずに、サイトに訪れた初回のみポップアップするモーダルウィンドウ機能を追加！（カスタマイズ画面から次回表示までの日数指定も）
海外のECサイトで多くみられていたポップアップするモーダルウィンドウだが、最近は日本のサイトでもよく目にするようになった。
サイトを見ていると、しばらくすとポっと出てくるあれです。個人的には実はあまり好きではないですが、、、
...
Shopify 【Shopify】配送日時（お届け日時）指定を可能にする！（注意点も）
Shopifyで配送日時（お届け日時）を可能にできるアプリなら、
配送日時指定 .ampで問題ないです。
こちらは国産のアプリで安心です！
このアプリの詳細と、注意点について解説します。
配送日時指定 .a...
Shopify 【Shopify】ページで条件分岐、顧客タグで条件分岐
例えば、同じページテンプレートだが特定のページの時だけ処理を変えたいというとき。
また、リンクのジャンプ先を会員ユーザーはゲスト(非ログインユーザー)と違うページにしたいとき。
Shopifyではとても簡単に条件分岐を書けます...
Shopfy2.0 【SublimeText】にLiquidファイルのシンタックスハイライトを設定！
Shopifyのサイト制作をしてきて、ずぼらな僕はSublinmeTextでコードを書くときのシンタックスハイライトの設定をしていないまま8か月ほど過ぎようとしていた。
いつも手動で、HTMLかPHPのシンタックスにセットして制作し...
Shopfy2.0 【Shopify】online store 1.0 → 2.0 への改修 JSON形式のtemplateを調整する！
手順1.liquidファイルをもとにjsonファイル作成
まずは肩慣らしに「Product」のproduct.json
まず、これが、とあるテーマのproduct.liquid
【「カスタマイズ」画面】
【...
CSS 【ローカルHTML開発】ローカル環境でホットリロードのブラウザ開発環境を作る！
ローカル環境でネット接続もせず、飛行機の中でも核シェルターの中でも、超サクサクと限りなくストレスなくコーディングしたい方向けです！
こんな感じで高速でページを作成できます！
テーマにならい手順を高速で紹介します！
...
Shopify 【Shopify】online store 2.0の新テーマ”Dawn”をGithubと同期させて開発する！
2021/6/29に開かれたShopify Unite 2021で発表されたShopifyの新バージョン。
新バージョンといっても、これまでに制作されたテーマやアプリは変わらず使用できる。
今回追加された内容は以下のようにいく...
CSS 【iOS版Sublime Text!?】GoCoEditが神がかってきた件(おまけ:Inspect)
いつの間にか、こんなにできる子に！"GoCoEdit"
先日、愛機のデスクトップで作業していて、ある壁にぶつかり、なんで〜なんで〜と進めずに苦しんでいて、とりあえず頭休めようと、寝たんですが、寝てる時も、あれをこうして、これをああす...
ウィジェット 【ウィジェット自作】自分好みの片手用キーボードを作って、 面倒な操作を片手でできるように！
昨年よりリモートワークが主流になってから感じるのは、パソコン作業をいかに効率的にするか、というガジェットの特集が、ブログでもYouTubeでも急激に増えたことだ。
特に自分の周りで多く出てきたワードが、トラックボールマウス、エルゴノ...
Wordpress 【WordPress】管理画面上で、画像を簡易レタッチする！
Wordpress管理画面にてアップロードした「メディア」に格納されている画像ファイルを、ほんとちょっとだけ加工したい時、
いちいち画像の元ファイルをローカル上で探したり、一度アップした画像をダウンロードしたりして、フォトレタッチソ...
検証 iPhoneでWebページ上のスクリーンショットを全画面で撮るには！
意外と知られていない、スマホでのWeb全画面スクショ方法！
制作の仕事であれば特に、PCのChromeブラウザなどでは、Chrome拡張機能などで、Webのフルページのスクショ機能を活用することは多いだろう。
※以下、"Awe...
CSS 【Webフォント】丸わかり！使えるWebフォント一覧【プレビュー＆設置コードつき！】
自由にフォントが使用できる印刷媒体と違い、Webでは表示できるフォントに制約があることを忘れてはいけません！
デザイナーによってかっこよく仕上げられたWebサイトのカンプがクライアントに大好評！
だけどコーディングに入り、「あ...
Webフォント 【Webフォント】Noto Sans CJK？ Noto Sans JP？違いは？
CJKは3つの言語の頭文字！
Noto Sans CJKC(Chinese)、J(Japanese）、K(Korean)の全てが入っているフォントで、その中でJapaneseを優先的に表示するようにするもの。
Noto San...
Googleスプレッドシート 【Googleスプレッドシート】スプレッドシートにGoogleドライブやWeb上の画像を表示する！（IMAGE関数）（2021/9/12追記版）
スプレで画像をやりとりする際の最適解は？
突然ですが、スプレッドシートでWeb上、ないしGoogleドライブ内で「リンクを知っている人全員に共有」を設定した画像が、IMAGE関数というものを式にいれれば、セル内で画像を読み込めます！...
Wordpress 【WordPress】プラグイン不要！記事ページ下部に「同じタームの記事」を数件表示する！
やることはおおまかに言うと２つだけ！
「関連記事」とかECサイトであれば「関連するアイテム」などというように、記事または商品の詳細ページにて、何かしらのコンバージョンまで離脱をさせないように横軸での回遊を促すコンテンツは有効です。処...
CSS 【HTML】ユーザのOSがダークモードならWebサイトもダークモードに！
いまさらながらダークモードとは！
一度体験してから、大好きになったダークモード。
いちおう説明しますと、ダークモードとは、Windows、Mac OS、iOS、Andoroidなど最近のOSでは切り替え設定ができるようになった...
PHP 【Wordrpess】でよく使うphp、テンプレ関数まとめ (2021/5/15最新版)
言語によって記法が違うのをそらで覚えるのは大変だしミスもある！
サイトを制作するといろんなコードに触れますが、言語によって記述ルールがまちまちで、いっぱいやってるとどれがどの記法だったかわかんなくなりませんか？
たとえば、条件...
Wordpress 【WordPress】記事内でphpのインクルード関数を使用したいときのショートコードを作る！
インクルード関数で読んでいるphpのブロックを、ショートコードで呼び出すには？
普通、Wordpressで記事内に、定義された機能を表示したい、というとき、「ショートコード」を使用するかと思う。
だが、phpのインクルード関数...
jQuery 【jQuery】処理Aが完了してから処理Bを実行する方法
できそうで実はある「熟語」を使わないと難しい！
以下のようなjQueryのメソッドの連結記法（チェーンメソッド）を使えば一見簡単そうに思いますが、実は違います。
//メソッドA().メソッドB().メソッドC()・・・というよ...
CSS CSS,jQueryでよく使うコードまとめ（2021/04/26版）
タイトルの通り、よく使うやつを備忘録としてもまとめてみました。こんな感じで定番の型はアーカイブしていって順次1ページに集約していきたいと思います。
ちなみにサムネイルの画像は僕が別名義で運営する二次元系のブログサイトのメインビジュア...
CSS 【CSSだけで作る】高性能ドロワーメニューの決定版（2021/5/8追記）
CSSだけでクォリティの高いドロワーメニューの作り方！
前回の定番のスライダーのコードに続き、自分用の備忘録として。
サイト作ってると、これも毎回必要になってくる「ドロワーメニュー」（ハンバーガーメニューとかとも言われます）。...
Shopify 【Shopify】会員登録していないと購入できないショップを作るには！
管理画面から、設定 > チェックアウトに移動します。
セクションで、お客様アカウントのオプションを選択します。アカウントの必須化にチェックを入れます。
これだけです！
すべてを解説すると、以下のような選択があり...
HTML 【JavaScript】カルーセルスライダの定番はFlickityで決まり！なのだが、玉石混交の情報に注意！な件。
結論：このFlickityのコードが正解！
カルーセルスライダーのJSライブラリといえば、SlickやbxSliderなど、これまでにいろいろなものを使ってきたが、カスタマイズしないとスマホのフリックに反応しなかったり、レスポンシブ...
HTML 【GoogleMap,YouTube埋め込みで利用可能！】制御しづらいiframeの大きさを可変にし、レスポンシブ対応にする！
今でも使われる機会があるiframe要素ですが、皆さんはどんな時に使ったりしますか？よくある例としては、Google MapやYoutube動画の埋め込みがあると思いますが、このiframe、使用したことある方であればお分かりかと思います...
Google Analytics 【Shopify】Google Analyticsの設定とeコマーストラッキング！
今さらだが、Google Analytics（GA）とは
サイトを運営する者にとって、Google Anayticsはなじみ深いアクセス解析のツールだ。
Shopifyでは、Google Analyticsを使ってeコマースト...
Shopify 【Shopify】Buy Buttonアプリを使って、別サイトからもカートインできるように！
アプリ"Buy Button"をインストールし、ウィザードにしたがってポチポチと進んで、埋め込み用コードを挿入したら、
Shopifyで制作したサイトの商品ページがこのページにも実現できました。。！
もとの商品ページはこちらな...
Shopify 【Shopify】のショップと同じドメインの メールアドレスを設定する！（2021/7/26追記版）
Shopifyのサイトを制作開始してそういえば、、と気づくのが、ショップの連絡先としてメールアドレスの入力をする箇所はあっても、メールサーバーやメーラーは自分で別途用意しなければいけないということだ。
僕はいつもエックスサーバー×W...
Wordpress 【WordPress】プラグインkrc-cast-managerを使用してスタッフ登録と出勤情報を掲載できるようにする！
Wordpressレンタル彼氏のサイトを制作するにあたり、一番のネックだったのが、スタッフ登録と、そのスタッフの出勤スケジュールを、Wordpress管理画面で行えるようにすることだった。
Wordpressプラグイン系は「探したら...
Shopify 【Shopify】サブドメインを使ってShopifyのサイトを表示する！
例えば以下のようにドメインを設定したいとする。
prythmworks.tokyo → Wordpressなどで制作した本サイトnetshop.prythmworks.toyko → Shopifyで制作したECサイト
この場...
Shopify 【Shopify】ライブ環境のテーマでもtheme kitで更新する
以前、以下の記事でもShopifyの開発環境の作り方を書き、そこでPowerShellやコマンドラインのCUI操作でローカルのコーディングを本番環境にアップするときは、ライブ状態のテーマ=公開中のテーマに対して行うことはできないと書いた。...
Shopify 【Shopify】クーポンコードを発行してお客様にお届けする方法
ユーザ側に立って振り返ると、期間限定で20% OFFになるクーポンが手元にあると、何か今のうちに買っておかねば、という心理になるもの。
Shopifyでは、簡単にお客様に対しクーポンを発行できます。クーポンコードの発行の仕方と、お客...
HTML Youtube の動画の複数埋め込みをしたページの高速化
このサイトのTOPでYouTube動画を複数貼り付けしているが、そのおかげでページスピードがかなり遅くなってしまったため、何か良い手はないか調べてみたら、あった。
埋め込みしたYouTube動画を遅延読み込みさせる！
ifra...
Shopify 【Shopify】Back in stockの再入荷リクエストボタンを使ってみた！
Shopifyで在庫切れの商品を登録するにはアプリのBackinStockを利用するのが1番簡単である。
以下の記事でも紹介したこのアプリだが、
※今回、いらすとやさんの素材を使って、対話形式で書いてみます！
...
Shopify 【Shopify】4月1日から義務化される総額表記への変更の仕方
総額表記の義務化とは？
2021年3月の時点では、お店によって値札の「税抜価格」と「税込価格」が混在してるが、4月からはすべての商品やサービスの価格について、税込の価格を表示する「総額表示」に統一される。
「総額表示」とは、店...
Shopify 【Shopify】プラグインを使わずにメンテナンスページを表示！
Shopifyでメンテナンス表記をするには？
まもなく4月1日より法律で義務化される、ECサイト上の総額表記化であるが、これを行うにあたり、運営しているShopifyのサイトを一時的にメンテナンス表記したいことがある。
そんな...
Shopify 【Shopify】メニュー項目にドロップダウンリストを管理画面のみで作成する！
ドロップダウンメニューとは
ドロップダウンメニューとは、以下のようなものです。
PCであれば、マウスカーソルをオーバーメニューに重ねたときに、子のメニューが表示されて選択できるような機能のことですね。
通常、これ...
Shopify 【Shopify】2021年最新版！使えるアプリカテゴリ別紹介！
そもそもアプリとは？
Shopifyは、これまでになく速く・安く・確実に、高品質で継続的な運用がしていけるECサイトを制作できる良質なCMS（コンテンツ・マネジメント・システム）である。
さて、「速く・安く・確実に」機能を実現...
Shopify 【Shopify】GA仕様変更Shopifyにトラッキングコードが設定できない！どうする？
トラッキングコードの仕様変更
2020年10月14日にGoogle Analyticsに大幅なアップデートが行われ、仕様が変更になったため、これまでトラッキングコードで使用されていたUA-XXXXXXXXというトラッキングのIDが、...
Shopify 【Shopify】環境開発を構築する-改定版-
以前、同様の記事を書いたが、めちゃくちゃ不親切だったので、改訂版として更新しようと思う。
ShopifyによるECサイトの開発で、一番初めにぶつかる壁が、この間髪環境の構築だろう。
Shopifyの開発環境とはどのようなものか...
Shopify 【Shopify】で制作されたサイトで、何のアプリが使われているかを調べる方法
最近本当にShopifyでECサイトを制作したい、というクライアント様が多い。
そして、商談の際にお話に上がってくるのが、クライアント様が目指しているイケてるECサイトの中で、使われている機能についてだ。
「これできますか？」...
Wordpress 【WordPress】でも”Weglot Translate”がやっぱりすごすぎる件
先日Shopifyのアプリとして紹介したWeglot Translateだが、もしやと思い、Wordpressでもプラグインがあるのでは、と思い、調べたらやっぱりあった。
そういうわけで、本サイトにもプラグインをインストールしてみた...