全記事一覧

Luxeritas 3.7.6

Luxeritas Theme 3.7.6 をリリース。

いろいろと機能を拡張。その他、数点の仕様変更と不具合修正など。

機能拡張に関する詳細は以下のとおり。

スポンサーリンク

機能拡張詳細

モバイルエミュレータの表示倍率変更機能

モバイルエミュレータに表示倍率を変更できる機能を追加しました。

タブレットのような中型デバイスのエミュレートでも 75% とかにすれば見やすくなると思う。

モバイルエミュレータ

また、エミュレート時のフリックスクロールのスクロール量が多すぎて、スクロールしだすと止まらない状態になったりするので、スクロール量減らしました。

Google reCAPTCHA v3 のスコア閾値変更機能

Google reCAPTCHA v3 で、信頼してもよいスコアの閾値を変更できるようにしました。

reCAPTCHA v3 のスコア閾値変更画面

人間によるアクセスの大半は 0.9 になるけど、サイト内で怪しい動き(秒単位でページ遷移を繰り返すなど)をするとスコアが下がります。閾値を下回るとボットやイタズラと判定されて認証できなくなります。

Google 先生の推奨値は 0.5 なんで、通常は変更する必要はないです。

また、認証エラー時のメッセージも「Google reCAPTCHA」による認証であることを明示するメッセージに変えました。

旧メッセージ

reCAPTCHA 認証失敗時の旧メッセージ

新メッセージ

reCAPTCHA 認証失敗時の新メッセージ

Google reCAPTCHA v3 のバッジ非表示(合法w)

上記の reCAPTCHA v3 の変更の参考に reCAPTCHA ガイドのページ見てたら、こんなの見つけた。

I’d like to hide the reCAPTCHA badge. What is allowed?

reCAPTCHA v3 のバッジ

フォーム内に視覚的に分かる位置に以下が書かれていれば、↑ このバッジは消しても良いらしい。

This site is protected by reCAPTCHA and the Google
    <a href=“https://policies.google.com/privacy">Privacy Policy</a> and
    <a href=“https://policies.google.com/terms">Terms of Service</a> apply.

ということで、 reCAPTCHA v3 のバッジを非表示にして、コメントフォームに上記文言を入れる選択肢を追加しました。

reCAPTCHA v3 のバッジ位置選択画面

これで邪魔臭いバッジ消せます。

ブロックエディタのカラーパレット変更機能に更に追加枠

ver3.7.4 で追加したブロックエディタのカラーパレット変更機能に色の「変更」ではなく「追加」ができる枠を設けました。

カラーパレット変更画面

仕様変更など

ブロックエディタのツールバーの見た目とか、もうちょい分かりやすくなるように変更しました。

旧ツールバー

ブロックエディタの旧ツールバー

新ツールバー

ブロックエディタの新ツールバー

その他の仕様変更・不具合修正などは下記の改訂履歴のとおりです。

スポンサーリンク

改訂履歴

機能拡張

  1. モバイルエミュレータに表示倍率変更機能追加
  2. Google reCAPTCHA v3 のスコア閾値を設定できる機能追加
  3. Google reCAPTCHA v3 のバッジを消して、コメント送信ボタンの上に利用規約へのリンクを表示する選択肢を追加
  4. ブロックエディタのカラーパレット変更機能に対して、さらに追加枠を設けた

仕様変更

  1. ブロックエディタのリッチテキストツールバーのデザインを変更
  2. モバイル用ナビボタンの設定初期値を一部変更
    • 角の丸み: 25 → 0
    • ボタン同士の間隔: 6 → 4
  3. モバイルエミュレータのフリック時のスクロール量が多すぎる(気がした)のでスクロール量を減らした
  4. Google reCAPTCHA の認証失敗時の文言変更
  5. 投稿画面の定型文ブロックのツールバーのうち「ブロック要素」「インライン要素」「定型文」「ショートコード」にインジケーターが付いてなかったのでインジケーター付けた

