ホームページ運用

[CSS] Cocoonで印刷時のアイコンリスト・ラベルボックスに枠をつけた プログラミング

[CSS] Cocoonで印刷時のアイコンリスト・ラベルボックスに枠をつけた

ウェブページを印刷する時に、通常は「背景画像を表示しない」になっていて、画面で表示されている背景画像や背景色が印刷されません。これには、インクの使い過ぎを防ぐ効果がありますが、画面表示と見た目が変わってしまいます。特に、このホームページでは、多くのアイコンリスト、ラベルボックスを「枠なし」「薄い背景色」で設定しています。印刷時に、背景色がなくなってしまうと、構造がわかりにくくなってしまうのです。そこで、設定した背景色をもとに、枠(濃いめ)をつけるようにしました。WordPre...
[CSS] ブログの印刷時のフォントをUDフォントにした プログラミング

[CSS] ブログの印刷時のフォントをUDフォントにした

パソコンでの文書作成用に「BIZ UDフォント」をパソコンに入れたのですが、ブログの印刷時のフォントでも活用したいと思います。ただし、印刷時だけで、通常のパソコンやスマホの画面で表示するときには、デフォルトのフォントのままにします。ウェブフォントを利用すると、表示に時間がかかってしまうからです。利用可能なフォントファイルを用意するまず、フォントファイルをPCに用意します。利用したフォントは、「SIL Open Font License (OFL)」というライセンスで、CSSに...
目に優しいフォントをパソコンに入れてみる【UDフォント】 インターネット小話

目に優しいフォントをパソコンに入れてみる【UDフォント】

「ユニバーサル デザイン フォント」は、加齢などで視力が弱くなっても、視認しやすくなるように配慮されています。「モリサワ」が、BIZ UDフォントを一般公開しました。
Google アナリティクスがアップデートされました【ver.4.4、指標とディメンションの定義のツールチップ】 インターネット小話

Google アナリティクスがアップデートされました【ver.4.4、指標とディメンションの定義のツールチップ】

スマホで「Googleアナリティクス」アプリを開いたら、「アップデートされた」と表示されました。「最新情報」を見ると、「バージョン履歴」が確認できます。4.4カードエディタの新しいツールチップを使って、指標とディメンションの定義を確認できます。「ツールチップ」は、「カーソルを合わせると出現する注釈」のことです。試しにスマホにBluetoothマウスをつないで、ツールチップの表示を確認してみました。Google アナリティクスのレポートには、いろんな情報のカードがあります。カー...
一年間でちいラボブログのアクセスはどう変わった?(2022年2月の振り返り) ホームページ運用

一年間でちいラボブログのアクセスはどう変わった?(2022年2月の振り返り)

GoogleのAnalyticsを見ていて、昨年とのアクセス数の違いを比較したかったので、メモしてみました。記事数と一日のモバイルアクセス数2月の平日について、一日のモバイルアクセスを比較しています(2021年2月22日(月)と2022年2月23日(水))。記事数は、2021年1月末時点で540記事、2021年1月末時点は1279記事でした。一年間で739記事(+137%)増です。一日のモバイルユーザー数は、1737人→5560人と、昨年比+220%に増えました。日によって変...
[CSS] ウェブページの印刷時に一番上の画像と文字が重なった【display:inlineとblock】 インターネット小話

[CSS] ウェブページの印刷時に一番上の画像と文字が重なった【display:inlineとblock】

教室ブログを印刷をしてみると、なぜか印刷が重なってしまうページがありました。すべてのページではなく、特定の記事だけで起こりました。・保護者の「承認」がないとアプリをインストールできないようにするには?【Google ファミリーリンク】 – スマホ教室ちいラボプリンタの問題ではなかったはじめは、プリンタが用紙の読み込みに失敗して、二重に印刷してしまったのか、と思ったのですが、よく見ると違います。印刷プレビューでも文字が重なっているのです。ページ切替えの一番上に画像があったときに...
画像ごとの個別ページは画像SEOに有効な場合もある【検索とページ構造】 ニッチな話題

画像ごとの個別ページは画像SEOに有効な場合もある【検索とページ構造】

「検索エンジンに評価される工夫」のことを「SEO:検索エンジン最適化」といいます。現在はキーワード検索だけではなく、地図で表示されるための「MEO(地図エンジン最適化)」など、ひろがっています。今回は、Googleの「画像検索でのSEO」についての話が興味深かったので、メモしておきます。へ〜、「画像SEO」という考え方もあるんだね。画像検索と個別ページ「Google SEO オフィスアワー(2021-11-05)」の25:07ごろからの話題で、画像SEOについての話がありまし...
店舗のブログをどう作る?【ブログサービスとHP作成サービス】 インターネット小話

