晴歩雨描

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

ホームページ、Web作成

Leaflet地図:ZooPicker探鳥地(野鳥撮影地)マップを作成。CSV使用。

先程、ZooPicker探鳥地(野鳥撮影地)全国版Googleマイマップを作成した。 今回、同じデータを使って、Leaflet地図を作成した。 マーカーをクリックすると、その地点の「ZooPicker」へのリンクが表示される。

「ブログ記事一覧」の検索ボックスの文字列を、URLに反映できるようにした。ChatGPT(3.5)に教えてもらった。

以前に、『はてなブログ「晴歩雨描」記事一覧』ページ https://ok2nd.github.io/sitemap/hatena-sitemap-table.html のURLで、検索文字列を初期設定できるようにした。URLのパラメーター文字列を検索テキストボックスに反映させるもの。 今回逆に、検索テキ…

HTML<INPUT>テキストボックスに入力されている文字列を、リアルタイムにURLのパラメーターに反映する方法。ChatGPT(3.5)に教えてもらった。

HTML<INPUT>テキストボックスに入力されている文字列を、リアルタイムにURLのパラメーターに反映する方法。 方法は、ChatGPT(無料版3.5)に教えてもらった。ググって、自分で考えるより速い。 ≪サンプル≫ https://ok2nd.github.io/Test/text2url.html?text=テスト …

jQueryプラグイン「DataTables」のWebページ(URL)に検索文字列を初期設定できるようにした。ChatGPT(3.5)に教えてもらった。

以前から、jQueryプラグイン「DataTables」を使っている。 ホームページの<table>に検索機能やソート機能を簡単に付けられる。 このjQueryプラグイン「DataTables」を使ったWebページに検索文字列を初期設定できるようにした。 方法は、ChatGPT(無料版3.5)に教え</table>…

CSS Filter「saturate」「brightness」「contrast」で、画像の彩度、明度、コントラストを変更するWebツール作成。(ChatGPT)

先程、CSS Filter「hue-rotate」で、画像を色相変換するWebツールを作成した。 このツールを少しカスタマイズして、CSS Filterの「saturate(彩度)」「brightness(明度)」「contrast(コントラスト)」を使って、画像(写真)の色調を変更するWebツールを…

CSS Filter「hue-rotate」で、画像を色相変換するWebツール作成。(ChatGPT)

以前に、「CSS Filterを使えば、簡単に色調(明度、彩度、色相、透過度 etc.)加工ができる。」という記事を書いた。 CSS Filter「hue-rotate」を使って、画像(写真)を色相変換するWebページを作成。 (※ 実際は、ChatGPTに作ってもらった。) 画像(写真…

CSS)「mix-blend-mode」の「multiply」で、JPEG画像を半透明(透過)に重ねて表示。

CSSの「mix-blend-mode」の「multiply」のテスト。 以下の3つのJPG画像を「multiply(乗算)」で半透明に重ねて表示。 ≪HTMLとCSS≫ <style> div { position: relative; } img { border: 1px #000 solid; } .multiply > img { mix-blend-mode: multiply; position: a</style>…

CSS)<pre>で等幅フォントを使う。

はてなブログの<pre> で等幅フォントを使う方法の備忘録。 以下のスタイルを追加。 pre { font-family: Consolas, 'Courier New', Courier, Monaco, monospace; font-size: 14px; line-height: 1.2; } <style>pre { font-family: Consolas, 'Courier New', Courier, Mona</style></pre>…

JavaScript、CSS)「My 野鳥図鑑」ポップアップ画像表示を、別ページや<a>タグ、<div>タグを使わない方式に変更。

以前作成した「My 野鳥図鑑」のポップアップ画像を表示する方式を、別ページや<a>タグ、<div>タグを使わない方式に変更。 ≪(新)My 野鳥図鑑≫ ≪(旧)My 野鳥図鑑≫ <a>タグ、<div>タグを使わない方式については、以下を利用。</div></a></div></a>

WordPress)検索対象に「カテゴリ」を追加し「本文」は含めない。