不具合修正

  1. サムネイルの LazyLoad を有効化してもブログカードのサムネイルが LazyLoad にならない不具合修正
  2. 整形済みテキスト、ソースコード、シンタックスハイライター等で、空行が書かれてると行が詰まっちゃう不具合修正(ver3.6.7 でのレベルダウン)

その他

  1. 子テーマ内にある editor-style.min.css を手動で削除しちゃっても再作成するようにしてみた(特に意味はない)
  2. ブロックエディタのツールバーボタンに一部、日本語に翻訳されてない部分があったので日本語訳入れた
  3. 引用タグ(blockquote)で英文を書いた場合に単語の途中ではみ出して見えなくなっちゃうことがあったので、blockquote に overflow-wrap: break-word; 設定した
  4. ver3.7.5 の改訂履歴に書かれてる「WP 5.3 から wp.editor が非推奨になったので~云々」の変更が不完全だったので再修正
  5. 管理画面内の HTML で開きタグと閉じタグの関連性が不完全だった部分をオール修正(管理画面内なので、たいして意味ないけど気持ち悪いから直した)

Luxeritas 3.7.5

あけましておめでとうございます。

Luxeritas Theme 3.7.5 をリリースしました。

ブロックエディタは初心者には優しくないけど、使いこなすとかなり色んなことができる。個人的に大半は HTML を手打ちで書いちゃってるけど、それも旧テキストエディタより、こっちの方が楽。

ていうか、開発者側からすると旧エディタで出来なかったこととか色々できて、なんか楽しいw

なので、今回のアップデートでは、また一個だけブロック追加しました。詳細は以下のとおり。

スポンサーリンク

スクロールブロックの追加

簡単な解説

表・画像・整形済みテキストなどをスクロールして見ることのできるブロックを追加しました。

スクロールブロック
スクロールブロックの設定項目
使い方

  1. スクロールブロックを設置して、中に画像や表などのブロックを入れる。
  2. 親ブロック(スクロールブロック)を選択して、もろもろ設定する。
設定できる項目

  • 背景色 & 背景画像の設定
  • PC でのドラッグスクロール(スマホのフリックスクロールを PC で再現したやつ)の ON/OFF
  • 高さ / 幅の設定
  • 左寄せ / 中央寄せ / 右寄せの設定
  • 上下マージン設定

上記の内容を読んでも、どーいう機能なのかイマイチ分からんと思うw

なので、以下に「こんなことができます」というのが分かる程度のサンプルを載せました。

サンプル

縦スクロール + 画像 + ドラッグスクロール

横スクロール + テーブル(表) + ドラッグスクロール + 背景画像

2019年 セ・リーグ

順位チーム試合数勝利敗戦引分勝率勝差得点失点安打二塁打三塁打本塁打塁打打点盗塁犠打犠飛打率長打率出塁率完投完封勝自責点セーブホールドHP防御率
1位巨人14377642.5460663573 1242 221 15 183 2042 627 83 84 31 .257 .422 .335 35 536 34 112 137 3.77
2位DeNA14371693.5075.5596611 1177 210 14 163 1904 575 40 81 26 .246 .398 .315 612 557 30 111 133 3.93
3位阪神14369686.5040.5538566 1213 216 20 94 1751 509 100 104 30 .251 .362 .319 5 13 496 36 145 174 3.46
4位広島14370703.5000.5591601 1232 216 17 140 1902 562 81 111 26 .254 .392 .324 1014 524 23 95 119 3.68
5位中日14368732.4822.5563544 1265 240 3190 1837 545 63 108 29 .263.381 .317 36 525 37 123 142 3.72
6位ヤクルト14359822.4189656739 1181 205 19167 1925 630 62 84 29 .244 .398 .329 32 675 28 111 133 4.78

枠線ブロック + 整形済みテキスト + ドラッグスクロール + 背景画像

