著者情報ボックスにおける設計思想をUXとSEO(E-A-T-T)の観点から考える

alt="著者情報ボックスの設計思想をホワイトボードで検討するWebディレクターのイメージイラスト"
WordPressテーマGeneratePressを使ったサイトリニューアルに伴い、10年ぶりに著者情報を一新しました。 こちらの記事の続きとなります。 著者情報(この記事を書いた人)をプラグインなしで設置する【旧版】( … 記事を読む:著者情報ボックスにおける設計思想をUXとSEO(E-A-T-T)の観点から考える

WordPressの日付表示を変えたらSlimStat Analyticsまで巻き込まれた話【時刻だけ消したい】

WordPressの日時表示から時刻を消したらslimstatの時刻まで消えて戸惑う技術者
サイト記事の投稿日時と更新日時をすっきりさせたくて、時刻を消してみました。 WordPressの投稿日時と更新日時から時刻を消したい場合は、管理画面「設定」→一般→時刻形式を空白にすると消えます。 うん、すっきり♪ 気分 … 記事を読む:WordPressの日付表示を変えたらSlimStat Analyticsまで巻き込まれた話【時刻だけ消したい】

WordPressの抜粋処理を軽量化する|the_excerpt()とget_the_excerpt()の処理差

WordPressのthe_excerpt()とget_the_excerpt()を比較した図
WordPressの抜粋処理でよく使われるのはthe_excerpt()。 <?php the_excerpt(); ?> これをget_the_excerpt()に変更すると処理が軽くなります。 <? … 記事を読む:WordPressの抜粋処理を軽量化する|the_excerpt()とget_the_excerpt()の処理差

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

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

Cocoonのボックスメニューのサムネイルに「高速化」タブのlozad.js無しでLazy Loadを適用させて更なる高速化を図る

Cocoonのボックスメニュー画像にloading="lazy"を適用する方法を解説するアイキャッチ。サムネイル画像に遅延読み込みが付かない原因を調査し、F12でHTMLを確認して対処する流れを図解している。
WordPress5.5以降、Native Lazy Loadが実装されました。 これにより投稿内の画像はデフォルトで遅延読み込みされます。 しかし一部のサムネイル画像については適用されません。 そのためPageSpee … 記事を読む:Cocoonのボックスメニューのサムネイルに「高速化」タブのlozad.js無しでLazy Loadを適用させて更なる高速化を図る

WordPressで背景画像を消したいときのCSSカスタマイズ

消しゴムでサイトの背景画像を消す少女のイラスト
テーマ、あるいはそのスキンを使おうとすると、背景画像が予め設定されていることがあります。 問題は、これを消したいとき。 WordPressでサイトを構築している場合は子テーマを用いることが多いのですが。 親テーマ側で設定 … 記事を読む:WordPressで背景画像を消したいときのCSSカスタマイズ

UXを考えたナビゲーション設計(前編)|GeneratePressでスマホメニューを横スクロール化する方法

GeneratePressでスマホメニューを横スクロール化する方法をテーマに、ハンバーガーメニューとの違いやUXを比較・解説するイメージイラスト。
本稿ではWordPressテーマGeneratePressカスタマイズとして、スマホメニューを横スクロールする方法を紹介します。 サイトのモバイルレイアウトにおけるメニューはハンバーガーメニューが一般的です。 では、どう … 記事を読む:UXを考えたナビゲーション設計(前編)|GeneratePressでスマホメニューを横スクロール化する方法

loading=”lazy”とloading=”eager”の違いと使い分け、そしてfetchpriority=”high”

loading="lazy"、loading="eager"、fetchpriority="high"の違いと使い分けを解説するアイキャッチ画像
サイトを高速化するテクニックとして知られる、画像のLazyload(遅延読み込み)。 imgタグに次の属性を付加することで実現できます。 loading=”lazy” Chrome・Edge・Firefox・Safari … 記事を読む:loading=”lazy”とloading=”eager”の違いと使い分け、そしてfetchpriority=”high”

WordPressのカテゴリーリストと記事数をボタン表示にするPHPコードとCSS

WordPressのカテゴリーリストをボタン表示にするPHPコードとCSSの解説イメージ。通常のカテゴリー一覧とボタン化後のデザインを比較し、記事数表示付きカテゴリーボタンの実装例を紹介している。
本記事は、サイドバーのカテゴリーリストをツリー表示からボタン表示に変更するカスタマイズの方法を紹介するものです。 カテゴリごとの記事数も同時に表示できます。 他サイトと一味違ったデザインのカテゴリーリストを実装してみたい … 記事を読む:WordPressのカテゴリーリストと記事数をボタン表示にするPHPコードとCSS

WordPress管理画面の背景に任意の壁紙を設定する方法【MUプラグイン】 ~テーマを変えても画像はそのまま!~

WordPress管理画面とログイン画面の背景をMUプラグインでカスタマイズするイメージ。ログイン画面にはロゴ、管理画面にはオリジナルキャラクターの壁紙を設定したサンプル。
本記事では、WordPressの管理画面・ログイン画面の背景に任意の壁紙を設定する方法を紹介します。 今回はmuプラグインで実装します。 muプラグイン(Must-Use Plugins):wp-content/mu-p … 記事を読む:WordPress管理画面の背景に任意の壁紙を設定する方法【MUプラグイン】 ~テーマを変えても画像はそのまま!~

モバイル時代のサイドバー設計|不要なウィジェットを非表示にする考え方と実装方法

モバイル時代のサイト設計をイメージした、ダッシュボードを見つめる女性Webディレクターのイラスト
1カラムが多く見られるようになった昨今のサイトレイアウト事情ですが。 サイドバーを設置した2カラムのサイトもまだまだ多いです。 私にしても、他のサイトは1カラムですが、技術ブログ的な当サイトは2カラムにしています。 ただ … 記事を読む:モバイル時代のサイドバー設計|不要なウィジェットを非表示にする考え方と実装方法

WordPressの記事やウィジェットからPHPファイルを呼び出す方法【MUプラグイン】

WordPressでPHPファイルをショートコードから呼び出し、記事・固定ページ・サイドバーへ再利用する仕組みを解説したイメージイラスト。
WordPressの記事やウィジェットに直接PHPの実行コードを書いても動きません。 これはWordPressの仕様。 セキュリティの観点からそうなっています。 でも、 仕様とわかっていても使いたいときだってあるよね そ … 記事を読む:WordPressの記事やウィジェットからPHPファイルを呼び出す方法【MUプラグイン】
× 閉じる