【ブログ】Cocoonの吹き出し画像を一括で変更する方法【ワードプレス】

Cocoonの吹き出し画像を一括で変更する方法

今回はワードプレスの無料テーマ『Cocoon』の吹き出し画像を一括で変更する方法をお話します。

しろちゃん
しろちゃん

そんなことができるの!?

これまで投稿してきた記事の吹き出し画像を一括で変更する。

手作業だと超大変ですが、プラグインを使うことで簡単にできちゃうんです。

プラグインを使う方法を紹介します!

この記事を読めば、『Cocoon』の吹き出し画像を一括で変更する方法がわかります。

この記事を書いた人
いなご

・YouTubeを3ヶ月で挫折
・ブログは6ヶ月連続収益0円
『継続が大事』を信じて情報発信の続け方を研究する人
ブログやYouTubeを続けるためのヒントをお届けします。
プロフィール詳細
いなごのTwitterアカウント

いなごをフォローする

Cocoonの吹き出し画像を一括変更①変更前の画像の保存場所を確認

しろちゃん
しろちゃん

まずは何をするの?

管理人
管理人

まずは変更前の画像の保存場所を確認するよ。

ワードプレスの管理画面から「Cocoon設定」→「吹き出し」の順にクリックします。

Cocoonの吹き出し画面の出し方

デフォルトの画像が出てくるので、自分がこれまで使っていた画像を選んで編集をクリックします。

Cocoonの吹き出し画面

今回は「おじいさん」の画像を使っていた場合で説明します。

おじいさんの編集画面を開くと、「アイコン画像」と書いてある部分の右にURLが入力されています

これが、悩むおじさんの画像の保存場所です。

Cocoonの吹き出しのおじいさんの画面

まずはこの方法で変更前の画像の保存場所を確認しましょう。

と言っても大変だと思うので、2020年現在の画像保存場所の一覧を載せておきます。

しろちゃん
しろちゃん

やったー!

Cocoon吹き出しのデフォルト画像の保存場所は、

あなたのサイトのURL/wp-content/themes/cocoon-master/images/画像の名前

です。

例えばこのブログ「https://kasegerusikumi.com」であれば、

https://kasegerusikumi.com/wp-content/themes/cocoon-master/images/画像の名前

となります。

管理人
管理人

「画像の名前」の一覧はこちら

Cocoonデフォルト画像の名前一覧
  • 男性「man.png」
  • 女性「woman.png」
  • ビジネスマン「b-man.png」
  • ビジネスウーマン「b-woman.png」
  • どや顔男性「doya-man.png」
  • どや顔女性「doya-woman.png」
  • 男性医「doctor.png」
  • 女性医師「doctress.png」
  • 悩むおじさん「ojisan.png」
  • 悩むおばさん「obasan.png」

これを、「画像の名前」に当てはめればOKです。

あなたのサイトのURL/wp-content/themes/cocoon-master/images/画像の名前

例えば悩むおじさん「ojisan.png」の場合、

あなたのサイトのURL/wp-content/themes/cocoon-master/images/ojisan.png

と変更すればOKです。

「あなたのサイトのURL」と「画像の名前」を両方変更したものをメモ帳などに貼り付けておきましょう。

今回はこのブログ「https://kasegerusikumi.com」で悩むおじさん「ojisan.png」の画像を変更するので、

https://kasegerusikumi.com/wp-content/themes/cocoon-master/images/ojisan.png

が画像の保存場所です。

これをメモ帳に貼り付けておきます。

管理人
管理人

これで、変更前の画像の保存場所を確認することができました。

Cocoonの吹き出し画像を一括変更②変更後の画像の保存場所を確認

管理人
管理人

変更後の画像の保存場所も確認します。

しろちゃん
しろちゃん

オッケー

ワードプレス管理画面の「メディア」→「新規追加」の順にクリックします。

ワードプレスに画像を追加

「ファイルを選択」をクリックし、変更後の画像を選択してアップロードします。

管理人
管理人

画像の名前はアップロード前にわかりやすく変更しておくのがおすすめ。後から管理が楽になります。

ワードプレスに追加する画像を選択

今回は管理人がいつも使っている「ブタ貯金箱のアイコン」に変更します。

画像を選択すると以下のような画面になるので、右側にある「編集」をクリックします。