WordPressのサイト内検索対象に「カテゴリ」を追加し「本文」は含めないようにする。 検索対象は「タイトル」と「カテゴリ」にする。 以下を参考に少しカスタマイズした。 「\wp-content\themes\iconic-one\functions.php」に以下を追加。 function custom_s…

WordPress)はてなブログから移行した画像をポップアップ表示するようにした。

はてなブログからWordPressへの移行を検証している。 はてなブログからWordPressへ画像を移行して記事内で画像が表示されるようになったが、この画像をクリックしてポップアップ画像を表示するようにした。 <a>タグ、<div>タグを使わずに、<img>タグだけで画像を、ポップ</div></a>…

JavaScript、CSS)aタグ、divタグを使わずに、imgタグだけで画像をポップアップする。

HTMLで画像をポップアップする場合、<a>タグや<div>タグで<img>タグを囲んで行うのが一般的。 <a>タグ、<div>タグを使わずに、<img>タグだけで画像をポップアップする方法を探した。以下に目的のものがあった。 ≪CSS≫ <style> #modal-container { display: none; position: fixed; background:</div></a></div></a>…

はてなブログエクスポートファイルからキーワードリンク<a>タグを除去するJScript。WordPressインポート用。

はてなブログでは、文章中の特定のキーワードに勝手にアンダーラインが引かれリンクになる。 無料版では標準的にはこれを消せない。 はてなブログからエクスポートするファイルにも、そのキーワードリンクはそのまま残っている。 ≪サンプル≫ <a class="keyword" href="http://d.hatena.ne.jp/keyword/%B5%FE%C5%D4%C9%DC%CE%A9%BF%A2%CA%AA%B1%E0">京都府立植物園</a> …

JavaScript)EUC-JPエンコード→UTF-8エンコード変換。

はてなブログでは、文章中の特定のキーワードに勝手にアンダーラインが引かれリンクになる。 無料版では標準的にはこれを消せない。 はてなブログからエクスポートするファイルにも、そのキーワードリンクはそのまま残っている。 ≪サンプル「京都府立植物園…

WordPress)はてなブログから移行(インポート)する手順まとめ。メディアライブラリを使わないバージョン。

自宅WindowsPCローカルにWordPressをインストールしている。 「はてなブログ」からエクスポートしてWordPressにインポートしてみた。 以前、移行(インポート)する手順まとめを書いた。この時はメディアライブラリを使う前提だった。 メディアライブラリを…

WordPress)設定まとめ。メディアライブラリを使わないバージョン。

自宅WindowsPCローカルにWordPressをインストールしている。 以前、WordPress設定まとめを書いた。この時はメディアライブラリを使う前提だった。 メディアライブラリを使わない方法が分かったので、 今回は、メディアライブラリを使わない前提の設定まとめ…

WordPress)はてなブログのアイキャッチ画像をメディアライブラリを使わずに記事一覧とブログカードに反映させる。

自宅WindowsPCローカルにWordPressをインストールしている。 「はてなブログ」からWordPressへの移行の検証をしている。 ※ ↓は、本対策を行う前のインポート手順。 どうにか、やりたいことは出来たが、課題としてアイキャッチ画像の問題がある。 「はてなブ…

自宅PCローカルのWordPressをスマホなどで閲覧する方法。(Wi-Fi環境で)

自宅のWindowsPCローカルにWordPressをインストールしている。 これをインストールしているPCローカル以外の自宅内スマホなどで閲覧する方法。 Wi-Fi環境がある前提で、WindowsPCのIPアドレスを固定にしている前提。 「一般設定」で、「WordPress アドレス (…

WordPress)外観テーマを「Iconic One」に変更。 「Iconic One」カスタマイズ。

先日、自宅のWindowsPCローカルにWordPressを入れた。 外観テーマを一旦「Semplicemente」に変更したが、 今回、外観テーマを「Iconic One」に変更してみた。 ※ この記事の以下の設定は、「はてなブログのアイキャッチ画像をメディアライブラリを使わずに記…

