晴歩雨描

晴れた日は外に出て歩き、雨の日は部屋で絵を描く

ホームページ、Web作成

WordPress)記事URLに記事タイトルが入るのを変更。

WordPressでは、初期状態では、投稿した記事のURLが、以下のように記事タイトルがURLに入る。 http://localhost/wordpress/2022/08/10/テスト/ 記事タイトルがURLに入るこの形式を変更したい。 設定の「パーマリンク設定」で変更できる。 標準には、希望の形…

WordPress)外観テーマを「Semplicemente」に変更。

先日、自宅のWindowsPCローカルにWordPressを入れた。 このWordPressの外観テーマを「Semplicemente」に変更。 【はてなブログ「晴歩雨描」のテーマ:Minimalism】 一旦はテーマを「Twenty Sixteen」にしたが、3カラム形式だったので、2カラム形式を探した。…

WordPress)外観テーマを変更したらエラー「Parse error: syntax error」に。解決方法。

WordPressで、外観テーマを変更したら、以下のようなエラーが出て、ページもダッシュボードも開けなくなった。 「Parse error: syntax error, unexpected 'const' (T_CONST), expecting variable (T_VARIABLE) in D:\xampp\htdocs\wordpress\wp-content\them…

はてなブログのエクスポートファイルの画像リンクをWordPressローカルに変えるJScriptを作成。

自宅のWindowsPCローカルにWordPressをインストールしている。 はてなブログのエクスポートファイルでは写真画像は、はてなフォトライフを参照する形になっている。 ≪サンプル≫ https://cdn-ak.f.st-hatena.com/images/fotolife/a/art2nd/20220731/202207311…

WordPress)画像格納ディレクトリ確認。はてなブログからのインポートテスト。

先日、自宅のWindowsPCにWordPressをインストールした。 画像格納ディレクトリ確認、はてなブログからのインポート、他、試しごとの備忘録。 【デザイン変更】 ダッシュボードの「外観」で「テーマ」を選択。 http://localhost/wordpress/wp-admin/themes.ph…

WordPressのデータベース変更。

昨日、自宅のWindowsPCにWordPressをインストールした。 WordPress用のデータベースを切り替えてみる。 http://localhost/xampp/ で、「phpMyAdmin」を開いて、切り替え用データベースを作成する。 「wp-config.php」ファイル \xampp\htdocs\wordpress\wp-co…

WindowsPCの古いXAMPPにWordPress(5.0.16)をインストール。

自宅のWindowsPCにWordPressをインストールした手順の備忘録。 自宅のWindowsPCには、古いバージョンのXAMPP(XAMPP 1.8.3)が入っている。理由は自分で作成したPHP+MySQLベースのシステム「MyHome Portal」を使っているから。 XAMPP 1.8.3 PHP 5.5.15 MySQ…

JavaScript)HTML<TABLE>の<TD>に、セルの数値に合わせて、背景色を付ける。

昨日、不快指数一覧図表を作成した。 このテーブルの背景色は、JavaScriptを使って、HTML<TABLE>の<TD>に、セル内の数値に合わせて付けている。 jQueryを使う方法もあるが、jQueryを使わないでJavaScriptだけで非常に簡単にできる。「.rows」「.cells」が便利。 今回、</td></table>…

Leaflet地図:都道府県別「りんご」vs「みかん」を円グラフ(Google Image Charts)で表示。

地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図をいくつか作成してきた。 今回、『都道府県別「りんご」vs「みかん」』を作成。 元データは、「統計局ホームページ/家計調査(二人以上の世帯)品目別都道府県庁所在市及び政令指定都市ラン…

Leaflet地図:三大コンビニ都道府県別店舗数を円グラフ(Google Image Charts)で表示。

地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図をいくつか作成してきた。 今回、「三大コンビニ都道府県別店舗数」を作成。 データは、大手コンビニ3社の公式サイトの数字を使用。 国内店舗数|セブン‐イレブン(2022年6月末) 店舗数|会…

