目次
全画像に一括で枠線を付ける方法を大雑把に説明
やり方を大雑把に説明すると…今回は Search Regex というプラグインを使います。 これは、記事内の特定のキーワードやタグを一括置換できるプラグインです。 画像タグを示す部分は必ず <img src= というような形式となっているので、そこを活用して置換するというものです。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 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:/
- ” src=”http:/
- border” src=”http:/
- <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:/
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の太さで赤色の破線となります。
以上が画像に一括で枠線を付ける方法でした。
画像を修正する手間が面倒であれば、これを活用して枠線をつけてみてください。
