X Blog Updated To 1.3.26

当ブログで使用しているテーマ、X Blogのバージョンを1.3.26に更新しました。使用フォントの種別やサイズをテーマのstyle.cssファイルの手打ちによる上書きでカスタマイズしているので、テーマを更新する度にカスタマイズした変更部分を上書きする必要があります。以下に変更部分と変更内容を備忘録として記しておきます。太字にした部分が変更部分。日本語フォントをHiragino Maru Gothic Proに指定し、フォントサイズを全体的に小さくしています。

加齢と共に物忘れが激しくなってきたので、変更すべきファイル(style.css)がどこにあるのか、記しておきます。

レンタルサーバー上のpublic_html > www.monomaniacgarage.com > wp-content > themes > x-blog > style.css

# Typography


textarea {
color: #404040;
font-family: Hiragino Maru Gothic Pro, “PT Serif”, serif;
font-size: 20px;
font-size: 18px;
font-size: 0.92rem;
line-height: 1.6;
}


h1 {
font-size: 32px;
}
h2 {
font-size: 28px;
}
p {
margin-bottom: 1.5em;
margin-top: 0;
}


blockquote,
.format-quote p {
margin: 0 1.5em 1.5em;
font-size: 15px;
border-left: 5px solid #ccc;
padding-left: 15px;
}


# Header


header.site-header {
padding-top: 20px;
}
.site-title {
font-size: 40px;
margin-bottom: 5px;
text-transform: uppercase;
line-height: 45px;
}
.site-title a {
text-shadow: 3px 4px #ccc;
color: #000;
}
.site-title a:hover {
text-decoration: none;
}
.site-branding {
text-align: center;
}
.site-description {
font-size: 16px;
margin: 14px 0;
color: #555;
}


WordPress 6.1.1 Unable To Edit Posts and Pages

以下、備忘録として、当サイトで発生したWordPressのエラーについて書き留めておきます。ポストもページも編集不可になる深刻な状態です。エラーコードをTextEditにコピーし、問題があるファイルを突き止めて、レンタルサーバーから問題あるファイル2点を削除し、WordPress 6.1.1を再インストールしました。

問題があったファイルは、

  • www.monomaniacgarage.com/wp-includes/js/dist/vendor/react-dom.min.js
  • www.monomaniacgarage.com/wp-includes/js/dist/block-editor.min.js

エラーコードのファイルは実際にはjs:以降に数字を羅列したファイルが合計、13個ありました。

追記: 問題の原因はサーバー上のファイルにあると考えていましたが、ローカルに原因があると考えを改めました。macOS Monterey 12.6.4搭載のMacBookからは編集可能です。Mac miniからは、ブラウザーをSafari以外の別のものに変更しても同じ問題が発生します。

Posting Images on WordPress Blog Sites

2021年6月1日にGoogle Photosが有料化されてから、当ブログサイトでは新たに掲載する画像ファイルはWordPressを設置するレンタルサーバーにアップロードし、ポスト内に表示する方法に変更しました。以下にその手順をまとめておきます。

Photosに取り込んだ画像ファイルの中からブログポストで使用する編集済み画像ファイルにお気に入りマークを付けて、ファイルを選択し、

FileプルダウンメニューからExport > Export Photos…を選び、外付けHDDなど、適当なフォルダーに選択した画像ファイルを書き出す。この時、Location Informationのチェックを外しておくと、撮影場所を公開しなくて済む。

書き出した画像ファイルをWordPressのMediaページにアップロード。Photosからファイルを書き出す際に、JPEG QualityをHigh、SizeをLargeに設定すれば、1MB以内に容量を抑えることが可能。

There Has Been A Critical Error On Our Website

2021年3月12日、WordPress運営サイトの管理者にとって最悪の事態が発生しました。10年以上前から契約しているレンタルサーバー(CORE-MINI)のディスク使用容量を節約しようと、過去に閉鎖したサイトのデータベースとサイト設定、ドメイン設定を削除しようとしました。その際に誤って当ブログサイトのデータベースとサイト設定を削除してしまったようです。それで、表題のような危機的エラーメッセージが表示され、WordPressのDashboardにアクセスできなくなりました。