- STEPHANO
 Now, forward with your tale. Prithee, stand farther off.
 
- CALIBAN
 Beat him enough: after a little time
 I'll beat him too.
 
- STEPHANO
 Stand farther. Come, proceed. 
 
- CALIBAN
 Why, as I told thee, 'tis a custom with him,
 I' th' afternoon to sleep: there thou mayst brain him,
 Having first seized his books, or with a log
 Batter his skull, or paunch him with a stake,
 Or cut his wezand with thy knife. Remember
 First to possess his books; for without them
 He's but a sot, as I am, nor hath not
 One spirit to command: they all do hate him
 As rootedly as I. Burn but his books.
 He has brave utensils,--for so he calls them--
 Which when he has a house, he'll deck withal
 And that most deeply to consider is
 The beauty of his daughter; he himself
 Calls her a nonpareil: I never saw a woman,
 But only Sycorax my dam and she;
 But she as far surpasseth Sycorax
 As great'st does least.
 
- STEPHANO
 Is it so brave a lass?
 
- CALIBAN
 Ay, lord; she will become thy bed, I warrant.
 And bring thee forth brave brood.
 
- STEPHANO
 Monster, I will kill this man: his daughter and I
 will be king and queen--save our graces!--and
 Trinculo and thyself shall be viceroys. Dost thou
 like the plot, Trinculo?
 
- TRINCULO
 Excellent.
 
- STEPHANO
 Give me thy hand: I am sorry I beat thee; but,
 while thou livest, keep a good tongue in thy head.
  
- CALIBAN
 Within this half hour will he be asleep:
 Wilt thou destroy him then?
 
- STEPHANO
 Ay, on mine honour.
  
- ARIEL
 This will I tell my master.
  
- CALIBAN
 Thou makest me merry; I am full of pleasure:
 Let us be jocund: will you troll the catch
 You taught me but while-ere?
 
- STEPHANO
 At thy request, monster, I will do reason, any
 reason. Come on, Trinculo, let us sing.
 Sings 
 Flout 'em and scout 'em
 And scout 'em and flout 'em
 Thought is free.

整形済みテキスト(横に長い文章)+ ドラッグスクロール + 背景色

↓ 寿限無のフルネーム
 
 寿限無、寿限無、五劫の擦切きれ、海砂利水魚の、水行末・雲来末・風来末、喰う寝る処に住む処、藪ら柑子こうじの藪柑子、パイポ・パイポ・パイポのシューリンガン、シューリンガンのグーリンダイ、グーリンダイのポンポコピーのポンポコナの、長久命の長助
  
↓ バンコクの正式名称
 
 クルンテープ・マハーナコーン・アモーンラッタナコーシン・マヒンタラーユッタヤー・マハーディロック・ポップ・ノッパラット・ラーチャタニーブリーロム・ウドムラーチャニウェートマハーサターン・アモーンピマーン・アワターンサティット・サッカタッティヤウィサヌカムプラシット
  
↓ ハンス・アダム2世のフルネーム
  
ヨハネス・アダム・フェルディナント・アロイス・ヨーゼフ・マリア・マルコ・ダヴィアーノ・ピウス・フォン・ウント・ツー・リヒテンシュタイン

縦スクロール + シンタックスハイライター

※ シンタックスハイライターはドラッグスクロールできないです。

#include<stdio.h>
int main() {
	int i, space, rows, k = 0, count = 0, count1 = 0;
	printf( "Enter number of rows: " );
	scanf( "%d", &rows );
	for( i = 1; i <= rows; ++i ) {
		for( space = 1; space <= rows - i; ++space ) {
			printf("  ");
			++count;
		}
		while( k != 2 * i - 1 ) {
			if( count <= rows - 1) {
				printf( "%d ", i + k );
				++count;
			}
			else {
				++count1;
				printf( "%d ", ( i + k - 2 * count1 ) );
			}
			++k;
		}
		count1 = count = k = 0;
		printf( "\n" );
	}
	return 0;
}

