やりたかったことはシンプルだった

Gamer Mam!のトップページ、記事一覧のサムネイルは１６：９の設定にしたいけど、参考リンクなどのブログカード・関連記事・ページ送りナビのサムネイルを、スクエア（正方形）にしたい。そしてThcropsで自分が切り抜いた位置をちゃんと表示させたい。

目標はシンプル。でもこれが沼でした……

今回はGeminiとClaudeという2つのAIを使い倒しながら、なんとか解決した実録をお届けします。

まずGeminiと奮闘した

最初はGeminiに相談しながらカスタマイズを進めていました。私のAI活用スタイルとして、カスタマイズ系はGemini、Claudeは制限があるので、温存しておきたくて…

Geminiといろいろ試したのですが、どうしても解決できず。最終手段としてClaudeに相談することにしました。

試したこと全部ダメだった話

Regenerate Thumbnailsで全画像を再生成→ダメ

「キャッシュが古いせいかも」と思ってRegenererate Thumbnailsプラグインで全画像を再生成しました。でも反映されたりされなかったりのまま。

Thcropsで何度も切り抜き直し→ダメ

反映されていない記事のアイキャッチを開いて、Thcropsで切り抜き位置を設定し直して保存。何度やっても結果は同じでした。

キャッシュを削除→ダメ

WP Fastest CacheもCocoonのキャッシュも削除。それでも変わらず。

ページ送りナビは切り抜きが反映されているのに、ブログカードだけダメ。同じ画像なのに場所によって違う結果が出ていて、原因がまったくわからない状態でした。

原因その①：Thcropsの設定でthumbnailにチェックが入っていなかった

Claudeに相談してまず気づいたのが、Thcropsの設定画面の問題でした。

Thcropsは切り抜きたいサムネイルサイズにチェックを入れないと機能しない仕様になっています。確認してみたら……全部チェックなし！

「投稿」のthumbnailにチェックを入れて保存したところ、ページ送りナビがすぐに切り抜いた画像に変わりました！

でもブログカードはまだ変わらず……。もう一つ原因があったんです。

原因その②：PHPのフック名が間違っていた

検証ツールで画像のURLを確認すると、ブログカードはまだ-160x90.jpg（16:9）のままでした。

CocoonはデフォルトでブログカードにTHUMB160（160×90px・16:9）という小さい画像を使っています。これをPHPでthumbnail（300×300px・スクエア）に変更しようとしていたのですが……

// ❌ 効いていなかったコード
add_filter('cocoon_internal_blogcard_thumbnail_size', function() { return 'thumbnail'; }, 99);

このフック名が間違っていたんです！GeminiがネットでCocoonのカスタマイズ情報を調べて提案してくれたコードでしたが、実際のCocoonのソースコードとは違っていました。

ソースコードを直接読んで正解を発見

「実際のCocoonのソースコードを確認しよう」というClaudeの提案で、cPanelのファイルマネージャーからblogcard-in.phpを開いて調べました。

するとブログカードのサムネイルサイズを制御している関数はこうなっていました。

function get_internal_blogcard_thumbnail_size(){
  $thumbnail_size = apply_filters('get_blogcard_thumbnail_size', THUMB160);
  return apply_filters('get_internal_blogcard_thumbnail_size', $thumbnail_size);
}

正しいフック名はget_internal_blogcard_thumbnail_sizeでした！cocoon_から始まるフック名はCocoonには存在しなかったんです。

ネットの情報が古かったのか、そもそも間違って広まっていたのか……。GeminiもClaudeも最初は間違えました。ソースコードは嘘をつかない！

解決！正しいコードはこちら

functions.phpに書くPHPコード

/* ------------------------------------------------------------
   サムネイルサイズ固定
------------------------------------------------------------ */
// ブログカード（正しいフック名！）
add_filter('get_internal_blogcard_thumbnail_size', function() { return 'thumbnail'; }, 99);
// 関連記事
add_filter('get_related_entry_card_thumbnail_size', function() { return 'thumbnail'; }, 99);
// ページ送りナビ
add_filter('get_prev_next_entry_thumbnail_size', function() { return 'thumbnail'; }, 99);

追加CSSコード

PHPでサムネイルサイズをスクエアに変更しても、CSSで表示サイズも指定する必要があります。

/* ブログカードのサムネイルをスクエアに表示 */
.internal-blogcard-thumbnail,
.blogcard-thumbnail {
    width: 150px !important;
    height: 150px !important;
    max-width: 150px !important;
    margin: 0 20px 0 0 !important;
    flex: 0 0 150px !important;
}

.internal-blogcard-thumbnail img,
.blogcard-thumbnail img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
}

まとめ：解決のポイントは3つセット

今回の問題、原因がひとつじゃなかったのが沼にハマった理由でした。解決には以下の3つが全部必要でした。

まずThcropsの設定画面で「投稿」のthumbnailにチェックを入れること。次にPHPで正しいフック名を使ってサムネイルサイズをthumbnail（300×300）に変更すること。そして最後にCSSでスクエア表示を指定すること。

特にPHPのフック名はネットの情報が間違っていることもあります。うまくいかないときは公式のソースコードを直接確認するのが確実です。