公開済みの4,330の記事とこれまでにいただいた6,442のコメント(内、2,084は私の返信コメント)が一瞬にして消えてしまったと思い、途方に暮れながら何とか復旧させようと、考えられるあらゆる手段を講じました。ローカルのファイルを消してしまったのであれば、Time Machineで復元することが可能です。24時間以内であれば1時間ごとのデータが自動的にバックアップされるように設定しているので、容易に復元できますが、レンタルサーバー上のファイルをバックアップすることはできません。

そもそもの過ちはデータベースの名称にあります。削除しようとした不要なデータベースとブログサイトの大事なデータベースの名称がいずれも、monomaniac_xとなっており、メモ欄にも区別できるような記載をしていなかったこと。そして、phpMyAdminでログインできるのはなぜか同じユーザーになり、ログインしても同じデータベースしか確認できないという事態に陥りました。

どちらのデータベースを削除しようとしているのか、わからない状態だったので、念のために両方のデータベースを削除前にバックアップしました。データベースのバックアップさえサーバーに残っていれば、復元できるはずです。

Everglades Biwako Under Construction

データベースを新規作成し、バックアップからデータを復元させました。しかし、WordPressのサイトを開こうとすると、今度はデータベース接続エラーが表示。サーバーにアップロードしてある”wp-config.php”の”DB_NAME”、”DB_USER”、”DB_PASSWORD”を正しいと思われるものに変更しました。それでもデータベース接続エラーが表示。新たにWordPressのパッケージをFTPソフト(Forklift)を使って、サーバーにアップロードし、何通りかのパターンを試行錯誤しながら”wp-config.php”入力値の変更を続けた結果、昨日、ようやくリカバリーモードでブログサイトが開きました。

Everglades Biwako Under Construction

しかしながら、この状態では過去の記事に使用した画像ファイルが適切に表示されないという問題が発生しました。原因は、”wp-content”ディレクトリです。このディレクトリには過去にレンタルサーバーにアップロードした画像ファイルやWordPressのテーマ、プラグインが入っているはずですが、中身を見ると、デフォルトのまま。幸いにも新たにWordPressのパッケージをサーバーにアップロードする前にForkliftでpublic_html以下のファイルをすべて、ローカルディスクにダウンロードしてありました。このダウンロードした”wp-content”をサーバー上のものと入れ換えることにより、ほぼ完全にサイトの復旧ができました。

WordPressのDashboardにアクセスできるようになったものの、10年以上も前から使い続けているテーマ、Suffusionのスタイルシートを紛失したようで、カスタマイズし放題のSuffusionが走らない。何分、古いテーマなので、Suffusionの新しいパッケージは入手不可。結局、新しいテーマ、”X BLOG”をインストールして、Theme Editorでstyle.cssを編集して、Suffusion風のレイアウトとデザインになるように自分でカスタマイズしました。

Everglades Biwako Under Construction

ここで注意事項が一つ。この新しいテーマ、”X BLOG”は無料版の場合、Dashboardに誠に目障りな広告が多数、表示されます。自前レンタルサーバーにアップロードしたWordPressのダッシュボードに広告はないだろう。何時間もかけて編集したスタイルシートを無駄にはしたくないので、広告表示をブロックするプラグインはないか、探すとありました。”Disable Admin Notices Individually”という長い名称のプラグイン。これを使うと、表示された広告を一瞬にして消すことができます。

Embed Google Photos (Bryan)

ブログ投稿時にしばらく使っていたBYTENBIT Embed Google Photos Into Websiteで障害が発生したらしく、埋め込み用のURLコードを生成できなくなりました。(現在は復旧しているようです。)そこで、急遽、同様のURLコードを生成してくれるプログラムを公開されているサイトを探したら見つかりました。サイトの名称は、タイトルのEmbed Google Photos (Bryan)。以下にこれまでに使用したサイトの特徴をまとめた後、Embed Google Photos (Bryan) の使い方を説明します。

Embed Google Photos (Digital Inspiration)
URLコードを生成するには毎回、”I’m not a robot”を証明しなければならなくなり、複数のコードを生成するのが非実用的になった。

BYTENBIT Embed Google Photos Into Website
障害から復旧したが、生成したコードをブログポスト内に埋め込んでリンクを張っても、ポスト内の画像と同じ大きさの画像が新しいページに表示される。これではリンクを張る意味がない。(これを理由にこれまで、リンクを張っていなかった。)