WordPress)はてなブログから移行(インポート)する手順まとめ。メディアライブラリを使うバージョン。

自宅のWindowsPCローカルにWordPressをインストールしている。 「はてなブログ」からエクスポートしてWordPressにインポートしてみた。 ※ メディアライブラリを使わない前提の移行(インポート)手順は以下。 ※ 以下は、メディアライブラリを使う前提の移行…

WordPress)設定まとめ。メディアライブラリを使うバージョン。

自宅のWindowsPCローカルにWordPressをインストールしている。 設定をいくつかやってみたので、備忘録としてまとめ。 ※ メディアライブラリを使わない前提の設定まとめは以下。 1-A.外観テーマを「Semplicemente」に変更。 テーマ「Semplicemente」は、…

WordPress)はてなブログのブログカードをWordPressローカルリンクのショートコードに変更するJScript作成。

自宅のWindowsPCローカルにWordPressをインストールしている。 はてなブログをエクスポートして、WordPressにインポートした。 ブログカードは、はてなブログに依存したままになる。自分のブログ記事へのリンクをクリックすると、はてなブログの記事が開いて…

WordPress)はてなブログからインポートした記事にアイキャッチ画像を一括登録。

自宅のWindowsPCローカルにWordPressをインストールしている。 はてなブログからインポートしたWordPressの記事に、アイキャッチ画像を一括登録する。 以下のサイトで提供されている「IMUZA.com:はてなブログインポートツール」を利用させてもらった。 はて…

WordPress)はてなブログからダウンロードした画像を、「メディアライブラリ」に登録するプラグイン「Bulk Media Register」。

自宅のWindowsPCにWordPressをインストールしている。 はてなブログから、WordPressのローカルディレクトリにダウンロードした画像ファイルを、WordPressの「メディアライブラリ」に登録するプラグインツール「Bulk Media Register」。 WordPressのダッシュ…

WordPress)余分なサイズの画像自動生成を停止する方法。

WordPressでは、画像をアップロードすると、余分なサイズの画像が自動生成される。 これを停止する方法。 以下の2つを実施。 【1.設定 > メディア】 以下の画像サイズを全て0にする。 【2.options.php】(自宅PCの場合) http://localhost/wordpress/wp-…

WordPress)メディアファイルを一括で削除するプラグイン「DNUI」。

WordPressのメディアファイルを一括で削除するプラグイン「DNUI」。 インストールして有効化する。 ツール > [DNUI Delete not used image]を開いて、「Images」タブを開いて「Delete All」する。

WordPress)アイキャッチ画像を一括削除する方法。

WordPressに登録されているアイキャッチ画像を一括削除する方法。 以下のサイトを参考にした。 「wp-content\themes\テーマフォルダ 」の下にある「functions.php」 \xampp\htdocs\wordpress\wp-content\themes\semplicemente\functions.php に、以下のソー…

WordPress)リンク埋め込みブログカード表示のカスタマイズ。ショートコード使用。

先日、自宅のWindowsPCローカルにWordPressを入れた。 リンク埋め込みブログカード表示のカスタマイズについての備忘録。 URLを挿入すると、自動的に表示されるブログカードのデザインは以下。 はてなブログからインポートした記事には、アイキャッチ画像は…

WordPress)記事一覧にアイキャッチ画像を表示させる。

WordPressテーマ「Semplicemente」では、アイキャッチ画像を設定しても記事一覧にアイキャッチ画像が表示されない。 テーマ「Semplicemente」で、アイキャッチ画像を記事一覧に表示するように設定した。 「wp-content\themes\テーマフォルダ」の下の「conten…

WordPress)記事内には、アイキャッチ画像を表示しないようにする。

WordPressで、ブログカードに画像を表示したい場合、アイキャッチ画像を設定する。 しかし、アイキャッチ画像を設定すると、記事の先頭に大きくアイキャッチ画像が表示されてしまう。 アイキャッチ画像は、あくまでもブログカード用ということで、記事内には…