スマートフォン解析

【WordPress】全記事内の全画像に一括で枠線を付ける方法



どうもスイクンです。

「WordPressでたくさん記事を書いたけれど、そういえば、過去の記事の画像に枠線を付け忘れていたな…」ということはありませんか?

画像に枠線をつければ見た目も良くなるので、「修正して枠線を付けたいけれど、たくさんありすぎて修正ができない…」というのであれば、今回の方法を試してみてください。

というわけで、全記事内の全画像に一括で枠線を付ける方法を説明します

全画像に一括で枠線を付ける方法を大雑把に説明

やり方を大雑把に説明すると…今回は

Search Regex

というプラグインを使います。

これは、記事内の特定のキーワードやタグを一括置換できるプラグインです。

画像タグを示す部分は必ず

<img src=

というような形式となっているので、そこを活用して置換するというものです。

Search Regexのインストール

管理画面よりプラグイン⇒新規追加として、Search Regexを検索してください。

インストール

そして、「いますぐインストール」をクリックして、インストール後、有効化しましょう。

Search Regex

CSSに画像の枠線を示すclassを作成する

続いて、CSSに画像の枠線を示すclassを作成していきます。

当サイトでも利用している賢威6.2であれば、

外観⇒テーマの編集⇒design.cssと進み

以下のコードを追加してください。

img.border {
border:3px solid #333;
}

こんな感じに追加されていればOKです。

コード

これは、imgタグの中にborder というclassを作成し、それがどういったものかを示しています。

枠線のカスタマイズ

また、細かい部分は以下のことを示しています。ですから、そちらを変更することで、様々な枠線にすることが可能です。

  • 3pxは枠線の太さ
  • solidは枠線の形式
  • #333は枠線の色

solidの部分は以下の様な変更が可能です。お好きなものを選択してください。

  • solid 1本線。
  • double 2本線
  • dashed 破線
  • dotted 点線

記事内の画像タグの確認

続いて、記事内でどのような形で画像タグが使われているか確認します。

画像

複数の画像を確認すると、次のような形式で使われていることがわかりました。

  • <img class=”aligncenter size-medium wp-image-205″ src=”http:/
  • <img class=”aligncenter size-medium wp-image-206″ src=”http:/
  • <img class=”aligncenter size-medium wp-image-207″ src=”http:/

さて、これらに一括置換をして、class内に先ほど作成したborderを入れるにはどうしたら良いでしょうか?

答えは、以下の共通部分を使います。

  • ” src=”http:/

これを、次のものと一括置換すればOKですね。

  •  border” src=”http:/

(borderの前には半角スペースを入れています。)

そうすれば、先ほどのすべての画像のタグは

  • <img class=”aligncenter size-medium wp-image-205 border” src=”http:/
  • <img class=”aligncenter size-medium wp-image-206 border” src=”http:/
  • <img class=”aligncenter size-medium wp-image-207 border” src=”http:/

というように、すべて新しく作成したclassであるborderが挿入された形になります。

さて、以上の準備が出来ましたら、実際に一括置換していきましょう

Search Regexで一括置換する

管理画面からツール⇒Search Regex

一括置換

以下のように選択してください。

一括置換

  • Source : Post content 記事を対象とした一括置換をしたい場合
  • limit to : No limit 一括置換するリミットを設定
    • 今回は無制限で

そして、先ほど考えたとおりに

  • Search pattern 検索するもの
  • Replace pattern 検索したものと置換するもの

を記入してください。

一括置換

失敗を避けるために

失敗のないように「Replace>>」からクリックして、結果がどうなるかを見ていくことをおすすめします。

置換結果

これでOKだと思いましたら、「Replace&Save>>」をクリックして一括置換しましょう。

一括置換に成功すると…

一括置換に成功すると、記事内部のすべての画像に枠線が付けられております。

画像

(うまく反映されてない時には、F5で更新すると反映されます。)

この枠線が気に入らなかったら…

枠線が気に入らなかったら、枠線のカスタマイズをしましょう。

img.border {
border:3px solid #333;
}

以下のように変更してみると…

img.border {
border:2px dashed #ff0000;
}

指定した通り、2pxの太さで赤色の破線となります。

2015y01m31d_141721784

以上が画像に一括で枠線を付ける方法でした。

画像を修正する手間が面倒であれば、これを活用して枠線をつけてみてください。

特化型トレンドアフィリエイト レンタルサーバーの使い方
賢威6.2カスタマイズ WPの使い方
Twitter凍結基準まとめ 外注サービス比較


お名前
メール

コメントを残す

サブコンテンツ

このページの先頭へ