ホームページ運用

LiteSpeed Cacheプラグインをオン・オフで比較してみた ニッチな話題

LiteSpeed Cacheプラグインをオン・オフで比較してみた

LiteSpeed Cache(v3.6.4)プラグインの「キャッシュ機能」のオン・オフでどれぐらい違うのか、比較してみました(2021年3月23日現在)。もしかして、誤差の範囲……?もう少し詳しく比較してみましょう。比較無効のときプラグインが無効のときも比べてみます。オフのときオンにした直後オンにして再分析比較結果 モバイルのラボデータ無効オフオン(直後)オン(2回目)First Contentful Paint(秒)2.32.12.12.1Speed Index(秒)5....
Cocoonで記事一覧の画像と文字の位置を逆にした(note風スタイル第6弾?) インターネット小話

Cocoonで記事一覧の画像と文字の位置を逆にした(note風スタイル第6弾?)

久々にホームページのCSSをいじりました。今回は、記事一覧の画像と文字の配置です。これも、note風スタイルの一環ですね。大きな字で見やすいタイトルと正方形のアイキャッチアイキャッチ画像より、タイトル文に目がいくようにする意図で、変更しました。常に左から読んで行けるほうが、目にラクな気がします。といって、そこまでブログ一覧はアクセスがないんですが……笑CSSCSSはこんな感じです。display: flexで下位の要素の順番(order)を変更できるようにしています。/** ...
Googleのカスタム検索ボックスの遅延表示によるガタツキをなくしたい【CLS】 インターネット小話

Googleのカスタム検索ボックスの遅延表示によるガタツキをなくしたい【CLS】

PCでページを表示したときに、サイドバーの検索バーが遅れて表示されて、画面がズレるのが気になります。遅延表示による画面のガタツキ検索バーには、Googleのカスタム検索を利用しています。サイドバーの検索ボックスの遅延表示でズレるこのように、ウェブページの画面が、後から表示される要素によってズレることを「CLS(Cumulative Layout Shift:累積的な割付の変移)」といいます。div要素のheight属性ではうまくいかずスクリプトが非同期処理で読み込まれるので、...
問合せフォームにスパムが多いので、reCAPTCHA認証を有効にした(Contact Form 7の場合) インターネット小話

問合せフォームにスパムが多いので、reCAPTCHA認証を有効にした(Contact Form 7の場合)

教室に来る問合せにスパムメールが多く、整理に時間がかかります。おそらく自動ツール(ボット)が、見つけたフォームに手当り次第 送りつけてきているようです。このままでは本来のお問合せを見逃しかねないので、reCAPTCHA認証を加えることにしました。ポイントWordPressの Contact Form 7 プラグインを利用している。Googleアカウントがあれば、reCAPTCHAを登録できる。生成された2つのキーをContact Formの設定に入力する。Contact Fo...
不思議なネット広告 「てst3」 インターネット小話

不思議なネット広告 「てst3」

たまたまサイトの更新していたら、不思議なネット広告を見かけました。明らかに他の広告より簡素で、逆に目を引きます。試しに作成したGoogle広告が、実際に配信されてしまったようですね。興味を持って広告先を表示してみると、ブログサイトが表示されました。サイトフッターを確認してみると、記事はまだ一つで、最近できたサイトのようです。きっとサイトを立ち上げて、動作確認で広告を出稿してみたのでしょう。テストで作った広告でも、こうしてちゃんとユーザーに表示されるんですね。ネット広告の先にも...
WordPress 5.7にアップデートした 【インサータからドラッグ】 インターネット小話

WordPress 5.7にアップデートした 【インサータからドラッグ】

ダッシュボードにWordPress 5.7の通知が来ていました。そろそろ更新してみるわたしはプラグインの対応を確認してから更新したいので、WordPress本体は自動更新にはしていません。しばらく放置していましたが、バックアップのタイミングで更新することにしました。失敗したら戻せばよいし。データをダウンロード中…2分ほどで更新できました。WordPressのアイキャッチは、毎回 美しいですよね。メジャーアップデートで機能が増えたWordPress 5.6.2から 5.7 にな...
申込サイトで他人の個人情報が表示された? 【サーバ キャッシュの落し穴】 インターネット小話

申込サイトで他人の個人情報が表示された? 【サーバ キャッシュの落し穴】

通常は、「自分の入力したデータは、フォーム画面に残らない」のですが、ウェブサーバの設定ミスで個人情報が流出したケースはあります。過去のニュース報道を具体的に整理しながら、「キャッシュ」について考えてみましょう。ポイント・サービス会社の設定のミスで、個人情報が流出したことがある。・個人では防ぎようがないので、通知があればパスワードを変更する。・ただし 善意の人も気づくので、問題の表面化と解決は早い。サーバーのキャッシュ設定(キョードー東京の事例)実際に、「ほかの利用者の個人情報...
WordPressのエディタが異常に遅い? 【バージョン更新の意味】 ニッチな話題

WordPressのエディタが異常に遅い? 【バージョン更新の意味】

WordPressで「エディタ画面が異常に遅い」という相談を受けました。これは、WordPressとテーマのバージョン相性が原因でした。結論エディタの反応が異常に遅かったが、WordPressとテーマを最新版に更新すると直った。入力可能になるまでちょっとタイムラグエディタ画面で操作すると、マウスでクリックしてから、入力可能になるまで、ちょっとタイムラグがあります。エディタ画面の不具合は遅いだけでなく、文字色も反映されなかったり、CSSがうまく動作していないようでした。バージョ...
「index.php?xml_sitemap=params=」XMLサイトマップのURLがおかしい?  【WordPressのパーマリンク】 ニッチな話題

「index.php?xml_sitemap=params=」XMLサイトマップのURLがおかしい? 【WordPressのパーマリンク】

XML Sitemapsプラグインで、XMLサイトマップを作ったけれど、なんかアドレスがおかしい。結論WordPressのXMLサイトマップのURLが「index.php?xml_sitemap=params=」なのは、パーマリンク設定が「基本」だから。それ以外の設定に変更すると、「sitemap.xml」にできる。XML Sitemap Generatorプラグインを確認するXML Sitemapのプラグインには、サイトマップのインデックスファイルのURLが表示されています...
[Cocoon] カルーセルの「CLSに関する問題」を改善したいけれど難しそう ニッチな話題

[Cocoon] カルーセルの「CLSに関する問題」を改善したいけれど難しそう

読んでいる文章をずらされると腹が立つだろう。だから、そういうページは直した方がよい。さて、どうやって? という話。CLS(累積レイアウト変更)とはウェブページはあとから画像が表示されると、下にある文章がずれます。これを「累積レイアウト変更(CLS:Cumulative Layout Shift)」といいます。広告が多いページだと気になるのよねーユーザーの利便性が大事Googleサーチコンソールでは、このようなレイアウトのずれを指摘してくれます。CLSに関する問題:0.25超(...
[WordPress] 設定したCSSが一部反映されない 【LiteSpeed CacheのCSS結合の注意点】 ニッチな話題

[WordPress] 設定したCSSが一部反映されない 【LiteSpeed CacheのCSS結合の注意点】

設定を変更していたら、ログアウトしてウェブページを見ると、スタイルシートがおかしいことに気づきました。スタイル適用の優先順位がおかしいWordPressにログインすると意図したとおりのスタイルが表示されているのですが、ログアウトすると一部に元のスタイルが適用されています。微妙な違いなんですが気づきますか?ログイン時の表示は意図したとおりのスタイルです。しかし、目次をみると、背景色は変更したstyle.cssで上書きスタイルになっているのですが、枠線の色がテーマのスタイルのまま...
Googleアドセンスのアンカー広告を下に固定する[Cocoon] ニッチな話題

Googleアドセンスのアンカー広告を下に固定する[Cocoon]

スマートフォンのユーザーの画面上下にずっと表示する広告を、アンカー広告(あるいはオーバーレイ広告)といいます。アンカー広告がメニューバーと重なると不便なので、今回はGoogle広告のアンカー広告の位置を変更しようと思います。ウェブサイト運営者向けの話ですポイントスクリプトで上部アンカー広告を抑制できる。上下にメニューがあると、アンカー広告の配置に影響がある。【追記】パソコン画面にも表示されるようになります。(2021年7月9日)追記(2023-07-17)アンカー広告の位置指...
XML sitemapをAIOSEOからGoogle XML Sitemapsプラグインに変更した ニッチな話題

XML sitemapをAIOSEOからGoogle XML Sitemapsプラグインに変更した

ウェブサイトのsitemapを作っておくと、記事を追加したときに検索エンジンに認識してもらいやすくなります。↑サーチコンソールについて知りたい。これまで、「AIOSEO(All in One SEO)」プラグインを利用していたんですが、どんどん機能が増えたので、代わりのものを探してみました。今回は、なるべくシンプルで単機能のサイトマップ作成プラグインを探しました。追記:2021年3月26日久しぶりに見たらプラグイン名が変わっていました。設定項目が重複しているというのも、わたし...
note風スタイル第5弾!引用とコード ニッチな話題

note風スタイル第5弾!引用とコード

note風デザインもそろそろ簡単な微調整です。今回は引用文(blockquote)とコード(pre)のデザイン。ビフォア・アフター元のデザインに比べて、小さくグレー基調にしました。以前は引用部分が長いと「うるさい」印象があったので、全体が見通せるようになりました。ただ、文字は少し小さいかもしれません。こんな感じの引用。こんな引用元code is here { something.}引用ブロック引用ブロックは、かなりスッキリしました。.entry-content blockqu...
note風スタイル第4弾!目次のデザイン ニッチな話題

note風スタイル第4弾!目次のデザイン

「note風スタイル」ということで、ブログのスタイルシートを編集しています。今回は、目次について。主な変更点は……文字を細く・小さく・薄く背景色をグレーに項目の間に線を追加noteの目次の特徴は、「控えめ」なこと。記事によっては目次を付けていないものも多いです。目次(table of contents)のHTML構造.toc.toc-title.toc-contentol.toc-listliaリスト構造(ol, li)とアンカーリンク(a)の関係で、かなり複雑な入れ子になっ...
[Cocoon] ブログ記事の作成日時・更新日時を2段にする 【white-space pre】 ニッチな話題

[Cocoon] ブログ記事の作成日時・更新日時を2段にする 【white-space pre】

ブログ記事のタイトル部分のスタイルを少しいじりました。作成日時と更新日時を2段になるようにしました。こちらがCSSです。.entry-header .date-tags { order: 3; color: #a8abb1; font-size: 16px;}.entry-header .date-tags .post-update:after { content: "\A" ; white-space: pre ;}少し、文字の色や大きさも変更していますが、メインになるのは...
WordPressのバックアップ復元がずっと終わらない…… 【Softaculous】 ニッチな話題

WordPressのバックアップ復元がずっと終わらない…… 【Softaculous】

ヒヤリとした話です💦WordPress 5.6のアップデートが思うようにいかず、いったんバックアップから5.5に復元することにしました。そのときに、バックアップ作業がずっと進まない状況になったので、レポートします。注意バックアップに失敗するとデータを失う場合があります。十分に注意した上で、自己責任で操作して下さい。WordPress 5.5に戻したいWordPress 5.6にアップデートしたところ、よく使っているプラグイン(Change Block Keywords)が対応...
note風スタイル第3弾! Cocoonのアイキャッチをタイトルの上に変更した 【display-flex】 ニッチな話題

note風スタイル第3弾! Cocoonのアイキャッチをタイトルの上に変更した 【display-flex】

Cocoonのアイキャッチ画像は、既定ではタイトルの下に表示されます。今回はアイキャッチ画像をタイトルの上に表示されるように、スタイルシートを編集しました。これもnoteのデザインを参考にしています。タイトルと本文の位置が近くなるので、読みやすいですよね。Cocoon設定やPHP編集もいいけれど……アイキャッチ位置を変更する方法をざっと調べると…Cocoonの設定でアイキャッチを非表示にして本文中に画像挿入する方法content.phpを書き換えて表示位置を変更する方法が紹介...
note風スタイル第2弾!モバイルメニューを編集 ニッチな話題

note風スタイル第2弾!モバイルメニューを編集

こんにちは。以前、noteのような読みやすいブログを目指して、スタイルシート(CSS)を変更しました。前回は、パソコンでもシングルカラムの方が読みやすいのではないか、というテーマでした。今回のメインは モバイルメニューです。どうすれば、スマホユーザーにとって集中して読みやすいか、というテーマでnoteのUIを参考に、ブログのスタイルをいろいろ試してみましたので、レポートします。モバイルメニューボタンをいろいろ変更した上部バーはすっきりさせました。下部バーはLINE登録、ツイッ...