画像と本文との境目が欲しい!写真に枠線を入れるスタイルシート

スタイルシート

ずっと放置していたのですが、白地の背景に白地のキャプチャー画像を使うと境目がわからなくなり、ブログ本文テキストと画像内テキストの区別がしづらくてストレスになることがあります。
それを防ぐために画像に枠線を入れて区別しようと思ったのですが、冷静に考えれば4年前のブログで似たようなことをやっていました。

本日のムジログMTデザインカスタマイズ | [Mu]ムジログ

ここではFlickrの写真(キャプチャー画像)のみ枠線を入れるようにしてみましたが、とりあえず、今回はエントリー部分の画像すべてに枠線を入れるようにしてみました。

[php].entry img { border: 1px #CCCCCC solid; }[/php]

わかる人から見ればたいしたことがないことですが、これをテーマファイルのstyle.cssに追記してやるだけです。

追加で枠線を画像によってつけない、色を変えたいということであれば、classをどんどん定義していけば良いでしょう。

ムジログはとりあえず、4年前の状態(画像のまわりに枠線を入れる)にようやく戻って、ここからデザインをやり直していきたいと思います。

この記事を書いた人

脇村 隆

Web制作に携わって24年。商工会や自治体など公的機関のWebサイト制作・運用を14年にわたり支援してきました。目的の整理から、WordPressでの構築、公開後の運用、AIを使った業務の効率化まで、一人の担当者として一貫してお手伝いします。
横浜・あざみ野を拠点に活動しています。

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。