サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
iPhone 16
ebisu.com
WordPress 6.2 でベータ表記のとれたサイトエディターですが、6.3 ではインターフェースまわりがさらに強化・改善され、各種機能への導線が整備されています。 特に、固定ページについては投稿エディターを使用せず、サイトエディターだけで固定ページの作成・コンテンツの編集・テンプレートの編集・デザインまで完結するようになったため、「WordPressを使ったWeb制作のワークフローが大きく変わるかも」と感じています。 そのため、サイトエディターのインターフェースまわりの変更点をまとめておきます。 エディターナビゲーション [外観>エディター]でサイトエディターを開くと、左側に「エディターナビゲーション」が表示されます。WordPress 6.3 ではこの部分が強化され、主要機能に効率よくアクセスできるようになっています。
WordPress の「パターン」は、スタイリングしたブロックや、複数のブロックを組み合わせて構成したものを、1つのパーツとして扱うためのしくみです。これまでは、公式のパターンディレクトリやテーマ、プラグインで用意されたパターンを利用できました。 公式のパターンディレクトリに用意されたパターン WordPress 6.3 ではこのパターンの機能が整備・強化され、エディターでパターンを作成・管理できるようになっています。さらに、再利用ブロックがパターンに統合され、「同期がオンになったパターン(同期パターン/Synced Pattern)」として扱われるようになりました。 パターンが整備・強化された流れと将来的な構想 このような整備・強化が行われたのは、エディターの機能をわかりやすくするためなのはもちろんですが、それだけではありません。将来的にパターンを「セクションを構成するものとして利用する
MPA なフレームワークの代表的な存在である Astro。 ただ、SPA なサイトに慣れてしまったためか、個人的には MPA のパタパタした挙動がどうも落ち着きません。これは、ページやサイト側の処理だけが原因ではなく、ブラウザの挙動がページの移動を強調するようになった影響も大きい気がします(セキュリティ対策?)。 そのため、Astro でサイトを作る場合には挙動を SPA っぽくしたくなり、その対策をいろいろと考えるのですが、React Server Components が登場してきた現状だと Next.js で SPA でいいや… と、Astro の出番が少なくなっていました。 ところが、ブロックテーマな WordPress のフロントエンドとして使うフレームワークを検討していたところ、Gatsby.js ではブロックテーマのスタイルと GatsbyImage の相性の悪さが問題となり
WordPress のテーマ(クラシックテーマ)に theme.json を追加したら何が起きるのか? を調べていたところ、DOM の構造や適用される CSS の変化など、思った以上にたくさんの影響が起きていました。 影響(全 28 項目 + すべてのテーマに影響する 1 項目)と、その影響が起きる条件(トリガーとなるもの)は一覧表にしてこの記事の最後に掲載しました。 これだけあると、影響を受けないテーマを探す方が大変です。 そのため、個々の影響の詳細や対策方法については、実例と合わせて『WordPress ノート クラシックテーマにおける theme.json の影響と対策 2023』にしっかりとまとめましたので、参考にしてください。 何が起きるかを調べようと思ったきっかけ 現在の WordPress ではブロックテーマがスタンダードとなり、theme.json で機能の有効化やレイアウ
世の中の流れに応じて、OpenAI の API で遊び始めました。ChatGPT と DALL-E の API は Next.js を使って自前の環境を作ったりして便利に使っています。 ただ、それ以外にも気になったものがありました。それが、Embedding のモデルです。 https://openai.com/blog/new-and-improved-embedding-model このモデルを使うことで、文章をベクトル化してくれます。形態素解析などの処理も必要なく、テキストを渡すだけでシンプルにベクトル化してくれるんです。 大規模言語モデルによる Embedding もいろいろと公開されていますが、実際に自分で試してみようと思うとハードルが高くて手を出せませんでした。しかし、OpenAI の Embedding のモデルは ChatGPT や DALL-E と同じように使えますので、
WordPress 6.2 がリリースされ、ついに、フルサイト編集を行うサイトエディターから「ベータ」表記がはずされました。合わせて、インターフェースまわりが強化・改善されましたので、その点に絞ってまとめておきます。 サイトエディター [外観>エディター]をクリックすると、サイトエディターが開きます。このとき、左側にナビゲーションが、右側にトップページの画面が表示されるようになりました。 右側の画面をクリックすると、トップページの生成に使用しているテンプレートの編集画面が開きます。この手順で編集画面を開くと、「投稿コンテンツ」ブロックにコンテンツを読み込んだ状態でカスタマイズできます。 個々のテンプレートやテンプレートパーツは、左側のナビゲーションから選んで編集します。それぞれのメニュー内にある「すべての○○を管理」を選択すると、WordPress 6.1 のときと同じ一覧画面を開くことが
実用はまだ先だろうと思っていたブロックテーマですが、WordPress 6 のリリース以降、WordPress の開発がブロックテーマを中心にする形で加速したことで、制作環境が一気に整いました。 Create Block Themeプラグインが登場したことで、フルスクラッチでテンプレートや theme.json を作成する必要もなくなり、快適なノーコードな環境でテーマを作成できます。 こんな快適な環境を使いこなすためには、これまでのテーマとは全く異なる、ブロックテーマを理解する必要があります。 もちろん、テキストエディターで手を加えなければならない部分は残っています。ただ、実装が追いついていないからというよりも、簡単にさわれないようにする方法が定まっていないから後回しにされているかな、と思えるレベルには整っています。 ブロックテーマとは ブロックテーマは、これまでの WordPress の
WordPress の開発がブロックテーマを中心とした形になってきました。そんなブロックテーマの作成に欠かせないのが「Create Block Theme」プラグインです。 このプラグインには、Gutenberg の一部として検討されていたテーマ制作者向けの機能が分離され、開発が進められています。テーマ制作者には必須のプラグインと言えますが、まだまだ活用されていない印象ですので、このプラグインでできることを紹介します。 Create Block Theme プラグインでできること Create Block Theme プラグインをインストールして有効化すると、以下のような機能が利用できるようになります。 各機能は[外観]に追加されるメニュー「ブロックテーマを作成」と「テーマフォントを管理する」から利用します。ただし、メニューが追加されるのは[外観>テーマ]で Twenty Twenty T
Next.js 13のnext/imageは、Next.js 12では「next/future/image」と呼ばれていたものです。Next.js 12で使われていたnext/imageは、Next.js 13では「next/legacy/image」となっています。 ※以後、区別しやすいように next/future/image、next/legacy/image と表記します。 Next.js 12から13へ移行する場合、next/imageに関しては2つの選択肢があります。 next/imageからインポートしていたものを、next/legacy/imageからインポートする形に修正する。next/future/imageに合わせて、Imageコンポーネントまわりを修正する。 ここではnext/future/imageに合わせて、Imageコンポーネントを書き換える方法をまとめます。
画像はWebサイト・Webページの構成要素として非常に重要な存在です。また、ページのデータ量の中でも、大きな割合を占めます。 そのため、デバイスに対する画像の最適化は必須であり、現状であれば、解像度&画像フォーマットの両方を考慮した以下のようなレスポンシブイメージのコードが必要です。 <picture> <source type="image/webp" srcset=" image/lemons-w400.webp 400w, image/lemons-w768.webp 768w ... " sizes="100vw" /> <img srcset=" image/lemons-w400.jpg 400w, image/lemons-w768.jpg 768w ... " sizes="100vw" src="image/lemons.jpg" alt="Lemons" loading
CSS Container Queries(コンテナクエリ)は不足していた要素を補いつつ策定が進んでいますが、素のHTML & CSS以上に「コンポーネント」という概念を持つReactとの相性が良いのは明らかです。 これらのCSSを素のHTML & CSS環境だけで理解しようとすると、その必要性がピンときません。正直なところ、解説のための具体的なサンプルを考えるのも頭がいたいです。 また、「2カラムレイアウト と これからのHTML&CSS」の中でも触れましたが、素のHTML & CSS(pure HTML & CSS)で直接書かれたページを見ることがどんどん少なくなってきている現状では、そうしたコードを読みこなすためにもReactの知識が必要です。 デザインツールのFigmaなどを見ても、Reactといった環境を意識した構成になっており、機能を理解する上でReactの知識があった方が効率
公式テーマであるTwenty Twenty-Twoがブロックテーマとして公開されました。 現状のWordPressの機能をフルで使うためには、ブロックテーマとして作るしかないわけですから当然の流れではありますが、ブロックテーマへの移行がいよいよ本格的に始まるのかと考えると、ちょっと気が重くなります。 WordPress/twentytwentytwo: Twenty Twenty-Two, the default WordPress theme that will launch with WordPress 5.9. https://github.com/WordPress/twentytwentytwo ブロックテーマへの移行でクローズアップされるのはもちろん、Full Site Editing(FSE / フルサイト編集)です。しかし、Twenty Twenty-Twoを眺めていくと、
WordPress 5.xに対応したテーマ作成の本をオリジナルの電子書籍として出すことにしたところまでは、昨日の著者NOTE「『グーテンベルク時代のWordPressノート テーマの作り方(入門編)』について」でお話しました。 次に問題となるのが、「どこでどんな形で出すのか」ですが、これに関しては迷うことなくAmazon Kindleを選択しました。というのも、現状では余程のことがない限り、「Kindleのサービスそのものが途絶えることはありえない」と思えるからです。 ただ、Kindleを選択した場合に最大の問題となるのが、「KindleはPaperwhiteのようなE Inkスクリーンの端末でしか読めない」と思っている方が意外と多いということです。 実際のところは、AndroidとiOSはもちろん、Windows PCでも、macOSでも、問題なく読むことができます。「Kindleはどん
WordPress 5.8 では FSE(Full Site Editing / フルサイト編集)関連の機能がいろいろと導入されています。 どの機能を試してみるにも CSS が深くかかわってくるため、改めて、テーマの種類ごとにエディタとフロントに適用されるCSSの構成を確認してみました。 ※確認には WordPress 5.8 RC1 を使っています。 テーマの種類 - ブロックテーマとクラシックテーマ まず、現在のWordPressのテーマは、 FSEに対応した「ブロックテーマ」と、FSEに対応していない「クラシックテーマ」 に分類されます。 クラシックテーマは PHP で作成された従来型のテーマのことで、『WordPressレッスンブック 5.x対応版』や『グーテンベルク時代のWordPressノート』で作っているテーマもこちらになります。 そして、クラシックテーマであっても、Word
『HTML5&CSS3デザイン 現場の新標準ガイド【第2版】』はHTMLとCSSをリファレンス的にまとめた書籍です。第1版を出してから3年が経ち、その間の変化を反映させて最新の状態に改定しました。 Web制作の変化 3年の間にWeb制作の現場は大きく変化しました。 第1版を出した時点ではマイナーな存在だった「フレキシブルボックス(Flexbox)」や「CSSグリッド(CSS Grid)」も、今ではWebデザインのコントロールに欠かせないメジャーな機能となっています。フィルタやブレンドといった便利な機能も幅広く活用されるようになってきました。 あれもこれもフロート(float)でコントロールしていたことを考えると、たった3年の間にWeb制作の効率が大幅に向上したと言えるでしょう。 第2版には、 フレキシブルボックスの「ギャップ(gap)」CSSグリッドの「サブグリッド(subgrid)」スク
Gatsbyを調べ始めた頃にたどり着いた、こちらの記事。 Reactベース静的サイトジェネレータGatsbyの真の力をお見せします https://qiita.com/uehaj/items/1b7f0a86596353587466 当時はさっぱりでしたが、Gatsbyを色々と使うようになって、随分と理解できるようになってきました。 そして、この記事の中で当時から引っかかっていたのが、 …「クエリの結果」のみをJSONとして合わせてデプロイし、ブラウザ内ではGraphQL DBクエリ結果取得の代りにJSON値を使うことで… というお話。 ん? もしかして…ということで、テストでこんなコンポーネントを用意してみました(書籍のサンプルに合わせています)。 import React from "react" import { graphql, useStaticQuery, Link } fro
WordPress 5.5 以降のロードマップも見え始め、年内には Full Site Editing (FSE) & Block-based Themes が出てくるようで、非常に楽しみです。 また、Block-based Themesを見ているとどうしても SSG(静的サイトジェネレーター)っぽく見えるもので、WordPress が Jamstack を気にしないわけないよな… などと妄想してみたりしています。 一方、静的サイトジェネレーター周辺では、打倒WordPressなんて話をよく見かけます。気持ちはよくわかります。最近のWordPressは色々と大変ですし…。 また、コストをかけずにサイトを公開できる時代になって、WordPress のためのサーバーコストが気になり始めたという話もよく見かけるようになりました。 このあたりを考えれば、WordPress からの避難先として、静的
意外なところに手を出してきたと思われるかもしれませんが、きっかけは WordPress & Gutenberg なんです。 2015年の Automattic社 Matt Mullenweg 氏の "Learn JavaScript, Deeply" という言葉。そして、バージョン5.4までたどり着いた現在の WordPress と、見え始めた Block Based Theme。 世間では WordPress=PHP という認識がまだまだ強いわけですが、とっくに、Gutenberg=JavaScript(React)なわけです。 すでに見えている未来を考えれば、WordPress=JavaScript と言われる時代もそう遠くはないのではとさえ思います。 なので、自分たちも JavaScript(React)をもっと身近なものにしておかなければと動き始めました。 入門者の通常ルート通り、
3月末にリリース予定のWordPress 5.4に関する情報とともに、Block Based Theme(フルサイトエディタ)の話もよく見かけるようになってきたので、ちょっと試してみました。 Block Based Themeはこれまでのテーマとは異なり、サイト全体をGutenbergのブロックを使って構築してしまおうという考えのもと、新しいテーマの構造として検討が始まったものです。 テーマの構造や作り方に関しては、 以下のページが参考になります。 https://developer.wordpress.org/block-editor/developers/themes/block-based-themes/ 簡単にまとめると、 style.css これまでと変わることはありません。functions.php 基本的には、これまで通りです。今回は、Gutenbergの機能設定とstyle
『グーテンベルク時代のWordPressノート テーマの作り方 2(ランディングページ&ワンカラムサイト編)』ではJavaScriptファイルを用意してブロックスタイルを追加する方法を紹介しましたが、最新のGutenberg(バージョン6.2)ではPHPだけでも簡単に追加できるようになりました。 たとえば、functions.phpに次のように register_block_style() の設定を追加すると、見出しブロックに「デザイン01」と「デザイン02」の2つのブロックスタイルが追加され、見出しのデザインを切り替えることができるようになります。 register_block_style( 'core/heading', array( 'name' => 'design01', 'label' => 'デザイン01', 'inline_style' => '.is-style-desi
パーツを組み合わせてオリジナルなWebページを作ることを目的とした一冊です。レスポンシブWebデザインをはじめとする考え方が当然のものとして扱われている現状に合わせて、CSSフレームワークを利用せずに作るのか、CSSフレームワークを利用して作るのかを選択できるようにしています。 2014年3月 マイナビ刊 B5変型 320ページ / 978-4839948870 本書についての著者NOTE 本書の位置付け(ロードマップ) 出版社サポート Amazon Amazon Kindle はじめに 本書について もくじ はじめに スマートフォンやタブレットの登場により、多様なデバイスに対応できるWebページが求められるようになっています。その中で、レスポンシブWebデザインをはじめとする考え方が生まれ、Webページに当然のように組み込まれる時代になってきました。 その結果、多様なデバイスに対応したペ
「CSS3 スタンダード・デザインガイド【改訂第2版】」 を上梓しました。2013年4月段階での情報に基づき、CSS3 および CSS4の最新機能や各ブラウザの対応状況をまとめていますので、参考にしてください。 → 改訂第2版での主な追加・更新内容 なお、ブラウザでの対応状況に大きな変化があった場合には、本ページで対応状況一覧を更新していきます。 旧版「CSS3 スタンダード・デザインガイド」の巻末に掲載したCSS3のプロパティ&ブラウザ対応一覧です。2012年10月1日に更新した古い情報となっていますので、最新情報については「CSS3 スタンダード・デザインガイド【改訂第2版】」を参照してください。 CSS3 CSS3で新しく追加されたプロパティ。 CSS3 CSS2.1からのプロパティで、CSS3で機能が追加されたもの。 拡張 ブラウザが拡張したプロパティでW3Cの規格に未掲載のもの。
もともとは「XHTML/HTML+CSSスーパーレシピブック」をHTML5&CSS3な現状にあわせてリニューアルすることを目指してスタートした本だったのですが、単純にソースをHTML5&CSS3化するだけではなく、今どきにマッチした形にするためにレシピの内容を吟味していたところ… 「Webページを構成するパーツって昔に比べてシンプルになってるよ?」 「画像とかほとんど使わなくなってるし。」 「パーツの基本って1イメージ1テキストでいいんじゃないか?」 といったところから始まったわけですが、 「段組とかって自分でやらなきゃダメなの?」 「レスポンシブデザインも当然必要でしょ」 「なら、CSSフレームワークを使った方が便利なんじゃ?」 「パーツも相互に干渉しないようなものにしないとダメじゃない?」 …などと展開していきまして、当初目指していたものから大きく変化してしまい…結果的に進行が大幅に遅
昨年の本あたりから、同じ本に初級者向きだというレビューと中~上級者向きだというレビューをいただくケースが増えてきました。 これは、狙い通りではありますし、エビスコムの本をご贔屓にしていただいている方にはご理解いただけると思います。しかし、はじめて手にとっていただく方には「?」以外の何ものでもありませんので、このあたりでエビスコムの本のロードマップを公開したいと思います。 HTML5 スタンダード・デザインガイド CSS3 スタンダード・デザインガイド【改訂第2版】 この2冊のメインテーマは、「これまで第一線でバリバリと仕事をしてきたものの、忙しすぎてHTML5やCSS3といった最近のトレンドにちょっと乗れてないな…なんて方が、これまでに積み上げたスキルを生かしてこれからも第一線でがんばってもらうためには何が必要か?」というところから始まっています。 そのため、現状&ちょっと未来までの把握と
WordPress 3.3以降では、カスタム背景関連で自動出力されるスタイルシートの設定が以下のように変更され、テーマの設定によっては背景画像が表示されなくなります。 変更されたのはセレクタ部分で、これまでは背景画像を表示する設定が<body>に対して適用されていたのに対し、「custom-background」というクラス名を持つ<body>に対してのみ適用されるようになっています。 WordPress 3.2.xまでの出力<style type="text/css"> body {background-image: url(~); …} </style> WordPress 3.3以降の出力<style type="text/css"> body.custom-background {background-image: url(~); …} </style> そのため、WordPres
「CSS3 スタンダード・デザインガイド」の補足解説です。掲載・未掲載プロパティに関する最新情報を簡単にまとめていきます。ブラウザの対応状況などについては「CSS3プロパティ&ブラウザ対応一覧」を参照してください。 IE10が対応したcss3(float: positioned) IE10では最終的にflow:wrapは廃止され、「Exclusion(エクスクルージョン/除外)」がサポートされています。 float: 配置 配置 … positioned CSS3 IE10(Platform Preview 2)が対応した「Positioned Floats」の機能を利用すると、positionプロパティで表示位置を指定した要素に対して、テキストや画像といったインライン要素が回り込むように指定することができます。回り込みを指定するにはfloatプロパティを適用し、値を「positioned
You are being redirected to /note/css3/
PhotoDropper 2.xを利用してFlickrの画像を本文に挿入する方法 (WordPressデザインブック補足解説) 『WordPressデザインブック 3.x対応』のSTEP3-1で紹介したFlickrの画像を検索・挿入するプラグイン「PhotoDropper」のインターフェースが2.0から一新され、使い方が変わっています。そこで、ここでは新しくなった使い方についてまとめます。 1 PhotoDropperをインストールして有効化します。 2 古いバージョンの[設定>Photo Dropper]という設定項目はなくなり、新しいバージョンではすべての設定を記事の編集画面で行うようになっています。そこで、Flickrの画像を挿入したい記事の編集画面を開き、「アップロード/挿入」に追加されたプラグインのアイコンをクリックします。 3 初めてPhotoDropperを起動すると
Kindle Fireに続き、Nexus 7が登場したことで本格的に注目され始めた7インチのタブレットですが、第2世代のKindle FireであるKindle Fire HD(7インチ)を入手しましたので、Nexus 7と比較してみたいと思います。 どちらのタブレットも7インチで800×1280ピクセルという解像度なのですが、「スマートフォンサイトのためのHTML5+CSS3」の中でも触れたように、Nexus 7がtvdpiの「1.3312501(213dpi)」というdensity(device pixel ratio)を採用したのに対して、Kindle Fire HDではdensityが「1.5(240dpi)」に設定されています。 ※tvdpiや他のデバイスのdensityに関してはこちらで公開中のお試し版でもご覧いただけます。 そのため、densityに基づいたビューポートを利用
次のページ
このページを最初にブックマークしてみませんか?
『エビスコム - EBISUCOM』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く