Leaflet地図、作成記事「まとめ」。

地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図をいくつか作成してきた。 Leaflet地図作成記事をまとめてみた。

Leaflet地図:「日本)鉄道難読駅マップ」を作成。CSV使用。

地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図をいくつか作成してきた。 今回、「日本)鉄道難読駅マップ」を作成。 駅マーカーをクリックすると読みを確認できる。 難読駅データは、以下の「ORIGAMI - 日本の伝統・伝承・和の心」の「日…

Leaflet地図:世界地図に国別宗教構成を円グラフ(Google Image Charts)で表示。

先日、Leafletで世界地図に国別宗教構成を表示するページを作成した。 前回は、世界地図に国旗を表示し、国旗をクリックすると、その国の宗教構成を表示する方式だった。 今回は、全世界の各国の宗教構成を円グラフで一覧表示する方式にした。 宗教構成デー…

Leaflet地図:世界地図に国別宗教構成を表示。

地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図をいくつか作成してきた。 今回、世界地図に国別宗教構成を表示するようにした。 以前に作成した世界地図の国旗マーカーのクリックで、その国の宗教構成をポップアップで表示する。 宗教構成…

Leaflet地図:「日本酒生産量:都道府県別マップ」の「白地図+QuickChart.io 版」作成。

先程、Leaflet地図「日本酒生産量:都道府県別マップ」の「白地図+Google Charts(Image Charts)版」を作成した。 日本酒生産量の棒グラフを「Google Charts > Image Charts」で作成したが、左側のY軸を消す方法が見つからなかったので、グレーの縦線が付…

Leaflet地図:「日本酒生産量:都道府県別マップ」の「白地図+Google Charts(Image Charts)版」作成。

地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図をいくつか作成してきた。 以前に「日本酒生産量:都道府県別マップ」を作成した。 最近、「日本白地図」を作成した。 今回、「日本酒生産量:都道府県別マップ」の「白地図+Google Charts…

Leaflet地図:「日本白地図」作成。逆ジオコーディング付き。

地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図をいくつか作成してきた。 今回、「日本白地図」を作成。「国土地理院」の「白地図」を使用。 https://cyberjapandata.gsi.go.jp/xyz/blank/{z}/{x}/{y}.png 作成した地図は以下。 拡大表示…

Leaflet地図:世界地図で「Google 衛星写真」を表示できるようにした。

地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図をいくつか作成してきた。 Leafletで作成した地図で、「Google 衛星写真」を表示できるようにした。 ■ 現在地&住所検索 ■ 世界地図:Jawg Maps + 雨雲 ■ 世界地図:Jawg Maps + 雨雲 + …

Leaflet地図:「Jawg Maps」世界地図に国旗表示(2)。首都に全世界の国旗を表示。

先日、「Leaflet」+「Jawg Maps」を使った世界地図に国旗表示機能を付けた。 クリックした場所に、その国の国旗を表示するタイプ。 今回、首都の場所に世界の国旗全てを表示するタイプを作成。 国旗のアイコンサイズ40px版と80px版を作成。 ■ 世界地図:Jaw…

Leaflet地図:「Jawg Maps」世界地図に国旗表示(1)。逆ジオコーディング「Reverse - Nominatim」使用。

先日、「Leaflet」+「Jawg Maps」を使った世界地図を作成した。 この世界地図に、国旗表示機能を追加。 緯度経度から国名検索には、「Reverse - Nominatim」の逆ジオコーディングAPIサービスを利用。 【例1】以下にように緯度経度を渡すと、 https://nomina…

Leaflet地図:「Jawg Maps」のシンプルな世界地図+「RainViewer」雨雲

地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図をいくつか作成してきた。 今回、シンプルな世界地図を作成。 [↑]にある「Jawg Maps」から、国名や主な都市名が日本語でシンプルに表示される以下の4つを表示できるようにした。 Jawg.Stre…

