軽量な読了プログレスバー(どこまで読んだ?)をWordPressに設置してUX改善してみる

深夜の暗い作業部屋で、読了プログレスバーが表示されたモニターを静かに見つめる少女のイラスト。上部には細いサーモンピンク色の進捗バーが光り、WordPressサイトのUX改善を表現している。
最近、テック系のサイトを中心にあちこちで見かけるのが読了プログレスバー。 特にダークテーマですと、一筋の光が闇を貫くようで格好いい。 なんて厨二心をくすぐるの…… というわけで、自称中学二年生の私は本サイトに実装してみま … 記事を読む:軽量な読了プログレスバー(どこまで読んだ?)をWordPressに設置してUX改善してみる

Cocoonでフキダシが表示されない不具合→原因はバージョン問題だった【クラシックエディタ限定】

デバッグ沼にはまりこんで疲れ切ってるけど、それでも作業を止められない少女
Cocoonでフキダシが表示されなくなりました。 具体的には、 Cocoonの吹き出し機能を使うとHTMLがエスケープされ、コードが崩れる クラシックエディタのビジュアルエディタでのみ発生。 コードエディタに直接コードを … 記事を読む:Cocoonでフキダシが表示されない不具合→原因はバージョン問題だった【クラシックエディタ限定】

Cocoonで「タップターゲットのサイズが適切ではない」を修正する方法

Cocoonの検索ウィジェットで「タップターゲットのサイズが適切ではない」とPageSpeed Insightsに警告されたため、CSSで検索フォームと虫眼鏡アイコンを調整している様子。小さすぎる検索ボタンのBefore / After比較を、デフォルメキャラクターと一緒に表現したアイキャッチ画像。
Cocoon×スキン「モノクロ」の組合せでPageSpeed Insightsをしてみたところ「タップターゲットのサイズが適切ではない」と怒られました。 検索窓が細すぎて、虫眼鏡アイコンが小さすぎるというものです。 SE … 記事を読む:Cocoonで「タップターゲットのサイズが適切ではない」を修正する方法

Cocoonの1カラムでPageSpeed Insightsから「見出し要素は降順になっていません」と警告された時の対処法

Cocoonの1カラム環境で、PageSpeed Insightsから「見出し要素は降順になっていません」と警告された状況を、デフォルメキャラクターと見出し構造のBefore / After比較で表現したアイキャッチ画像。フッターウィジェットのH3タグ問題を、CSSやカスタムHTMLで調整して改善している様子を描写。
サイトを1カラムにしてPageSpeed Insightsをやってみたところ、次の指摘が出るようになりました。 見出し要素は降順になっていません 具体的に指摘されたのはフッター部ウィジェットの見出し。 Cocoonはウィ … 記事を読む:Cocoonの1カラムでPageSpeed Insightsから「見出し要素は降順になっていません」と警告された時の対処法

「No Image」のせいでUI統一感が崩れるのが嫌だった ~Cocoonナビカードの外部リンクを調整する