GeminiとClaudeを使い分けながらブログ運営しているのですが、2つのAIがどちらも間違えたのにソースコードを読んで解決できたのは、ちょっと達成感がありました。同じところで詰まっている方の参考になれば嬉しいです！

ブログを始めて6年。途中2年ほど「誰にも読んでもらえないし、もういいかな」と更新をやめていた時期がありました。

でも最近、あつ森の記事へのアクセスが増えてきて、「もしかして誰かの役に立ててる？」と思えるようになって、また記事を書き始めたんです。

その矢先でした。

2026年3月25日の午後。前夜から朝方までGamer Mam!のカスタマイズ作業をして、少し休もうと横になりました。目が覚めてブラウザを開いたら——見慣れたGamer Mam!の画面ではなく、白いページに黒い文字でこう書かれていました。

「MR.GREENによってハッキングされました」

最初は意味がわかりませんでした。誰かの悪ふざけ？画面を見間違えた？でも何度リロードしても同じ画面。管理画面（wp-admin）にアクセスしようとしたら、WordPressの初期インストール画面が表示されてしまいました。

長い間更新を止めて、やっと再開した矢先に、6年分の積み上げが全部消えてしまった——そう思った瞬間の恐怖は、今でも忘れられません。

この記事は、そこから約3日間かけてブログを完全復旧させるまでのリアルな記録です。同じ状況で途方に暮れているWordPressブロガーの方に、少しでもお役に立てれば嬉しいです。

Mr.Greenって何者？ハッキングの正体

パニックになりながらも、まず「Mr.Green」が何なのかをAIに聞いてみました。

調べてわかったのは、Mr.Greenは「有名なハッカー」ではなく、WordPressの脆弱性を自動的に探して攻撃するbot（自動プログラム）だということ。特定のサイトを狙うのではなく、脆弱性のあるWordPressサイトを自動で見つけて、まとめて侵入してくるんです。

つまり「Gamer Mam!が特別に狙われた」わけではありませんでした。プラグインのアップデートを怠っていたり、セキュリティ設定が甘くなっていたりすると、誰でも被害に遭う可能性があります。

ちょっと安心しましたが、ショックはショックでした。

実は「予兆」があった——3月上旬からの不穏な空気

振り返ってみると、ハッキングされる前から不穏な予兆がありました。

3月に入ってから、ColorfulBoxのx007サーバーが頻繁に不安定になり、管理画面にログインできない状態が続いていたんです。そのたびにXに「またサーバーが…」と投稿していたくらい。

3月22日頃には不具合があまりにも続くので、エックスサーバーへの移行を試みたり、ログインURLの変更（SiteGuard）などセキュリティ設定をいろいろ変更したりしていました。この「設定変更の隙」がセキュリティを甘くしてしまったかもしれません。

大きなカスタマイズや設定変更をするときは、セキュリティ設定を緩めないこと。これが今回学んだ最初の教訓です。

サポートに相談したら「自分でやってください」と言われた

ハッキングに気づいてすぐ、ColorfulBoxのサポートにチケットを送りました。バックアップからの復元をお願いしたのですが、なかなかうまくいかなくて。

何度か復元を試みてもらったのですが、ログイン画面がWordPressのインストール画面になってしまう状態が続きました。さらにサーバー側の障害まで重なって、JetBackup5でのセルフ復元もエラーが出てできない状態に。

そしてサポートから届いた衝撃の一言：

「お客様が管理・設置されているwebサイト上で発生したセキュリティ等の問題に関しましては、お客様にて対処および解決いただく必要がございます。不正なソフトウェアの削除等のご対応をいただく必要がございます。」

要するに、ウイルスの削除は自分でやってくださいということ。

でも手順は教えてもらえませんでした。「Imunify360で確認できます」とだけ書いてあって、正直かなり途方に暮れました。

【逆転劇①】AIの力でウイルスを発見・削除！

「自分でウイルスを削除しろと言われても、どうすれば…」

そこでAI（Claude）に相談してみました。cPanelのウイルススキャン機能（Imunify360）を使う手順を教えてもらい、実際にスキャンを実行してみると——

Win.Trojan.Hide-1（トロイの木馬）が1件発見されました。

「うわ、本当にウイルスがいた！」と思った瞬間は忘れられません。まさか自分のブログがこんなことになるとは。でも「破棄（削除）」を選択してクリーンアップしたら、次のスキャンでは「ウイルスは見つかりませんでした」と表示されました。

GeminiというAIにも並行して相談していたのですが、ウイルスの削除という具体的な手順にたどり着けたのはClaudeとのやり取りがきっかけでした。本当にAIって頼りになります。

【逆転劇②】それでもログインできない——深夜まで続いた戦い

ここからが本当に大変でした。AIと一緒に深夜まで試したこと：

• .htaccessを標準的な内容に書き換える
• wp-config.phpのSSL設定を変更する
• キャッシュフォルダを削除する
• SiteGuardプラグインを無効化する
• cPanelのファイルマネージャーからCocoonフォルダの名前を変更してテーマを一時的に無効化する（リダイレクトループの原因はテーマではなくサーバー側だったため、残念ながら効果なし）

何をやってもリダイレクトループが続いて、「ERR_TOO_MANY_REDIRECTS」という画面を何十回見たかわかりません。

