CSSのclassを使って画像に枠線をつけるメリット

自分もそうなんですけど、cssというやつがよくわからなくて避けていた部分があります。

 

「枠線なんてペイントで書けばいいだろ。」

 

こんな感じで考えてました。

今考えると、とてもめんどくさいことしてたなあ。

 

よくよく考えると、cssはインターネット上のサイトを作るために考えられたなんで、サイトをいじるのには適しているわけなんですよ。

だから、今回の枠線をつける時もcssを使うのがベストなんですね!

と、こんな説明だけじゃあカッパは納得できませんでした。

なんで、いろいろ調べたり、自分が感じたメリットを書いていきたいと思います!

 

理由とかそんなのいいから、早くやり方を教えろよ。

っていう人はこっちを見てね!⇒『WordPressの画像に枠線をつけてみた

cssを使うとこんなメリットが

cssを使って枠線をつけることの唯一のデメリットは、事前にcssを記述しておかないといけないことだけです。

これを乗り越えればこれだけの恩恵を受けることができます。

  1. 画像編集ソフトで事前に枠をつける必要がない
  2. 外枠の有り無しを使い分けられる
  3. ワードプレス上での操作が簡単
  4. デザイン変更が簡単
  5. 他のcssとかぶってもborderだけを追記可能

素晴らしい。

これらのメリットを詳しく見て行きましょう!

1、画像編集ソフトで事前に枠をつける必要がない

一度cssを追加すれば、画像の編集で、クラスを指定するだけです。

追加したい画像を編集せずにアップロードできます!

大事な写真に枠線をつけて上書き保存しちゃうと目も当てられません・・・

 

2、外枠の有り無しを使い分けられる

画像全体に色がついてて、サイトの下地との境界線がハッキリしている画像は外枠を付けない。

とか、意図があって枠線をつけたくない時にはつけないという選択ができます。

だってクラスを指定するだけですからね。

 

3、ワードプレス上での操作が簡単

画像のクラスを指定する作業は、とても簡単です。

クリック3回→クラス名にwakuと入力→更新をクリック

これだけです。

 

4、デザイン変更が簡単

cssに追記することで、太さ、色などを一気に変更することができます。

もしこんな状況になった時に、画像編集ソフトで一枚一枚編集することになったら・・・

想像するだけでも恐ろしいですね!

 

5、他のcssとかぶってもborderだけを追記可能

テーマに最初から書かれている枠線のcssのデザインがあっても、崩さずに追加することができます。

 

まとめ

どうでしょうか?

カッパはこれらのメリットに突き動かされてcssアレルギーを多少なりとも克服しました。

正直言うと、コピペで簡単にできるんでcssの勉強をする必要もありません。

この記事を読んで、cssで画像に枠線をつけてみようかなと思った人はこっちも記事も読んでみてね!

僕がやったことをメモってあるよ!⇒『WordPressの画像に枠線をつけてみた

おわり!