はてなブログ ブログカスタマイズ

はてなブログ画像リンクを一括変更する|Search Regexの使い方徹底解説

はてなブログからワードプレスへ引っ越した方は、画像も移動してきたことでしょう。

この記事では、はてなブログからワードプレス移動した画像のリンクを一括で変更する手順を、画像付きでお伝えします。

  • 今回使用するのはSearch Regexというプラグイン
このブログは「AFFINGER」を使用しています

画像移動の手順(簡易)

  • はてなブログからダウンロードしたテキストファイルより、画像のみを抽出(サクラエディタを使う)
  • はてなブログの画像を一括ダウンロード(Dsダウンローダーを使う)
  • サーバーへ画像をアップロード(ワードプレスインストールサーバー)
  • 画像をメディアライブラリに反映させる(プラグインMedia from FTPを使う)
  • 画像のファイルURLを書き換え(プラグインSearch Regexを使う)

この記事では、5、画像のファイルURLを、はてなブログのリンクからワードプレスのリンクに変更する方法を説明します。

Search Regexで画像リンクを変更

Search Regexは、過去に投稿した記事の内容を一括置換することができるプラグインです。

Search Regexを使えば、今回紹介します画像URL変更はもちろん、はてなキーワードのリンク解除、見出しタグh2からh3への変更も一括でできます。

はてなキーワードのリンク解除方法はこちら

はてなキーワードを削除
はてなキーワードのリンクを、ワードプレスで消す方法を徹底解説|失敗談あり

はてなブログ(無料版)からワードスレスへ引っ越したときに大変だった「はてなキーワードのリンク」。 はてなブログ無料版にて執筆して公開しますと、本文中の言葉が「はてなキーワード」と認識され、キーワードペ ...


Search Regexの使い方

Search Regexを使う前に、必ず現段階のデータをバックアップしましょう。

ワードプレスデータのバックアップ方法は、こちらの記事をご参照ください。

バックアップが終わりましたら、Search Regexのプラグインをダウンロードし、有効化しましょう

有効化されたSearch Regexは、ダッシュボード>ツールに格納されています。

はてなキーワードを削除

Search Regexの操作画面「検索と置換」にて設定していきます。

画像リンク変更Search Regex

検索に入力する文字列

変更する、はてなブログ画像のURLをサイト内から検索します。

はてなブログの画像URL文字列は、以下のようになっています。

画像リンク変更Search Regex
  • 赤いところは共通です。
  • 緑のところは各画像で違います。
  • 黄色のところは、はてな管理者IDです。
    はてなIDの頭文字/はてなIDの並びです。

例)黄色の囲ったところ管理者の場合ははてなブログIDが「pheasanthunterなので、頭文字は「p」です。

各々のIDで当てはめてください。

はてなブログ画像を右クリックして「画像アドレスをコピー」をして、メモなどにペーストし、赤文字のところのみを使えば、間違いがないですし簡単です。

画像リンク変更Search Regex

画像URLを全て検索するために、緑のところはどんな文字でも良いという意味の正規表現(……..)を用います。

画像リンク変更Search Regex

自分のはてなブログIDを当てはめて、以下の文字列を「検索」に入力ください。

検索

https://cdn-ak.f.st-hatena.com/images/fotolife/はてなIDの頭文字/はてなID/(……..)/

画像リンク変更Search Regex

置換に入力する文字列

ワードプレス画像URLに変更するために、以下のことをします。

ワードプレスの画像URLは以下のようになっています。

画像リンク変更Search Regex
  • 赤いところは共通です。
  • オレンジは自身のサイトURL
  • 青のところは画像をファイルに入れた、年(四桁)/月(二桁)です。
    こだわりがなければ画像アップ日の数値を当てはめてください。
  • ピンクは画像タイトルです。
    画像によってつけたいタイトルがあると思いますので、一括変更の現段階では未記入で大丈夫です。URL変更後にワードプレスのメディアから変更が可能です。
画像リンク変更Search Regex
画像リンク変更Search Regex

自身のサイトURL と、年/月を当てはめて、以下のような文字列形式にて「置換」に入力してください。

置換

https://サイトURL /wp-content/uploads/年/月/

画像リンク変更Search Regex

正規表現にチェックを入れる

右側のフラグを検索の「正規表現」にチェックを入れます。
「大文字小文字の区別なし」のところもチェックを入れて大丈夫です。

はてなキーワードを削除

検索をする

下にある「検索」をクリックします。

画像リンク変更Search Regex

しばらくしますと、検索結果が出てきますので確認していきます。

オレンジでマークされているところが検索で指定した文字の検索結果です。置換文字にて表示されます。プレビュー状態であるという認識で大丈夫です。
オレンジのところにカーソルを合わせてみますと、はてなブログリンクが表示されます。