以上

改訂履歴

機能追加・機能拡張

  1. ブロックエディタに「スクロールブロック」を追加

仕様変更

  1. AMP で画像に対して layout="responsive" 指定するのやめた (Amazon アソシエイトの画像とか悲惨な状態になるから・・・)

不具合修正

  1. トップページを固定ページに設定しており、且つ PWA のスタートページをトップページに設定してる場合、PWA のスタートページが設定した固定ページではなくランダムな投稿ページになっちゃうことがある不具合修正
  2. 管理者でログインした状態で Google reCAPTCHA v3 が有効になってると、コンソールにエラーメッセージが出ちゃうので修正(動作的には何の問題もないけど気持ち悪いから直した)
  3. AMP のサイトマップページが色んな意味で見た目が崩れてたので修正(AMP 実装初期の頃からの不具合)

その他

  1. グローバルナビの動作改善(たぶん)
  2. AMP ページで一部不要な CSS が読み込まれちゃってたので読み込まないようにした
  3. 全文表示にしてるアーカイブページだと、投稿内の LazyLoad が効かないので全文表示でも LazyLoad できるようにした
  4. WP 5.3 から wp.editor が非推奨になったので、wp.blockEditor が使えない環境(古いバージョンの WP とか Gutenberg プラグイン)だけ wp.editor を使用して、それ以外では wp.blockEditor を使うようにした

Luxeritas 3.7.4

Luxeritas Theme 3.7.4 をリリース。

ブロックエディタ関連の機能追加と1件だけ報告のあった不具合修正。詳しくは以下のとおり。

スポンサーリンク

機能追加

ブロックエディタのカラーパレット変更機能

ブロックエディタで文字色や背景色を選択する際に使う ↓ このカラーパレット

ブロックエディタのカラーパレット

使いたい色がパレット内に無ければカスタムカラーで選択すればよいのだが、毎回同じ色を使いたい場合は面倒くさいので、パレットそのものを好みの色に変更できる機能を追加しました。

Luxeritas メニューの「管理機能 -> ブロックエディタ設定 -> カラーパレット」から変更できます。

カラーパレット変更画面

定型文テキストエディタブロックにショートコードボタン

Luxeritas Blocks の「定型文テキストエディタ」ブロックにショートコード挿入ボタンを追加しました。

機能追加というより、このブロックを作成した当初に「付けたつもりが実は付いてませんでした・・・なのであらためて付けました」という方が正しい。。。

定型文テキストエディタのショートコード挿入ボタン

上記のボタン追加のついでに、ショートコードブロックと定型文テキストエディタブロックの相互変換もできるようにしました。

定型文テキストエディタとショートコードブロックの相互変換

改訂履歴

機能追加・機能拡張

  1. ブロックエディタのカラーパレット変更機能追加
  2. ブロックエディタの定型文テキストエディタにショートコードボタンを追加
  3. ブロックエディタの定型文テキストエディタとショートコードブロックの相互変換をできるようにした

不具合修正

  1. グローバルメニューとヘッダー帯メニューを両方固定にした場合、スクロール時にグローバルメニューが帯メニューの下に埋もれる形で隠れてしまう不具合修正(ver3.6.12 でのレベルダウン)

Luxeritas 3.7.3

Luxeritas Theme 3.7.3 をリリース。

アドセンスウィジェットの軽い機能拡張とか、仕様変更・不具合修正だけです。

詳しくは以下のとおり。

スポンサーリンク

主な変更点

アドセンスウィジェットのオプション追加

data-full-width-responsive が true に設定されてるアドセンスをアドセンスウィジェットでサイズ指定して突っ込むと、スマホ等で広告の端っこが切れる。

原因は data-full-width-responsive は画面幅で大きさが決まるので、ウィジェットの大きさに合わなくなる。これに対応するため、ウィジェット側で true か false を選択できるようにした。