２年も更新していない時期があったブログ。正直、もう運営をやめようかなと思っていた矢先の出来事。消えてしまったけど、もうこのままでもいいかも？とも思っていました。それでも諦めなかった理由は、私の困ったを解決したという記事にアクセスが増えてきていて、ブログを読んでくれた読者の方々がいたから。

そこで諦めずにphpMyAdminでデータベースを確認したところ記事データがしっかり残っていました。記事は死んでいませんでした。必ず復旧できると信じて復旧を続けることにしました。

【逆転劇③】WordPressの再インストールで突破！

翌27日の早朝、カラフルボックスx007サーバーは度重なる障害発生のためハードウェア移行をしました。ハードウェア移行メンテナンスが終わった後、リダイレクトループが解消され管理画面にアクセスできることを期待しましたが管理画面にはまだ入れない状態でした。

そんな中、サポートの方が「管轄外ではあるけれど」と親切にこんな情報を教えてくれました。

「WordPressを再インストールすることで問題が解決した事例を聞いたことがある」

この一言でピンときました。実はサポートに最初に言われていた「簡単インストール用のバックアップとJetBackup5のバックアップは相性が悪い可能性がある」という話。この2つが繋がったんです。

ここからはAI（Gemini）に教えてもらった内容になります。この辺り、私自身も完全には理解できていないのですが……

簡単に言うと、同じWordPressのデータでも保存される「形式（型）」が違うそうです。鍵と鍵穴の関係と同じで、JetBackup5の鍵を簡単インストールの鍵穴に差し込もうとしても合わない。だからいくら復元してもログインできない状態が続いていたんです。

ならば「型を合わせてから復元すればいい」。そこでWordPressの再インストールという作業を行いました。流れはこうです：

1. 万が一に備えて、JetBackup5から希望のバックアップ（記事データや画像が入ったwp1のもの）をPCにダウンロードして保存しておく
2. JetBackup5の希望のバックアップデータでサイトを復元する
3. ColorfulBoxの「簡単インストール」機能でWordPressを再インストールする
4. 再インストール後、JetBackup5バックアップした現在の状況を再インストールしたWordPress環境に紐付く形で保存（簡単インストールの方でバックアップをとる）
5. 簡単インストールの方でデータを復元（Restore）する

WordPressをアンインストールしても、JetBackup5に保存されている過去のバックアップデータまで消えることはありません。もし4がうまくいかなかった場合の最終手段として、PCに保存したバックアップから記事・画像データだけを新しいWordPressに移行する予定でした。でも、その必要はありませんでした。

そしてついに——管理画面へのログイン画面が表示されました！

【逆転劇④】Cocoonが壊れていた。でも記事は生きていた

ログインできたものの、トップページはサイドバーだけが表示されている状態でインデックスが全く表示されておらず。Cocoonテーマが壊れていました。

でも「投稿一覧」を開くと、6年間書いてきた記事たちがそこに確かに存在していたんです。記事は死んでいませんでした。ただCocoonが壊れていて表示できなかっただけ。

そこでTwenty Twenty-Five（トゥエンティ トゥエンティファイブ）にテーマを切り替えることで記事の中身が正常に表示されることを確認することができました。

【実録】Command + F で「記事の生存」を自力で確認する手順

管理画面（wp-admin）に入れなくても、手元にバックアップデータ（.sql ファイル）があれば、自分の記事が生きているか一瞬で分かります。私が再インストールを決断する決定打となった「自力検品」のリアルな手順。これはGeminiに相談した時に教えてくれた方法です。

1. バックアップファイルを「テキストエディタ」で開く

PCに保存したデータベースのバックアップ（wp1…などの名前の .sql ファイル）を右クリックし、Macなら「テキストエディット」、Windowsなら「メモ帳」などで開きます。画面いっぱいに英語や数字の羅列が出ますが、ビビらなくて大丈夫です！

2. 魔法のショートカット「Command + F」を発動

キーボードの [Command] ＋ [F] （Windowsの場合は [Ctrl] ＋ [F]）を同時に押します。すると、画面の端に小さな「検索窓」が出現します。

3. 「最新記事のタイトル」で一本釣り検索

その検索窓に、ハッキングされる直前に公開した「最新記事のタイトル」や、記事の中に書いた「自分にしか分からない特徴的なフレーズ」を打ち込みます。

4. 自分の書いた「日本語」を見つける

カチカチと検索結果を辿り、真っ黒なコードの中に自分が一生懸命書いた「記事の本文（日本語）」が見つかれば……おめでとうございます！【記事データは無事】という動かぬ証拠です。

【完全復活】Cocoonを再インストールして、CSSを流し込む

あとはCocoonを公式サイトから新しくダウンロードして再インストールするだけ。Safariだと勝手に解凍されてしまうことがあるので、Google Chromeを使って、.zip形式のまま保存するのがコツです！

壊れてしまったCocoonでも追加CSSだけは見ることができていました。そのCSSをメモに貼り付けて保存していたため、そのコードを新しいCocoonの「追加CSS」を流し込んだ瞬間——あのGamer Mam!の世界が復活しました。

CSSのバックアップを取っておいたことが、デザインの復活を可能にしてくれました。カスタマイズCSSは必ずどこかに保存しておくことをおすすめします。

同じ被害に遭わないために——やっておくべきセキュリティ対策