Embed Google Photos (Bryan)
Drag & Dropでリンクを生成でき、コード生成前にリサイズが可能。また、複数の画像ファイルへのリンクを一度に生成することができる。

上のスクリーンキャプチャーのようにポストを書く時にSafariで3つのウィンドウを開きます。左上:Google Photosの共有アルバム(サムネール表示画面)、左下:Embed Google Photos (Bryan)、右:WordPressポスト編集画面。

左上のサムネール画像を左下のEmbeddable URL:にDrag & Dropして、URL右の四角いボタンをクリックすると、URLがクリップボードにコピーされます。

画像を埋め込んだ後に、WordPressのリンクボタンをクリックして生成したURLをペーストすれば、リンク先の新しいページには大きな画像が表示されます。コード生成前にリサイズしていない場合、埋め込んだ画像の表示サイズはWordPress側で幅を指定する必要があります。

WPvivid Backup Plugin

当サイトのバックアップ用プラグインを新調しました。以前はレンタルサーバーのダッシュボード(コントロールパネル)からデータベースのバックアップをしていたこともありますが、決して利便性が良いとは言えず、最近ではレンタルサーバーにアクセスするのは契約更新時ぐらいになっていました。

今回、導入したバックアップ用プラグインは非常にわかりやすく、初期設定のまま、”Database + Files”と”Save Backups to Local”を選び、マニュアルバックアップしたら、すぐにレンタルサーバーの…wp-content/wpvividbackupsに合計容量264.92MBのバックアップファイルが生成されました。サイズが大きな画像ファイルや動画ファイルはGoogle PhotosやYouTubeにアップロードし、リンクを張ってサイトに表示させているだけなので、たったこれだけの容量で済んでいるのでしょう。

その後、サーバーからバックアップファイルをローカルディスクにダウンロードしたら、Downloadsフォルダーに”www”と”www-2″の二つのフォルダーが入りました。この時点でサーバーにある容量264.92MBのバックアップファイルはWordPressダッシュボードのWPvivid Backup Pluginの画面から削除できます。

問題が発生したサイトを復元するにはこれら二つのフォルダーをアップロードすれば良い。レンタルサーバーを移転する際も簡単にできそうです。

PHP Version Updated To 73

当ブログサイトがあるレンタルサーバーのPHPバージョンを71から73にアップデートしました。きっかけは使用していないプラグイン、”Simple Lightbox”を最新バージョンの2.8.0にアップデートできなかったことです。サーバーのPHPバージョンをアップデートすれば、サイトの表示スピードが改善されるそうです。

Embedding Videos from Google Photos

Google Photosから動画ファイルをWordPressのポストに直接、埋め込むことはできません。Google Photosにアップロードした動画ファイルは、基本的に非公開なので、ポスト内で公開するにはファイルの設定変更やGoogle Driveを経由するなど、一手間必要です。Sue Watersさんのブログ記事を参考に埋め込み方法をまとめておきます。

  1. Google Photosと同じアカウントを使い、SafariでGoogle Driveにログインする。
  2. 左のサイドバーの”My Drive”から”Google Photos”フォルダーを選ぶ。(Google Photosにアップロードした画像や動画は自動的にGoogle Driveに追加される。)
  3. 埋め込む動画ファイルを見つけてダブルクリックし、ファイルを開く。
  4. 右上の”More actions”のアイコンをクリック。
  5. “Advanced”のオプションを選ぶ。
  6. “Private”の隣にある”Change…”を選ぶ。
  7. “On – Public on the web”または”On – Anyone with the link”をチェックする。(”On – Public on the web”を選んだ場合はネットで検索して誰でもアクセスできる。”On -Anyone with the link”を選んだ場合はリンクを張っている場合のみアクセスできる。)
  8. “Save”をクリックした後、次の画面で”Done”をクリックして、ファイルの設定変更を完了し、画面を閉じる。
  9. 再度、右上の”More actions”のアイコンをクリックし、”Open in new window”を選ぶ。
  10. 再度、右上の”More actions”のアイコンをクリックし、”Embed item…”を選ぶ。
  11. 生成されるHTMLをコピーしてポスト内にペーストする。

注記1:iMovieからGoogle Photosに直接アップロードすることはできないので、ファイルとしてデスクトップなどに書き出してからGoogle Photosにアップロードする必要があります。

