Shopifyで階層のあるパンくずリストを実装【サンプルコードあり】｜liquid note | 初学者向けShopify情報ブログ
特に国内向けストアだとご要望として多いのが「パンくずリスト」ですよね。 商品数やカテゴリが多い場合には確かにあると便利ですが、Shopifyのテーマでは基本的にデフォルトでは対応していません。 そこで今回は、Shopifyでパンくずリストを自力で実装する方法をご紹介します。 一番基本のパンくずリストの作り方 基本となるパンくずリストの作り方は、Shopifyの公式サイトでも紹介されています。 https://shopify.dev/tutorials/customize-theme-add-breadcrumbs 「breadcrumbs.liquid」みたいなスニペットを作って、以下のコードをコピペすればOKです。 {% unless template == 'index' or template == 'cart' or template == 'list-collections' %
PowerAutomateのライトな使いどころ - Qiita
この記事はMicrosoft Power Automate Advent Calendar 2022 カレンダー2の6日目です。 ここではPowerAutomateを使って社内の開発チームのワークフローを少しだけ改善した話をします。 前提となる状態 社内のコミュニケーションにはMicrosoftのTeamsを採用している 開発チームは課題（issue）をBacklogで管理している ビジネスサイドの別チームはBacklogの扱いに慣れているチームもあれば、 慣れていないチーム（Backlogを使ったことがないチーム）もある まずこんな状況がありまして... ＜Aさん＞ システムのこの部分うまく動いてないみたいだから開発チームに修正を依頼しなきゃ。 普段、他のチームとはTeamsでコミュニケーションとってるから、 開発チームに対する修正依頼も同じようにTeams上で投げちゃっていいよね。 え
AIを使ってLPを本気で制作してみる① 〜ワイヤーフレーム作成編〜｜ゆうすけ
最近はジェネレーティブAIという言葉を耳にする事が多くなってきて、私自身も手探りながら色々と触ってみています。 ただ、巷のAIに関する制作支援記事や、YouTubeでWebサイトを作ってみた系の動画を見てみると、たしかにパッと見だと良い感じにできているのですが、「Midjorneyで生成された1枚絵が良いから良く見えてるだけなんじゃないか？」という疑念をちょっと持ってました。実際のハンバーガーショップではAIで生成された写真とか使えないでしょうよ…みたいな。（将来的に解決される可能性はあるとしても） という事で今回は、自分自身が本気で仕事に取り入れるつもりでAIを使ってWeb制作をしてみたいと思います。使用するサービスはChatGPT、Midjourney、Figma、TeleportHQです。 題材としては、フリーランスである私自身が使用するプロモーション用のLPという体で制作していこう
[Doc] 要件定義書テンプレート・要件定義書の書き方 - Qiita
下記ドキュメントバージョンに関する注意点です。 バージョン番号のルールを定める：バージョン番号は、どのようにつけるかルールを定め、チーム全員が同じ理解で使用するようにする必要があります。たとえば、変更内容によって数字がどのように増えるか（major, minor, patch）、何桁で表現するかなど、具体的に決めておくことが重要です。 変更履歴を明確にする：どのような変更があったのか、それがどのバージョンで実施されたのかを明確にすることが必要です。これにより、何らかの問題が発生した場合に、どのバージョンから問題があるのか特定することができます。 ドキュメントの保存場所を一元化する：ドキュメントのバージョン管理には、ドキュメントを保存する場所を一元化することが重要です。それにより、異なるバージョンのドキュメントが、複数の場所に分散してしまい、誤ったバージョンが使用されることを防ぐことができま
![[Doc] 要件定義書テンプレート・要件定義書の書き方 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/d7d131e38e26f54466aece3306435a4c09990de8/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCRG9jJTVEJTIwJUU4JUE2JTgxJUU0JUJCJUI2JUU1JUFFJTlBJUU3JUJFJUE5JUU2JTlCJUI4JUUzJTgzJTg2JUUzJTgzJUIzJUUzJTgzJTk3JUUzJTgzJUFDJUUzJTgzJUJDJUUzJTgzJTg4JUUzJTgzJUJCJUU4JUE2JTgxJUU0JUJCJUI2JUU1JUFFJTlBJUU3JUJFJUE5JUU2JTlCJUI4JUUzJTgxJUFFJUU2JTlCJUI4JUUzJTgxJThEJUU2JTk2JUI5JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz01MjE0ZDhhMTY1ZjE1ODIxNGE5NzU4Njc3MTNjOTBmNg%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBzeWFudGllbiZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9MTc4MmM0MTlmNzhiYTJjNTk0ODYwZmExZDc0OWYzNjQ%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Db088349e276a1ebcdb9dcf1e2d753094)
iframeで埋め込んだYouTube動画をJavaScriptで操作。
iframeで埋め込んだYouTube動画の再生・停止などを、自サイトにはIFrame Player APIのファイルを組み込まずにJavaScriptで動的に操作する方法のメモ。 iframeで取得表示されたYouTubeのwindowオブジェクトを取得し、postMessage()メソッドでAPIのコマンドを送信して操作する。 埋め込むiframeにJavaScript APIの使用を許可するパラメーターを付与。 iframe内で表示している外部サイト(YouTube)のwindowオブジェクトを取得。 取得したwindowオブジェクトにpostMessageメソッドでAPIのコマンドを送信。 HTMLに埋め込みコードとコントローラー要素を記述 iframeの埋め込みコードにAPIの使用を許可するパラメーター「enablejsapi=1」を付与する。このパラメーターを付与しない場合、デ
CSSでメディアクエリはもう必要ないかも -メディアクエリなしで実装するテクニックのまとめ
Webサイトやアプリをレスポンシブ化するためにメディアクエリに頼っているのであれば、CSSの機能を見直して、昔ながらのブレークポイントを新しい流動的なアプローチで実装ができないか検討する時期かもしれません。 CSSの実装はデバイスベースからコンテンツベースに移行しているのが現状です。grid, flexbox, vh, vw, calc, clamp, min, maxなど、CSSの機能を使用してレスポンシブ対応にするテクニックを紹介します。 You Probably Don't Need Media Queries Anymore by Kathryn Grayson Nanz 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 大局的なgridとflexbox 活躍するCSSのプロパティ 完全に機能するCSSの数学関数
簡単CSSアニメーション＆デザイン20選（ソースコードと解説付き） | knowledge / baigie
CSSは使いようによっては様々な表現が可能な奥深い言語です。しかし、アニメーションなど凝った動きをするものに関してはコードは見れても実装方法を詳しく解説している記事は多くないように思えます。 この記事では、私（さかっちょ）がTwitterで過去にツイートしたCSSの技術をCodePenで改めて実装し、Twitterでは解説しきれなかった実装方法をより詳しく説明しています。CSS初学者の方にもわかりやすいように解説していますので、ぜひ参考にしてみてください。 その1. 一文字ずつ登場するテキストアニメーション See the Pen [CSS Tips] Text Show-up Motion by Takuro Sakai (@sakaccho) on CodePen. 一文字ずつtransformで移動させています。文字が途切れることなく流れるようにtransition-delayを調整
Google Apps Script でよく使うスニペット集 30 選 - Qiita
この記事は DevFest 2020 の Google Apps Script 入門 2020 で紹介しました。 はじめに Google Apps Script では非常に簡単に Google Apps （スプレッドシート、 Google カレンダー、 Gmail、 Google Drive など） 間の連携ができます。例えば Google カレンダーのイベント一覧をスプレッドシートにエクスポートする際には以下のような処理の流れになります。 Google カレンダーからイベント一覧を取得 スプレッドシートに入力する形式にデータ変換 Google スプレッドシートに値を挿入 1, 3 のような Google Apps から取得、挿入する部分はよく使い回す部分となるので、スニペットとして使い回すと便利です。今回は私がよく使うスニペット集を紹介しようと思います。 スプレッドシート スプレッドシー
Web制作の常識が変わる、便利な最新オンラインツール48個まとめ
この記事では、Webデザインやグラフィックデザインの制作スピードを短縮し、生産性をアップする、便利な最新オンラインツールをまとめてご紹介します。 「もっと早く知りたかった」と思わせる、面倒な作業をサクサクこなす時短ツールが勢揃いです。カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Web制作便利ツール 2. デザインコレクション 3. イラスト系ライブラリ 4. 配色ツール 5. プロトタイプツール 6. コラボ、リモートワークツール 7. 面白、クリエイティブツール Web制作の常識が変わる、便利な最新オンラインツールまとめ Web制作便利ツール The Hero Generator ウェブサイトの魅力的なヒーローイメージを作成できるオンラインツール。グラデーションオーバーレイやボタンスタイル、見出しタイトルの余白など細かい部分も手
Contact Form 7 のテンプレートに独自のタグを入れてその内容をセットする方法 - Life is Really Short, Have Your Life!!
Contact Form 7を使っていて、チェックボックスのチェックの有無でメールに吐き出す内容を変える必要があるという要件がありました。 というわけで、吐き出す内容を変えるものを適当なタグをつけてメールテンプレートに入れます。僕の場合は[_proxy]というタグをつけて、メールテンプレートに入れておきました。 で、当然ですがこの[_proxy]というタグに対して内容をセットしなければなりません。Contact Form 7のフィルターフックを利用します。functions.phpにこんな内容を書きます。 <?php //フィルターフック add_filter('wpcf7_special_mail_tags', 'my_special_mail_tags',10,2); function my_special_mail_tags($output, $name) { //画面に入れた適当な
Contact Form 7を使い倒す② 「どちらか」必須にしたい時 | 33歳、起業5年生のブログ
前回に引き続き、所属するスキー学校の予約フォーム案件の話。 レッスン予約 こちらのインターネット予約は、 極楽坂エリア専用 となりますのでご注意ください。らいちょうバレーエリア・あわすのエリアについては、お電話にてご予約ください。 (1)予約内容の変更・キャンセルについては 前日までに お電話または予約確認メールに返信いただきその旨をお伝えください。なお 当日のキャンセルについてはお電話のみ で承ります。 (2)当日は各講習 開始時間の20分前までに … 年齢または学年といった風に、どちらかの要素の選択をしてもらわないといけないことが発生した場合の対応方法。実際には「学年（年齢）」によって、受講できる内容が異なるために、3つの年齢層に応じて分岐を設定。「～小学2年生」、「小学3年生～小学6年生」、「中学生以上（大人）」の3つの年齢層を設定してます。 1)冒頭に年齢選択
AnimateCCでウェブサイトを作ろう – 宇都宮ウエブ制作所
はじめに この記事はFLASHer Advent Calendar 2016の７日目の記事です。HTML + CSSを使用してウェブサイト制作を行う人を対象にして書いています。AnimateCC（旧Flash）の初歩的な知識があるほうが望ましいですが、もしFlashについて全く触ったことがなくても大丈夫です。 Flashの初歩的な操作方法などについての説明はこの記事内には書かれてありません。ですがFlashを知らない人でも「やってみたい」と思う人が増えることを願って書いた記事です。 今の人なら信じられないかもしれませんが、１０年もたたない前までは「ウェブサイトに動きは不要！」って本気で言ってる人が多かったんです。冗談だと思うでしょうが、本当です。“ユーザーに不便を強いるような動き”が必要ないことは当然のこととして、今日び“ユーザー体験”という使い古されて陳腐になってしまった言葉を使うまでも
普通のHTMLの書き方
保守しやすく、規模に依存しないHTML文書のために 一般 DOCTYPEで始める 置き換えられるべきまたは旧式のDOCTYPEを使わない XML宣言を使用しない 文字参照はできる限り使わない &と<、>、"、'は名前文字参照を使ってエスケープする 制御文字や不可視文字は数値文字参照を使う コメントではその内容の前後へ空白文字を置く 終了タグを省略しない 空要素の書き方を混ぜない タグや属性値の前後へ空白文字を置かない 大文字・小文字を混ぜない 引用符を混ぜない 属性を2文字以上の空白文字で区切らない 真偽値を取る属性の値は省略する 名前空間は省略する XML属性は使わない data-*とMicrodata、RDFa Lite用の属性と通常の属性を混ぜない デフォルトの暗黙のARIAセマンティックスを尊重する 文書要素 lang属性を追加する lang属性の値はできる限り短くする できる限り
hamatte-wataru.com is Expired or Suspended. - HAMATTE-WATARU.COM
Domain for History This domain name was built 2014-05-11 for a period of 1 year. The website title is [ ハマって渡る！ ].This domain name was built between 2014-12-17 and 2017-10-26 for a period of 4 year. The website title is [ ハマって渡る！〜WordPress・jQuery中心のWEB制作ハマりどころ解消備忘録〜 ].This domain name was built 2018-04-07 for a period of 1 year. The website title is [ hamatte-wataru.com - This website is for sale!
Instagramの画像を取得して表示できるjQueryプラグインInstafeed.js | 福岡のホームページ制作会社 | シンス株式会社
こんにちは、福岡のホームページ制作シンス株式会社の越水です。 ホームページ制作をしていると「Instagramの特定のハッシュタグで投稿されている画像を一覧表示したい」という場面があります。 今回はInstagramからリリースされているAPIとjQueryプラグインを使って、ホームページ上にInstagramの画像フィードを表示させる方法を紹介します。 好みのハッシュタグの画像を並べるのに便利なInstafeed.jsInstagramに投稿されている画像フィードを取得するために今回はInstafeed.jsというjQueryプラグインを利用します。 まずはInstagram APIの取得準備をする。そのための下準備として、InstagramのAPIを取得するためのアプリケーション登録をします。 アプリケーション登録といってもそれほど難しいことはしません。 まずはInstagram De
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【Swiper】ブレイクポイント（PC・スマホ）で有効／無効にする方法 | WEB MEMO LOG
CSSのinsetプロパティで上下左右の中央に配置する時の「position: fixed;」での新しい記述方法
AnimateCCで “箱入り娘” を作ってみるよ！[フレームアクションの書き方][データ保存localStorage][時間Date] HTML5 Canvas入門（スマホ対応webゲーム）CreateJS![AnimateCCで “箱入り娘” を作ってみるよ！[フレームアクションの書き方][データ保存localStorage][時間Date] HTML5 Canvas入門（スマホ対応webゲーム）CreateJS](https://cdn-ak-scissors.b.st-hatena.com/image/square/916a6aa5eaf70e123c4d80f319b007abfde1e273/height=288;version=1;width=512/https%3A%2F%2Ftanegame.com%2Fwp%2Fwp-content%2Fuploads%2F2018%2F12%2Fc12892fa0a76a53e284b1dc6368df483.png)
http://www.okuni.me/entry/hover-animation-button-matome
Instafeed.js - a simple Instagram javascript plugin