ワードプレスに追加する画像を選択肢終わった画面。

右上の枠に入力されているのが変更後の画像の保存場所です。

これもメモ帳などに貼り付けておきましょう。

アップロードした画像の保存場所を確認

ちなみに、この画面は「メディア」→「画像のタイトル名」(「編集」でもOK)の順でクリックするといつでも開くことができます。

画像の保存場所はここからでも確認できる。
管理人
管理人

これで、変更元画像と変更後の画像の保存場所が確認できました。

Cocoonの吹き出し画像を一括変更③プラグイン『Search Regex』をインストール

しろちゃん
しろちゃん

プラグインの・・・何だっけ?

プラグイン『Search Regex』をインストールします。

ワードプレスの管理画面で、「プラグイン」→「新規追加」の順にクリックします。

右上の検索欄に「Search Regex」と入力。

検索結果が表示されるので、Search Regex「今すぐインストール」→「有効化」の順にクリック

「Search Regex」のインストール方法

プラグイン『Search Regex』がインストールできました。

管理人
管理人

プラグイン『Search Regex』は、画像だけでなく文字の一括変更もできる便利なプラグインですよ。

しろちゃん
しろちゃん

そうなんだ。

Cocoonの吹き出し画像を一括変更④『Search Regex』で吹き出し画像の一括変更

しろちゃん
しろちゃん

よし、いよいよ吹き出し画像の一括変更だ!

管理人
管理人

ちょっと待ってね。ここで1つ大事な話があります。

プラグイン『Search Regex』を使用する前には必ずサイトのバックアップを取りましょう。

便利なプラグインですが、それだけ操作ミスや想定外の事態が発生した時の影響も大きいです。

しろちゃん
しろちゃん

一括変更を使う前にはバックアップ。気をつけるね。

ワードプレス管理画面の「ツール」→「Search Regex」の順にクリック

使い方は簡単で、

「検索」の右の枠に、『変更前の画像の保存場所』を入力
「置換」の右の枠に、『変更後の画像の保存場所』を入力

「検索」の枠に入力した画像→「置換」の枠に入力した画像に一括で変更されます。

「Search Regex」の使い方
管理人
管理人

メモ帳に貼り付けておいた、変更前の「悩むおじさん」の保存場所を上の枠に、変更後の「ブタの貯金箱」の保存場所を下の枠に入力します。

上の枠に悩むおじさんの保存場所「https://kasegerusikumi.com/wp-content/themes/cocoon-master/images/ojisan.png」を入力

下の枠にブタの貯金箱の保存場所「https://kasegerusikumi.com/wp-content/uploads/2020/06/test.png」を入力

「検索」をクリックすると、画像一括変更に該当する記事が表示されます。

「Search Regex」で画像の一括変更
管理人
管理人

さっと目を通して、明らかにおかしい部分がないことだけ確認しましょう。

「全て置換する」をクリックすると、画像の一括変更が始まります

「Search Regex」で画像の一括変更

この状態になったら画像の一括変更の完了です。

「Search Regex」で画像の一括変更が完了した画面

実際の記事を見てみると、

一括変更前の吹き出し画像はこの状態。

「Search Regex」による画像の一括変更前

「悩むおじさん」→「ブタの貯金箱」に一括変更した後はこの状態になりました。

「Search Regex」による画像の一括変更後

無事に吹き出し画像が一括変更できていますね。

しろちゃん
しろちゃん

すごい!画像が簡単に一括変更できちゃった!

Cocoonの吹き出し画像を一括変更する方法まとめ

この記事では『Cocoon』の吹き出し画像を一括で変更する方法をお話しました。

『Cocoon』の吹き出し画像を一括で変更する方法
  • 変更前の画像の保存場所を確認
  • 変更後の画像の保存場所を確認
  • プラグイン『Search Regex』をインストール
  • 『Search Regex』で吹き出し画像の一括変更

便利なプラグインほど、内部データの動きが見えにくく危険性が高いとも言えます.。

使用前には必ずバックアップを取り、便利な『Search Regex』を上手に使いましょう。

管理人
管理人

一括変更前にはバックアップ。
忘れないでね!

しろちゃん
しろちゃん

任せといて!

コメント

タイトルとURLをコピーしました