CSS 自動でポラロイド風に・・
リク記事です・・・・
以前に記事中の画像をポラロイド風にって説明しました・・・・
そのときには自動ですることは出来ませんでしたが・・・・
アメブロさまが画像クリックで別画面にオリジナル画像を表示する方法に変えたときに・・・
ありがたいことに？classを付けてくれました
これでhtmlでわざわざ class="pola" を付け加えなくても自動でポラロイド風になってしまいます
ＣＳＳの最後に・・・・
/* ポラロイド風 */
.entry .detailOn img {
background-color: #ffffff;/*ポラ台紙色*/
margin: 5px;/*周りにスキマをあける*/
padding: 10px 10px 40px 10px;/*画像と台紙のスキマ*/
border-width: 2px;/*枠の太さ*/
border-style: solid;/*枠線*/
border-color: #dce3e3 #c1c1c1 #c1c1c1 #dce3e3;/*枠線の色・上右下左*/
background-image:url(1ポイント画像のURL);
background-repeat:no-repeat;/*繰り返さない*/
background-position:95% 98%;/*画像の位置*/
}
枠線の色を
border-color: #dce3e3 #c1c1c1 #c1c1c1 #dce3e3;/*枠線の色・上右下左*/
上と左の線より右と下の線の色を濃くすることで立体感を出します・・・
色は好きな色にしてください
margin: 5px;/*周りにスキマをあける*/
padding: 10px 10px 40px 10px;/*画像と台紙のスキマ*/
このスキマのサイズは自由に設定してかまいませんが・・・過去の画像もポラ風に自動でなります
過去の画像が大きな場合・・・・
スキマを大きくすることで記事内に入りきらずにサイドバーがカラム落ちする場合がありますので
過去記事まで確認ください
画像の右が左から95%で画像の下が上から98%の位置（自由に変更してください）
↓自動でポラ風になっています
クリックでオリジナルが別画面で表示されるようになっていない場合はなりません
普通に画像を配置している場合は過去も含めて自動でポラ風になるはずです
左右にポラ風の余白部分が入ることを考慮した画像サイズにしてください
↓クリックできないようにしているのでポラ風になりません
この場合はCSS 画像のポラロイド風
を参考にして
CSSとHTMLで class="pola"をつければポラ風になります
※元々の画像が記事枠ギリギリのサイズで使っていた場合は
画像の左右に余白ができてサイズが広がるためサイドバーがカラム落ちする場合があります
過去記事の画像もポラ風になっているはずですカラム落ちしていないか確認下さい
CSS 自動でポラロイド風に・・2
CSS 自動でポラロイド風に・・3