画像フォトをイキイキとさせる？効果もあるんです...
シリウスの記事内に画像をコンテンツに合わせて配置することは、読者理解を深める
ためにも必要なサイトマスタマイズの一つの手段でしょうね..
dupalなどのCMSサイトではよく使われる...ま、限りませせんが、なんかこの頃よく
お見かけする演出法です。
記事台紙が殺風景な白でも、配置画像が浮き上がることで...なんか見た目が変わり
読者に与える印象もよくなるのでは？
その目にですが、浮かび上がらせるとは影の演出もあり...サイト背景が白であること
が前提条件..（背景が黒ですと影効果が現れない）
当サイトは、黒背景なのでそのまま配備するとカスタマイズ効果が全然現れません
のでシリウス機能ユーザー定義ボックスで記事台紙を白として表現しています。
記事枠の浮上...追加しました
記事台紙場にボックス枠を入れ込んでの浮かび上がらせも巻末に追加してます。
やりようは簡単...
HTMLソース内の画像コードを入れ替える..
CSSはスタイルシートに張り付ける...
class名は、任意で書き換えください..そのままでもOK...
以下で詳細をご覧ください....
シリウスサイトでうまく...簡単に使うなら3つ目がベストかな？
一つ目...
リンクはしないが、画像上にマウスを移動すると少し凹んで半透明作動する...
HTML
<a class="shadow"><img src="<% pageDepth %>img/clipimage_08.jpg" style="width:400px;" alt="" /></a>
このコードを使う際、シリウスの画像コードで使えますが、一番下にわずかな
横ラインが見られます..
どうしても消せないので陰に近いカラーに調整してます...
二つ目...
....下ラインは無し...右側にもやや影は見られる...それだけ..
HTML
<img class="shadow" src="https://www.affiliateno1.com/img/clipimage_08.jpg" />
こちら(上）コードは、シリウスの画像コードの改変..
サーバーに格納されている画像を読み込む形式なので、一度シリウスに入れ込んで
アップ以降でなければ画像確認できません..
すでにサーバー格納されていれば読み込み可能..
取り付けするサイトのURLを書き込んで、次に画像コードを書き足してください...
（コードを参考にどこをどうするか理解してね）
上画像は、二つとも以下のCSSをスタイルシートに張り付ければ反応します。
ただ、HTMLの記載の違いで表示が変わるだけ..
一つ目の画像サイズは、CSSで画像サイズと数値を合わせてください..
CSS
.shadow {
max-width: 400px;
box-shadow: 5px 20px 30px rgba(0,0,0,0.25);
background: #ddd;
}
3つ目...これ推奨
理由..シリウスの画像コードを改変しないでそのまま使える..
シリウスの画像コードそのまま読み込み...
一番手間暇なしで...
スタイルシートにCSS書き込んでおけば、HTMLコードに画像コード入れるだけ
（画像のサイズとCSSのwidth指定値は同じにしてください..)
HTML...IDは、混乱を防ぐためここだけ変えてます..
<div class="Shadowfoto"><img src="<% pageDepth %>img/clipimage_08.jpg" style="width:400px;" alt="" /></div>
スタイルシートCSS
.Shadowfoto {
box-shadow:10px 10px 25px;
width:400px;
}
数値 左から ０にすると影が中央より..
2番め..0にすると上にも影でます..
3番目..浮き上がる影の長さ
レスポンシブコード対応
コードについて、レスポンシブサイトで横幅が縮小しないという苦情ありまして..
以下を書き足しました..
HTMLの画像サイズに合わせて改変すると作動します...
(当ページは、いくつも配列しているので、やや作動位置が小さくなってからですが
通例は、指定サイズで縮小始めます...
.Shadowfoto {
box-shadow:10px 10px 30px;
width: 400px;
}
メディアコードを書き足し...
@media screen and (max-width: 400px) {
.Shadowfoto {
box-shadow:10px 10px 30px;
width:100%;
}
}
4つ目...div要素で作成その1 下影..これもいいね
後追加しました...こちらもシリウス画像コード入れ込むだけで反応...
横影は不要という方にお勧め....
画像下でサイドの陰に丸味を付けてみました..
横影は、1pxだけ右に出ていますが？
HTML
<div class="Shadowfoto4"><img src="<% pageDepth %>img/clipimage_08.jpg" style="width:400px;" alt="" /></div>
CSS
.Shadowfoto4 {
box-shadow: 5px 15px 15px rgba(0,0,0,0.30);
border-radius: 40px; /* 角まる不要なら削除*/
width: 400px;
}
div要素で作成その2
こちらは、見た目同じ現し方に見えますが、div要素を利用..しているので、やや
左位置が右に移動してます...なんら変化することはありません
HTML
<div class="atpfoto"><img src="<% pageDepth %>img/clipimage_08.jpg" style="width:400px;" alt="" /></div>
CSS
.atpfoto {
padding: 0.1px;
margin: 2em;
max-width: 400px;/*シリウス画像のサイズに合わせる*/
background: #FFF;
border-radius: 2px;
box-shadow: 0 20px 20px rgba(0,0,0,0.25);
}
見た目は同じようなものですが、どこかが違うと自己理解ください..
記事枠を浮いたように....
class名を変えて、画像ではなく記事を書きこむスタイル..
こちらもよく使われる手法ですね
記事
記事
HTML
<div class="atpfoto1">
記事
記事
</div>
CSS
.atpfoto1 {
padding: 20px;
margin: 2em;
background: #FFF;
border-radius: 3px;
box-shadow: 0 0px 30px rgba(0,0,0,0.25);
}
以上で解説を終わります...