Webサイト開発・運営

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

スタイルシート

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

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

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

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

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

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

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

  • この記事を書いた人
  • 最新記事

wackey

Webディレクター・プロデューサーなどで大手企業サイトの構築に携わった後、インターネット広告営業やWebコンサルティングなどを行う。フリーランスを経て2012年にプラス・ムーブメント合同会社を設立。Webサイト・システムの制作やブロガーツアー・イベントなどの企画・運営を行う。地域ブログをまとめたLocketsというサービスの事業責任者としてビジネスを展開。 2015年にアジャイルメディア・ネットワーク株式会社に入社。 レビューズにてインフルエンサーマーケティング事業の立ち上げに関わり運営。またアンバサダープログラムの運営など多くの企業の支援をバックアップしていた。 現在プラス・ムーブメント合同会社を経営しつつ、新しい働き方について模索している。 主な著書に「アフィリエイターのための Web APIプログラミング入門(ビー・エヌ・エヌ新社)」がある。

-Webサイト開発・運営