復旧後、再発防止のために以下の対策を実施しました。同じ被害に遭わないためにぜひ参考にしてみてください。

① 外部クラウドへの自動バックアップ（UpdraftPlus × Googleドライブ）

プラグインでバックアップを取っていても、テーマを再インストールするとバックアップデータが消えてしまうことがあります。ローカルのバックアップだけでは不十分というのが今回の大きな教訓でした。

UpdraftPlusというプラグインを使って、Googleドライブに週1回自動バックアップする設定にしました。外部クラウドに保存することで、サーバーが壊れても記事データを守ることができます。

② SiteGuardでログインURLを変更する

デフォルトの /wp-login.php は攻撃者に知られているので、SiteGuardプラグインでログインURLを変更しました。これだけでもかなりの抑止力になります。

③ 大きなカスタマイズ後は簡単インストール側にもバックアップ

ColorfulBoxの「簡単インストール」機能を使ったバックアップは、通常のプラグインバックアップとは別の場所に保存されます。大きな作業をした後は、この方法でもバックアップを取るようにしました。

まとめ

ハッキングから完全復旧まで、約3日間かかりました。ColorfulBoxのサポートと何往復もやり取りをして、AIに何度も助けを求めて、深夜まで画面と格闘しました。

一番怖かったのは「6年間の積み上げが全部消えてしまったかもしれない」と思った瞬間でした。でもデータベースの中に記事が残っていると確信した時、必ず復旧できると信じることができました。

今回の経験で強く感じたのは、ブログはバックアップが命だということ。そしてセキュリティ設定を変更するときは細心の注意を払うこと。

「誰にも読んでもらえない」と思って更新を止めていた時期があっても、また再開できた。そのタイミングでハッキングされても、諦めずに復旧できた。なんだか、ブログって本当にゲームみたいだなと思いました。何度やられても、再挑戦できる。

もし今、同じ状況で途方に暮れているブロガーの方がいたら、どうか諦めないでください。記事データはきっとどこかに生きています。

私も、また一つ強くなれた気がします。

今回、私はパーマリンクを数字ベースに変更しました。以前までは投稿名で毎回ブログ投稿する際に自分でパーマリンクをローマ字入力していたのですが、それを考えるのも億劫になってしまったんですよね。

しかも、パーマリンクの変更を忘れると日本語のURLになってしまい、すぐに気がつけばいいのですが、時間が経ってから気づいてパーマリンクを変更しようとすると、ブログにアクセスがあった際に旧URLから新URLへ転送できるように301リダイレクトする必要があり手間がかかってしまいます。

そこで、数字ベースのパーマリンクにしても大きな問題はないというネット情報を信じて、数字ベースに変更してみました。

詳しい方法は参考にさせていただいたブログ記事のリンクを貼りますので、そちらをご覧ください。

私が悩んだのはiPadでGoogleスプレットシートにどうやってCSVをインポートするかという点でしたので、今回の記事ではGoogleスプレットシートにインポートした方法をご紹介します。

パーマリンクの一括変換方法

私はパーマリンクを一括変換するのは2回目なのですが、前回、今回ともにこちらの記事を参考にして特に問題なく変換しました。

ただ、変換にあたり問題が起きないとは言えませんので、必ずバックアップをとるということと、記事をよく読んで自己責任で行ってください。

パーマリンク変更時に一括で301リダイレクト処理する方法 - 個人ブログ

この記事を読めば、大量の記事を一括で301リダイレクト設定する方法がわかります。具体的には「パーマリンク変更時」を事例として解説。 このブログのパーマリンク、ずっと日付がはいってたんです。

tklandphoto.com

プラグイン「Export wordpress data to xml/csv」で全記事のリンクを出力のですが、私がインストール済みのプラグイン一覧を見ると名前が「WP All Export」になっていました。どちらも同じものでした。

iPadの Googleスプレッドシートアプリではファイルをインポートできなかった

Export wordpress data to xml/csvで出力したCSVファイルをGoogleスプレッドシートにインポートしたかったのですが、出来ませんでした。ネット情報によるとiPadアプリのスプレッドシートではインポートできないんだとか。

そこでブラウザでデスクトップ版のGoogleスプレッドシートを使うことにしました。Googleスプレッドシートを検索し「Googleスプレッドシートログイン」にアクセスします。

Googleアプリからスプレッドシートを検索した場合は、うまく出来ませんでした。下のような画面になりどうにもできず断念。

Safariの場合、赤丸の部分をクリックしてデスクトップ用Webサイト表示にするか、モバイル用にするか選ぶことができます。四角で囲っている部分がモバイル用になっているようでしたら、すでにデスクトップ用に切り替わっています。

デスクトップ用のwebサイト表示になっているsafariからGoogleスプレッドシートを検索してログインしたところ、スプレッドシートは正常に表示されました。

iPadでGoogleスプレッドシートにCSVファイルをインポートする方法

シートの左上「ファイル」から「インポート」を選択します。

次のような画面になるため、アップロード→参照をタップしてExport wordpress data to xml/csvで出力したファイルを選びます。私の場合、CSVファイルは「最近使ったファイル」とか「このiPad内」の「ダウンロード」フォルダの中に入っていました。ドラッグがうまくいかなかったので参照からファイルを選びました。

