晴歩雨描

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

はてなブログ

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

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

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

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

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>…

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

はてなブログからWordPressへの移行を検証している。 はてなブログからWordPressへ画像を移行して記事内で画像が表示されるようになったが、この画像をクリックしてポップアップ画像を表示するようにした。 <a>タグ、<div>タグを使わずに、<img>タグだけで画像を、ポップ</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にインポートしてみた。 ※ メディアライブラリを使わない前提の移行(インポート)手順は以下。 ※ 以下は、メディアライブラリを使う前提の移行…

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ローカルに変える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…

備忘録:[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>…

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>…

はてなブログでPing送信のため「IFTTT」を使ってみた。「皆声.jp」を登録。

ブログ検索サイト「皆声.jp」というのがある。 ブログ記事を検索し、最新のものから順に表示してくれる。 ここに、自分のブログ記事を速やかに反映させたい。 新しい記事を投稿した時に、その旨を通知する機能として「ping送信」がある。 しかし、はてなブロ…

はてなブログで、<TABLE>のセル(TH,TD)の余白(padding)を変更するには、「!important」が必要。(カスタマイズCSS)

はてなブログで、<TABLE>の<TH><TD>の余白(padding)を変更するには、「!important」が必要。 ■ 特定の記事ページのみ変更する場合は、記事編集の「HTML編集」で、<style>~</style>を入れればよい。 【ページ内の全部のテーブル】 <style> th, td { padding: 3px !important; } </style> ただし、id付き</td></th></table>…

はてなブログで、Webフォント(Google Fonts)を使う。

先日購入したスマホ「Xperia 1 III」では、ブラウザChromeでいくつかのホームページのフォントが、パソコンや他のスマホと違ってしまう。「Xperia 1 III」では、英文が固定ピッチのフォントになってしまって見づらい。 この「はてなブログ」も、「Xperia 1 I…

はてなブログで横並びにした画像の縦位置を上揃えにする。(カスタマイズCSS)

はてなブログで、画像を横並びにした場合、縦位置が中央揃えになってしまう。 これを、上揃えにする方法。 【個別にする方法】 「HTML編集」で、「div class="images-row"」に、 style="display:flex; justify-content:center; align-items:start;" のスタイ…

はてなブログで使えるアイコンWebフォント

はてなブログの本文文章の中で、アイコンを使いたい時がある。例えば、スマホなどで設定画面を開くためのアイコン[ ]。 はてなブログで標準で使えるアイコンWebフォントが用意されている。 使い方は、HTML編集画面で、以下のような形式でclass名にアイコン…

はてなブログで文字列に蛍光ペン(マーカー)風のアンダーラインをつける方法。<em>タグで。(カスタマイズCSS)

はてなブログで、強調したいハイライト文字列に蛍光マーカーペンっぽい色付きのアンダーラインをつける方法。 【サンプル】 強調したいハイライト文字列 はてなブログで使える文字の装飾には、太字/ボールド、斜体/イタリック、アンダーラインがある。 HTML…

はてなブログは大丈夫?。Googleが、2020年10月にすべての混合コンテンツをブロック。

Googleが、2020年10月にすべての混合コンテンツをブロックというニュースがある。 はてなブログのHTMLソースを確認すると、以下のようなhttp:~が含まれている。 <html ... itemtype="http://schema.org/Article" ...>...<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">...<link rel="author" href="http://www.hatena.ne.jp/../"> これらは…</link></head></html>

検索機能付き「はてなブログ記事一覧」HTML生成スクリプト(JScript)を作成。

先日、はてなブログのHTMLサイトマップ(はてなブログ記事一覧)を生成するスクリプト(JScript)を作成した。 これは、Googleクローラーに読み込んでもらうのが目的だったが、今回は人間が利用するための「はてなブログ記事一覧」HTMLの生成スクリプト(JScrip…

「Google Search Console」のサイトマップ登録の進展がないので、はてなブログのHTMLサイトマップを生成するスクリプト(JScript)を作成した。

先日、「Google Search Console」で、はてなブログのサイトマップ(「sitemap.xml」、「sitemap.xml?page=???」)を登録したが、いくつかが「取得できませんでした」のエラー状態のまま進展がない。 そこで、はてなブログのHTMLサイトマップを作ってみる。 ※…

「Google Search Console」に続き「Bing - Web マスター ツール」で、サイトマップ登録をやってみる。

先日、「Google Search Console」でサイトマップ登録をやってみた。 今回、「Bing - Web マスター ツール」で、サイトマップ登録をやってみる。 「Bing - Web マスター ツール」のサイトにアクセスする。 サインインの画面が表示されるが、なんとGoogleアカ…

はてなブログの記事がGoogle検索になかなか反映されない。「Google Search Console」でインデックス登録とサイトマップ登録をやってみる。

最近、はてなブログの記事がGoogle検索になかなか反映されない。Googleにインデックスされていない気がする。 「Google Search Console」を使えば、インデックス登録が出来そうなので、やってみた。 まず、「Google Search Console」に登録する。 【Google S…

はてなブログを記事一覧に簡単に切り替える方法。ブックマークレットを使う。

先ほど「はてなブログを記事一覧で見る方法」という記事を書いたが、 毎回URLに「/archive」を付けるのが面倒な場合、マウスのワンクリックで切り替えができるようにする方法。 ブックマークレットという機能を使う。ブックマークレットとはブックマークバー…

はてなブログを記事一覧で見る方法。

無料の「はてなブログ」をパソコンで見ると記事一覧ではなく、本文がそのまま数日分表示される。記事本文の量が多いと過去分にどんな記事があるのか確認するのが大変。 こういったブログを記事一覧で見る方法。といっても簡単。 そのブログのトップページのU…

はてなブログ)スマホ等でページ横からはみ出た表<table>を横スクロールできるようにする最も(?)簡単な方法。

はてなブログをスマホで閲覧する場合、テーブルが横にはみ出てしまうことがある。レスポンシブ対応含め一般的なデザインテーマでは横スクロールできない。 これを、横スクロールできるようにする最も(?)簡単な方法。 ネットでよく見られる方法は、<table>を<div>で囲</div></table>…