[WordPress] WP_Queryで取得した記事の件数を表示する
前提：カスタム投稿タイプの定義 本記事では、カスタム投稿タイプ「ブログblog」の記事を取得するものとして説明します。カスタム投稿タイプはfunctions.php で定義します。 リファレンス（英語）：register […]
[WordPress] WP_Queryで記事を全件取得する
前提：カスタム投稿タイプの定義 本記事では、カスタム投稿タイプ「ブログblog」の記事を取得するものとして説明します。カスタム投稿タイプはfunctions.php で定義します。 リファレンス（英語）：register […]
[Shopify] セクション開発メモ
基本の型 新規セクションファイルsection/sample.liquidの作成。 テーマエディタでセクション「Sample Section(presets)」が追加できるようになる。追加したセクションは、テンプレートの […]
[Shopify] メタフィールドの出力方法まとめ
Shopify管理画面「設定>カスタムデータ」でメタフィールドを定義することで、デフォルトにはない項目を入力・表示させることができます。 基本の出力方法 メタフィールドの定義時に設定する「ネームスペースとキー」を使って、 […]
[Shopify] Liquidの基本構文まとめ（if, for, etc…)
Shopify Liquidの基本的な文法のまとめです。 他の言語のまとめはこちら： JavaScript（JS）の基本構文まとめ PHPの基本構文まとめ Shopify Liquidの基本構文まとめ（当記事） 変数宣言 […]
[PHP] PHPの基本構文まとめ（if, for, 配列, 計算, 日付, etc…)
PHPの基本的な文法のまとめです。 他の言語のまとめはこちら： JavaScript（JS）の基本構文まとめ PHPの基本構文まとめ（当記事） Shopify Liquidの基本構文まとめ 変数宣言 条件分岐（if） 比 […]
[JS] JavaScriptの基本構文まとめ（if, for, 配列, 計算, 日付, etc…)
JavaScriptの基本的な文法のまとめです。 他の言語のまとめはこちら： JavaScript（JS）の基本構文まとめ（当記事） PHPの基本構文まとめ Shopify Liquidの基本構文まとめ 変数宣言 条件分 […]
[WordPress] 記事に紐づいたタクソノミー・タームを表示する
WordPressのタクソノミー・タームに関する備忘録です。記事に登録したカテゴリを表示させる方法をまとめます。 関連記事： [WordPress] タクソノミー・タームを全て取得&表示する 前提：カスタムタク […]
[CSS] 途中で色が変わるカラフルなborderの作り方
見出しなどでよく使うこんな感じ↓の下線のデザイン。 見出し 通常border-bottomで作りますが、これを疑似要素やlinear-gradientを使って2色、3色、4色…のカラフルな下線にする方法をまとめます。 1 […]
[JS] iframeで読み込んだ要素の高さ指定（レスポンシブ対応）
<iframe> で外部のHTMLを埋め込むとき、スクロールを発生させないためには <iframe> にコンテンツ分の高さ指定が必要です（デフォルトは150px）。しかしその外部HTMLがレスポン […]
YouTubeをbackground-size:coverっぽく表示させる方法（YouTube API + jQuery)
要素に背景画像を置くとき、幅or高さの長いほうに合わせて画像を引き伸ばすには background-color: cover; というCSSを使います。(最近だと object-fit:cover; も有効です) 今回は […]
[2023年] iframeでYouTube動画を埋め込む方法
WebサイトにYouTube動画を埋め込む方法として、iframeを使ったものが主流かと思います。仕様変更された箇所などを毎回忘れるので自分用にまとめなおしました。 公式ドキュメント ： https://develope […]
スライダープラグイン「Swiper」の基本の使い方
「Swiper」は、レスポンシブ対応のスライダープラグインです。スライダープラグインは数多くありますが、「Swiper」はjQuery等のライブラリを使わず、それ単体で動作するのが特徴です。当記事では、Swiperを使う […]
スライダープラグイン「slick」の基本の使い方
「slick」は、レスポンシブ対応のjQueryスライダープラグインです。当記事では、slickを使うために最低限押さえておきたいポイントをまとめます。 公式サイト ： https://kenwheeler.github […]
[jQuery] スクロールして、要素が画面内に入ったか・出たかを判定する
タイトルの通りです:)判定の考え方にも色々あるため（要素が1pxでも入っていればいいのか？画面の中央に来たくらいがいいのか？など）、そのあたりも網羅していきたいと思います。 色々な判定の組み合わせ一覧 画面:下 × 要素 […]
よく使うGitコマンド
新しいブランチを作成 ブランチを切り替える（チェックアウトする） ブランチ名を変更 ブランチを削除 現在チェックアウト中のブランチは削除できないので注意。 現在の変更をステージングしてコミットする リモートにプッシュする […]
[WordPress] タクソノミー・タームを全て取得&表示する
WordPressのタクソノミー・タームに関する備忘録です。サイドバーに「カテゴリ一覧」のナビゲーションリストを表示させたい、といったケースに使える実装サンプルもご紹介します。 関連記事： [WordPress] 記事に […]
[CSS] アニメーション(animation) プロパティの使い方まとめ
CSSアニメーション（ animation プロパティ）のまとめです。 基本の書き方 CSSアニメーションを使うには、まず開始(0%) ～ 終了(100%) までどのように変化するかを「キーフレーム（@keyframes […]
futureshop関連のドメイン・URLをまとめてみた
futureshopでECサイト構築・運用をしていると、独自ドメイン以外にも色々なドメインが登場します。*****.fs-storage.jp、secure**.future-shop.jp、c**.future-sho […]
ロリポップ!でWordPressの記事が保存できないときはWAFを確認する
当ブログをレンタルサーバ「ロリポップ!」× WordPress に乗り換えたところ、管理画面で記事が保存できないエラーが多発しました。 結論として、サーバに備わっているセキュリティ機能「WAF」の誤動作が原因だったので、 […]
[PHP] Web上の画像ファイル(連番)にアクセスして、リネーム・保存する
ECサイトに登録した商品画像にブラウザでアクセス→リネームしてローカルに保存、という作業をPHPで効率化したときのメモです。 前提 集めたい画像のURLは次のような感じです。http://www.sampleshop.c […]
Google フォームをHTML&CSSで自由にデザインする方法
「Google フォーム」はお問い合わせフォームやアンケートをサクッと作るのにとても重宝します。しかしシンプルなツールである分、デザインのカスタマイズ機能も最小限です。 とはいえ完全自作したり、有料サービスを導入するほど […]