アフター・ブラウザ時代のWordPressはこの先どう生き残るか – Capital P – WordPressメディア
先日、WordCamp Asia 2025 マニラのレポートをお届けしたが、今回は予告通りAlain Schlesserによるセッション “After the Browser: AI Assistants as the New Gateway to Digital Services” の感想から、今後WordPress開発を生業とする人間が考えいくべきことを考察したい。 54:32あたりから まず、Alainが誰かについて説明しよう。AlainはWordPressのコマンドラインツールWP CLIのリードである一方、Yoastのプリンシパル・アーキテクト（技術関連の相談役的ポジション）である。つまり、技術者としてSEOに深く関連する企業に勤めているのだ。Capital Pのメンバー宮内とも懇意である。 Alainのセッション概要 このセッションの内容は概ね次の通り。 デスクトップブラウザ→
CSSのwidth: 100%;のより良い代替手段として、stretchキーワードが実はかなり便利です
幅いっぱいの要素から左右のマージンを引きたいときに、こういうCSSを使用すると思います。width: calc(100% - 48px); 便利なCSSですが、マージンを計算する必要があり、デザインの変更があった際はCSSも変更する必要もあります。 そこでstretchキーワードを使用すると、便利です。要素はオーバーフローせずに使用可能なスペースいっぱいに表示され、マージンの計算も必要なくなります。 The stretch keyword: a better alternative to width: 100% in CSS? by Ollie Williams 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに width: 100%;が便利な例 width: stretch;の使い方 stretchのサポートブラウザ
これでCSSのみで実装できる！ スクロール方向に合わせてヘッダを非表示・表示する方法を解説
Webページを表示し、スクロールダウンするとヘッダが非表示になり、ページのどこからでもスクロールアップするとヘッダが再び表示される、というのを見たことがあると思います。 これまでは実装するにはJavaScriptが必要でしたが、CSSのみで実装できる方法を紹介します。 Solved by CSS Scroll-Driven Animations: hide a header when scrolling down, show it again when scrolling up. by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSS Scroll-Driven Animationsでスクロール方向を検出する transition-delayプロパティを使ったテクニック ヘッダをスクロール時に表示
約8割の人が経験する「見づらいホームページ」 最も多い理由は？
Webマーケティングやインターネットリサーチ事業を手掛けるNEXERは、Webサイト企画開発を手掛けるくまwebと共同で「見づらいホームページ（Webサイト）」についての調査を実施した。事前調査で「普段からネットサーフィンをしてホームページを見る」と回答した全国の男女601人を対象に、ホームページが見づらいと思った経験やそう思ったページの特徴、見づらいと思った理由などについて質問している。 「このホームページ見づらいな」と思ったことがあるかという質問に対しては79.7％の人が「ある」と回答した。 前の質問に「ある」と回答した人に、それはどんなホームページだったか聞いたところ、以下のような回答があった 文字ばかりで知りたいことが知れないまたは分かりづらいもの。（10代・男性） カラフルすぎる。（20代・女性） スクロール途中にホームページ内が変わったりして、勝手に戻る。（20代・女性） デザ
イラストレーション・アイコン素材｜デジタル庁
素材集の活用で、行政手続きをもっとわかりやすく専門的でわかりにくい行政手続きの改善へマイナンバーに関連するデジタル手続は専門用語が多く、イラストレーションやアイコンなどを活用して、ひと目でわかりやすく伝える必要があります。しかし、これまでは政府として公式に配布する専用の素材がありませんでした。 そのため、地方自治体や民間サービスの方々が独自に作成する必要があり、表現が伝え手によってバラバラになる課題を抱えていました。 コストを抑えて、わかりやすい表現が可能にイラストレーションやアイコン素材の作成には、専門的な知識と多くの時間が必要です。視認性が高く保たれているか？ 日本に暮らす人、訪れる人が理解しやすい表現になっているか？ など、さまざまな検討事項があります。どなたでもご利用できる素材を配布することで、別々の機関が同じものを制作したり、検討する時間を省くことができます。 また同時に、素材制
スラムダンク人気で注文殺到の日本酒。危機を救ったのは？ | Forbes JAPAN 公式サイト（フォーブス ジャパン）
「企業がホームページを持っているなんて、当たり前」。大企業、あるいはスタートアップ企業に勤める人たちはそう思っているのではないか。だが、多くの中小企業にとっては、コーポレートサイトやサービスサイトといった自社のホームページを持っていることは、決して“当たり前”のことではない。 そんな現状に、地方から風穴を空ける企業がある。月額定額制のホームページ制作・運営サービス「ばりよか」を運営する福岡のスタートアップ企業、ラシンだ。 ホームページは一般的に、自社のPRや信頼の担保、ブランディングに有効とされ、国内だけでなく海外にまでアプローチできるというメリットがある。ただ、日本の中小企業ではいまだネットに慣れない人材も多く、必要を感じているのにもかかわらずホームページの開設や更新ができていない現状がある。 少し前の調査にはなるが、2012年の『中小企業白書』（中小企業庁）によると、ホームページを開設
【CSS】画像を別画像でマスキングする方法＆コード例 | PisukeCode - Web開発まとめ
画像を別画像でマスキングしたいことってないですか？ 例えばいくつか例を挙げるなら、 画像を黄色の星形に切り抜きしたい 画像をヒョウ柄のハートマークで切り抜きたい 画像を水玉模様に重ねて切り抜きたい ・・・みたいな感じで 実はこれ、CSSの mask-image を使えば超簡単にできます。 ただし、画像で画像を切り抜くわけなので、少し工夫が必要でした。 ということで、そこらへんの注意点も含め、 CSSの mask-image プロパティで画像をマスキングする手順 を紹介します。 画像マスキングするには mask-image プロパティを使う 画像のマスキングには mask-image というCSS3のプロパティを使います。 これについての説明は次の通り mask-image は CSS のプロパティで、要素のマスクレイヤーとして使用される画像を設定します。 引用元 ： https://d
11月末のChrome 108でビューポートのサイズ変更動作が変更、position: fixed;は配置がずれる可能性があります
11月末にリリース予定のChrome 108で、ビューポートのサイズ変更動作が変更されます。簡単に言うと、Android版Chrome 108の挙動はiOS版Safariと同じになり、より一貫性のあるクロスブラウザの動作が実現されます。 サイズ変更動作の内容とサイズ変更の仕組み、Chrome 108のリリースまでに何を準備しておけばよいのかを紹介します。 特に、position: fixed;を使用している要素やビューポート相対単位に依存している要素は配置がずれてしまう可能性があるので、対応が必要です。 Prepare for viewport resize behavior changes coming to Chrome on Android by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。 はじめに レイアウトビューポートと
【CSS】テーブルの行と列を入れ替える
テーブルでは、行は横に列は縦に表示されますが、今回は図のように行を縦に、列を横に表示するようにしてみます。htmlはそのままで、CSSに数行追加するだけで行と列を入れ替えることができます。 最初に元のテーブルのhtmlとCSSを書いておきます。 .table1{ border: 1px solid #aaa; border-collapse:collapse; } .table1 th, .table1 td{ border: 1px solid #aaa; padding:4px; } .table1 th{ background-color: #ccc; } <table class="table1"> <tr><th>プラン</th><th>価格</th><th>容量</th></tr> <tr><td>X10</td><td>900円</td><td>200GB</td></tr>
WordPressで特定の画像だけscrset属性を無効にする
記事内に配置したAPNGファイルがアニメーションしないというトラブルがあったので調べてみたところ、srcset属性が設定されていることが原因でした。その対策としてAPNGの画像だけsrcset属性を無効にしたのでその覚書です。 APNGにsrcset属性があるとダメな理由 WordPressはデフォルトでは画像をアップロードすると自動的に複数サイズの画像を生成し、srcset属性に割り当ててくれます。 問題はその生成される画像がAPNGではなく1コマ目だけ取り出したPNGファイルになってしまうということです。 そのため、オリジナルファイルが表示される条件ではアニメーションが表示されますが、それ以外の条件では1コマ目の画像が表示されるだけとなりアニメーションしません。 wp_calculate_image_srcset_metaフィルターを使う WordPressでsrcset属性を無効にす
jQueryのload()を使って外部HTMLを読み込んでページを作る - Qiita
jQueryによる外部HTMLの読み込みは様々なところで解説されていますが、読み込まれる前提ではない作りのHTMLを読み込む時の解説は少ないように思います。 今回は必要に迫られ、HTMLから一部の内容を抜き出して別ページに表示します。 「外部」とは言いつつも、同一ドメイン下でのみ有効です。 使っている技術に難しいものはありません。 環境 macOS Catalina(10.15.7) jQuery 3.6.0 html5 Firebase Hosting MAMP 前提 「HTML資産を横展開しよう」というのが出発点。 ただし、横展開するには下記のお約束をクリアする必要がある。 基盤HTMLをコピーしてサーバに格納する。構造変更は基本NG。どうしても変更したい場合、基盤及横展開済みのHTMLの更新も必要。 新サービスでは表示方法が2種存在する。Webページ単独とWebアプリ上でポップアップ
HTMLだけでスマホのカメラにアクセスできるの知ってた？ 前面・背面カメラにアクセスできるHTMLのcapture属性
HTMLだけでスマホやタブレットのカメラにアクセスできる、HTMLのcapture属性を紹介します。 私はこの属性を知らなかったのですが、実際にiPhoneとiPadで試してみたところ、前面カメラにも背面カメラにもアクセスできました。JavaScriptなどは必要なく、簡単なHTMLでできます。 You Can Access A User’s Camera with Just HTML by Austin Gil (@heyAustinGil) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに HTMLのcapture属性とは capture属性のサポート状況 終わりに はじめに 私は先日、今までに見たことがないHTMLの属性、captureに出会いました。capture属性は非常にクールなので、動画と記事を書くことにし
ペイント3Dで写真に写っている不要なものを消す方法 – Microsoft『ペイント』『ペイント3D』の使い方入門
せっかくいい写真が撮れたのに、不要なものが写っていて、コレさえ写ってなければ….。 と、がっかりしたことはありませんか？ 実はWindows10に標準で付いてくるアプリ『ペイント３Ｄ』で不要な部分を消してしまう事が出来るんです。 しかも難しい操作や、設定などは一切不要で 写真をペイントアプリで開く 消したい部分を選択する 消去実行 の3ステップで消せるんです。 もちろんWindows10搭載のパソコンをお持ちの方は標準でインストールされているので、お金を出してソフトを購入したり、インストール作業をを行ったりする必要もありません。 こんなすごい機能使わないともったい無いですよね。 という事で、ペイント3Dを使っていらないものを消す方法をご紹介します。 ペイント3Dで写真に写っている不要なものを消す方法 不要なものを消した画像サンプル まず、実際にどんな感じに画像が仕上がるのかを見てみましょう
JavaScript Obfuscator Tool
A free and efficient obfuscator for JavaScript (including support of ES2022). Make your code harder to copy and prevent people from stealing your work. This tool is a Web UI to the excellent (and open source) javascript-obfuscator@4.0.0 created by Timofey Kachalov. FAQWhy would I want to obfuscate my JavaScript code?There are numerous reasons why it's a good idea to protect your code, such as: Pre
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
無料のメールフォームPHP「EasyMail(イージーメール) 」
Tappy - Yahoo!デベロッパーネットワーク
仕事を発注したくて企業サイトをチェック、「表示が遅いこと」以上にイラっとくる1位とは？【オンジン調べ】 | Web担当者Forum
商用利用無料、国内のフリーイラスト素材の総まとめ
Icons - Material Design
Unicode 文字テーブル - すべての Unicode 記号とそのコードを 1 ページに掲載 (◕‿◕) SYMBL