data-full-width-responsive オプション

ブロクエディタだと「更新方法」の「修正のみ」が効かない

ブロックエディタだと ↓ このオプションの「修正のみ」だけ動作しないのを修正。

投稿の更新方法画面

以上、その他の不具合修正および仕様変更は下記の改訂履歴のとおり。

改訂履歴

機能拡張

  1. アドセンスウィジェットに data-full-width-responsive の設定項目追加

仕様変更

  1. 従来、管理画面にログイン中のユーザーに対しては Google reCAPTCHA を無効にする仕様にしてたけど、reCAPTCHA が有効なのか無効なのか分かりづらいので、この仕様は廃止した
  2. WP 5.3 から投稿画面の H2~6 関連のスタイルがインラインで挿入されて、実際より大きなフォントサイズになっちゃうようになったので、子テーマの editor-style.css でフォントサイズ変えられるにした( editor-style.css に「.post h2 {}」じゃなくて「h2 {}」のスタイルで書けば変更できる)

不具合修正

  1. ブロックエディタだと投稿画面の「更新方法」の「修正のみ」が効かない不具合修正
  2. WordPress のアップグレード、ダウングレード等を行うとルートパスにある PWA 関連のスクリプト類が削除されちゃうので自動再作成するようにした
  3. 親テーマを有効化した後に、子テーマを有効化してカスマイズリセットしても、エディタ用の editor-style.min.css が親テーマ内に残っちゃうので削除するように修正

Luxeritas 3.7.2.2

まだクラシックエディタ使ってる人いるの?
このアップデートを必要とする人はかなり少ないと思う。

WordPress 5.3 で管理画面での jQuery の変数名が変わった。

なので、クラシックエディタ(且つテキストエディタのみ)で以下3つのボタンが効かなくなったらしい。

クラシックエディタ(テキストエディタ)画面

特にアップデートしなくても、以下の部分を書き換えれば動作するようになる。

luxeritas/inc/thk-post-style.php 内の

$('textarea')

って書いてあるところ2箇所を

jQuery('textarea')

と書き換えるだけ。

あと、WP 5.3 でブロックエディタで編集できなくなったとかいう人も結構いるみたいだけど、それに関しては、以下のコメントを参照してください。

https://thk.kanzae.net/wp/release/t8144/#comment-5203

Luxeritas 3.7.2

スポンサーリンク

Luxeritas 3.7.2 をリリースしました。

Lightbox タイプの画像用スクリプトに、従来の Tosrus・Lightcase・Fluidbox に加えて、Spotlight・Strip・Floatbox の3個を追加しました。

外観カスタマイズの Lightbox (画像ギャラリー) の項目から選択できます。

画像ギャラリー用スクリプト3個追加
新規追加分の各スクリプトの特徴

  • Spotlight

    ズーム・フルスクリーン・自動スライド・スワイプ等の機能を持ってる。高機能なのに jQuery に依存せずスクリプト自体が 20kb 程度しかない超軽量型スクリプト。めちゃんこ軽い。

  • Strip

    画面の右サイドから画像が出てくる。変わり種というか、ちょっと特殊な動作が売りの画像ギャラリースクリプト。

  • Floatbox

    アニメーションがオシャンティ(死語)なポップアップ型スクリプト。個人的に気に入ってる。

使い方は従来のものも含めて全部同じ。投稿画面の画像リンク設定でリンク先を「メディアファイル」にするだけ(画像の下に文章が表示されるタイプのやつは、alt 属性に書かれてる文章が表示されます)。

以下、サンプルのデモページ

デモ一覧

改訂履歴

機能拡張

  1. Lightox (画像ギャラリー) に Spotlight、Strip、Floatbox を追加

Luxeritas 3.7.1.1

ver3.7.1 で Google reCAPTCHA が正常動作しなくなってた不具合がありました。

