スポンサードリンク

でとっくす
こんにちは~

でとっくすです。

アイキャッチって画像を自動的にブログのあちこちに表示してくれて便利ですよね!

でも、ワードプレステーマを変えたりしたりすると、サイズが合わないとかで困ることはないですか?


テーマによって、表示してくれる場所とアイキャッチサイズがデフォルトで指定されています。

ですから、テーマを変えてまえの画像データがそのままだと表示がずれたりするんですね。


いろいろやってもダメ!ってそんな経験をされる方も多いようです。

わたしも約1年放置したこのブログもそんな状況にありました。


そこで私なりに解決した裏技テクニック?^^をシェアしたいと思います。


テーマ変更によるアイキャッチサイズのズレとは?

アイキャッチそのものをわたしはいまでも正確に理解しているわけじゃないんですね。

まあ、この辺はテンプレート・テーマなどちょっとはカスタマイズするけど、言語を理解していないと一緒(汗)。


それで例をお見せするのが良いと思います。

あるテンプレートで表示されるアイキャッチ

①ワードプレス投稿編集画面

編集画面のアイキャッチ
 ①ワードプレス投稿編集画面

これはワードプレスで記事投稿をするさいのアイキャッチを設定するところです。

ですから、どのテーマでも一緒です。心配ありません!

②トップページ記事一覧

トップページ記事一覧画像①
トップページ記事一覧画像②
 ②トップページ記事一覧

こちらは各テーマによってデフォルトのサイズが指定されています。

ですから、貼り付けた画像のように、上と下ではサイズが違っています。


同じテーマ内ですと、このまま記事一覧に表示されることになり見栄えが良くありません。

統一するならアイキャッチサイズを変更する必要があります。


②カラムサイドバー記事

サイドバー記事画像
 ②カラムサイドバー記事

サイドバーに表示される記事紹介の画像です。

こちらはアイキャッチを表示するか、サイズの変更も指定できるテーマがあるなどいろいろです。


④記事ページのトップ

記事ページのトップ画像
 ④記事ページのトップ

最近はテーマで自動でアイキャッチを記事トップに表示してくれるものがあります。

例の画像はこの「ストーク」で使われている2カラムでの記事ページです。


このアイキャッチの大きさも最初に記事投稿画面で設定したときのアイキャッチサイズで変わります。


⑤記事ページのヘッダー画像

記事ページのヘッダー画像
 ⑤記事ページのヘッダー画像

こちらは、このテーマ「ストーク」で採用されている記事ページのヘッダー画像です。

ここでアイキャッチが使われているんですね!


バイラル風1カラムでの設定です。

自動でこうした表示ができるのはあまりないかと思います。


このようにアイキャッチ自体はとても便利なんですね。

いちど登録設定するだけで、ブログのあちこちに自動で表示してくれますから。


そして、場所によっては表示するかあるいはそのサイズも変えられます。

それはテーマによってで、機能が違うわけです。


問題は何か?

②トップページ記事一覧のアイキャッチ画像はだいたい記事数が5とか10とかで他の記事と並びます。

それで、アイキャッチ画像が以前のテーマからの画像そのままでは、上の例のように不ぞろいになります。


見栄えが気になりますよね!サイズを統一したくなると思います。

他には、④記事ページのトップや⑤記事ページのヘッダー画像のようにデカイ大きさになる場合もあります。

これですと、最初にアイキャッチ画像を設定するときの大きさが影響します。


この調整はちょっと面倒くさいですね。


アイキャッチサイズの調整方法

まったくどのアイキャッチ画像も不ぞろいなく統一されきれいに見せるには、テーマを使いだしたら最初から設定をすることです!

しかしこれは現実的にほぼ無理なんですね。


だいたい、アイキャッチ画像が数枚程度でテーマを変えるなら、それほど面倒でなく問題なくできます。

でもわたしなら、数枚でも新しく画像を用意するにもかなり時間がかかり厄介になります。


画像をもってきたサイトなり、無料素材サイトにアクセスしてダウンロードし直しがありますから。


ではどうしたらいいか。


それは、古いアイキャッチ画像のサイズ変更をすればいいんです。

ただこれがそんなに簡単じゃない!


ブログにある画像はアイキャッチで使用するものを含めとても多い方がほとんどでしょうね。

わたしの場合なら最初は2000枚ぐらいありました。


それを一枚一枚手作業でするなんて、ありえません。

画像が入っているメディアライブラリでの作業です。


全体を一括で変更するなら、アイキャッチサイズの設定(デフォルト)をワードプレスで変更します。

それでプラグインか何かを使って読み直しとかするんですね。


でも、これが完璧じゃない・・・・・

それは、大元のアイキャッチに使用した、登録した画像のサイズによるからです。


ワードプレスでの編集は縮小だけが可能です。

まあだいたいわかりますけど・・・・縮小しても画像はキレイですよね!


で、で拡大機能がないんです。

登録する画像がヘッダー用と考えて、デカイサイズなら何ら問題ないです。


たとえば、幅720pxとか 1600pxとかですね。

これならすべてOKです。


でも、以前のテーマがそんな機能なくてアイキャッチ用にはそれなりのサイズの画像を使っている場合が多いんじゃないでしょうか。