参照をタップした後は「現在のシートを置き換えする」と今開いているシートに先ほど出力したCSVファイルがインポートされます。スプレッドシートを新規作成した場合は「今すぐ開く」をタップすると別ウインドウが開いてそちらにCSVファイルがインポートされました。

このままですと、列Bのブログタイトルがよく見えないため、列Bを長押しすることで表示される項目から、「単一列のサイズを変更」をタップします。

次に「データに合わせる」を選択し、OKをタップすることで、列Bのサイズは一番長いブログタイトルに合わせて広がります。同じように、ブログのURLが記載されている列Cの幅も広げると見やすくなります。

これでExport wordpress data to xml/csvから出力したCSVファイルをGoogleスプレッドシートにインポートできました。

パーマリンクを数字ベースに一括置き換えした方法

先ほど紹介した記事ではパーマリンクを数字ベースにしていないので、ここからはちょっと手順が違います。

GoogleスプレッドシートにインポートしたURLの隣、列Dに新しいURLを記載しないといけないのですが、1つ1つ入力するのはとても手間がかかります。

私の場合は、バックアップはもちろんとった状態で、今までのURLをGoogleスプレッドシートにインポートが終わった後、ブログの設定からパーマリンクを数字ベースに変更しました。こうする事で、すべてのURLが数字ベースに置き換わります。

その後は、初めと同じ手順でExport wordpress data to xml/csvを使って新URLを一括出力。

そのCSVファイルを先ほどのGoogleスプレッドシートにインポートします。インポートする際は、「新しいシートを挿入する」を選択し、新しいシートに出力された列Cを長押ししてコピーを選択、旧URLをインポートしているシートの列Dに貼り付けます。

「現在のシートに追加する」を選択すると、なぜか列Dではなく、行の続きに追加されてしまうため新しいシートに挿入するを選択しました。

列Dに新URLの貼り付けが終わったら、URLのずれがないかチェックをして参考ブログの通り列A、Bの削除、行1の削除を行いました。

削除したい列や行を長押しすることで項目一覧が出てくるので、その中から列を削除や行を削除という項目を選択すれば該当箇所を削除することができます。

そこまで終わったらファイルをダウンロード→カンマ区切り形式を選択、ファイルをダウンロードしてファイルを保存します。

「ダウンロードしますか？」と聞かれるため、ダウンロードをタップ。下のスクリーンショットのように、赤マルの矢印タップするとダウンロードしたファイルが表示されるのでタップします。

そうするとファイルの内容が表示されるので、右上の①の赤マル部分をタップし、項目一覧が出てきたら②のファイルに保存を選択して、ご自身の分かりやすいところに保存します。

後はご紹介した参考記事と同じ流れです。プラグイン「Redirection」で転送ルールを作る作業に入りますので、ご紹介したブログの手順通りに進めてみましょう。

Search Regexを使って内部リンクの修正をする

転送ルール作業が終わった後は、プラグイン「Search Regex」を使って内部リンクの修正をして、サーチコンソールにサイトマップを送信しておきましょう。

Search Regexでは、私の場合ですと①の検索部分にhttps://gamer-mam.com/を入力して検索し、https://gamer-mam.com/より後の部分が投稿名になっているものはないかをチェックしました。

投稿名になっているものがあれば、その完全なURLを①に入力して、Googleスプレッドシートにインポートしてある新アドレスをコピー、ペーストして②に貼り付けをして置き換えました。

置き換える時は③が赤くなるので、赤くなっていたらタップすることができます

ここで間違えてしまうと内部リンクが混乱してしまうので、間違わないよう要注意です。

パーマリンクの変更は注意が必要

今回パーマリンクの数字ベースに変更することによって、記事作成後のパーマリンクをローマ字で入力したり、考えたりする必要がなくなったので、本当に気が楽になりました。

作業が完全に終わるまで、ブログタイトルごとの旧URL、新URLはわかるようにしておきましょう。転送ルールがうまくいかなかった時や、内部リンクの修正などに使うかもしれません。

パーマリンクはできれば変更しないほうが安全ですが、どうしても変更せざるを得ない時は、ご紹介した参考ブログをよく読んでいただき、iPadで変更作業をするのであれば当サイトも参考にしていただければと思います。

ただ、本当にバックアップはしっかりとって作業することと、何が手違いがあっても責任は取れませんので、自己責任でお願いします。

私はFF14やモンスターハンターなどゲームのスクリーンショットを撮影・加工してSNSに掲載することが好きなゲーマーです。

今回の記事は、ブログに画像を載せる時の選び方、画像圧縮・ブログに掲載するときの注意点をご紹介します。合わせて私がいつも利用している画像圧縮サイト＆ソフトも掲載しました。

ご自身のブログに掲載した画像が汚くて困っているという方、画像圧縮後も画質があまり落ちないようにしたいと思っている方、ぜひ参考にしていただけたらと思います。

画像圧縮が必要な理由

私はブログでかなり綺麗な画像を掲載することに力をいれています。
それは私がInstagramでの活動がメインで、常に被写体が綺麗で可愛らしく見えるように考えいてゲーム内スクリーンショットを撮影しているからです。