注記2:Google Driveに画像/動画ファイルを直接アップロードすると、無料での容量制限15GBにカウントされますが、圧縮ありのHigh QualityでGoogle Photosにアップロードしたファイルは容量制限15GBにカウントされません。


iMovieで制作した上の動画ファイルをポスト内にペーストすると、4:3の幅640に対して高さが480になるので、16:9になるように、高さを360に変更し、さらに、<center/>…</center>のコードを加えてセンタリングしてあります。

iMovieで制作した動画はこれまで、YouTubeにアップロードして、そこからリンクを張ってポスト内に埋め込んでいました。不特定多数の人に公開したくない、今回のような動画は上の7のステップで”On-Anyone with the link”を選ぶことで半公開に設定することができます。同じGoogleのサービスではありますが、YouTubeに依存したくない場合は上記の方法が有効です。

From Flickr To Google Photos — Part 1

FlickrからGoogle Photosへの移行作業の途中経過を記録しておきます。Flickr無料アカウントで1TBの容量が与えられていました。そのうち、私が利用していたのはおよそ6.5%の65GB。画像、動画ファイルの枚数にすれば22,661枚。Flickrを使用する主な目的は、ブログで使用する画像ファイルの保管場所であり、およそ2万枚の画像ファイルの多くにリンクが張ってあります。

2019年1月8日以降は無料アカウントの容量が静止画と動画ファイルを合計して1,000枚となり、2019年2月5日に最新の1,000枚を超過するファイルは削除される予定です。つまり、2月5日以降はブログのポストに使用した画像、動画ファイルのリンクが切れるということです。画像がなければ記事として成立しないようなポストが大半を占める私のブログにとっては、2月5日が身代金支払期限。1月8日までならプロアカウントの年間費用、US$59.88が15%オフのUS$50.90。この身代金を支払ってプロアカウントに戻れば、取り敢えずは数千枚のリンク張り替え作業をしなくて済むわけです。

しかし、人質を取って身代金を要求する、このようなFlickrのやり方に納得できない私は、少なくとも数千枚の画像リンク張り替え作業を実行することにしました。これは気の遠くなるような作業ではありますが、流れ作業化してしまえばそれほど苦に感じることもありません。以下にリンク張り替え作業の手順を記録しておきます。

  1. Google Photosのサイトで新規アルバムを作成し、共有の設定にする。(共有設定をしないと、リンクを張った画像は公開されずに自分しか見れなくなるので注意。)この時、わかりやすいように共有アルバムのタイトルはFlickrのアルバムと同じ、例えば”For Blog Posts 2018″のようにして、年単位で管理しやすいようにしておく。
  2. Flickrにアップロードした同じ画像、動画ファイルをアルバムごとに、PhotosのライブラリーからGoogle Photosの共有アルバムに、ドラッグ&ドロップでアップロードする。私は一度に100枚から200枚ほどを目安にアップロードしている。
  3. Google Photosにアップロードしたファイルを開き、二本指タップでCopy Image Addressを選び、画像のアドレスをコピーする。
  4. WordPressポスト内でリンクの張り替えをする画像を選び、編集ボタンをタップする。
  5. Insert from URLを選び、Google Photosからコピーしたアドレスで上書きする。
  6. 画像サイズの設定フィールドに、横置きならWidth 500、Height 375を入力する。大きな画像を見せたい場合は、Width 640、Height 480を入力。縦置きの場合は幅と高さの値を入れ替える。
  7. リンク設定はCustom URLからMedia Fileに変更する。
  8. WordPressのポストをアップデートする。

これまでに、2017年6月まで遡って、リンク張り替え作業を完了しました。FlickrのサーバーよりもGoogle Photosのサーバーの方が安定していて読み込みが速くなった印象を持ちました。

Google Photosで容量無制限でサーバーにアップロードするには、バックアップオプションでHigh Qualityを選ぶ必要があります。静止画ファイルであれば、16MPを超えるサイズの画像は16MPに圧縮されます。ブログで表示することが目的であれば、16MPもあれば十分です。1080pを超える動画ファイルは高画質1080pにリサイズされます。

From Flickr To Google Photos — Part 2へと続く。

Toyota Aqua — Changing Engine Oil

DSCF7128