店舗のブログをどう作る?【ブログサービスとHP作成サービス】

仕事で、ホームページの他に、「ブログで発信していく」ように言われました。まだ、曖昧な段階なのですが、そもそもブログって どんな風に作っていったら良いのですか?店舗などの集客ツールとして「ブログ」に着目するケースは多いと思います。個人の日記ブログと店舗のブログの違いについて、見てみましょう。ポイント一言で「ブログ」といっても、運用の仕方はさまざまある。時代とともに、ブログサービス、WordPress、HP作成サービスと、選択肢が広がってきた。ブログサービス内の日記スペースとして...
パーマリンク設定を変更してアクセスURLが切り替わるのにかかった期間【AMPキャッシュ】 インターネット小話

パーマリンク設定を変更してアクセスURLが切り替わるのにかかった期間【AMPキャッシュ】

先日(2021年11月2日)、サイトのパーマリンク設定を変更して、URLアドレスを変更しました。ページ全体のパーマリンクを変更して、検索順位に悪影響があるか心配だったのですが、今のところ無事に移行できています。今回は、パーマリンクを変更してから、Analyticsで集計されるURLアドレスがどのように変化するか調べてみました。切り替わる期間前回は、WordPressのパーマリンク設定を変更して、「」「」のような形式に変更しました。これは、「月ごとの記事のアクセス数」を集計する...
[WordPress]エディタでうまく表示されない画像のアドレス「画像に alt 属性が指定されていません」 ニッチな話題

[WordPress]エディタでうまく表示されない画像のアドレス「画像に alt 属性が指定されていません」

WordPressのエディタ画面に画像をアップロードすると、たまにうまく表示されないことがあります。ところが、「メディアの選択」で確認すると、画像が表示されます。アップロードはできているようです。ところがこの画像を挿入しても、同じくエディターに表示されません。ブラウザによって表示されたり、しなかったりブラウザからブログエディタでエラーになっているアドレス()に、アクセスしてみます。すると、ChromeとSafariで挙動が異なりました。そこで、アップロードした画像のURLにア...
[WordPress]「Briefly unavailable for scheduled maintenance」【自動更新タイミング】 インターネット小話

[WordPress]「Briefly unavailable for scheduled maintenance」【自動更新タイミング】

先日、自分のブログを確認していたら、突然 グレーの画面で何も表示されなくなりました(2021-11-02 23.34.33)。Briefly unavailable for scheduled maintenance. Check back in a minute.(定期メンテナンスのために一時的に利用できません。 しばらくしてからもう一度確認してください。)これは、WordPressのメンテナンス中の表示です。私は、プラグインやテーマの自動更新を有効にしているので、たまたま...
[CSS]ブログカードの画像のアスペクト比を変更した[object-fit, aspect-ratio] ニッチな話題

[CSS]ブログカードの画像のアスペクト比を変更した[object-fit, aspect-ratio]

これまで一行で表示できるタイトル文字数が少なくて、タイトルが長くなると読みにくいことが気になっていました。ブログカードのデザインを少し変更しました。そこで、まず画像のアスペクト比を変更したり、文字のサイズを少し小さくして、タイトルを長めに取れるようにしました。CSSで自動的に画像のアスペクト比を変えて、トリミングすることができました。img{ object-fit:cover; aspect-ratio: 100/100;}また、ドメイン名の色を変更することで、タイトルと区別...
[AMPエラー] タグ「amp-img」の属性「src」のURLプロトコル「blob」が無効です。【blobプロトコル】 インターネット小話

[AMPエラー] タグ「amp-img」の属性「src」のURLプロトコル「blob」が無効です。【blobプロトコル】

Googleサーチコンソールを見ていたら、エラーの通知がありました。どうも、画像のアップロードに失敗したまま、記事を公開してしまっていたようです。ポイント「blob:〜」で始まるURLアドレスのデータは、ブラウザ内に保持されている。画像アップロード中にタイムアウトすると、リンクアドレスとして残ってしまうことがある。画像をアップロードし直すと修正できた。タグ「amp-img」の属性「src」のURL プロトコル「blob」が無効ですサイト〜で「AMP」の問題が新たに 検出されま...
[WordPress] 「月の投稿ごとの集計」をするためにブログのパーマリンクを変更した【Search Regexプラグイン】 インターネット小話

[WordPress] 「月の投稿ごとの集計」をするためにブログのパーマリンクを変更した【Search Regexプラグイン】

