当サイトで使用中のCSSを一部公開しています。
デザインされたボックス
以下のようなボックスです。
ここに説明文。ここに説明文。ここに説明文
html
<div class="box1">
<div class="box-title">Point! （タイトル）</div>
<p>ここに説明文。ここに説明文。ここに説明文</p>
</div>
css
/*デザインされたボックス CSS class="box1"*/
.box1 {
margin: 2em 0;
background: #f1f1f1;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}
.box1 .box-title {
font-size: 1.2em;
background: #ff80ab;
padding: 4px;
text-align: center;
color: #FFF;
font-weight: bold;
letter-spacing: 0.05em;
}
.box1 p {
padding: 15px 20px;
margin: 0;
}
画像を浮き上がらせるCSS
投稿記事内の画像が以下のような表示になります。マウスオーバーで、画像が浮き上がってくるはずです。
css
/* 画像を浮き上がらせるCSS */
.entry-content img {
border: 1px solid;
max-width: 100%;
box-shadow: 0 0;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.entry-content img:hover {
box-shadow: 0 4px 8px 2px rgba(0, 0, 0, 0.2);
-webkit-transform: scale(1.01);
transform: scale(1.01);
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
当サイトの管理人は、ウェブデザイナーではありませんので、アフィリエイトサイトを制作する際のCSSの多くは一般的公開してくれているウェブデザイナーさんのコードを参考にさせてもらったり、利用させてもらったりしています。
上記コード以外にも本当に沢山のコードが一般公開されていて、どれも本当に美しくデザインされたものばかりです。
ここで、当サイトが一つの記事として公開しているのは、あくまでも、当サイトが利用しているCSSとして紹介しているだけです。おすすめとして紹介していたり、CSSコードそのものを紹介しているわけではありません。
