WPホームページ研究所運営サポートチーム監修のオムスビ（@OMUSUVIcom）です。
本日はワードプレスに投稿した画像のちょっとしたデザインカスタマイズのご紹介です。ブログ記事側に差し込まれる写真イメージ（img）の見た目に手を加えたいと思ったことはありませんか？サイトによっては写真の枠にボーダー線が入っていたり、フレーム風になっていたり、色々なデザインを見かけますよね。
目次
ワードプレスに投稿した画像イメージをチェキ風の写真っぽく仕上げるには？
ワードプレスで投稿した記事に表示される画像をカスタマイズするにはCSSでイメージを変更していきます。記事のなかにあるイメージタグに対してCSSで見た目の装飾を行なっていくわけです。ちなみに以下が完全にノーマルの状態です。このままでもまったく違和感はありませんが、写真が差し込まれただけですよね。
写真のデザインをCSSでカスタマイズしていない例
写真のデザインをCSSでカスタマイズした例
そして、次がチェキ風にデザインを変更したバージョンです。
写真全体に白い枠線が入って、その周りにうっすらとグレーの影が入っていますよね。１枚の単純な写真が一気に「ポラロイドカメラ（チェキ）風」に変更されて雰囲気も変わりました。CSSは以下となります。
実際にカスタマイズしたCSS記述例
以下のCSSを「外観 > カスタマイズ > 追加CSS」に差し込めばOKです。
.post-content img {
padding: 3px;
background-color: #FFFFFF;
border-radius: 3px;
box-shadow: #BBBCBB 0 0 3px 0;
}実際は導入しているテーマによって.post-contentを変更する必要があります。投稿記事内の画像だけ適用するのか、固定ページにも適用するのか、サイト全体の画像に適用するのかで書き方が変わるからです。
強調したポラロイド風のCSSデザインカスタマイズ
もっと大げさにポラロイド風を再現するなら以下のような加工も可能です。
上記のCSSカスタマイズは以下。余白のバランスをとってよりポラロイドカメラ風に仕上げた例ですね。
.post-content img {
padding: 11px 11px 45px;
background-color: #FFFFFF;
border-radius: 3px;
box-shadow: #BBBCBB 0 0 3px 0;
}ワードプレスの便利機能キャプションを考慮しよう
個人的には１つめの加工で収めるのが好みです。理由は「キャプション」と呼ばれる機能を使えるように考慮しておく必要があるからです。実はワードプレスにはキャプションという便利な機能があります。
キャプションにて文字を設定した表示例
キャプションにテキストを差し込むと以下のように表示されます。
上記のように「キャプションを差し込んだら背景にグレー色がつく」かどうかは導入しているテーマにもよって変わるので実際はキャプションを使ったときのレイアウトが自然になれば２つめの加工でもOKです。キャプションを滅多に使わない人もいますが、せっかくの便利機能なので使える状態にしておくのがおすすめです。
まとめ
本日は画像のデザインカスタマイズをCSSで行いました。日常的な日記を掲載しているブログや掲載する画像を強調したデザインを使いたい環境ではおすすめのカスタマイズです。加工のおかげで写真に目がいきますよね。スマホ画面のスクリーンショット等も「全体に枠線」が入ることで一気に視認性が上がっています。
以前の状態を左右で見比べるとわかりやすいですね。
念のため上記で解説した「キャプション」もつけた写真を１枚投稿しておきますのでご参考ください。
Louis Vuitton（キャプション）
最新式の無料プラグインを事前公開
WordPressは公式サイトに登録済みのプラグインだけで全機能を補足しきれません。当サイトでは使いやすさを追求した魅惑的なプラグインを無料でダウンロードいただけます。運営ホームページのマーケティング力をさらに高めるチャンスです。まずは無料でDLしてお試しくださいませ。
→ 改良されたプラグインを確認する