画像リンク変更Search Regex

置換する

間違えなさそうですので「すべて置換」をクリックします。

画像リンク変更Search Regex

しばらく待ちますと、青く「完了」と表示されます。

画像リンク変更Search Regex

完了と表示されましたら、ブログにて画像URLをチェックしてください。

Search Regexで検索できないとき

検索も置換も入力したのに検索ヒットがでないときは、「検索」に入力した正規表現『(……..)』に問題がある可能性があります。

半角「()」内に、半角「.」を8個連続で入力させるのですが、このままコピペしますと、環境依存文字で入力される可能性があります。

検索がうまくいかないときは、Search Regexの入力で半角「()」と半角「.」を8個、コピペではなく直接入力てみてください

また、あわせて今一度ご自身のはてなIDやサイトURLも見直されてください。

Search Regex追加説明

正規表現とは

正規表現とは指定した条件に一致する複数の文字列を一つのパターンで表現する方法です。
英語ではRegular expressions

(……..)解説

  • ()は、文字(列)をグループ化
  • .は、任意の1文字にマッチする

今回、はてな画像識別箇所のはじめの「/」までが8桁なので、「なんでもよい8文字」で検索するように「.」を8個グループ化した。

まとめ

はてなブログ無料版からワードプレスへ引っ越したとき、二番目に面倒だった画像の移動と設定。

(一番ダルかったのは、はてなキーワードのリンク削除です。詳細はこちら)

Search Regexには本当に助けられました。これからもSearch Regexを有効活用していきます!

アフィンガー|「目次に戻る」をスマホの固定フッターメニューの中に入れる

2022/9/2

アフィンガー|「目次に戻る」をスマホの固定フッターメニューの中に入れる

今やスマホでサイトを閲覧することが多いです。 「興味あるところだけ読みたい」「さっき読んだところをもう一度確認したい」というニーズが発生することは、往々にしてあります。そのときにあると便利なのが「目次に戻るボタン」なのです。 今回は、フッターの中に「目次に戻る」項目を作っていきたいと思います。 フッターメニューに入れることで、追従してくれますのでとても便利です。 この記事を読めば、以下の動画のようなことができるようになります。 まだ、スマホに固定するフッターメニューを設置していない方は、こちらご参照くださ ...

ReadMore

UpdraftPlusで自動バックアップから復元方法を解説|保存先はGoogle ドライブ

2022/8/28

UpdraftPlusで自動バックアップから復元方法を解説|保存先はGoogleドライブ

UpdraftPlusは、WordPressのデータをバックアップ・復元できるプラグインです。 WordPressで構築したウェブサイトのデータベース、プラグイン、テーマ、アップロードファイル、wp-content ディレクトリと、WordPressを丸ごとバックアップして、復元までプラグインで行えます。 WordPressのデータをバックアップとして有名なプラグイン「BackWPup」がありますが、BackWPupの復元はFTPでファイルアップロードして、phpMyAdminでデータベースを復元する手順 ...

ReadMore

アフィンガーでヘッダーカードを作る|設定と表示の方法を徹底解説

2022/8/23

アフィンガーでヘッダーカードを作る|設定と表示の方法を徹底解説

AFFINGERで"ヘッダーカード"を設定する方法をご紹介します。 ヘッダーカードを入れることで、以下のようにサイトが変化します。 ヘッダーカードを設置することで、「サイトがおしゃれに華やかになる」「サイト訪問者に読んでもらいやすくなる」というメリットがあります。 作成方法【簡易版】 どのようなヘッダーカードを作るか、構想を練る ヘッダーカードの背景画像を作る(canvaなど) ヘッダーカードの挿入と設定(デザインや文字入など) ヘッダーカードの背景を変更する(必要な場合のみ) Contentsどのような ...

ReadMore

2022/8/24

ブログの作り方|当ブログのサイトマップ

ブログを始めるにあたり、おすすめのサーバーやテーマ、またブログをはじめたら押さえておくべき設定などの記事をまとめました。 Contentsおすすめサーバー「スターサーバー」スターサーバーのメリット・デメリットスターサーバーの契約方法・設定方法独自ドメインからメールアドレスを作成するブログのバックアップ問い合わせフォームを作成するスパム対策アフィンガー関連設定ヘッダーとヘッダーメニューをおしゃれにするスマホでも追従する目次を設定するスマホに固定フッターメニューを追加する記事の文字をカラフルにするアフィンガー ...

ReadMore

Contact Form 7の問い合わせフォーム作成方法と使い方を紹介

2022/8/28

Contact Form 7の問い合わせフォーム作成方法と使い方を紹介

