ratio_3_2 のカスタマイズ方法

アイキャッチ画像と同じ装飾デザインをアップロードした画像に施す方法【baserCMS ratio_3_2】

アイキャッチ画像と同じ装飾デザインをアップロードした画像に施す方法【baserCMS ratio_3_2】

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

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

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

↓↓↓
eyecatch2.jpg

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

Before
eyecatch3.jpg

After
eyecatch3.jpg

装飾はCSS で行われている

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

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

eyecatch5.jpg

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

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

コード
.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);
}
2、3行目は、画像の上下の余白を指定、5行目の 5px で白い枠のサイズを指定しています。これらの数字を変えることで、お好みの仕様に変更できます。

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

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

例)
<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 に色々な記述を追加しておけば、クラス名を変えたり少しの追記だけで簡単に好みの装飾を反映させることができます。
 
eyecatch8.jpg


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

おまけ

この画像に写っている記述に .pop とあります。 クラス名に "pop" と入れると枠の太い装飾になります。(画面幅768px以上)
eyecatch6.jpg
 
eyecatch8.jpg
 
<a href="/files/uploads/picture.jpg" rel="colorbox" title="写真"><img align="" alt="写真" class="pop" src="/files/uploads/picture.jpg" /></a>


お役に立てましたら、いいね!&シェアして頂けると幸いです。
ご覧頂きありがとうございます。
 
ブログランキングに参加しています(^^)/
応援して頂けると励みになります。

にほんブログ村 デザインブログ Webデザインへブログランキング

月別アーカイブ一覧

新着情報

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。郡山青藍病院 様

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。郡山青藍病院 様

2019-05-23

当サイトでは、テーマ ratio_3_2 を導入したサイトを下記のページでご紹介しております。→ 「ratio_3_2」導入サイトご紹介しま...

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。ピュアネス藍 様

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。ピュアネス藍 様

2019-05-23

当サイトでは、テーマ ratio_3_2 を導入したサイトを下記のページでご紹介しております。→ 「ratio_3_2」導入サイトご紹介しま...

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。ボンブエーノボーノ 様

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。ボンブエーノボーノ 様

2019-05-23

当サイトでは、テーマ ratio_3_2 を導入したサイトを下記のページでご紹介しております。→ 「ratio_3_2」導入サイトご紹介しま...

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。薪窯キッチンペロッタ 様

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。薪窯キッチンペロッタ 様

2017-06-25

当サイトでは、テーマ ratio_3_2 を導入したサイトを下記のページでご紹介しております。→ 「ratio_3_2」導入サイトご紹介しま...

【baserCMS】の管理画面(ダッシュボード)を完全SSL化(保護された通信)する方法

【baserCMS】の管理画面(ダッシュボード)を完全SSL化(保護された通信)する方法

2017-06-19

baserCMSの管理画面がSSL化に対応していない!管理画面も完全SSL化させる方法→ 前回、やっとSSL化したのですが、管理画面がSSL...

baserCMS

CakePHP(tm) : Rapid Development Framework