直しました。

Luxeritas 3.7.1

増税直後の10月1日に新しい PC 買った・・・ (`・ω・´)b

Luxeritas Theme 3.7.1 をリリースしました。

Font Awesome を SVG で表示するオプションの追加とか。その他、要望の反映、不具合修正などなど。

というか、今回は今後のアップデートのための準備リリース的な感じ。

スポンサーリンク

機能拡張 & 要望反映

Font Awesome の SVG 表示オプションの追加

Font Awesome 5 を SVG で表示できるオプション追加したり、 Font Awesome 4 の下位互換をサポートできるようにしたりしました。

※ このオプション追加したら、配布ファイルのサイズ 4MB 超えちゃったけど気にしないw

上記に伴って設定項目が増えたため、Font Awesome の設定を CSS タブから分離して Font Awesome タブに独立させました。

旧設定画面: CSSタブ

Font Awesome 旧設定画面

新設定画面: Font Awesome タブ

Font Awesome 新設定画面

Font Awesome を Web フォントで表示する場合と SVG で表示する場合の違いに関しては、以下の URL とか参考にしてください。

参考: Performance & Font Awesome

ただし、Font Awesome 5 を SVG で表示する設定にしても、疑似要素で表示する際には結局 Web フォントをロードするので、SVG にしても大した意味はないです(SVG を擬似要素で表示するのは非推奨なので、疑似要素に関しては従来どおりの表示方法にしてある)。

なので基本的には、従来どおり Web Fonts with CSS を推奨。

また、CSS の読み込み方法に関してはデフォルト値と推奨値を非同期に変えました(Luxeritas で必要最小限の CSS だけを読み込むオプションを廃止したため)。

投稿・固定ページの canonical url を変更できる機能

この要望に対する機能追加。

投稿画面で canonical URL を変更できるようにしました。

投稿画面の canonical URL 変更オプション

投稿画面の下の方に設定項目があります。

この機能に関しては、サイト内に自分が運営するサイトのコピーページがあるとか、英訳ページがあるとかでなければ、ほとんどの人は変更する理由はないです。

スポンサーリンク

上記以外の変更とか修正に関しては以下の改訂履歴のとおりです。

改訂履歴

機能拡張

  1. Font Awesome 5 を SVG で表示できるオプションの追加
  2. Font Awesome の設定でバージョン 5 を選択してる場合にバージョン 4 下位互換サポートオプションを追加
  3. 投稿・固定ページの canonical url を変更できる機能の追加

仕様変更

  1. Luxeritas カスタマイザーの Font Awesome 関連の設定を CSS タブから分離して Font Awesome タブに独立させた
  2. Font Awesome の CSS 読み込み方法のデフォルトを非同期に変更
  3. Font Awesome の CSS 構成で「Luxeritas で必要最小限の CSS のみ」の選択項目廃止
  4. 高速化一括設定の Font Awesome CSS 読み込み方法の推奨値も非同期に変更
  5. SNS シェアボタンの aria-hidden を aria-label に変更
  6. モバイル用ナビボタンの「ボタンの大きさ」のデフォルト値を「中」→「小」に変更
  7. リンクに target="blank" がついてる場合は、rel="noopener" だけでなく常に rel="external" もつくように変更(class="external" は別設定)
  8. 管理画面とか投稿画面の CSS ちょっと変更(見た目はほとんど変わってない)

不具合修正

  1. 帯メニューを非表示に設定してるにも関わらず、帯メニューを固定に設定しちゃってると Javascript のエラーが出るので修正
  2. 画像認証で Securimage PHP CAPTCHA を使用してる場合に p の開始タグと終了タグの関連性が不完全だったので修正
  3. ver3.7.0 の改訂履歴に書いてある allowfullscreen 関連の AMP 置換が不完全だったので修正
  4. 外部リンクで target="blank" を自動でつけるオプションを選択しても target="blank" がつかなくなってた不具合修正(ver3.6.11 でのレベルダウン)

その他

  1. FontAwesome のバージョン上げた 5.10.1 → 5.11.2
  2. 内部処理の速度かすかに向上(たぶん)

Luxeritas 3.7.0.1

1件、報告があった。

ver3.7.0 の改訂履歴に書いてある「 モバイルナビでサイドバー非表示にしても、サイドバーボタンが動作するようにした」が実際には動作してなかったので修正。ごめん。

それだけです。

Luxeritas 3.7.0

台風すごかった。

Luxeritas Theme 3.7.0 をリリースしました。今回は要望反映がメイン。

かな~り以前からもらってる要望とかも数点反映させた。

スポンサーリンク

反映させた要望に関する詳細

スマホで画面下にメニューを固定したい

要望の内容はまちまちだけど、おおよそグローバルナビを画面下に固定したいというものが多い。

中には「グローバルナビをフッターに固定したい」という謎の要望もあったけど、フッターに固定ってなんだ?たぶんフッターと画面下を間違えたんだろう。。。

それほど難しい要望ではないが、延々後回しにしてきた理由は、↓ このアドセンス広告の存在が最大の理由といえる。

画面下に表示されるアドセンス広告

このモバイル用広告は、基本的に下に表示した方がクリック率が高い。でも、この広告が表示されると画面下にメニューがあっても見えないんだよねw。だから下固定のメニューとか個人的にいらんかった。

今回実装したけど、元のグローバルナビを下に固定した場合、元の位置にあるはずのナビは線で表示するのか何も表示しないのか?という点だけでデザインが変わっちゃうので元のグローバルナビをそのまま画面下に固定するってのは却下。

なので、グローバルメナビとは別にモバイル用のナビゲーションボタンを表示する仕様で実装した

外観カスタマイズの「モバイル用ナビボタン」で設定できます。

モバイルボタンのカスタマイズ画面

設置できるボタン数は最大8個。

  1. ホームに戻る
  2. グローバルメニュー
  3. SNS
  4. サイドバー
  5. 目次
  6. コメント
  7. 検索
  8. ページ上に戻る

見た目もカスタマイズできる項目が結構ある。

以下、カスタマイズ例

デフォルト状態で全ボタン表示した場合

画面からはみ出したボタンは横スクロールで見られる。

サンプル画像その1

ボタンをアイコンだけにした場合

色も変えてみた。

サンプル画像その2

アイコンだけの場合、どのボタンが何のボタンか分かりづらいので、表示するボタン数は絞った方が良いかと思う。

ボタンを四角くして間隔を狭くしたパターン

「ボタンの丸み 0、ボタン間隔 0、ボタンサイズ小」の組み合わせ。結構、使いやすいと思う。

サンプル画像その3

グローバルナビをスマホで表示した時のメニュー翻訳してくれ

↓ これを日本語 or フランス語にして欲しいという要望(とどのつまり翻訳入れてくれって要望)

英語表記のグローバルナビ

これをずっと英語表記のままにしてた理由は「サイドバー」という日本語文字列が長すぎるという点。フォントの種類によっては 320px 幅のスマホで「サイドバー」という文字が横のボタンと被っちゃう。

「Sidebar」ならどんなフォントでもおおよそ綺麗に収まる。

フォントサイズを小さくすると収まるけど、モバイルフレンドリーテストで「文字が小さすぎる」という減点を食らう。

なので、letter-spacing を設定することで何とかした。

翻訳したグローバルナビ

上記画面は 375px だけど、320px 画面でもギリギリ OK に収まった。

AMP 用の Google Analytics で anonymizes IP を設定したい

AMP の Analytics オプションをあれもこれもと付けちゃうとキリがないので、子テーマ側で AMP analytics の中身を編集できるようにした。

アップデートすると、自動的に子テーマ内に「add-amp-analytics.php」というファイルが作られるので、必要な方はそれの中身を編集してください。

基本的にはあんまり書き換えて欲しくないファイルでもあるので、子テーマ編集画面からは編集できません。

要望以外の機能拡張その他

WordPress のブロックライブラリ用 CSS の読み込み方法

ブロックライブラリ用 CSS を非同期で読み込めるオプション追加。

ブロックライブラリの読み込み方法設定画面

ただし、CSS を非同期に設定した場合、ブラウザが未キャッシュの場合にレンダリングでラグが出るのはお約束。

高速化一括設定に「より高速」の選択ボタンを追加

上記にあわせて、高速化一括設定の項目に「より高速」を追加した。

高速化一括設定画面

これに設定すると、ブロックライブラリと Font Awesome が非同期になる。

ただし、「推奨設定」と「より高速」では、どちらが速いかは設定の組み合わせや環境による

例えば、Font Awesome の CSS を「オリジナル」に設定した場合は、非同期の方が速いけど「Luxeritas 最小」に設定した場合は、同期の方が速い。

モバイル用グローバルナビの「前へ」と「次へ」のボタンの挙動

投稿ページのみ動作する仕様だったけど、トップページやカテゴリ、アーカイブページでも動作するようにした。ボタン押すと、2ページ目とかになります。

グローバルナビの挙動変更

SNS ボタンのアクセシビリティ

Google 先生の評価基準、また変わったの?ちょくちょく変わるんだけど、どーいうこと?

今度は「SNS ボタンに aria-label か aria-hidden を設定しなさい」って言われた・・・

aria-hidden 設定しました。。。

コメントフォームの見た目少し変えた

名前とメールアドレスの入力欄を PC で見た場合に並列にした。

旧コメントフォーム:

旧コメントフォームの見た目

新コメントフォーム:

新コメントフォームの見た目

その他の変更点などは下記の改訂履歴のとおり。

スポンサーリンク

改訂履歴

機能追加

  1. 画面下に固定モバイル用ナビボタンを設定できる機能追加
  2. ブロックライブラリ用の CSS を非同期で読み込める機能追加
  3. 高速化一括設定に「より高速」の項目を追加
  4. 子テーマ内のファイル「add-amp-analytics.php」を編集することで AMP 用 Google Analytics に独自の設定を追加できるようにした(子テーマ編集機能では編集できないようにしてあります。編集したい場合は子テーマ内の実ファイルを書き換えてください。)

仕様変更

  1. モバイルナビのボタン名に翻訳入れた
  2. モバイルナビの「前へ」「次へ」ボタンをアーカイブページでも動作するようにした
  3. モバイルナビでサイドバー非表示にしても、サイドバーボタンが動作するようにした
  4. SNS シェアボタンに aria-hidden つけた
  5. コメントフォームの見た目少し変更
  6. PWA のデフォルト値を一部変更

ライブラリ更新

  1. jQuery 3.3.1 → 3.4.1
  2. Bootstrap 4.1.3 → 4.3.1

不具合修正

  1. この問い合わせの原因が分かったので修正。(原因:アタッチメントページは、is_attachment() と is_singular() の両方にマッチするけど、rel_canonical() や wp_get_canonical_url() では canonical URL が取れないってことが分かった。自分はアタッチメントページなんて使わないので気づかなかった)
  2. PWA のマニフェストファイルに記述されてるアイコンが何故か https ではなく勝手に http になっちゃうことがあるので、絶対 https になるようにした(どうせ https じゃないと動かないし・・・)
  3. Google Map の埋め込み用 HTML に allowfullscreen="" とかいうヘンテコ記述があるので、こういう形式も AMP 置換に対応させた(通常は allow="fullscreen"、allowfullscreen、allowfullscreen="1" とか書くのが普通なんだけど・・・)
  4. サイトタイトルが画像の場合、トップページのみコピーボタンを押しても、タイトル名がコピーできてなかった不具合修正