「Google アナリティクス」でアクセス数を見ているのですが、「投稿した月ごとの集計」を知りたいと思いました。そのために、サイトのパーマリンクを変更しました。手作業で内部リンクを修正するのはしんどそうだったのですが、プラグインのおかげで一気にできました。ポイントGoogleアナリティクスでは、「ディメンション」ごとにアクセス数を集計できる。WordPressのパーマリンクは、「設定」から変更できる。投稿内のURLを一括置換するのに、「Search Regexプラグイン」をイ...
Googleマップで表示される四角いピン【マップの広告】 インターネット小話

Googleマップで表示される四角いピン【マップの広告】

Googleマップを見ていたら、「四角いピンは広告です」というメッセージが表示されました。この説明メッセージは、はじめて広告が表示されたタイミングを逃すと、なかなか見ることができません。慌ててスクリーンショットを撮りました。マップに表示される広告四角いピンをタップすると、お店の情報の上に「広告」も表示されます。四角いピンは広告です広告主は Google に広告料金を支払い、これらの場所を宣伝しています。店舗情報は、「Googleマイビジネス」で登録された情報で、無料で掲載され...
GIF画像は「性的なコンテンツ」なのか?【AdSense ポリシー違反レポートと再審査リクエスト】 インターネット小話

GIF画像は「性的なコンテンツ」なのか?【AdSense ポリシー違反レポートと再審査リクエスト】

Google AdSenseから「ポリシー違反」の報告がありました。しかし、再審査をリクエストすることで解消しました。指摘された違反はないと思っていたのですが、「問題なし」の結果が出るまでは心配でした。再審査までの流れをメモしておきます。ポイントGIF画像が「アダルト コンテンツ」と誤検出された。ページ内容を変更せずに「再審査リクエスト」すると、問題なしに戻った。AIによる自動評価は効率的なのですが、いざというときに怖いな、と思いました。やっぱり人間の目による審査は、大事です...
WordPressでのコピペに混ざる<meta charset=″utf-8″>をまとめて削除する【PHPコード】 プログラミング

WordPressでのコピペに混ざる<meta charset=″utf-8″>をまとめて削除する【PHPコード】

MacでWordPressのエディタにコピペをすると、<meta charset="utf-8">というタグが追加されてしまうことがあります。これを放置すると、Google Search Consoleで「AMPエラー」になってしまいます。検索結果にAMPページが除外されてしまうので、「表示の遅いページ」という評価になってしまいます。ビジュアルエディターでは見つけにくいエラーなので、いちいち コードエディタに切り替える必要があります。「utf」で検索して、ちまちま修正していた...
使用していないスクリプト・スタイルを減らしたい [PageSpeed Insights] インターネット小話

使用していないスクリプト・スタイルを減らしたい [PageSpeed Insights]

ブログのページを高速化したいけど、どこを削ったらよいかわからない💦とりあえず、「使用していないJavaScriptの削減」について、よくわからなかったことを、よくわからなかったなりにメモしておきます。PageSpeed Insightsの使用していないJavaScriptの削減PageSpeed Insightsをみると、「改善できる項目」に「使用していないJavaScriptの削減」があります。PageSpeed Insights項目の詳細をみると、Google Adsen...
[WordPress] ブログ記事に印刷用のQRコードを追加する【Google APIs】 プログラミング

[WordPress] ブログ記事に印刷用のQRコードを追加する【Google APIs】

ポイントQRコードはGoogle APIsで自動生成できる。WordPressの記事URLは、<?php the_permalink(); ?>で出力できる。functions.phpでは「get_the_permalink()」で文字列を取得できる。ウィジェットは印刷されないので、関数で本文末尾に追加する。【追記:2024-05-09】Google APIsのQRコード生成は終了したので、代替サービスを利用します。Google APIsでQRコードを生成するウェブページには...
「AMP > 推奨サイズより大きい画像を指定してください」【AMP画像の推奨サイズ】 インターネット小話

「AMP > 推奨サイズより大きい画像を指定してください」【AMP画像の推奨サイズ】

Google Search Consoleを見ていたら、「推奨サイズより大きい画像を指定してください」という警告が表示されていました。AMPで設定する画像サイズを適切にすると、検索結果などで画像も表示されるようになるようです。ポイントAMPのアイキャッチ画像:画像の幅は 1,200 px以上、幅と高さをかけて 800,000 px以上AMPロゴ:600x60 ピクセルの長方形。上下に6pxの余白。AMPのファビコン:48 ピクセルの倍数、正方形。Google Search C...