新着情報

アイキャッチ画像と同じ装飾を♪

ratio_3_2 のNEWS（ブログ）記事にアイキャッチ画像を設定すると、自動で画像の周りにデザインが装飾されます。


画像の背景が白だと分かり難いのですが、よく見ると白い縁取りがあって、その周りにシャドウもかかっています。

↓↓↓


デフォルトの状態では何も装飾はされないので、アップロードした画像にアイキャッチ画像と同じ装飾デザインを施す方法をご紹介いたします。

Before


After

装飾はCSS で行われている

画像編集ソフトで同じ様な装飾をしてアップロードする方法もありますが、こちらは CSS にデザインを記述して指定した画像に施すという方法ですので、装飾がめちゃくちゃラクになります(^^)/

---

早速ページのソースを見てみましょう。

entry-eyecatch　、eye-catch　、entry-eyecatch-inner、img-eye-catch　のクラス名を、style.min.css で検索します。

今回は、entry-eyecatch-inner で、装飾がされている箇所に辿り着けました。


コード

.entry-eyecatch-inner,.pop{
background-color:#FFF;
border:5px solid #FFF;
box-shadow:0 0 6px rgba(0,0,0,.25);
}

この様な記述があるので、アップロードした画像のソースに class="entry-eyecatch-inner" と追記してあげれば、同じ装飾になります。

追加例）
<a href="/files/uploads/picture.jpg" rel="colorbox" title="写真"><img align="" alt="写真" class="entry-eyecatch-inner" src="/files/uploads/picture.jpg" /></a>
 

もっとラクに簡単に・・・

毎回、class="entry-eyecatch-inner" を追記するのは面倒なので、クラス名を短くて解りやすいものにします。

当サイトでは、class="ow" としています。 深い意味はありませんが、すでに使われているクラス名だと他に影響が出ますので使えません。

早速、custom.css に追記します。
→ カスタマイズ用のCSSを追加する方法


追加コード

img.ow {
margin-top: 10px;
margin-bottom: 10px;
background-color: #FFF;
border: 5px solid #FFF;
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.25);
}

２、３行目は、画像の上下の余白を指定、５行目の 5px で白い枠のサイズを指定しています。これらの数字を変えることで、お好みの仕様に変更できます。

装飾したい画像への追記方法

画像をアップロードしたら記事のソースを開きます。


例）
<a href="/files/uploads/picture.jpg" rel="colorbox" title="写真"><img align="" alt="写真" src="/files/uploads/picture.jpg" /></a>

この様になっているので下記のように追記します。class と src の前に半角スペースがあります。
 

<a href="/files/uploads/picture.jpg" rel="colorbox" title="写真"><img align="" alt="写真" class="ow" src="/files/uploads/picture.jpg" /></a>

以上の作業で画像の装飾ができます。

装飾が反映されない時は・・・

ページを更新する （PCからは F5 を押す）

スーパーリロードする （PCから Ctrl ＋ F5 を同時押し Windows）

キャッシュをクリアする

→ ブラウザのキャッシュをクリアする方法
 

最後に・・・

装飾したい画像に毎回追記が必要になりますが、この様な記述の方法を覚えておけば、他にももっと色々な装飾や調整ができます。

予め CSS に色々な記述を追加しておけば、クラス名を変えたり少しの追記だけで簡単に好みの装飾を反映させることができます。
 

こちらの装飾は下記のサイトを参考にさせて頂きました。
→ CSS3を使ってできる画像まわりのエフェクトやスタイリング18

おまけ

この画像に写っている記述に .pop とあります。 クラス名に "pop" と入れると枠の太い装飾になります。（画面幅768px以上）

   

<a href="/files/uploads/picture.jpg" rel="colorbox" title="写真"><img align="" alt="写真" class="pop" src="/files/uploads/picture.jpg" /></a>

お役に立てましたら、いいね！＆シェアして頂けると幸いです。
ご覧頂きありがとうございます。