画像を貼り付けるとき、分かりやすく枠と影を付けるCSS

この記事のURLとタイトルをコピーする

Image

blogを書いていてスクリーンショットをたくさん貼り付けるのですが、困ることがあります。そんなときに使っているCSSclassについて書きました。

どんなときに困るのか?

blogの記事とスクリーンショットと同じに見えちゃうときです。

例えばblogのタイトル部分をCSSでこのように変更したよ!みたいな記事を書くときには変更前と変更後のスクリーンショットを載せます。

そのまま載せると、

修正前

修正後

って感じで、実際の見出しとごっちゃになりそうです。そこで枠と影を付けるようにして表示するとこんな感じになります。


修正前

修正後

どうでしょうか?分かりやすくなったと思います。

枠と影を付けるclassをstyle.cssに追加しました

この表現は多用するため、子テーマのstyle.cssclassryusImageAdvertise を追加しました。

クラスの名前(.ryusImageAdvertise)は好きなものにしていいと思うのですが、classが他の名前とダブらないような名前にする必要があります。頭に自分の名前などを入れるといいかなと思って私はいつもこんな感じで指定しています。

*ここでrgbaとしている値は red、green、blue、透明度の値です。透明度は0(透明)~1(不透明)の間の値で指定します。

実際にはどのように指定するか?

blogを書いていて画像を貼り付けると、表示はこんな感じで

Image

テキストタブで見るとこんなソースになっています。

この中の、class という部分を探します。

このclassに先ほど追加した ryusImageAdvertise classを追加します。

こんな感じです。これで表示してみると、

Image

のように枠と影が付いて「あーこれはスクリーンショットを貼り付けてあるんだなぁ」ということが分かりやすくなったかと思います。

白地のスクリーンショットなどにも枠と影を付けた方が分かりやすいです。

そのままの表示
Image

ryusImageAdvertiseを追加した表示
Image

まとめ:これからも簡単に分かりやすくしていきたいです

classを追加する前はいちいちstyleで指定していたのですがつい面倒くさくなってしまい、まぁわかるかなぁ(^_^;とそのまま貼り付けたりしていました。

classを追加してからは簡単に指定できるのでちゃんとわかりにくいところには枠と影付きで表示するようになりました。

ので、これからも簡単に分かりやすくしていく何かを色々工夫していきたいと思います♪

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

この記事のURLとタイトルをコピーする
スポンサーリンク
スポンサー広告
トップへ戻る

ゆうそうとについての説明

ゆうそうと とは東京都八王子市を中心として、WordPressによるWEBサイトの作成や、スポットでのIT相談を行ったり、年間契約でのIT顧問をなりわいとして活動しています。

特徴としては30年以上IT業界でプログラムを中心として仕事をしてきたものと、美大出身のデザイナーがワンストップで対応するため、幅広い対応が可能であることです。

IT相談は直接お会いしてのご相談の他、ZOOMによるオンライン相談も可能です。