ブログをはじめたら必ず導入するべき、問い合わせフォームのプラグイン「Contact Form 7」。作成者は日本人ですので、公式サイトは日本語で解説されています。 Contact Form 7公式サイト Contact Form 7の導入方法と、問い合わせフォームを作成する方法を紹介します。 下記のようにお問い合わせフォームを作り、サイトのフッターメニュー(ブログの最下部エリア)に設置していきます。 ContentsContact Form 7の使い方【簡易】step1.Contact Form 7をイン ...

ReadMore

スターサーバーのメリット・デメリットと、性能や料金を徹底紹介

2022/8/28

スターサーバーのメリット・デメリットと、性能や料金を徹底紹介

月額138円~という格安でありながら、高性能サーバーであると言われているスターサーバー。 日本マーケティングリサーチ調べでは、 WordPress 利用者注目度・ブロガー&アフィリエイター満足度・レンタルサーバー初心者満足度No.1を記録しています。 管理人も、スターサーバーを利用してこのブログを運営しています。 この記事では、スターサーバーの機能や料金まとめ、メリット・デメリットをお伝えします。 \スターサーバーの公式サイト/ Contentsスターサーバー機能一覧無料お試し2週間は、 ...

ReadMore

スターサーバーの契約方法・設定方法を徹底解説

2022/8/28

スターサーバーの契約方法・設定方法を徹底解説

この記事ではスターサーバーを使い、ワードプレスの設定方法を初心者でもわかりやすいようにお伝えします。 スターサーバーのメリット・デメリットについては、こちらの記事をご参照ください。 スターサーバーの有料プランを契約すると、独自ドメインが無料で作成することができます。 また、スターサーバーは各サーバーの中でもお得な値段設定ですので、費用を抑えてブログを始めてい方には、うってつけです。 管理人も、スターサーバーの安さと設定のしやすさから、契約を決めました。 はてなブログやアメーバーブログなどの、大手ブログから ...

ReadMore

アフィンガー|スマホのヘッダーやメニューをおしゃれに設定する方法

2022/8/20

アフィンガー|スマホのヘッダーやメニューをおしゃれに設定する方法

当ブログでも愛用中の人気WordPressテーマ「ACTION AFFINGER6」にて、スマホのヘッダーをおしゃれにする方法を、ブログ初心者さん向けに1からわかりやすく解説していきます。 今回紹介する方法で、どのようなデザインになるのか、ご提示します。 デフォルトはシンプルなものですが、好きな画像をヘッダーに置いておしゃれで個性的なデザインにしていきましょう。 Contents操作方法(簡易)事前情報.「ヘッダーエリア」や「ヘッダーメニューエリア」ってどこのこと?step1.スマホヘッダーメニューを表示 ...

ReadMore

投稿タグを選択式(チェック)にする|らくらくタグ設定

2022/8/25

投稿タグを選択式(チェック)にする|らくらくタグ設定

投稿記事の作成編集ページのタグは、フリー記述方式なので、タグの入れ漏れがある可能性があります。 管理人も、どんなタグ前に作ったっけ?と、確認しながら入力していました。 しかしながら、そのような面倒な作業はもう必要ありません! この方法を使うことで、以下のようになるのです。 予め作ったタグを一覧表示にし、その上選択式になります。 このようにすることで、投稿編集ページで確認しながら簡単にタグをつけることができます。 プラグイン無しで、コードの貼付けのみで実装できますので、手軽です。 それでは、タグを選択式にす ...

ReadMore

AFFINGERでヘッダーを個性的でおしゃれにする方法

2022/8/28

AFFINGERでヘッダーを個性的でおしゃれにする方法

有料テーマのAFFINGERを購入したからには、デザインに優れた機能をつかい、かっこいいブログにしたいところです。 今回は、AFFINGER6のヘッダーエリアと、ヘッダーメニューエリアを個性的でおしゃれにする方法をお伝えします。 AFFINGER6のデフォルト状態のヘッダーと、今回紹介するカスタマイズ方法を利用したヘッダーの完成イメージを提示します。                                                  ▼▼▼▼▼ 何ということでしょう、シンプルでザ・デフォルト ...

ReadMore

このサイトはアフィンガーを使用しています

アフィンガー

WING(AFFINGER6 ver)

デザイン簡単、SEO対策と広告収入UPの機能が標準装備。さらに美しく、パワフルに。「稼ぐ」に特化したテーマ。

WING(アフィンガー6)公式サイト

2022年最新!おすすめレンタルサーバー

月額料金がライトプランで220円〜(税込)なので、コスパよく爆速なサイト運営が可能に!

管理画面は使いやすくなっているので、これからはじめてサイト運営をする方にもおすすめです!

Twitterでも口コミ良好!

スターサーバー公式サイト

-はてなブログ, ブログカスタマイズ
-, , ,