【CSS】WordPressの全画像に一発で枠線(ボーダー)をつける方法【ブログ】

ブログ

おはこんばんにちは!ノボル(@Veritas40835638)です。

WordPressの画像に枠線をつけたいんだけど、全画像に一発で枠をつける方法ってないの??

もちろんあるよ!さっそく解説するね。


記事数が多いと、画像一つ一つに枠線(ボーダー)をつけるのは、大変な手間ですよね。

そこで今回は、WordPressの全画像に一発で枠線(ボーダー)をつける方法をご紹介します。

一画像に枠線(ボーダー)つける方法

最初に、一画像に枠線(ボーダー)つける方法について解説します。

枠線(ボーダー)をつけたい画像を用意してください。次に、エディターを「コードエディター」に切り替えてください。


記事のHTMLが表示されるので、<img>タグのクラスをコピーしてください。サンプル画像では「wp-image-2834」の部分がクラス名となります。


記事を下にスクロールすると「カスタムCSS」という欄があるので、枠線(ボーダー)を指定しましょう。


無事、枠線(ボーダー)をつけることができました!

全記事の画像にまとめて枠線(ボーダー)をつける方法

画像一つであれば、編集画面の「カスタムCSS」から枠線(ボーダー)をつけられることがわかりました。

では、全記事の画像にまとめて枠線(ボーダー)をつけるにはどうしたらいいのでしょうか?

枠線(ボーダー)をつけたい画像を用意してください。


ダッシュボードから、[外観]→[テーマエディター]にアクセスしてください。


WordPressでは、投稿画像のimgタグに自動的に「wp-image-〇〇」というクラスが追加されます。そこで、「wp-image-」というクラスを持つimgタグ全てに対してボーダーを指定してあげればいいのです。

スタイルシート(style.css)]を選択し、「/* 必要ならばここにコードを書く */」の下にボダーを指定するCSSを記述しましょう。

終わったら、ページ左下の[ファイルを更新]から変更を保存しましょう。


無事、すべての画像に枠線(ボーダー)をつけることができました!

最後に

今回の記事では、WordPressの全画像に一発で枠線(ボーダー)をつける方法をご紹介しました。

画像一つ一つに枠線(ボーダー)をつけるのは骨が折れますが、今回ご紹介した方法を使えば、手軽に全記事の画像にまとめて枠線をつけることができます!

最後まで読んで頂き、ありがとうございました(o^^o)

コメント

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