noimageのアイキャッチ画像を差し替える少女のイメージ画像
Cocoonのナビカードは推したいリンクをカード化して見栄え良く表示してくれる便利な機能です。 当サイトでもサイドバーに使っています。 こんな感じで。 [navi_list name=”このはモード&#822 … 記事を読む:「No Image」のせいでUI統一感が崩れるのが嫌だった ~Cocoonナビカードの外部リンクを調整する

WEXALでサイトの表示崩れが起きる時の対処法|CocoonのCSS・Font Awesome崩れ実例

WEXALによるCSS読み込み最適化をパズルで表現した技術系イラスト。style.css、skin.css、Font Awesome、IcoMoonなどのCSS・フォントファイルが巨大なパズルピースとして並んでおり、一部のピースがズレたり欠けたりしている。未適用CSSやレイアウト崩れ、Font Awesome未読み込みによる□アイコン表示が発生している様子を描写。右側ではピンク髪の少女が崩れたピースを調整している。
WEXAL環境下においては様々な表示崩れが生じることがあります。 本記事では、WEXALが原因で生じる表示崩れの多くについて解決できる方法を紹介します。 採り上げるのはCocoonにおける実例となります。 ただし本質的に … 記事を読む:WEXALでサイトの表示崩れが起きる時の対処法|CocoonのCSS・Font Awesome崩れ実例

KUSANAGIでCocoonのテーマスキン「grayish」を使う際に注意したいこと2+1点

KUSANAGIのテーマアクセラレータをオンにしたら表示が崩れて首を傾げる技術者
WordPressテーマCocoonはスキンによって雰囲気をがらりと変えられます。 その中でも昨秋出た「grayish」にはびっくり。 Cocoonらしさが全く無い! もちろんいい意味でです。 Cocoonでサイト作ると … 記事を読む:KUSANAGIでCocoonのテーマスキン「grayish」を使う際に注意したいこと2+1点

Cocoonのサイドバースクロール追従エリアにSNSシェアボタンを設置する

CocoonのSNSシェアボタンをサイドバー追従エリアへ移設するカスタマイズを解説するアイキャッチ
本稿ではCocoonのサイトバースクロール追従エリアにSNSシェアボタンを設置するカスタマイズを紹介します。PCからの訪問者はどんどん減っていますが、それでも拡散の仕掛けはきっちり用意しておきたいところです。完全コピペで … 記事を読む:Cocoonのサイドバースクロール追従エリアにSNSシェアボタンを設置する

CLS調査のケーススタディ|指摘された画像は犯人ではなかった

CLSの原因調査で、指摘された画像ではなくJavaScriptが犯人だったことを示すアイキャッチ画像
Cocoon最新アップデートで搭載されたスキン「イノセンス」。 「大人かわいい」がキャッチフレーズだそうですけど。 著者は、おっさんくさく見えるって言ってるよ バカにしてるわけじゃありません。 それどころか、私がテーマを … 記事を読む:CLS調査のケーススタディ|指摘された画像は犯人ではなかった

テーマ変更で後悔しないために|Cocoonのブログカードはaタグ推奨

テーマ変更時のブログカード移行トラブルとaタグ推奨を解説するアイキャッチ
本稿はWordPressテーマ「Cocoon」を使うときのTipsです。 Cocoonでブログカードを利用するときは、URL直書きじゃなくてaタグで囲んだ方がいい 「aタグで囲む」を言い換えますと「リンク化する」というこ … 記事を読む:テーマ変更で後悔しないために|Cocoonのブログカードはaタグ推奨

Cocoonでレンダリングブロックを改善する方法|jQuery Migrateのフッター読み込みと停止

jQuery Migrate対策のイメージ。jQueryとjQuery Migrateの警告表示から高速化されたWebサイトへ改善される様子を、サイバー風の技術パネルと黒いパンツスーツの女性で表現したイラスト
CocoonデフォルトだとPageSpeed Insightsから「レンダリングを妨げるリソースの除外」(現在は「レンダリングをブロックしているリクエスト」)を指摘されます。 具体的には「jQuery」と「jQuery … 記事を読む:Cocoonでレンダリングブロックを改善する方法|jQuery Migrateのフッター読み込みと停止

「画像要素で width と height が明示的に指定されていない」の対処法|CLSを防ぐ基本設定

「画像要素で width と height が明示的に指定されていない」の対処法を解説。PageSpeed Insightsの警告画面とCLS対策を表現したアイキャッチ画像
PageSpeed Insights(PSI)で「画像要素で width と height が明示的に指定されていない」の指摘を受けることがあります。 画像要素のwidth(幅)とheight(高さ)指定はCLS対策とし … 記事を読む:「画像要素で width と height が明示的に指定されていない」の対処法|CLSを防ぐ基本設定
× 閉じる