それに有名人や芸能人のトレンドサイトなどは人物画像は身分証明書の写真やパスポート用の大きさがほとんどでしょう。


するとサイドバーの記事紹介の画像ならOKでしょうけど、ややもするとトップページの記事紹介では不ぞろいになります。

アイキャッチサイズの設定では、自動的に100✕100とか150✕150とか300✕300が出力されます。


ですから、ブログの画像が本来自分で入力した画像数よりとても多いわけですね。


プラグインは対応できるか?

最初に入力した画像が相当なサイズなら(縮小可能で対応できる範囲)大丈夫です。

ただ、プラグインは大量の画像を一括に処理できないプラグインがあります。


この場合、パソコンはフリーズしたかのような状態になります。

ほかのプラグインでは、個別に画像を指定して変更してくれますけど、枚数が多いと疲れます。


それに最初に入力した画像が小さい場合、処理しても同じ結果だったりします。

使って困ったのは、別サイズのアイキャッチが大量に出力されて大変でした。


以前のテーマでは使っていなかった336✕423とか・・・

こうなると記事内に貼り付けておいた画像の表示もできなくなり、事態は最悪になります。


そうブログを破棄しなければいかな?っていう状況です。

ですから、プラグインは便利そうですけど、間違うととんでもないことになります。


わたしは、これで大切な元のサイズの画像が消えて、よけいな画像が増えて、2000枚から1万枚に膨れ上がりました。

それなのに、記事内の画像が非表示となったんです(泣)


わたしがとったアイキャッチ画像・画像サイズ変更の裏ワザテクニック!

プラグインを使うのは止めました。

大元のアイキャッチ画像に登録したものを拡大してメディアライブラリに入れ直すこと!

これなら、再度画像を消して、新しくするのと同じです。


余計なサイズのアイキャッチ画像も出力されません。

ただ2000枚の一定サイズの画像を拡大して再びフォルダーに入れ直す作業をうまくやらなければいけません。

便利な必要ツールとサーバーの機能を利用

ワードプレスの画像はすべてフォルダー「uploads」内にあります。

その中の画像全部を取り出して、サイズ(アイキャッチの数値)を変えることなく拡大して再びフォルダーに入れること!


こんかい利用したツール類
  1. Ralpha Image Resizer:画像を拡大してくれます
  2. mixhostのファイルマネージャー:画像をダウンロードそしてアップロード

ステップ1

mixhostのファイルマネージャーでワードプレスのフォルダー「uploads」をバックアップ。

mixhostはサーバーで、こちらのファイルマネージャーがとても便利で気に入っています。


こんな感じです。

ファイルマネージャー
このアイコンをクリックしてファイルマネージャーを起動させます。


ファイルマネージャー内
ファイルマネージャーには登録されてあるドメインが一覧で見られ、かつ操作もできます。


ワードプレス内
使っているブログのワードプレスの中に入ります。フォルダー「wp-content」


画像フォルダー
フォルダー「uploads」に入ります。


ステップ2

フォルダー「uploads」内にある画像フォルダーを一括バックアップする。

バックアップ
これがとても簡単なんですね、mixhostでは、操作がエクスポローラーなみにコピー・ドラッグなんでもできます。

ですから、わたしは「uploads」内に「backup」フォルダーを作ってそこにコピーしました。


FTPを使ってサーバーにアクセスしてパソコンにダウンロードとかの面倒な作業をしなくていいです。

パソコンにダウンロードしたいときでも簡単なんです。


「uploads」内に作ったのは、間違ったときとかおかしくなったとき復元しやすいからです。

バックアップの画像で容量をとらえますけど、完璧に作業が完了したら削除すればいいんです。


ステップ3

「uploads」内の全画像をダウンロードする。

いよいよ拡大作業の開始です。


ステップ4

ダウンロードした画像をエクスポローラーで一括選択して「Ralpha Image Resizer」で拡大サイズの画像を作成

こんな感じです。

画像拡大ツール

するとフォルダー「resize」が現れてそこに拡大された全画像が入ります。
拡大結果
それを全部切り取って、1階層上の元画像と入れ替えます。

これで見た目はダウンロードした状態と同じ!


ステップ5

拡大した全画像をファイルマネージャーを使って、もとのワードプレスのフォルダー「uploads」にもどします。

アップロード
こんな画面が出てきますから、エクスポローラー内の拡大画像を全部選択してマウスで移動して乗せるだけでフォルダーに入れることができます。

FTPでアップロードする必要がなく、これだとすぐにアップロードできます。


高速FTPでも時間がかかりますよね!

mixhostだから、この作業が簡単にかつ迅速にできるんですね。


これで、新しいテーマのアイキャッチは新しく登録されたアイキャッチ画像と同じサイズで表示されます。


まとめ

まあ、この作業にしても画像がある程度多いとそれなりの時間は取られます。

わたしは1時間か2時間ぐらいでした。


でもこのツールなくしてやったら、1日や2日では終わらないでしょう。

それにミスったら大変です。


mixhostのバックアップ機能は万全です!

惚れ直しましたね^^


プラグインで膨大な数になっても元にすぐに戻せます。

新テーマで画像処理で困っていたらぜひ試してみてください。


スポンサードリンク
アイキャッチ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です