残念ながらInstagramでは画像をアップしても画質が落ちてしまうんですよね。
それでも同じ趣味の方々と、可愛い自分達のゲームキャラのスクリーンショットを掲載しあい、楽しく交流させていただいています。

Instagramの場合、主に携帯でしか見ませんし、画像も小さいのでそれ程劣化が気になる事はありません。しかし、Instagramだけでは説明しきれない部分もあるんですよね。

以前ブログ記事にしましたが、Instagramのフォロワーさんからの色味調整などのお問い合わせに対して、どのように自分が画像を編集しているかとか。

そのような場合、ブログではInstagramで掲載したスクリーンショットについて説明しきれなかった事を追加して説明したり、載せきれなかったスクリーンショットを掲載したり、装備の名前を記載して、見てくれた方がそのスクリーンショットがどんな装備を使用しているかが分かるようにしています。（すべてのスクリーンショットに対してではありませんが・・・。）

ブログの場合、撮影したスクリーンショットは綺麗なまま掲載できますが、それではかなり画像のファイルサイズが大きくなって、読者の方が閲覧するときに、大変重たくなってしまう可能性があります。そのため画像の圧縮は、読者の方が読みやすくするためにも、とても大切な作業と言えるのです。

画像を圧縮する時とブログ掲載時の注意点

ブログを始めたばかりだと画像の選び方がよく分からなくて、自身のブログに掲載した画像が荒くてきたなく見える！！なんてこともありますよね。

そんな時はまず元々の画像の容量・ファイルサイズをチェックしてみましょう。

元々300×400、50KBくらいしかない画像をこれよりも大きく掲載しようとすれば画像は当然引き伸ばされて汚くなります。

これはインデックスのサムネイルなどでも起こることで、元々サイズが小さい画像をアイキャッチとして使用した場合、サムネイルの方が設定サイズが大きいと、画像が引き伸ばされてピンボケして見えるという現象が起こってしまうことがあるんですよね。

そのため、画像の美しさを気にするのであれば、あまりサイズの小さい画像を使用することはおすすめできません。

アイキャッチは1200×630が推奨されていると言われています。

画像の見栄えを気にするのであればPC画面でも見ることを考え、圧縮後の長辺サイズを1200以上に合わせて圧縮すると良い思われます。

1200以上なんてブログにそのまま掲載したら大きすぎない？と思いますが1200で圧が強いと感じるなら掲載する時に半分くらいの長辺600くらいで掲載すれば良いわけです。

例えば次の画像。こちらはFF14のキャラクターのスクリーンショットを撮影して長辺1280に合わせて画像圧縮したものです。

今ご覧いただいている画像は圧縮後サイズ1280の50％設定をして掲載していますので長辺512くらいになっています。

こちらの元々の画像サイズが3802×4752 容量が10.6Mなのですが、当然こんなに大きな画像をブログに貼り付けると超重すぎて読む方が大変な思いをするわけです。

そこで画像を圧縮するサイトを利用し長辺1280、PNGからJPEGに変換設定し、JPEG画質を80から82にします。このJPEG画質は画像の荒さとファイルサイズを見ながらお好みで。（使っている画像圧縮サイトは後ほどご紹介します）

そうするとファイル容量が114KBまで落ちるけれど、圧縮前とほぼ変わらない綺麗な画像を掲載することができます。

元々大きなサイズの画像を小さく圧縮する分には圧縮後も綺麗な画像が出来上がります。そして元々大きな1280の画像を小さく掲載する分には綺麗な画像が掲載できます。

注意してほしいのは、元の画像サイズよりも大きく表示しようとしてしまったがために、画像が引き伸ばされて荒くなったりぼやけてしまうことがあるということ。

参考になるか分からないですが、画像を3種類掲載しておくので見比べてみてください。

画像サンプル3種類

ブログに掲載する画像が荒かったりぼやけてしまうという方は、まずご自分の使用する画像サイズを確認し、元サイズより大きいサイズで掲載していないか調べてみましょう。

人気の画像圧縮プラグイン＆ウェブサイトが合わなかった

ブログ運営に画像掲載は欠かせませんし、画像圧縮は閲覧スピードを快適にするためにも欠かせません。

私もネットで良い圧縮プラグイン＆ウェブサイトは無いか探してみました。しかし、私がネットで検索した時に、お勧めとしてヒットするプラグイン＆ウェブサイトは、私の思うような圧縮ができませんでした。

このプラグイン＆ウェブサイトは、かなりファイルサイズを圧縮してくれるのですが、スクリーンショットをブログに張り付けている作業中に気付いてしまったんです。

