はてなブログから、Wordpressに引っ越した後、色んな変更箇所があり、その対応に追われています…。
ブログ引っ越し手順については、多くのブログで解説記事が出ていますが、タイトルの問題だけは情報が見当たらず、自力で解決する必要がありました。
結局、解決するまでかなりの時間を要することに…。
同じようなことで悩んでいる方に向けて、この記事を残しておきます。
ただ、私はよく分かっていない側の人間ですので、ご質問には答えられない場合がございます…。
はてなブログは何もしなくても画像クリックで拡大
はてなブログで、本文に画像を貼り付ける時、はてなフォトライブラリーに画像をアップロードするだけ。
それだけで勝手に、記事中の画像をクリックすると拡大表示がされるような仕様になっていました。
ですが、Wordpressにはそういったものは標準搭載されていない模様（Cocoonテーマは標準搭載）。
WordPressで画像クリック→拡大させる方法
Lightboxプラグインを導入する
WordPressで、記事中の画像をクリックで拡大＆ポップアップさせるためには、「Lightbox」の導入が必要とのこと。
無料テーマ「Cocoon」ではlightboxプラグインが不要
私もlightboxを導入しようと試行錯誤を重ね、調べているうちに、私が使用しているテーマ、Cocoonでは不要だということが分かりました。もともと標準搭載されている機能だそうです。
記事に画像を挿入する画面で、リンク先を「なし」から、「メディアファイル」に変更する必要があることは分かりました。
Lightboxを導入しても、過去記事画像の一括変換は無理？
Cocoonでも同じことが言えるんですが、検索しても「今後、画像挿入する時に」使う方法ばかりヒット。
はてなブログからインポートしてきた、過去の画像についての対処法が出てこない。
たとえクリックして出てきたものが、クリック前と同じ解像度の画像だとしても、スマホで記事を読んでいて、小さな画像を触っても何も反応しない、というのは気持ち悪い。
はてなブログを5年ほど使っていましたので、画像が大量にあり、それら全てを手作業で変更していくのは、とてもじゃないけど、やってられませんでした。
そこで、過去画像のHTMLを一括で変換する方法を探しました。
用意するもの プラグイン「Search Regex」
全記事のHTML記述を、一括で検索置換できるプラグインです。
ダッシュボード→プラグイン→新規追加→Search Regexで検索→「今すぐインストール」→「有効化」で使えるようになります。
くりかえしますが、必ず、記事データのバックアップを取り、自己責任で作業を行ってください。
WordPress 記事バックアップの方法
エックスサーバー等、自分のWordPressを置いているサーバーには、投稿ページのデータが保存されていません。（wp-content内にあるかと思いきや、別サーバーに保存されているんだとか）
なので、FTPソフトを使ってダウンロードしたり、契約サーバーでやってくれる自動バックアップ機能だけでは不十分。
何のこっちゃか分からない方、私もです。
こちらの記事が、図解つきで、とても参考になりました。
Search Regex の「正規表現」でHTMLを一括変換する方法
1 はてなブログで挿入した画像のHTML記述パターンを知る
はてなブログで画像を挿入した場合、HTML記述は、このようになります。
ちなみに、キャプション欄にも、alt属性にも、何もテキストを入れなかった場合は、下の画像のようになります。
class=“hatena-fotolife” は、はてなフォトライブラリーにアップした際に、勝手についてきます。
titleは、キャプションとして入れた画像の補足テキスト、
altは、画像に説明と意味を持たせるための記述です。
つまり、はてなブログで投稿した画像は必ず
<img class=“hatena-fotolife” で始まり、alt=“〇〇” />で終わる
共通点があることになります。
その共通点を、正規表現で指定・検索します。
2 指定したimgタグを、aタグで挟む
src=”” の中にあるURLが、画像の居場所なので、
そこにリンクを貼ることで、クリックした画像がポップアップされるようになります。
ダッシュボード→ツール→Search Regex を起動。
- Searh patten には |(<img class=”hatena-fotolife”.*src=”(.*)” alt=”.*” \/>)|
- Replace patten には <a href=”$2″>$1</a>
- Regex:の case-insensitive にチェックを入れて
- Searchで 検索→結果が下にズラっと並ぶ
- Replaceで 置換えた場合、HTML記述がどうなるかチェック
- Replace & Save で実行
5のチェックで、置換後のHTMLにミスがないか、よく確認してください。
「確認しても、合ってるかよく分からないよ」という方は、この方法をお勧めしません…。
3 画像リンクを除外する
2のままですと、画像をリンクにしていた場合、<a>タグが重複してしまうことになります。
なので、外側のａタグ（もともとのリンク先）を優先するために、もう一度、検索・置換を行います。
Searh pattenに
|<a href=”(.*)”><a href=”.*”>(<img class=”hatena.*src=”.*” alt=”.*” \/>)</a></a>|
Replace pattenに
<a href=”$1″>$2</a>
を入れて、2と同じようにチェック→実行をしてください。
これで、画像リンクがなかった画像は、クリックで拡大（ポップアップ）されるようになり、
もともとリンクを貼っていた画像は、前のリンクに戻るはずです。
さいごに
はてなブログに投稿した時点で、解像度が小さかった画像は、この方法でポップアップされても、解像度が上がったりはしません。拡大しても、汚いもんは汚いということになりかねませんので、普段から大きめの画像をアップすることをお勧めします。
「lightboxって？cocoonでは標準搭載？でも過去の分は？一括で画像を変換するには、どうすればいいの？正規表現って何？？」という、よく分からない状態から、調べに調べて、何とかできました。
付け焼き刃なので、詳しい方からすると間違っているかもしれません。
何度も言うようですが、必ず直前にバックアップを取ってから、行うようにしてください。
この記事が、どこかの誰かの役にたつことを願っています。
それでは、また。
コメント