ホームページヒントにホームページに載せる適正画像サイズをデータで検証を公開しました。
デジカメで撮影した画像をご自身のホームページに載せる際などに参考にしてください。
- メガピクセル画像をホームページに載せてはいけない理由
- ディスプレイ規格表
- ディスプレイ解像度別 ホームページ訪問者Best10
- デジカメに高画素数は必要なのか?
- 結論
ホームページヒントにホームページに載せる適正画像サイズをデータで検証を公開しました。
デジカメで撮影した画像をご自身のホームページに載せる際などに参考にしてください。
WordPress用GMapを使わない地図表示プラグイン公開
最近主流のPC用ディスプレイ解像度は?【過去10年間の推移】
緊急でリニューアルが必須なWebサイト
【Google公認】reCAPTCHA v3のバッジ(ロゴ)をコピペで簡単に非表示
無料の「Adobe Photoshop CS2」を「Windows 10」で使う
「Easy Table of Contents」で長い見出しが改行されても行頭を揃えるコピペ用CSS
highlight.jsに「強調表示」を追加する拡張CSS
ついき来たのか!?Windows 10 バージョン1803安定版。
FreeBSDのディスク容量を拡張する(ConoHa VPS)
学校で使うiPadのバッテリー持ちが悪い
人柱:Windows 10 v1803(RS4)更新プログラムKB4100403 (17134.81)
VMware Workstation Player 仮想マシンの複製【簡単3ステップ】
インデックス登録されましたが、サイトマップに送信していません Google Search Consoleのカバレッジで緑色の有効(インデックスに登録されている)になっているものの、「インデックス登録されましたが、サイトマップに送信していません」という詳細情報が気になりました。 クリックしてみると「例」としてURL一覧が表示されます。 そのURLをさらにクリックすると、UTF-8でエンコードされたURLが表示されます。 送信しているXMLサイトマップもUTF-8でエンコードをしていますし、URLの正規化も済んでいるのになぜ? じっくりと見比べてみると、XMLサイトマップのURLはスラッシュが「%2F」にパーセントエンコーディングされているのに対して、Googleでは「/」のままです。 サイトマップを出力しているphpソースを見てみると、PATH_INFOをrawurlencodeでエンコードしています。 rawurlencodeはRFC3986にもとづいて「-_.~」とアルファベット以外をすべてエンコードするようですので妥当なはずです。 Google独自仕様?と思ったのですが、RFC3986の3.4章に「スラッシュ (“/”) と疑問符 (“?”) の文字はパーセントエンコーディングする事を避けるほうがユーザビリティのためにはよい。」という記述がありました。 スラッシュはパーセントエンコードしないように修正 GoogleもRFCもスラッシュはパーセントエンコードしないと提唱しているのであれば、これに合わせるべきだと思い以下のように修正しました。 $r_page = rawurlencode($page); $r_page = str_replace(‘%2F’, ‘/’, $r_page); 修正後、XMLサイトマップの出力とGoogle Search ConsoleのURLを比較するとマッチしていましたので、これで解決です。
お名前.comのコントロールパネルからMySQLファイルをインポートしようとするとエラーが発生した際の解決方法。WordPressのファイル転送はFileZilla(SFTP)を使って問題なく完了。
Webサイトが「スマホに対応していない」「SSLに対応していない」「Flashなどの古い技術を使用している」に該当していたら至急リニューアルを検討してください。
公開しているメールアドレスは、最近トレンドなフィッシングメールをピックアップで紹介したように、フィッシングメールが毎日山ほど届きます。せっかくなので訪問してみました。 フィッシングサイトに嵌ってみました 最近のブラウザはデフォルト設定で注意喚起してくれます。 Chromeの場合 Firefoxの場合 Firefoxのほうがキッパリと言い切っていてかっこいいですね。 どのブラウザも、うっかり誤クリックで進んでしまわないように「無視して進む」というボタンが無いインターフェイスになってますが、頑張って先に進んでみました。 仮想PC・ブラウザをプライベートモード・LAN切り離し・IPアドレス変更等を行ったうえでの検証です。アクセスするだけで様々な情報を抜かれる恐れがありますので、安易に先に進むようなことはしないようにしてください。 APPLEっぽいサイトが表示されました。 一見APPLE公式のように見えますが、中央の入力フォーム以外はリンクすらされていない張りぼてです。 ですが疑いの目を持って見ない限り、偽サイトだということに気づかないと思います。 フィッシングサイトの見抜き方 騙されないためにはアドレスバーに表示されているURLをよく見てください。まずこの習慣をつけましょう。 見るのは最初に現れるスラッシュ「/」よりも左側です。それよりも後(右側)は一切気にしないで大丈夫です。 http://cert-protection-account-appleid-apple.com ブラウザによっては cert-protection-account-appleid-apple.com とhttp://(またはhttps://)が省略されて表示されます。 以下のような場合にはさらに注意が必要です。 apple.example.com/rmd_nid_vcss… google.example.com/rmd_nid_vcss… ドメイン名「example.com」の前にドット「.」が入っている場合、それより左側はドメインの保有者が自由に好きな文字を設定できるサブドメインと呼ばれます。 一番最初に知っている名前が入っているからといって絶対に信用してはいけません。 itunes.apple.com これはitunesがサブドメインですが、その右側を見るとドメイン名がapple. […]
スタートアップツールを導入しないでセキュリティソフトだけをインストールするNTT関係者からの情報。ウイルス対策ソフトを購入するまえにフレッツ光の無料ライセンスを確認しないともったいない。
いまだに回線もサーバーも自社運用しているWeb制作会社がクラウド(VPS)への移行を考えて現在の構成を見直してみる。ランニングコストもさることながらスキル習得に無駄な時間を注ぎ込んできた気がする。
GIGAスクール構想で32GBのiPadを導入した自治体が直面しているiOS18へのアップデート空き容量の確保問題について
Zoomに代わるオンライン会議ツールを無料で公開しています。 登録不要でブラウザからもすぐに利用できますので検証としてご活用ください。
NPO活動が停滞していましたが、Googleのサポートプログラムにより兆しが見えました。 Google Adwords(オンライン広告)を毎月1万USドル(約100万円分)まで無料で利用できるというものですが、登録時に一箇所問題が生じました。 Ad Grantsアカウントで広告設定をすると「お支払情報の確認」ページに「設定の必要がない」旨表示されるはずなのですが、何度やっても支払情報を求められてしまう。 うっかり入力してしまうと、毎月100万円程度の支払いが発生してしまうそうなので、初めてGoogleサポートに電話をしてみましたが、解決に至らず。(待たされることもなく、とても温かみのある人間的な対応でビックリしました) その後、いろいろいじってみて分かったことが、 複数のGoogleアカウントを利用している事 が原因でした。 恐らくブラウザのキャッシュが原因だと思うのですが、アカウントを切り替えても他のGoogleアカウント情報があるとダメでした。 Chromeでは複数のGoogleアカウントが登録されてしまっていたので、Googleアカウントが何も登録されていないfirefoxを使ってみたところ一発でOKでした。 以下追記 数時間待っても広告が配信されず、Adwords管理画面を確認すると「アカウントは有効ではありません」の文字が。 あれこれいじってみましたが、毎月100万円の請求が来る可能性もある部分ですので、再度Googleへ電話してみました。(相変わらず1分も待たされませんでした) アカウントの現在の状況を確認していただき、ワンステップずつ丁寧に教えていただき無事解決に至った内容です。 Google非営利団体向けプログラムを開いて、ログインされていなければログインする。 こんな画面が表示されます。Google Ad Grantsに「登録」ボタンが表示されている状態では、まだ申請が終わっていません。 指示に従ってAdwordsのIDを入力するとこのようになります。 10営業日ほど待ちます。(今ここです。) Adwordsで広告登録をしたあとに 「おめでとうございます!新しい広告の掲載が始まります。」 というメールが届き安心していたのですが、手動でAd GrantsとAdwordsを結び付けなければいけなかったようです。 Googleのこのプログラムは、システ […]
Webコンテンツの適正画像サイズをディスプレイ解像度の利用者統計データを元に検証します。 ホームページに載せる適正画像サイズをデータで検証という記事から11年も経ってしまいましたので2018年版を載せました。 (StatCounterによる統計データを元にしています。) 2018年版が確定したのでデータおよびグラフを修正しました。 2019年版も(確定版ではありませんが)掲載しました。 Webコンテンツに使用する画像サイズ結論 掲載データが多くなってしまいましたので、結論を先に書いておきます。 パソコンのモニター幅いっぱいの可変サイズの画像(ヘッダ等)を想定するのであれば、(w)2,000ピクセルは必要。これくらいあれば(w)2,560ピクセルで表示したとしても耐えられるクオリティ。10年前に比べると回線環境は良くなったとはいえ、画像サイズが大きくなれば読み込みに時間がかかり、またスマホユーザーに無駄なデータ通信量を消費させてしまう。 記事に添える画像は300~800ピクセル程度のサムネイルを表示して、高解像度が必要であれば元画像にリンクを張る。 レスポンシブデザインの場合、表示サイズと同等にリサイズされた画像が表示される工夫が必要。(CSSにwidthを書いても元画像が同じであればデータ量は変わらず、w320のスマホユーザーにw2,000の画像を送り付けるという事態に。) jQueryで端末サイズに応じて読み込む画像を振り分けるのが今のところ良さげ。 下記のようなメディアクエリーを書いても読み込む画像が増えるだけで逆効果。 <img class=”w1920″ src=”../img_1920.png” /> <img class=”w480″ src=”../img_480.png” /> .w1920 { display: block !important; } .w480 { display: none !important; } @media only screen and (max-width: 480px) { .w1920 { display: none !important; } .w480 { display: block !important; } } 2018年ディスプレイ解像度利用者率Best10(世界) 1366 […]
NTTのフレッツ光プレミアムが2019年1月末で終わるという事で、トラブルの出尽くしたであろうギリギリで切り替え工事をしてもらいました。 「ハイスピード」と「ハイスピード隼」が選べましたが、工事に何倍も時間のかかる「ハイスピード隼」でお願いしました。(工事に来ていただいた業者様、忙しい時期にありがとうございました) タイトルの「下り速度320Mbps」ですが、実は古いルータ(NEC WR8700N)の有線接続で出た数字です。 あ、すみません。画像加工してMbpsをbps表記にしてあります。 オリジナルは↓これです。 WR8700Nのレビューはこちらが参考になります。 2010年の製品ですのでIEEE802.11n/11aしか対応していないのと2ストリーム(アンテナが2本)のためか、別の階でのWiFiは遅く、3台・4台と接続すると良く通信が切れたりしていました。 業務用はYAMAHA、家庭用はNECという信念を10年以上貫いてきましたが、家庭用ならバッファローもありかな…と。(NTTが切り替え工事の際に施策ルータとして提供しているのがBuffalo又はYAMAHAだったのがトドメ) お買い得品をネットで見つけて買ったのが「WSR-2533DHPL」です。 バッファローのルータは、WSR-2533DHP(L無し)とかWXR-2533DHPとか間違い探しみたいな型番号が多いので、気を付けてください。 IPoE(IPv6)には対応していませんが、4ストリームで1733Mbps(5GHz)+800Mbps(2.4GHz)が魅力で実売価格7,000~8,000円。 9年前の機器とはさすが違いますね。 別の階で2台のパソコンを使っているのですが、どちらもUSBタイプの無線LAN子機を使っています。それも1,000円もしない11acには非対応で2.4GHz専用のもの。 それでも平均して下り速度100Mbps~200Mbps 出ています。 さらに非常に安定しています。 有線もすいている時には400Mbpsを超えます。 スマホやタブレットもWiFi回線が安定し、ブロスタやスリザリオがぬるぬる動くようになったと評判です。 屋根裏に潜ってLANケーブル引っ張ろうかと、釣り竿まで用意していたのが不要になりました。 無理なら屋外から引っ張ろうと、防水LANケーブルを「欲しいものリスト」に […]
10年以上ぶりにPukiWikiをいじっているんですが、昔の情報は豊富にありますが最近の情報が乏しいですね。 PukiWikiの全盛期は、Nginxが誕生したばかりでしたので仕方ないのかもしれませんが。 PukiWikiのindex.php無しでURLを統一する URLの正規化としてまず、 http://example.com/ http://www.example.com/ https://www.example.com/ これらをhttps://example.comに301リダイレクトしました。 これについては各所に載っているようにserverディレクティブを追加して、return 301~といった感じです。(ここでは詳細は割愛します) これで完璧!と思いつつGoogle Search Consoleを眺めているとindex.php有りと無しが…。 pukiwiki.ini.phpの設定でindex.phpを表示しないという項目があります。 // Shorten $script: Cut its file name (default: not cut) //$script_directory_index = ‘index.php’; コメントアウトを外して試してみましたが、何かが違う。 確かに表示はされなくなりました。 index.php有りの膨大なURLがすでにGoogleにインデックスされているので、index.php有りで404エラーになると困るのですが、結果はindex.phpを入れたURLでもちゃんとページが表示されました。 しかしindex.phpが表示されたままの状態。ステータスコードは200。index.php有りと無しの両方のページが存在した状態です。 ということでNginxの設定を変更しました。 server { if ($request_uri ~* “^(.*/)index\.php(.*)$”) { return 301 $1$2; } } 上記のようにdefault serverディレクティブに書き加えて、 nginx -s reload で完了です。 PukiWikiネタってまだ需要あるんでしょうか。 今回PukiWiki 1.5.2(utf8)をベースに以下のようなカスタマイズをしたのですが、要望があれば時間を見つけて記事 […]
「画像の後処理に失敗しました。このファイルが写真もしくは大きい画像であれば、2500ピクセルに縮小してから再度アップロードしてください。」というWordPress 5.3のエラーについて。
HTML5・CSS3に対応しているLeafletという地図表示スクリプトがヌルヌルと動いていい感じです。 これを使ったLeaflet-MapというWordPress用のプラグインがあり、喜んで使ってみたのですが、場所を登録するのに少し手間がかかります。 一つのマップに一つのマーカーを表示するのに特化した、LatLng(経度緯度)を意識しないでもいいGUIタイプのプラグインWP Leaflet Mapperを作りましたので、良かったらお使いください。 地図タイルはOpenStreetMapまたは地理院地図に対応しています。 readmeに書き忘れてしまいましたが、マップ表示のショートコードは[lmap]で表示されます。(エルマップです。アイマップやイチマップではありません) WP Leaflet Mapperのダウンロード 必須leaflet-mapper.zip(WordPress用MAP登録プラグイン) Download WordPress公式サイト 当サイト ※WordPress公式サイトからのダウンロードをおすすめします。(名称を変更等、新しいバージョンになっています) Leaflet-Mapperのインストール方法 普通のプラグインと同じですが、まだWordPress.orgには登録されていませんので、zipアーカイブをダウンロード・解凍したものをFTP等でアップロードしてください。 【2019.05.01追記】令和初日にWordPress公式プラグインとして登録されました。その際leafletから始まる名前はNGということで、正式名称がwp-leaflet-mapperとなりました。 上記よりleaflet-mapper.zip(またはwp-leaflet-mapper.zip)をダウンロードする パソコンで解凍する /wp-content/pluginsディレクトリにleaflet-mapperフォルダをアップロードする WordPressの管理画面からプラグインを有効にする WP Leaflet Mapperの使い方 必要に応じて「設定」-「Leaflet-Mapper」から初期設定をする 各投稿ページ下段にマップが表示されているので、マウスをドラッグして位置を合わせ、ホイールでズーム倍率をいい感じにする ショートコード[lmap]をマップを表示した […]
CS2用ライセンス認証サーバの停止に伴って、Photoshop・Illustrator・Premiere等をシリアルナンバーと共に無料でダウンロードできるようになっていますが、Windows 10では「動作を停止しました」とエラーになってしまう事が多いようです。 ※あくまでも正規ライセンスを所持している方が対象です。 ネットで検索をすると、この対策として「言語設定」の「アプリウインドウごとに異なる入力方式を設定する」にチェックを入れると良いという情報が多くヒットします。 しかし残念ながら、Windows 10 October 2018 Update (1809)以降ではこの手法は使えなくなってしまったようで、「デバイス」→「入力」→「キーボードの詳細設定」から「アプリウインドウごとに異なる入力方式を設定する」にチェックを入れてもPhotoshop等は起動しなくなってしまいました。 Windows 10 October 2018 (1809) 以降でAdobe CS2を起動する応急処置 以下の方法で2回に1回程度の確率で起動できます。 Photoshop等のアイコンを右クリックして「その他」→「タスクバーにピン留めをする」 タスクバーにできたアイコンをクリックする 「アプリウインドウごとに異なる入力方式を設定する」は関係なさそうなのでデフォルト(チェックなし)に戻しておく スタートにピン留めやデスクトップにショートカットを作って試してみましたが、なぜかタスクバーだけが起動確率が非常に高いです。 もっと確実な方法がありましたら教えてください。 2019年5月追記 Adobe CS2の公開ダウンロードは終了したようです。 https://www.ii-sys.jp/notes/1324 https://www.ii-sys.jp/notes/1900