Toyota Aquaのエンジンオイルを初めて交換しました。エンジンオイルを交換するには前輪2本をジャッキアップして馬に載せた方が作業しやすくなりますが、前輪のジャッキアップポイントが奥まった所にあり、わかり辛い。去年3月に4輪ともジャッキアップしたことがありますが、前輪のジャッキアップポイントをすっかり忘れていました。

今回はオイルフィルターも同時交換しようと、新しいフィルターを用意していましたが、手元にあるフィルターレンチのサイズが適合しないようで、古いフィルターを取り外すことができませんでした。古いフィルターを破壊すれば取り外すことは可能でしたが、ahiruさんの車なのでそんな横着はできません。したがって、今回はエンジンオイルのみ交換することにしました。

IMG_5493

使用したエンジンオイルは、Suzuki HUSTLERにも使用したGSP 全合成0W-20 SN, GF-5。粘度が低いサラサラのエンジンオイルですが、スポーツ走行しないハイブリッド車には適していると思われます。

DSCF7135

ちょっと変わった形のレベルゲージでオイル量をチェック。エンジンオイルのみ交換する場合は3.4L、フィルター同時交換時は3.7L。

DSCF7129
Toyota Aqua in Kit Garage “Huron”

ジャッキアップポイントの確認とオイルフィルター脱着の試みに思いの外、時間を要しました。

このポストはWordPressの新しいエディター、Gutenbergで編集し、投稿しました。 Flickrにアップロードした画像ファイルを埋め込む際は、Edit as HTMLを選んで画像ファイルのURLを埋め込み、不要なスクリプトを削除して、ブロックに変換しました。この流れならGutenberg、快適に使えます。

“monomaniacgarage.com” renewed

独自ドメイン、monomaniacgarage.comを契約するVALUE DOMAINで更新しました。今回の更新で9年目になります。併せてレンタルサーバー(CORE-MINI)の契約も更新しました。写真は今年も美濃吉の御節。

CORESERVERの新コンパネ画面で、「サイト設定」からSSL設定を「無料SSL」に、PHPバージョンをphp55から一気に最新のphp71に変更しました。今の所、WordPressで使用中のテーマとプラグインは問題なく機能しているようです。

Akismet Anti-Spam

ブログサイトを運営していて苦痛の原因となるのがスパムコメント。プラグインを利用して何らかの対策をしなければ毎日、数十のスパムコメントが投稿され、管理者のメールアドレスに都度、連絡があり、一つずつ削除しなければなりません。

これまで使用していたWP-SpamShield(スパムコメント対策のプラグイン)が突然、スパムではない貴重なコメントまでも弾くようになりました。私と同じようにレンタルサーバーを借りて、WordPressサイトを運営するminority318さんに、お使いのプラグインを尋ねると、Akismet Anti-Spamとのことでした。調べてみると、私が以前、使用していたのはAkismetが付かない”Anti-spam”でした。このプラグインも正常に機能しなくなり、困っていました。

Akismet Anti-Spamをインストールしてアクティベートしたら、スパムではないコメントを間違って弾くことなく、過去に承認した方のコメントが投稿されるようになりました。

WP-SpamShield

累計63,048件のスパム、一日平均で90件のスパムコメントを弾いてくれていたWordPress用のプラグイン、WP-SpamShieldが突然、スパムではないコメントも弾くようになりました。Jetpackと干渉しているかと思い、Jetpackを解除しましたが、それでも事態は変わらない。

せっかくいただいたコメントを無差別に弾いてしまうようになったWP-SpamShieldを解除したら、一日平均90件(一時間平均3.8件)のペースでスパムコメントの通知を登録してあるメールアドレスで受信するようになりました。

昨夜、代替のプラグインとしてAnti-spamを作動させました。スパムコメントは受信しなくなりましたが、スパムではないコメントも弾いているかもしれません。コメントを投稿しようとしたらスパムコメントとして弾かれるようであれば、お手数をおかげしますが、管理者にお知らせください。

Suffusion Updated To Version 4.4.9

当ブログサイトで使用しているWordPressのテーマ、”Suffusion”をVersion 4.4.9に更新しました。更新の内容は軽微なバグ修正だそうです。ヘッダーの上下にナビゲーションバーを設置している場合に、iPhone 5以降のiOS端末でレスポンシブ・レイアウトが適切に表示されなかった問題などを解決したそうです。