画像をチェキ・ポラロイドカメラで撮った様に見せるオシャレなCSS（スタイルシート）加工をご紹介します。実際のカメラや画像ソフト不要で、簡単に可愛くなります。
ヨシ
カスタマイズ方法も沢山載せています。
末吉
数字や色を調整しながら自分だけの形を見つけて頂けたら幸いです。この記事の目次
基本形
基本形はこんな感じです。
長い文章だよ長い文章だよ長い文章だよ長い文章だよ長い文章だよ長い文章だよ長い文章
末吉
オシャレ～。HTML
加工したい「画像のURL」と「下に入れたい文字」を新たに入力するだけです。
<div class="polaroid">
<img src="画像のURL">
<p class="moji">入れたい文字</p>
</div>CSS(質素)
加工したい「画像の幅」を新たに入力し、「下のフチ幅」「文字の縦位置」「行の高さ」で調節して下さい。
三角マークをクリックで展開
CSSソース(質素)
.polaroid {
position: relative;
width: 300px;/*画像の幅*/
margin: 30px auto;
max-width:90%;
background-color:#eee;
border: 10px solid #eee;
border-bottom-width: 80px;/*下のフチ幅*/
transform:rotate(-5deg);
box-shadow: 3px 3px 3px #777;
}
.moji {
position: absolute;
width: 100%;
text-align: center;
bottom: -70px;/*文字の縦位置*/
line-height:1.3em;/*行の高さ*/
left:0px;
color: #756F61;
}
CSS(盛)
次からのカスタマイズを載せた、解説付き・てんこ盛りバージョンも用意しました。
加工したい「画像の幅」を新たに入力し、「下のフチ幅」「文字の縦位置」「行の高さ」で調節して、不要なカスタマイズは削除して下さい。
三角マークをクリックで展開
CSSソース(盛)
.polaroid {
position: relative;/* position: absolute;とセット */
width: 300px;/* 画像の幅 */
margin: 30px auto;/* 上下の空きと左右の空き */
max-width:90%;/* 最大幅 */
background-color:#eee;/* 背景色 */
border: 10px solid #eee;/* フチの設定 */
border-bottom-width: 80px;/*下のフチ幅*/
transform:rotate(-5deg);/* 角度 */
box-shadow: 3px 3px 3px #777;/* 影の設定 */
}
.moji {
position: absolute;/* width: 100%;を使うため */
width: 100%;/* 文字の横位置の為 */
text-align: center;/* 文字中央ぞろえ */
bottom: -70px;/* 文字の縦位置 */
line-height:1.3em;/* 行の高さ */
left:0px;/* これが無いと変な位置になる */
color: #756F61;/* 文字色 */
font-size:1.5em;/* 文字サイズ */
font-family: sans-serif;/* フォント指定 */
}
.polaroid img{
filter: sepia(60%);/* 画像をセピア色に */
filter: saturate(200%);/* 画像の彩度 */
filter: grayscale(100%);/* 画像を白黒に */
}
文字・ピンポイントでカスタマイズ
ヨシ
部分別にカスタマイズする為の説明です。文字サイズ変更
CAFE
文字部分のセレクタである.mojiに、font-size:文字の大きさ;を設定します。この例では、font-size:1.5em;にしています。
.moji {
font-size:1.5em;
}文字カラー変更
CAFE
文字部分のセレクタである.mojiに、color:色指定を設定します。この例では、#ff0000;にしています。
🖐色指定については奥が深いので「🔗css 色指定」で検索して下さい。
.moji {
color: #ff0000;
}文字を左揃えにする
長い文章だよ長い文章だよ長い文章だよ長い文章だよ長い文章だよ長い文章だよ長い文章
複数行にわたる場合は左揃えが見やすいですね。
文字部分のセレクタである.mojiに、text-align:leftを設定します。
.moji {
text-align: left;
}文字の縦位置
CAFE
文字部分のセレクタである.mojiに、bottom:値を設定します。
.moji {
bottom:-70px;
}文字フォント変更
cafe
文字部分のセレクタである.mojiに、font-family:フォント名;を設定します。
🖐上の例は🔗Google Fontsを使っています。
.moji {
font-family:フォント名;
}フチ・ピンポイントでカスタマイズ
フチの色を変える
CAFE
枠部分のセレクタである.polaroidに、background-color:色指定とborder:色指定を設定します。この例では、#dbd5b2に変更しています。
🖐色指定については奥が深いので「🔗css 色指定」で検索して下さい。
.polaroid {
background-color:#dbd5b2;
border: 10px solid #dbd5b2;
}上と左右のフチ幅変更
CAFE
枠部分のセレクタである.polaroidに、border:太さ 線の種類 色指定を設定します。この例では、20px、実線、#eeeeee(薄い灰色)にしています。
.polaroid {
border: 20px solid #eee;
}下のフチ幅変更
CAFE
枠部分のセレクタである.polaroidに、border-bottom-width:値を設定します。この例では、70pxにしています。
.polaroid {
border-bottom-width: 70px;
}フチの角度を変える
CAFE
枠部分のセレクタである.polaroidに、transform:rotate(値)を設定しています。この例では、3degに変更しています。マイナスの値だと左下がり、プラスは右下がりになります。平行は行ごと削除します。
.polaroid {
/*平行の場合は、下の行削除*/
transform:rotate(3deg);
}画像にフィルター
末吉
フィルター厳選3選です。🖐この他にも沢山filterがあるので「🔗css filter」で検索してみて下さい。
セピア色
CAFE
セピア色に。儚い雰囲気が出て好きな加工。
画像部分のセレクタである.polaroid imgに、下記を加えます。60%を100%に変えると完全にセピア色になります。
.polaroid img{
filter: sepia(60%);
}彩度を変更
CAFE
画像の彩度を変更しました。彩度を上げると（100%以上にする）明るくポップな印象です。
画像部分のセレクタである.polaroid imgに、下記を加えます。100%以下に変えると彩度が下がります。
.polaroid img{
filter: saturate(200%);
}白黒に
CAFE
白黒だとシックで大人な感じ。
CSSに下記を加えます。100%以下に変えると白黒度合いが下がります。
.polaroid img{
filter: grayscale(100%);
}元ネタは
「Ri-mode Rainbow(twitter)」さんが作って下さったソースを自分仕様に変更しました。
サイトは閉鎖されているかも知れません（アクセスするとセキュリティソフトが起動するので詳細わからず）素敵なソースをありがとうございました。
