画像に枠線を入れたい!賢威のcssに追記する方法

賢威のカスタマイズ方法を、記録代わりに記事にしていたら、画像と背景の境界が分かりにくくて、なんとかしようとこれを機会に調べてきました。

単純に見やすくするために、画像に枠線を入れたいと思っただけなんですが、調べるうちについついハマってしましました。

今日は、ワードプレスで画像に枠線を入れる方法です。テンプレートは皆様お馴染み賢威ですが、そうでない方も参考になると思います。

う~ん、もう少しメリハリが欲しいですよね。

画像の枠

画像に枠を入れるのもdesign.cssから

「外観」から「テーマ編集」に進み

ヘッダー01

右側に並んだ下の方の「design.css」をクリック

ヘッダー02

その後編集画面をスクロールして一番下まで進みます。
ここに追記します。

画像の枠03

賢威のサポートページでは、以下を追記してくださいと過去歴にありました。

#main-contents .article img {
border: 1px solid #000;

画像の枠04

/*————————————————————
追記事項
————————————————————-*/
って書いてある「/*」から「*/」の部分は任意でコメントを入れても実際には表示されないので安心してください。
元々あるものを消すのが怖い場合は、これを使って消すことも出来ます。そうすれば、表示がおかしくなってもすぐに戻せますし。
ファイルを更新して確認すると・・・・・

画像の枠05

画像に黒い枠線が付きました。
さて、ここからもう一歩すすんで、もう少しいい枠がないかなーと思いました。エクセルやワードでは影を付けたりできるので、そんなのが無いのか調べて見ました。

cssで枠線の種類と太さや色を変える

border: 1px solid #000;
この部分に手を加えればいろんな枠が作れます。

「1px」この数字を変えれば枠線の太さを調整できます。
「solid」枠線の種類ですね。solidは実戦です。
「#000」線の色を変えます。

このサイトでは最終的に以下のようにしました。
#main-contents .article img {
border: 10px ridge #e0ffff;
}

ちょっと分かりにくくなってしまいましたが、参考例を載せておきます。デフォルトの枠線が「ridge」です。
ridgeの中に表示されいる線の種類をそれぞれ見てください。

  • double:二重線
  • double

  • dotted:点線
  • dotted

  • dashed:破線
  • dashed

  • groove:谷型の線
  • groove

  • ridge:山型の線
  • ridge

  • inset:凹型の線
  • inset

  • outset:凸型の線
  • outset

その後、当初の理想通りに自動で影を付ける方法が分かったので変更しました。
詳しくは、cssで画像に影を付ける方法!ドロップシャドウって言います♪をご覧ください。


 

◆あなたの成功を応援しています!

画像に枠線を入れたい!賢威のcssに追記する方法 | KenkenLife

お名前  
メールアドレス
パスワード

稼ぎを加速させる記事です

コメントを残す

サブコンテンツ

初めまして!

ケンケン

初めまして!ケンケンです♪
あなたとの、出会いに感謝です

現在私は、PRIDEをベースにした、資産構築型ブログで、トレンドアフィリエイトを、某軍団で教えています(笑

添削したブログ数は、数百にのぼり、私が、添削した記事数は、軽く1,000記事は越えいます。その中には、1日で800,000PVを、記録したり、1か月で、10万円を稼ぎ出す、資産ブログを、着々と、完成させる人が、続出中♪

詳しいプロフィールはコチラ♪

このページの先頭へ