画像がとても荒くなっている！！！(; ･`д･´)

ぱっとみても分かるくらい画質が劣化していました。もうびっくりしました。ファイルサイズが小さくても画質がこれだけ落ちてしまうとなると、ブログには掲載できないと思ったくらいでした。

でもそのプラグイン＆ウェブサイトは、圧縮しても画質が落ちないと有名だったんですよね。
原因は分かりませんし、私だけかも知れないので、画質が落ちていない方もいるのかも知れません。

お勧め画像圧縮サイト

私は、他に画質が落ちなくて圧縮もしてくれるサイトを探し、同時に、画像の保存形式について再度勉強しなおしました。

今までどこのサイトでみたのか忘れたのですが、画像はpng保存がいいと記憶していたので、保存形式は何が良いのかもう一度確認しました。その結果、pngで保存するとかなりファイルサイズが大きいので、jpg保存にすることにしました。参考にしたサイトのリンクを下に貼っておきますね。

jpg,png,gifの違いと比較と簡単に分かる最適な使い分け方

「ブログ書いてるけど、jpgとかpngとかって何か違いあるん？」って人は要チェック！jpg,png,gifなどの画像形式の最適な使い分け方についてまとめました。

ce-ya.net

背景透過をしなければ、jpg保存しても色味的には大丈夫だし、ファイルサイズもかなり小さくなることが分かりました。小さいと言っても先に上げた人気圧縮サイトの圧縮したサイズよりは大きいです。

圧縮サイトとしては下記のサイトが簡単で綺麗にしあがりました。私は普段は上のウェブサイト、文字をくっきりさせたい時は、PCにインストールするタイプの縮専を使用しています。ちなみにどちらも無料で使用可能です。

画像を縮小する！

Webブラウザで簡単に写真やイラストの縮小ができます。回転や反転、白黒変換も可能です。無料でお使いいただけます。

resizer.myct.jp

【縮小専用。】 まとめて画像縮小するWindowsフリーソフトウェア

写真や画像を一括縮小するWindows用フリーソフトウェア。

i-section.net

画像の比較

実際に圧縮してどのくらい変化があったのかを見ていきましょう。もしかしたら、人によっては気にならない感じかもしれませんが、画像を大きく拡大表示した場合、画質が落ちているのはかなり目立ってしまうと思います。

これは始めに使っていたTinyPingと元の画像の比較です。左がTinyPingで右が元画像です。ぱっと見た感じ分からないかもしれませんが、黄色く光っているところの部分をみてもらうと、左の画像は淵が荒くなっているのが分かりますか？これだとブログに掲載した時に画像の荒さが目立ってしまうんですね。

次に私が使用しているウェブサイトでの圧縮です。

今度は左が元画像、右が私が使用しているウェブサイト。先ほどと同じ場所、黄色く光っている部分を見ていただくと、右のjpg画像は左の元画像と殆ど変わりありません。

ファイルサイズもpng保存をするよりかなり小さくなります。（TinyPingの場合はpng保存ですが、かなりファイルサイズを小さくしてくれるので、TinyPingの圧縮には叶わないかも知れません。）

次はTinyPingの圧縮後と私が使用しているウェブサイトのjpg画像を比較します。
分かりにくいのですが左がTinyPingの画像で右がjpg。左は黄色くひかっている部分の淵が荒くなっていますが、右は柔らかく光っています。

文字をくっきり表示したい時の便利ソフト

現在使用している圧縮ウェブサイトは、画質も綺麗でJPEG画質も調整できるので、ファイルサイズが大きめの時は80、小さいときは９０にして使用しています。

しかし、欠点もあって、細かい字がぼやけてしまうんですよね。png保存にしたほうが文字はくっきり見えて良いのですが、ファイルサイズが気になるので、文字をくっきりさせたい場合は、先ほどリンクを貼った無料ソフトの縮専を使用しています。

縮専には画像くっきりというオプションがあるので、それを使用する事によりかなり文字がくっきり見えるようになります。

文字が小さいのでちょっと分かりにくいかも知れないのですが、一応比較画像をあげておきます。

上の画像は左が元のpng画像で右が縮専です。縮専だと圧縮してjpgにしても、文字がぼやけずくっきりした状態になります。

この上の画像は左が元画像、右が先ほど紹介したウェブサイトでのjpg圧縮後。少しぼやけて見えるんですけど分かりますか？なんだかピントがしっかり合わないなという印象をうけるんですよね。

このように私は、文字をくっきり見せたい時は縮専を使用するようにしています。

場合によっては画像だけでも表情（とくに瞳）がぼやけて見えてしまう時は、縮専で圧縮してみて、画質を確認してからブログにアップするようにしています。

縮専で画像くっきりで圧縮すると、稀に背景の細かい目地みたいなのが浮き出てしまう事があるので、圧縮後の画像を見ながら、ウェブサイトの圧縮が良いのか、縮専で良いのか、JPEG画質は８０まで落としても画質がそれほど落ちないか等を確認しながら仕上げていきます。

また、縮専のほうが圧縮後、若干ファイルサイズが多きいので、普段は先ほど紹介したウェブサイトを利用して、少しでもファイルサイズを小さくするようにしています。

まとめ

今回の記事は画像圧縮サイトのご紹介でした。

TinyPingも悪いわけではなく、私が画質重視のため、圧縮後の画質がどうしても自分のブログスタイルに合わなかったというだけの事です。

画像よりもファイルサイズを重視されたい方には最適なプラグイン＆ウェブサイトだと思います。

私は画像重視のブログサイトを運営しているので、時間はかかりますが1枚ずつ圧縮し、スクリーンショットの画質とファイルサイズを確認しながらブログにアップするようにしています。

今の所、この圧縮ウェブサイトとソフトには十分満足しています。
追記：2022年1月現在、PCではなくiPadでブログ運営をしておりますので、こちらの圧縮ウェブサイトのみ利用しております。

私と同じように、画像重視のブログサイトを運営されている方で、納得のいく圧縮サイト＆ソフトをお探しの方は是非紹介したサイト＆ソフトを試してみたください。

掲載した画像では、はっきり違いが分かりにくいですが、ご自分の画像を圧縮して比較すると分かりやすいかもしれません。

アイキャッチサイズ1200×630が推奨されている理由が詳しく知りたい方はこちらのサイトをご覧ください。

Cocoonのアイキャッチサイズの推奨はいくつ？非表示など各種設定も紹介

女性 せっかく用意したアイキャッチ画像が

hayato-blog.jp

このブログを読んでくださっている方の中に、「私もブログを書いてみたいな」と思った方がいるかもしれません。

FF14のスクショ加工が楽しくなった、キャラクリを真似してみました、という嬉しいお声をいただくことがあって、そういう方がもしブログを始めたいと思ってくれたなら、この記事が少しでも参考になれば嬉しいです。

上手とか下手とか関係なく、好きという気持ちがあれば越えられなそうな壁も超えられる。ゲームを通じてそれを実感してきた私が、ブログを5年続けてわかったことを正直に書きます。

私がブログを始めた理由

文章を書くのが好きで、ゲームをプレイするのが好き。好きなことをしながら、そのゲームの楽しいところや素晴らしいところを誰かに伝えられたら、それは最高の幸せだと思ってブログを始めました。

最初はブログで広告収入を得たいという気持ちもありました。でも5年続けてきた今、収益化よりも大切だと感じていることがあります。

それは、好きという気持ちがあれば、越えられなそうな壁も超えられるということを伝えたい、ということです。

ゲームのキャラクターを可愛く撮影して加工する楽しさ、自分には無理かもしれないと思っていたクエストを試行錯誤してクリアできた時の嬉しさ。そういう気持ちを文章にして残しておきたくて、今もブログを書き続けています。

Googleアドセンスに合格するまでの失敗談

せっかくなので、アドセンス合格までの失敗談も正直に書いておきます。これからアドセンスに挑戦したい方の参考になれば。

無料はてなブログで申請→不合格

最初の申請は無料はてなブログで行いました。結果は不合格。お問い合わせページやプライバシーポリシーを設置せずに申請していたのが原因だったと思います。その後設置して再申請しましたが、またも不合格でした。

やはり独自ドメインをとらないと合格しないのかと考え、そこで、はてなブログを有料にし、お名前.comで独自ドメインを取得して再申請しました。

有料はてなブログ・独自ドメインで再申請→不合格

次に有料はてなブログに切り替え、お名前.comで独自ドメインを取得して再申請しました。しかし結果は「サイトが見つからない」「サイトが閉鎖されている」という理由で不合格。

閉鎖していないのになぜ？と調べたところ、はてなブログとGoogleアドセンスの相性が悪くてこの通知が出やすいという情報を見つけました。真相はわかりませんが、ここでWordPressへの移行を決意しました。

WordPressに移行してついに合格

WordPressに移行し、ConoHaサーバーと独自ドメインで再申請。合格通知が来たのは再申請から14日ほどでした。

合格のポイントとして考えられるのは、無料はてなブログから新サイトへのリダイレクト設定をきちんと行ったことです。リダイレクトをしないと、古いURLにアクセスした際に404エラーになってしまい、Googleにサイトが正しく認識されない原因になります。

記事数は30記事前後、1000文字に満たない記事も含めた状態での合格でした。

5年続けてわかった、ブログを続けるために大切なこと

ブログを始めてから5年が経ちました。続けてきてわかったことは、「役に立つ記事を書かなければ」と気負いすぎないことが大切だということです。

ゲームの攻略情報を扱った記事が人のためになるのか、と悩んだ時期もありました。でも今は、誰かの楽しい時間のきっかけになればそれで十分だと思っています。

FF14のスクショ加工が楽しくなりました、キャラクリを真似してみましたという声をいただいた時は、続けてきて本当によかったと感じました。ブログは書き続けることで、思いがけない誰かに届くことがあります。

ゲームブログでもアドセンスに合格できる

ゲームブログはアドセンスに合格しにくいという話を耳にすることがあります。私自身も合格できるか不安でしたが、結果的には問題ありませんでした。

大切なのはジャンルよりも、読んだ人が何かを感じたり、参考になったりする記事を書くことだと思います。攻略情報でなくても、自分が楽しんでいる様子を正直に書いた記事が誰かに刺さることがあります。

ブログを始めたいと思っているあなたへ

もしこのブログを読んで、私もブログを書いてみたいと思ってくださった方がいたら、ぜひ始めてみてください。

最初からうまく書ける必要はありません。私もずっと試行錯誤しながら書いています。好きなことを好きなように書いていくうちに、少しずつ自分らしい記事が積み上がっていきます。

WordPressは最初難しそうに見えますが、わからないことはほぼ検索で解決できます。テーマはCocoonが無料で高機能なのでおすすめです。サーバーはConoHaを使っていますが、安定していて使いやすいと感じています。

下手でも諦めなければ、ゲームも、ブログも、きっと続けられます。

今回はブログを始めた理由とアドセンス合格までの道のりを振り返りました。ブログを始めることを迷っている方の背中を少しでも押せたなら嬉しいです。

このブログはこれからもゆっくりマイペースに更新していきます。また遊びに来てください。