本日は記事に画像を添付するときにちょっと見栄え良くするための小技です。CSSはとても表現力が豊かで、画像を回転させて斜めにしたり、丸くしたり、不透明度を変えたり、CSSを使っていろいろな表現ができますが、輪郭を取るのとドロップシャドウ落とすのさえ覚えておけば割となんとかなるんじゃないかなぁ。

新しいクラスを作る

classとかidとか出てきますけど、今はあまり気にしないでください。idは1ページで1箇所しか使っちゃダメ、classは何箇所でも使っていいよってお約束になってるんで、そんなもんだと思ってください。画像は1ページに何枚も貼り付ける可能性があるので、classを使うほうがルールにかなってて合理的ってことです。というわけで、画像を挿入するときにいつでも呼び出して使えるように、[ shadow ]というクラスを作って、style.cssに貼り付けます。

/* 画像にドロップシャドウをつける */
.shadow {
        margin-top: 5px;       /* 画像の上側の余白 */
        display: inline-block; /* ↓ 横 下 ぼかし 広がり 色 */
        box-shadow: 5px 5px 15px -5px rgba(0, 0, 0, 0.8); 
                                   /* ↑赤 緑 青 透明度 */
}
 
 
 

 
これをstyle.cssに追加します。ドロップシャドウの雰囲気は、実際に表示させてみてお好みで調整してください。これでいつでもドロップシャドウを使えるようになりましたので、実際に使ってみます。呼び出すには画像を挿入してから、テキスト編集でタグの中に[ shadow ]を付け足します

<img src="https://www.mytuss.com/wp-content/uploads/2014/04/shitsunai.jpg">
 
↓
 
<img class="shadow" src="https://www.mytuss.com/wp-content/uploads/2014/04/shitsunai.jpg">
 
 
 

 
 
すでに他のクラスが設定されている場合も、↓のように書くことで複数のクラスを適用できます。
 

<img class="shadow size-full wp-image-366" src="https://www.mytuss.com/wp-content/uploads/2014/04/shitsunai.jpg" />
 
 
 

 
【実際の表示の比較】


(ドロップシャドウなし)
  

(ドロップシャドウあり)
 
 

ね?簡単でしょ?

Blogを書いていくうえで、他にもよく使う表現があればいつでも使えるようにクラスを作ってstyle.cssに追加しておくのが効率的だと思います。表現のブレもなくなりますので、統一感も出て読みやすいサイトになりますよ。







Author Profile

midzuki
自習室マイタスの運営本部、ハシヅメアーキテック代表者。本業は建設業。自習室マイタスの内装デザインおよび施工はすべて本人が行っている。
何事も断らない性格から、とある学習塾の塾長を任されたり、講師を兼任したり、工事のついでにオフィス機器の導入や慣熟指導、研修会講師など、自分でお役に立てることならできうる限り対応してきた。オフィスの新築・改装の際にワンストップで事務所機能をすべて揃えられると喜んでいただいている。ちなみに塾講師としての専門分野は現国で、現国で満点を取らせる男。

【その他の特徴】
◆一級施工管理技士
◆二級建築士
◆ネットワークに繋がるデバイスならだいたいなんとかできる。
◆基本的に自前主義で自分できることなら何でも自分でやる。
◆とにかく機械が好きで、友人のリサイクル工場で一日楽しめる。
◆ご要望が多いので現国の短期集中セミナーやるかも。
◆趣味は料理とギターで、Facebookから自炊録の移行を計画中。
◆最近、頭髪のことを気にしている。
◆こちら側のどこからでも切れないタイプの人種。
◆極度の育メン