備忘録:[CSS] はてなブログ<table><tbody>の<th>だけを左揃え。

はてなブログの<table>で、<tbody>の<th>だけを左揃え。 以下のスタイルシートを本文内に追加。 <style> tbody > tr > th {text-align : left;} </style> tbody > tr > th {text-align : left;} 以下、サンプル。 製品名 センサーサイズ 焦点距離 F値 EVF 重量 最短撮影距離 Nikon P1000 1/2.3</th></tbody></table>…

世界地図の変遷+世界史年表「Ostellus - the future of history」

先程、世界地図の変遷を見ることができる地図「GeaCron:World History Maps & Timelines」を見つけたが、 leafletを使った「Ostellus - the future of history」という地図を見つけた。 これが、かなりの優れもの。 過去に遡って国境を確認できる。 第二次…

世界地図の変遷「GeaCron:World History Maps & Timelines」

Leafletを使った面白い地図をみつけてきた。 今回、Leafletは使っていないが、「GeaCron:World History Maps & Timelines」が素晴らしい。世界地図の変遷を見ることができる。 ヨーロッパの近世の変遷を少し見てみる。 この地図だとクリミア半島はロシアに…

Leafletを使った便利地図「世界の国別統計色別マップ」「Nominatim」「Real Country Sizes Shown」「History of International Borders」

以前に、「Leafletを使った凄い地図たち」という記事を書いた。 Leafletを使った地図で「世界の国別統計色別マップ」というのを見つけた。 実際の地図は以下。 人口密度、1人あたり国民所得、国連人間開発指数、教育水準指数、ジェンダー平等指数、幸福度指…

HTML表<table>の列の横幅(width)を一括指定はcolgroupが便利。

HTML表の列の横幅(width)を一括して指定するなら、colgroupが便利。 <table>の列幅をCSSで統一する方法もあるが、colgroupを使うとまとめて設定できる。 はてなブログの以下の記事内の表をcolgroupで設定してみた。 <table> <colgroup> <col width="19%"> <col width="81%"> </colgroup> <thead> ・・・・・ ・・・・・ </thead> <tbody> ・・・・・ ・・</tbody></table></table>…

JavaScript版「縦書き表示」作成。「window.opener」を使えば、親子ウインドウ間のデータ受け渡しは簡単。

以前、「ブラウザでテキスト縦書き表示」するページを作成した。 この時作成したのは、サーバーサイドでPHPで処理して縦書きページを表示する方式だった。 今回、PHPを使わずにJavaScriptでクライアントサイドで縦書きページを作成する。 https://ok2nd.saku…

Web写真アルバム「神戸散歩(2)」「大阪散歩(2)」作成。JPEG画像一覧HTMLはPHPで自動生成。

以前作成したWeb写真アルバム「神戸散歩 2017.5 ~ 2019.3」「大阪散歩 2017.6 ~ 2019.3」の続編「神戸散歩(2) 2019.4 ~ 2022.3」「大阪散歩(2) 2019.4 ~ 2022.3」を作成。 PHPプログラム「thumbnail-create.php」で、自動生成している。 例として、ディ…

Web写真アルバム「神戸散歩」「大阪散歩」「京都散歩」ポップアップ画像表示ページを、JavaScriptを使う方法に変更。

以前に作成したWeb写真アルバム「神戸散歩」「大阪散歩」「京都散歩」のポップアップ画像表示ページを、JavaScriptを使う方法に変更。 方法の詳細は以下の「My 野鳥図鑑」と同じ。

My 野鳥図鑑:GET引数をJavaScriptで<img src="">に渡す方法に変更。URLSearchParams使用。GitHubにもコピー。

「My 野鳥図鑑」は、その後、画像ポップアップ方式を変更した。 ※ 以下の記事は、画像ポップアップ方式を変更する前のもの。 以前、「My 野鳥図鑑」を作成した。 画像をクリックすると拡大画像が表示される。 この拡大画像を表示するページを、PHPが使えない…