
CSSでマウスホバーエフェクトといえばtransitionプロパティを使ってアニメーションさせることが多いと思いますが、少し複雑なアニメーションをさせたい時はtransitionでは難しいことがあると思います。 そんな時は、hover疑似クラスと合わせてanimationプロパティを使い、@keyframesでうまいことやるといい感じにすることができるので、個人的にはよく使っているのですが、animationプロパティでは、マウスアウト時にアニメーションが行われず、瞬時に元の位置へ戻ってしまい、少し不格好になってしまうのが悩みの種でした。 これを何とかしたくて色々やってみた結果、すごくシンプルな方法ですが、animationプロパティでもマウスアウト時にアニメーションさせることができたので、簡単にご紹介します。 マウスアウト時の挙動 とりあえず、それぞれのマウスアウト時の挙動を確認します。
サイトのサムネイルに『Mozshot』を使っていましたが、使用者が多いせいか最近は画像が重たくてページの表示が最近遅いです。でも、こういったサービスは便利なので、他にないか探してみました。 wordpress.comのAPI エンコードしたURLを指定します。「w」パラメータで画像の幅を自由に指定できWordpressのプラグインではないので、Wordpressを使用していないサイトでも使えます。 https://s.wordpress.com/mshots/v1/https%3A%2F%2Fja.wordpress.com?w=250 【サンプル】wordpress.com のスクリーンショットを幅250pxで取得してみました。 WordPressのプラグインは以下があり、ショートコードでサムネイル表示できるので便利です。 Browser Shot BM Shots HeartRails
Webコーディング(HTML/CSS/JavaScript)やEC-CUBEカスタマイズ、Webアプリなど
WordPressのテーマやプラグイン作成において、よく利用する関数やグローバル変数などを個人的に整理したコンテンツです。 各関数やグローバル変数は、情報別(データの種類)と目的別(機能の種類)に分類しています。 なお、ほとんどの情報はソースコードを見ながら書き留めた内容であり、確認不足による誤りや更新の遅れによる不正確な内容を含んでいる可能性があります。あらかじめご了承ください。
説明 少し前に投稿した「適切なテンプレートファイルを用意してテンプレート内の振り分け処理を無くす」で説明した通り、特定のカテゴリ専用のテンプレートとしてcategory-○○.phpを用意することで、category.phpやarchive.php内で振り分けを行う必要がなくなる。ただ、すべてのカテゴリ分を用意するのは効率的ではないし、特に子カテゴリについては親カテゴリと共通内容になるケースが多いのではないだろうか。ここでは、子カテゴリの個別テンプレートファイルを作らず、親カテゴリのテンプレートを利用する方法を紹介する。 カテゴリのテンプレートファイルがない場合の振る舞い 以前の投稿のおさらいを兼ねて、カテゴリのテンプレートファイルがどのように検索されるかを整理する。WordPressのシステムではユーザのリクエストがカテゴリページの場合、次の順番でテーマ内のテンプレートファイルを検索し、
EC関連のシステムなどでは請求書や領収書といった帳票類の出力が必要となる場合があります。 Webシステムにおける帳票類の出力では自動生成したPDFをダウンロードさせる方法が一般的かと思いますが、PHPのPDF出力用ライブラリとしては以下のようなものがあるようです。 TCPDF snappy dompdf mpdf TCPDFは以前何回か使用しました。 PDFのテンプレート(つまり固定フォーマット)に必要な情報を差し込む形で新しいPDFを生成できる点が特徴と言えます。 ただ、情報の差し込みに関する処理を個々に行う必要があり、特に差し込み位置や範囲を座標等で指定するため、記述量が相応に多く内容も複雑になる上にテンプレートの構造変更に対して柔軟性がないという弱点があります。 snappy、dompdf、mpdfはいずれもHTMLをベースにPDFを生成する方法になりますが、snappyはインストー
高品質な通話・配信・会話型AIの機能を 簡単に実装できる「Agora」 超低遅延&高拡張性のAPI/SDK AgoraとOpenAIが連携、「会話型AI SDK」が新登場! AIとのリアルタイムで自然な会話を実装! 多くのプラットフォームで活用されているAgora(アゴラ)は、あらゆる場所に鮮やかな音声やビデオ通話を埋め込めるSDKです。 多彩なAPIと開発ツール群でカスタマイズが簡単。FlutterやUnityなどとの連携もわかりやすく、会話型AIや音声SNS、VRやメタバース・ゲーム・ファンサービス・ボイスチャット・ライブコマースなど、豊かなオンライン体験とリアルタイムコミュニケーションのサービス作りに役立ちます! アナリティクス、録画/録音、リアルタイム音声テキスト変換、リアルタイム文字起こしなど、さまざまな追加機能も用意されており、拡張性があります! ブイキューブはAgoraの日本
エンジニアの小林です。 クラフではLaravelを使ったWEBサービスの開発も行っています。 今回はLaravelのchunkメソッドとchunkByIdメソッドの違いについて、解説してみたいと思います。 chunkとは chunkとは「小さな塊(チャンク)」という意味で、Laravelではクエリビルダに用意されているchunkメソッドで、DBからデータを小さな「塊(チャンク)」ごとに分割して結果を取得し、処理を行うことができます。大量データを扱う場合はメモリ不足エラーを起こさず安全に処理することができます。 Laravelには似たような名前でchunkByIDというメソッドも用意されていますが、どちらを使えばいいのでしょうか。 結論:chunkByIDが使えるときはchunkByIDを使う 最初に結論を書いてしまうと、私はchunkByIDが使える局面ではchunkByIDを使うことをお
ある要素をスクロールと同じ動きで追従させて、終点で固定させたい場合ってありますよね。そんなときは「position: sticky」が便利です。動き方の説明は文章だと説明が難しいのですが、動画だと以下...
ある商品ページからGoogleフォームを使った問い合わせを行う際、顧客が問い合わせ商品についてその都度書かなくても良いように、どの商品ページから問い合わせを行ったのかをわかるようにしました。 やったことは、WordPressでショートコードのプラグインをつくり、元ページのタイトルをGoogleフォームにURLパラメータとして渡すことです。 GoogleフォームにはURLパラメータを利用して初期値を指定することができるので、その方法をご説明します。 おおまかな流れ Googleフォームに初期値を渡す方法は検索するといくつか出てくるのですが、過去何度か仕様が変わっているようですね。現在のおおまかなやり方は、 1.GoogleフォームのURLを確認 2.該当フォームのname要素を確認(これがURLパラメータとなる) 3.初期値として渡す値をURLエンコードしてパラメータと結び付けたものがURL
仕組み コメント投稿時に利用されるfilterのpreprocess_commentの中でスパム判定を行い、スパムに該当するコメントを弾きます。 さらにスパムの場合はwp_dieを呼び出して、その時点で処理を強制終了、そのままエラー画面に表示を委ねます。 filterの意味を考えると本当はwp_dieを呼び出すのは微妙なんですが、後述する解説の理由から選択肢がありません。 WordPressのコメント処理 このコードを作るためにWordPressのソースを適当に読みました。とりあえず、現在の[バージョン6.4.1]では以下の処理になってます。 まず、コメントを書き込むとwp-comments-post.phpに飛びます。これは表示されるURLを見れば分かると思います。 次にwp-comments-post.phpではwp_handle_comment_submission()関数が呼ばれま
今一つ知られてるのか知られていないのかよくわからん機能にlaravelの通知作成支援機能がある。それで作ってみるわけだがinertia.jsとreactの場合ちょっとlayout系を操作するにはクセがあるので、まずそこをシミュレートしようということになる。 ちなみにavatarからの流れてavatarがひっついているが、まあ気にしないでおk 通知ベルを作るreact-iconが入ってるという前提。ここではVscを使っているがまあ何でもいい、好きなやつでどーぞ。 import { VscBell } from 'react-icons/vsc'; export default function Authenticated({ user, header, children }) { // return ( // <div className="hidden sm:flex sm:items-c
laravel breezeの説明はAIに任せて割愛する 導入部分も割愛。確かどこかに書いたような… git clone https://gitlab.com/catatsumuri/laravel10-starter.git -b breeze-inertia-reactここに一通り設定したものがあるから適当に持ってくるってことで話を進めますぞ。作業ログ % cp .env.example .env % docker run --rm -it -v $(pwd):/app composer install --ignore-platform-reqs % ./vendor/bin/sail up % ./vendor/bin/sail npm install % ./vendor/bin/sail artisan migrate:fresh --seed Dropping all tab
WordPress5.5ではサイトマップや画像遅延読み込み、テーマやプラグインの自動更新機能など、新機能が追加されています。 そして地味な機能ですが、個人的には待望の機能が追加されました。 それはテーマやプラグインの手動での更新方法です。 公式ディレクトリ以外で配布されている物のアップデートや、ダウングレードする際の手段は以下の通りでした。 既存のテーマやプラグインを一度アンインストールして再インストールする必要もしくはFTPソフトでアップロード地味に面倒なのですが、これが5.5以降は上書きアップデートが出来ます。 アップグレードだけで無くダウングレードも出来ます。 これでFTPの情報をクライアントから貰えない場合など、何らかの理由でFTP操作が出来ない場合なんかにも活用できます。 プラグインの場合新規追加 WordPress管理画面より プラグイン > 新規追加 を選択します。 プラグイ
WordPressは、誰でも簡単にテキストやマルチメディアのコンテンツを作成し、共有することができる強力なオンラインパブリッシングツールです。それどころか、デザイナー、マーケティング担当者、開発者に便利な万能ツールとすら言えるでしょう。 つまり、WordPressは有能な仕事仲間として、さまざまな職業での成功を後押ししてくれます。 このような背景から、Kinstaでは、WordPress開発者におすすめのスキル習得のコツを各種記事でご紹介しています。 Gutenbergカスタムブロックを構築する方法 Gutenbergの動的なブロックを作成する方法 Gutenbergで投稿にメタボックスとカスタムフィールドを追加する方法 また、Gutenbergカスタムブロックについての動画もご用意しています。 そして、たしかにGutenbergの開発スキルでキャリアアップを目指すことはできますが、Wor
GutenbergがWordPressの標準エディターとなった今、ウェブデザインの可能性は、WordPressテーマに縛られません。WordPressには、優れたサイトのレイアウトに必要なデザインツールが搭載されており、テーマはサイトの構築やデザイン機能を強化する目的で使用することができます。 そしてブロックテンプレートは、サイト構築をさらに強化してくれる存在。ブロックエディターハンドブックには、以下のように記載されています。 ブロックテンプレートはブロックアイテムのリストとして定義されます。定義済みの属性やプレースホルダーコンテンツを含めることができ、静的にも動的にもできます。ブロックテンプレートを使用して、エディターセッションのデフォルトの初期状態を指定できます。 言い換えるなら、ブロックテンプレートは、デフォルト状態をクライアント上で動的に設定するために使用可能な複数のブロックアイテ
日付カテゴリータグユーザー新たに「タグ、ユーザー」で絞り込むことができるようになってますね! それでは早速実装していきましょう。 実装今回はテーマを修正することになるので、修正するファイルはfunctions.phpとなります。 外観 > テーマエディターよりエディタへと移動します。 ※知見がある方は、外部のテキストエディタで編集することも可能です。 サイドバーよりfunctions.phpをクリックします。 functions.phpを編集できるようになったら次へ進みます。 投稿一覧を「タグ」で絞り込む機能を実装 /* 投稿一覧絞り込み用 */ //投稿一覧リストの上にタグフィルターを追加する function narrowing_down_posts(){ global $post_type, $tag; if ( is_object_in_taxonomy( $post_type,
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く